Reduce usage of calendar color in dialogs
parent
a0cf84fd0b
commit
f2069a6129
1
NEWS
1
NEWS
|
@ -11,6 +11,7 @@ Enhancements
|
|||
- [web] replaced bower packages by npm packages
|
||||
- [web] restored mail threads (#3478, #4616, #4735)
|
||||
- [web] reflect attendee type with generic icon (person/group/resource)
|
||||
- [web] reduce usage of calendar color in dialogs
|
||||
|
||||
Bug fixes
|
||||
- [web] fixed wrong translation of custom calendar categories
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<div class="md-toolbar-tools">
|
||||
<div class="pseudo-input-container md-flex">
|
||||
<label class="pseudo-input-label"><var:string label:value="Links to this Address Book"/></label>
|
||||
<div class="pseudo-input-field sg-md-title">{{links.addressbook.name}}</div>
|
||||
<div class="pseudo-input-field sg-md-title">{{::links.addressbook.name}}</div>
|
||||
</div>
|
||||
<md-button class="md-icon-button" ng-click="links.close()">
|
||||
<md-icon aria-label="Close dialog">close</md-icon>
|
||||
|
@ -25,7 +25,7 @@
|
|||
<div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="CardDAV URL"/></label>
|
||||
<input type="text" ng-model="links.addressbook.urls.cardDavURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.addressbook.urls.cardDavURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
<var:if condition="isPublicAccessEnabled">
|
||||
|
@ -33,7 +33,7 @@
|
|||
<div class="sg-md-title"><var:string label:value="Public Access"/></div>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="CardDAV URL"/></label>
|
||||
<input type="text" ng-model="links.addressbook.urls.publicCardDavURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.addressbook.urls.publicCardDavURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</var:if>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
xmlns:label="OGo:label">
|
||||
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
||||
<form name="eventForm" class="md-inline-form" ng-submit="editor.save(eventForm)">
|
||||
<md-toolbar ng-class="editor.component.getClassName('bg')">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
|
||||
<!-- summary -->
|
||||
|
@ -36,7 +36,13 @@
|
|||
<md-select ng-model="editor.component.destinationCalendar"
|
||||
ng-change="editor.changeCalendar()">
|
||||
<md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
|
||||
ng-value="calendar.id">{{calendar.name}}</md-option>
|
||||
ng-value="calendar.id">
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-class="calendar.getClassName('bg')"><!-- color --></div>
|
||||
{{calendar.name}}
|
||||
</div>
|
||||
</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
@ -59,7 +65,11 @@
|
|||
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText) | orderBy"
|
||||
md-min-length="0"
|
||||
label:placeholder="Add a category">
|
||||
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-style="{ 'background-color': editor.component.constructor.$categories[category] }"><!-- color --></div>
|
||||
<div md-highlight-text="editor.categories.searchText" md-highlight-flags="^i">{{category}}</div>
|
||||
</div>
|
||||
</md-autocomplete>
|
||||
</md-chips>
|
||||
<div layout="row" layout-align="space-between center" layout-wrap="layout-wrap">
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
<md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
|
||||
<md-toolbar ng-class="::editor.component.getClassName('bg')">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
|
||||
<div class="sg-md-title md-flex">
|
||||
|
@ -38,7 +38,11 @@
|
|||
<md-menu-item>
|
||||
<md-button class="sg-no-wrap"
|
||||
ng-click="editor.copySelectedComponent(calendar.id)">
|
||||
<span ng-bind="::calendar.name"><!-- menu entry --></span>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-style="::{ 'background-color': calendar.color }"><!-- color --></div>
|
||||
<div ng-bind="::calendar.name"><!-- calendar --></div>
|
||||
</div>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</div>
|
||||
|
@ -56,7 +60,11 @@
|
|||
<md-button class="sg-no-wrap"
|
||||
ng-disabled="editor.component.destinationCalendar == calendar.id"
|
||||
ng-click="editor.moveSelectedComponent(calendar.id)">
|
||||
<span ng-bind="::calendar.name"><!-- menu entry --></span>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-style="::{ 'background-color': calendar.color }"><!-- color --></div>
|
||||
<div ng-bind="::calendar.name"><!-- calendar --></div>
|
||||
</div>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
</div>
|
||||
|
@ -96,7 +104,11 @@
|
|||
<!-- calendar -->
|
||||
<md-list-item>
|
||||
<md-icon>event</md-icon>
|
||||
<p ng-bind="::editor.component.calendar"><!-- calendar --></p>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-class="::editor.component.getClassName('bg')"><!-- color --></div>
|
||||
<div ng-bind="::editor.component.calendar"><!-- calendar --></div>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<!-- start/end dates -->
|
||||
<md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }">
|
||||
|
|
|
@ -137,7 +137,7 @@
|
|||
</div><!-- row -->
|
||||
<!-- freebusy caption -->
|
||||
<div layout="row" layout-align="end center" class="sg-padded--top">
|
||||
<div class="quarter"><div class="busy sg-color-chip"><!-- busy --></div></div>
|
||||
<div class="quarter"><div class="busy sg-color-sample"><!-- busy --></div></div>
|
||||
<label class="md-caption"><var:string label:value="Busy"/></label>
|
||||
<div class="quarter"><div class="sg-no-freebusy sg-color-sample"><!-- no fb --></div></div>
|
||||
<label class="md-caption"><var:string label:value="No free-busy information"/></label>
|
||||
|
|
|
@ -8,12 +8,16 @@
|
|||
>
|
||||
|
||||
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
||||
<md-toolbar ng-class="links.calendar.getClassName('bg')">
|
||||
<md-toolbar>
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">link</md-icon>
|
||||
<div class="md-toolbar-tools">
|
||||
<div class="pseudo-input-container md-flex">
|
||||
<label class="pseudo-input-label"><var:string label:value="Links to this Calendar"/></label>
|
||||
<div class="pseudo-input-field sg-md-title">{{links.calendar.name}}</div>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-class="::links.calendar.getClassName('bg')"><!-- color --></div>
|
||||
<div class="sg-md-title" ng-bind="::links.calendar.name"><!-- calendar --></div>
|
||||
</div>
|
||||
</div>
|
||||
<md-button class="md-icon-button" ng-click="links.close()">
|
||||
<md-icon label:aria-label="Close">close</md-icon>
|
||||
|
@ -24,41 +28,41 @@
|
|||
<md-dialog-content class="md-padding">
|
||||
<div layout="column">
|
||||
|
||||
<md-input-container class="md-block" ng-show="links.calendar.isWebCalendar">
|
||||
<md-input-container class="md-block" ng-show="::links.calendar.isWebCalendar">
|
||||
<label><var:string label:value="URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.webCalendarURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.webCalendarURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
|
||||
<div layout="column" ng-hide="links.calendar.isWebCalendar">
|
||||
<div layout="column" ng-hide="::links.calendar.isWebCalendar">
|
||||
<div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="CalDAV URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.calDavURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.calDavURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="WebDAV ICS URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.webDavICSURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.webDavICSURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="WebDAV XML URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<var:if condition="isPublicAccessEnabled">
|
||||
<div layout="column" ng-hide="links.calendar.isWebCalendar">
|
||||
<div layout="column" ng-hide="::links.calendar.isWebCalendar">
|
||||
<div class="sg-md-title"><var:string label:value="Public Access"/></div>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="CalDAV URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="WebDAV ICS URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
<md-input-container class="md-block">
|
||||
<label><var:string label:value="WebDAV XML URL"/></label>
|
||||
<input type="text" ng-model="links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
|
||||
<input type="text" ng-model="::links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</var:if>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
xmlns:label="OGo:label">
|
||||
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
||||
<form name="eventForm" ng-submit="editor.save(eventForm)">
|
||||
<md-toolbar ng-class="editor.component.getClassName('bg')">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
|
||||
<!-- summary -->
|
||||
|
@ -35,7 +35,13 @@
|
|||
<label><var:string label:value="Calendar"/></label>
|
||||
<md-select ng-model="editor.component.destinationCalendar">
|
||||
<md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
|
||||
ng-value="calendar.id">{{calendar.name}}</md-option>
|
||||
ng-value="calendar.id">
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-class="calendar.getClassName('bg')"><!-- color --></div>
|
||||
{{calendar.name}}
|
||||
</div>
|
||||
</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
<md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
|
||||
<md-toolbar ng-class="::editor.component.getClassName('bg')">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
|
||||
<div class="sg-md-title md-flex">
|
||||
|
@ -61,7 +61,11 @@
|
|||
<!-- calendar -->
|
||||
<md-list-item>
|
||||
<md-icon>event</md-icon>
|
||||
<p ng-bind="::editor.component.calendar"><!-- calendar --></p>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-class="::editor.component.getClassName('bg')"><!-- color --></div>
|
||||
<div ng-bind="::editor.component.calendar"><!-- calendar --></div>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<!-- start/due dates -->
|
||||
<md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }"
|
||||
|
|
|
@ -7,12 +7,16 @@
|
|||
xmlns:label="OGo:label"
|
||||
>
|
||||
<md-dialog flex="50" flex-sm="80" flex-xs="100">
|
||||
<md-toolbar ng-class="::acl.folderClassName()">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">folder_shared</md-icon>
|
||||
<div class="pseudo-input-container md-flex">
|
||||
<label class="pseudo-input-label"><var:string label:value="Access Rights"/></label>
|
||||
<div class="sg-md-title">{{acl.folder.name}}</div>
|
||||
<div layout="row" layout-align="start center">
|
||||
<div class="sg-color-chip"
|
||||
ng-class="::acl.folderClassName()"><!-- color --></div>
|
||||
<div class="sg-md-title" ng-bind="::acl.folder.name"><!-- calendar --></div>
|
||||
</div>
|
||||
</div>
|
||||
<md-button class="md-icon-button" ng-click="acl.closeModal()">
|
||||
<md-icon aria-label="Close dialog">close</md-icon>
|
||||
|
|
|
@ -15,7 +15,7 @@ $list-item-height: 6 * $baseline-grid; // 48px
|
|||
$sg-avatar-width: 40px;
|
||||
|
||||
// Circle diamter of color chips
|
||||
$sg-color-chip-width: 16px;
|
||||
$sg-color-chip-width: 2 * $baseline-grid;
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
|
@ -163,10 +163,14 @@ div.md-tile-left {
|
|||
border-color: white;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
display: block;
|
||||
height: $sg-color-chip-width;
|
||||
margin: 0 $bl;
|
||||
width: $sg-color-chip-width;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-tile-content {
|
||||
|
|
|
@ -794,13 +794,6 @@ $quarter_height: 10px;
|
|||
margin: 0 $baseline-grid 0 $baseline-grid*2;
|
||||
padding: 0;
|
||||
}
|
||||
.sg-color-chip {
|
||||
border-radius: 50%;
|
||||
border-width: 0;
|
||||
width: $baseline-grid;
|
||||
height: $baseline-grid;
|
||||
margin: 0 $baseline-grid 0 $baseline-grid*2;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue