(css) Respect theme in time picker and freebusy

Fixes #4500
Alinto · Aug 23, 2018 · c3271dd · c3271dd
1 parent df78658
commit c3271dd
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 26 deletions.
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
@@ -203,7 +203,8 @@
       'contrastLightColors': ['800', '900']
     });
     var greyMap = $mdThemingProvider.extendPalette('grey', {
-      '600': '00B0C0' // used when highlighting text in md-autocomplete
+      '600': '00b0c0', // used when highlighting text in md-autocomplete,
+      '1000': 'baa870' // used as the background color of the busy periods of the attendees editor
     });
     $mdThemingProvider.definePalette('sogo-grey', greyMap);
     // Default theme definition
@@ -223,7 +224,26 @@
       })
       .backgroundPalette('sogo-grey');
 
-    if (!DebugEnabled) {
+    // Register custom stylesheet for sgTimepicker
+    $mdThemingProvider.registerStyles([
+      '.sg-time-selection-indicator.sg-time-selected,',
+      '.sg-time-selection-indicator:hover.sg-time-selected,',
+      '.sg-time-selection-indicator.md-focus.sg-time-selected {',
+      '  background: \'{{primary-500}}\';',
+      '}',
+      '.sg-timepicker-open .sg-timepicker-icon {',
+      '  color: \'{{primary-900}}\';',
+      '}',
+      '.sg-timepicker-time,',
+      '.sg-timepicker-open .sg-timepicker-input-container {',
+      '  background: \'{{background-hue-1}}\';',
+      '}',
+      '.sg-timepicker-input-mask-opaque {',
+      '  box-shadow: 0 0 0 9999px \'{{background-hue-1}}\';',
+      '}',
+    ].join(''));
+
+    if (!window.DebugEnabled) {
       // Disable debugging information
       $logProvider.debugEnabled(false);
       $compileProvider.debugInfoEnabled(false);

diff --git a/UI/WebServerResources/js/Common/sgTimepicker.directive.js b/UI/WebServerResources/js/Common/sgTimepicker.directive.js
@@ -456,7 +456,7 @@
           '    <div class="sg-timepicker-input-mask-opaque"></div>',
           // '                md-colors="::{\'box-shadow\': \'default-background-hue-1\'}"></div>', // using mdColors
           '  </div>',
-          '  <div class="sg-timepicker-time" md-colors="::{background: \'default-background-A100\'}">',
+          '  <div class="sg-timepicker-time">',
           '    <sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ',
           '                  ng-model="ctrl.time" ng-if="ctrl.isTimeOpen"></sg-time-pane>',
           '  </div>',

diff --git a/UI/WebServerResources/js/Scheduler/Scheduler.app.js b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
@@ -11,8 +11,20 @@
   /**
    * @ngInject
    */
-  configure.$inject = ['$stateProvider', '$urlServiceProvider'];
-  function configure($stateProvider, $urlServiceProvider) {
+  configure.$inject = ['$stateProvider', '$urlServiceProvider', '$mdThemingProvider'];
+  function configure($stateProvider, $urlServiceProvider, $mdThemingProvider) {
+    // Register custom stylesheet
+    $mdThemingProvider.registerStyles([
+      '[ui-view=calendars] .hours {',
+      '  color: \'{{primary-700}}\';',
+      '}',
+      '.attendees .busy {',
+      '  background-color: \'{{background-1000}}\';',
+      '}',
+      '.attendees .event {',
+      '  background-color: \'{{primary-300}}\';',
+      '}'
+    ].join(''));
     $stateProvider
       .state('calendars', {
         url: '/calendar',

diff --git a/UI/WebServerResources/js/theme.js b/UI/WebServerResources/js/theme.js
@@ -40,6 +40,32 @@
     /**
      * Overwrite the default theme
      */
+    $mdThemingProvider.definePalette('sogo-paper', {
+      '50': 'fcf7f8',
+      '100': 'f7f1dc',
+      '200': 'ede5ca',
+      '300': 'e6d8ba',
+      '400': 'e2d2a3',
+      '500': 'd6c48d',
+      '600': 'baa870', // busy periods in attendees editor
+      '700': '857545',
+      '800': '524517',
+      '900': '433809',
+      '1000': '000000',
+      'A100': 'ffffff',
+      'A200': 'eeeeee',
+      'A400': 'bdbdbd',
+      'A700': '616161',
+      'contrastDefaultColor': 'dark',
+      'contrastLightColors': ['800', '900']
+    });
+
+    var greyMap = $mdThemingProvider.extendPalette('grey', {
+      '600': '00b0c0', // used when highlighting text in md-autocomplete,
+      '1000': 'baa870' // used as the background color of the busy periods of the attendees editor
+    });
+    $mdThemingProvider.definePalette('sogo-grey', greyMap);
+
     $mdThemingProvider.theme('default')
       .primaryPalette('blue-grey', {
         'default': '400',  // top toolbar
@@ -53,7 +79,7 @@
         'hue-2': '300',
         'hue-3': 'A700'
       })
-      .backgroundPalette('grey', {
+      .backgroundPalette('sogo-grey', {
         'default': '50',   // center list background
         'hue-1': '200',
         'hue-2': '300',

diff --git a/UI/WebServerResources/scss/components/timepicker/timepicker.scss b/UI/WebServerResources/scss/components/timepicker/timepicker.scss
@@ -65,7 +65,6 @@ $sg-time-font-size: 13px;
   }
 
   &.sg-time-selected, &:hover.sg-time-selected, &.md-focus.sg-time-selected {
-    background: sg-color($sogoBlue, 500); // {{primary-500}}
     color: #fff; // {{primary-500-contrast}}
     border-color: transparent;
   }
@@ -150,11 +149,6 @@ sg-timepicker {
   @extend .md-datepicker-input-mask;
 }
 
-// From datepicker-theme.scss
-.sg-timepicker-input-mask-opaque {
-  box-shadow: 0 0 0 9999px rgb(255,255,255);
-}
-
 // The time portion of the floating pane (vs. the input mask).
 .sg-timepicker-time {
   opacity: 0;
@@ -209,11 +203,6 @@ sg-timepicker[disabled] {
 .sg-timepicker-open {
   overflow: hidden;
 
-  .sg-timepicker-input-container {
-    // From datePicker-theme.scss
-    background: rgb(255,255,255); //'{{background-hue-1}}';
-  }
-
   .sg-timepicker-input-container,
   input.md-input {
     border-bottom-color: transparent;
@@ -224,10 +213,6 @@ sg-timepicker[disabled] {
   &.md-input-has-placeholder > label {
     display: none;
   }
-
-  .sg-timepicker-icon {
-    color: sg-color($sogoBlue, 900); //'{{primary-color}}';
-  }
 }
 
 // When the position of the floating calendar pane is adjusted to remain inside

diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -240,7 +240,6 @@ $quarter_height: 10px;
 
   // The left column of hours
   .hours {
-    color: sg-color($sogoBlue, 700);
     display: inline-block;
     float: left;
     clear: left;
@@ -774,13 +773,9 @@ $quarter_height: 10px;
     display: flex;
     align-items: stretch;
   }
-  .event {
-    background-color: sg-color($sogoBlue, 300);
-  }
   .busy {
     margin: 8px 0;
     min-width: 4px;
-    background-color: sg-color($sogoPaper, 600);
   }
 
   .sg-color-sample {