diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index fa377a5d2..7eef4d928 100644
--- 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
index ec71a9faf..329d496a1 100644
--- a/UI/WebServerResources/js/Common/sgTimepicker.directive.js
+++ b/UI/WebServerResources/js/Common/sgTimepicker.directive.js
@@ -456,7 +456,7 @@
'
',
+ '
',
' ',
'
',
diff --git a/UI/WebServerResources/js/Scheduler/Scheduler.app.js b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
index bd51a03e8..298cd6750 100644
--- 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
index e6d1a7db4..bd0aa467a 100644
--- 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
index 1abc07281..cceff252a 100644
--- 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
index 88c5ef35f..2da0db117 100644
--- 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 {