Reduce usage of calendar color in dialogs

Alinto · Jul 8, 2019 · f2069a6 · f2069a6
1 parent a0cf84f
commit f2069a6
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 38 deletions.
diff --git a/NEWS b/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

diff --git a/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox b/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
@@ -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,15 +25,15 @@
         <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">
         <div layout="column">
           <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>

diff --git a/UI/Templates/MailerUI/UIxMailUserRightsEditor.wox b/UI/Templates/MailerUI/UIxMailUserRightsEditor.wox
@@ -7,7 +7,7 @@
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix">
 
-    <div class="mailUserRights" layout="column">
+  <div class="mailUserRights" layout="column">
 
     <md-checkbox name="userCanReadMails"
                  ng-model="acl.selectedUser.rights.userCanReadMails"

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -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">

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -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 }">

diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@@ -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>

diff --git a/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox b/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
@@ -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>

diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -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>

diff --git a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
@@ -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 }"

diff --git a/UI/Templates/UIxAclEditor.wox b/UI/Templates/UIxAclEditor.wox
@@ -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>

diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
@@ -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 {

diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -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;
-  }
 }
 
 /**