Adopt theming system of Angular Material

The SASS has been simplified so that different themes can be applied by only using the $mdThemingProvider serivce. The resulting design is more "Materialized" and less prone to the future changes of Angular Material.
2026-04-14 01:38:51 +00:00 · 2015-09-09 16:35:09 -04:00
parent 16d312eb98
commit 11e7af3450
20 changed files with 83 additions and 160 deletions
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -23,10 +23,10 @@
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <!-- <div style="position: relative; display: flex;"> -->
-      <md-content md-scroll-y="md-scroll-y">
+      <md-content md-scroll-y="md-scroll-y" class="md-hue-2">
        <!-- User's addressbooks -->
        <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="sg-md-subheader md-hue-2">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Address Books"/></span>
              <md-button class="sg-icon-button"
@@ -41,7 +41,7 @@
                          ng-click="app.select(folder)"
                          ng-dblclick="app.edit(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
              <md-icon>contacts</md-icon>
              <p class="sg-item-name"
                 ng-show="app.editMode!=folder.id">{{folder.name}}</p>
@@ -101,7 +101,7 @@
        </section>
        <!-- Subscriptions -->
        <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="sg-md-subheader md-hue-2">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Subscriptions"/></span>
              <md-button class="sg-icon-button"
@@ -117,7 +117,7 @@
                          ng-click="app.select(folder)"
                          ng-dblclick="app.edit(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
              <md-icon>contacts</md-icon>
              <p class="sg-item-name"
                 ng-show="editMode!=folder.id">{{folder.name}}</p>
@@ -155,14 +155,14 @@
        </section>
        <!-- Remote/domain addressbooks -->
        <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="sg-md-subheader md-hue-2">
            <var:string label:value="Global Addressbooks"/>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$remotes track by folder.id"
                          ng-click="app.select(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
              <md-icon>public</md-icon>
              <p class="sg-item-name">{{folder.name}}</p>
            </md-list-item>
@@ -186,7 +186,7 @@

        <!-- single-selection toolbar -->
        <md-toolbar ng-show="addressbook.selectedFolder.$selectedCount() == 0">
-          <!-- sort mode -->
+          <!-- sort mode (default) -->
          <div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
            <md-button class="sg-icon-button" label:aria-label="Search"
                       ng-click="addressbook.mode.search = true">
@@ -339,7 +339,8 @@
                <md-list-item
                    ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"
                    ng-click="addressbook.selectCard(currentCard)"
-                    ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})">
+                    ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})"
+                    ui-sref-active="md-default-theme md-background md-bg md-hue-1">
                  <div class="sg-selected-avatar" ng-show="currentCard.selected"
                       ng-click="currentCard.selected = !currentCard.selected">
                    <!-- selected avatar -->
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -159,8 +159,8 @@
              md-on-demand="md-on-demand"
              ng-class="{'sg-active': currentMessage.uid == mailbox.selectedFolder.selectedMessage, unread: !currentMessage.isread}"
              ng-click="mailbox.selectMessage(currentMessage)"
-              ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})">
-            <!-- ui-sref-active="sg-active"> -->
+              ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})"
+              ui-sref-active="md-default-theme md-background md-bg md-hue-1">
            <div class="sg-selected-avatar"
                 ng-show="currentMessage.selected"
                 ng-click="mailbox.toggleMessageSelection($event, currentMessage)"><!-- selected avatar --></div>
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -223,7 +223,6 @@
 -->
  <main class="view layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>

-<!-- TEMPLATE SCRIPT WRAPPER -->
  <script type="text/ng-template" id="UIxMailMainFrame">

    <!-- Sidenav -->
@@ -231,7 +230,7 @@
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
        <section ng-repeat="account in app.accounts track by account.id">
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
            <div layout="row" layout-align="space-between center">
              <span>{{account.name}}</span>
              <div>
@@ -254,7 +253,7 @@
                          ng-click="app.selectFolder(account, folder)"
                          ng-dblclick="app.editFolder(folder)"
                          ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
              <md-icon ng-class="'sg-child-level-' + folder.level">{{app.metadataForFolder(folder).icon}}</md-icon>
              <p class="sg-item-name"
                 ng-show="app.editMode != folder.path">
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -24,29 +24,33 @@
  <script type="text/ng-template" id="preferences.html">
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-flex">
+      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
        <md-list>
          <md-list-item ng-click="app.go('general')"
                        ui-sref="preferences.general"
-                        ui-sref-active="sg-active">
+                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+            <md-icon>settings</md-icon>
            <p class="sg-item-name"><var:string label:value="General"/></p>
          </md-list-item>
          <var:if condition="userHasCalendarAccess">
            <md-list-item ng-click="app.go('calendars')"
                          ui-sref="preferences.calendars"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+              <md-icon>event</md-icon>
              <p class="sg-item-name"><var:string label:value="Calendar"/></p>
            </md-list-item>
          </var:if>
          <md-list-item ng-click="app.go('addressbooks')"
                        ui-sref="preferences.addressbooks"
-                        ui-sref-active="sg-active">
+                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+            <md-icon>contacts</md-icon>
            <p class="sg-item-name"><var:string label:value="Contacts"/></p>
          </md-list-item>
          <var:if condition="userHasMailAccess">
            <md-list-item ng-click="app.go('mailer')"
                          ui-sref="preferences.mailer"
-                          ui-sref-active="sg-active">
+                          ui-sref-active="md-default-theme md-background md-bg md-hue-1">
+              <md-icon>email</md-icon>
              <p class="sg-item-name"><var:string label:value="Mail"/></p>
            </md-list-item>
          </var:if>
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -148,10 +148,10 @@
    <!-- Sidenav -->
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-flex">
+      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
        <!-- User's calendars -->
        <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Calendars"/></span>
              <md-button class="sg-icon-button"
@@ -208,7 +208,7 @@
        </section>
        <!-- Subscriptions -->
        <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Subscriptions"/></span>
              <md-button class="sg-icon-button"
@@ -256,7 +256,7 @@
        </section>
        <!-- Web Calendars -->
        <section>
-          <md-subheader class="sg-md-subheader">
+          <md-subheader class="md-hue-2">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Web Calendars"/></span>
              <md-button class="sg-icon-button"
@@ -530,6 +530,7 @@
            </md-button>
          </div>
        </md-toolbar>
+
        <!-- day/week/month views -->
        <md-toolbar class="view-detail">
          <div class="md-toolbar-tools" layout-align="end center">
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -1,6 +1,6 @@
 module.exports = function(grunt) {
  var js_files = {
-    'js/Common.js': ['js/Common/Common.app.js', 'js/Common/*.filter.js', 'js/Common/*Controller.js', 'js/Common/*.service.js', 'js/Common/*.directive.js', 'js/Common/utils.js'],
+    'js/Common.js': ['js/Common/*.app.js', 'js/Common/*.filter.js', 'js/Common/*Controller.js', 'js/Common/*.service.js', 'js/Common/*.directive.js', 'js/Common/utils.js'],
    'js/Main.js': ['js/Main/Main.app.js'],
    'js/Scheduler.services.js': ['js/Scheduler/*.service.js'],
    'js/Scheduler.js': ['js/Scheduler/Scheduler.app.js', 'js/Scheduler/*Controller.js', 'js/Scheduler/*.directive.js'],
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -3,7 +3,7 @@
 (function() {
  'use strict';

-  angular.module('SOGo.Common', ['ngAnimate', 'ngMaterial'])
+  angular.module('SOGo.Common', ['ngAnimate', 'ngMaterial', 'mdColors'])
    .value('sgSettings', {
      isPopup: document.body.classList.contains('popup'),
      baseURL: function() {
@@ -123,6 +123,9 @@

    .config(configure);

+  /**
+   * @ngInject
+   */
  configure.$inject = ['$mdThemingProvider'];
  function configure($mdThemingProvider) {
    $mdThemingProvider.definePalette('sogo-green', {
@@ -141,8 +144,8 @@
      'A400': '00e676',
      'A700': '00c853',
      'contrastDefaultColor': 'dark',
-      'contrastDarkColors': '50 100 200',
-      'contrastLightColors': '300 400 500 600 700 800 900'
+      'contrastDarkColors': ['50', '100', '200'],
+      'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900']
    });
    $mdThemingProvider.definePalette('sogo-blue', {
      '50': 'f0faf9',
@@ -180,10 +183,9 @@
      'A400': 'bdbdbd',
      'A700': '616161',
      'contrastDefaultColor': 'dark',
-      'contrastLightColors': '800 900'
+      'contrastLightColors': ['800', '900']
    });
    // Default theme definition
-    // .primaryColor will soon be deprecated in favor of primaryPalette (already on dev builds https://groups.google.com/forum/m/#!topic/ngmaterial/-sXR8CYBMPg)
    $mdThemingProvider.theme('default')
      .primaryPalette('sogo-blue', {
        'default': '300',
@@ -197,10 +199,10 @@
        'hue-2': '300',
        'hue-3': 'A700'
      })
-      .backgroundPalette('sogo-paper', {
-        'default': '100',
+      .backgroundPalette('grey', {
+        'default': 'A100',
        'hue-1': '200',
-        'hue-2': '50',
+        'hue-2': '300',
        'hue-3': '500'
      });
  }
--- a/UI/WebServerResources/scss/components/_palette.scss
+++ b/UI/WebServerResources/scss/components/_palette.scss
@@ -403,7 +403,7 @@ $colorBlueGrey900:  nth($paletteBlueGrey, 10);
    };
  };
 }
-@include colors($sogoBlue, 'sogoBlue');
-@include colors($sogoGreen, 'sogoGreen');
-@include colors($sogoPaper, 'sogoPaper');
+// @include colors($sogoBlue, 'sogoBlue');
+// @include colors($sogoGreen, 'sogoGreen');
+// @include colors($sogoPaper, 'sogoPaper');

--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -10,12 +10,6 @@

 // Buttons for the sidenav folder tree
 // ------------------------------------
-md-sidenav md-list .md-button,
-.view-list md-list .md-button {
-  // dirty fix to squash the theme style
-  background-color: transparent !important;
-}
-
 .view-list md-list .md-button {
  // Gain some space in lists
  padding: 0;
@@ -61,11 +55,6 @@ md-list md-list-item button.md-button.sg-icon-button {
  border-radius: 50%;
  min-width: $iconButton-size;
  transition: $iconButton-transition;
-  &:hover,
-  &:active {
-    background-color: transparent;
-    transform: scale($iconButton-hover-scale);
-  }
  .md-ripple-container {
    border-radius: 50%;
  }
--- a/UI/WebServerResources/scss/components/card/card-theme.scss
+++ b/UI/WebServerResources/scss/components/card/card-theme.scss
@@ -0,0 +1,5 @@
+md-card {
+  &.md-default-theme {
+    background-color: sg-color($sogoPaper, 50);
+  }
+}
--- a/UI/WebServerResources/scss/components/card/card.scss
+++ b/UI/WebServerResources/scss/components/card/card.scss
@@ -8,10 +8,6 @@ md-card {
    transition: $swift-ease-in-out;
  }

-  &.md-default-theme {
-    background-color: sg-color($sogoPaper, 50);
-  }
-
  // Collapsed/expanded states for cards in ACL editor
  &.sg-collapsed, &.sg-expanded {
    transition: $swift-ease-in-out;
--- a/UI/WebServerResources/scss/components/content/content-theme.scss
+++ b/UI/WebServerResources/scss/components/content/content-theme.scss
@@ -0,0 +1,3 @@
+.sg-subcontent {
+  border-left: $baseline-grid solid sg-color($sogoGreen, 100);
+}
--- a/UI/WebServerResources/scss/components/list/list-theme.scss
+++ b/UI/WebServerResources/scss/components/list/list-theme.scss
@@ -0,0 +1,15 @@
+.sg-section-list {
+  md-list-item {
+    &:hover:not([disabled]) {
+      background-color: sg-color($sogoPaper, 300);
+      color: sg-color($sogoBlue, 800);
+    }
+    &:active {
+      color: sg-color($sogoBlue, 800);
+    }
+    &:focus,
+    &.sg-active {
+      background-color: sg-color($sogoBlue, 100);
+    }
+  }
+}
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -61,28 +61,8 @@ div.md-tile-left {
  min-width: $sg-md-grid-pitch + $baseline-grid;
 }

-// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
-[id='messagesList'],
-[id='contactsList'] {
-  border-top: 44px solid transparent;   // padding for the header.subheader until md-subheader is fixed
-}
-
 .sg-section-list {
  md-list-item {
-    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
-                color 0.12s linear;
-    &:hover:not([disabled]) {
-      background-color: sg-color($sogoPaper, 300);
-      color: sg-color($sogoBlue, 800);
-      cursor: pointer;
-    }
-    &:active {
-      color: sg-color($sogoBlue, 800);
-    }
-    &:focus,
-    &.sg-active {
-      background-color: sg-color($sogoBlue, 100);
-    }
    .md-list-item-inner {
      .md-secondary {
        // Expect the container to include a sg-tile-icons
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -2,11 +2,9 @@
@import "extends";
 $sidenav-default-width: (4 * $pitch);
 $sidenav-min-space: $pitch;
-
-$sidenav-right-width: (8 * $pitch);
+//$sidenav-right-width: (8 * $pitch);

 md-sidenav {
-  background-color: sg-color($sogoPaper, 400);
  &.md-locked-open {
    @include from(lg) {
      @include flex-col(lg, 4, 1, 0)
@@ -15,36 +13,8 @@ md-sidenav {
  }
 }

-.md-sidenav-left {
-  &.md-whiteframe-z2 {
-    box-shadow: $sidenav-shadow-z2;
-  }
-}
-
 // MAIN SIDENAV, actually to the left
 // ----------------------------------------------------------------------------
-.md-sidenav-left {
-  & md-content,
-  & md-toolbar {
-    background-color: inherit;
-    background-image: url("../img/cardboard-transp.png");
-    background-blend-mode: multiply;
-  }
-}
-
-.md-sidenav-left md-toolbar {
-  box-shadow: none;
-}
-
-.md-sidenav-right {
-  width: $sidenav-right-width;
-  max-width: $sidenav-right-width;
-  & md-content,
-  & md-toolbar {
-    background-color: inherit;
-    background-image: none;
-  }
-}

 // Mailboxes tree
 $i: 1;
@@ -69,27 +39,9 @@ $i: 1;
 }

 .md-sidenav-left {
-  &.md-whiteframe-z1 {
-    box-shadow: $sidenav-shadow-z1;
-  }
  md-list-item {
-    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
-                color 0.12s linear;
-    &:hover {
-      background-color: sg-color($sogoBlue, 500);
-    }
-    &.sg-active {
-      background-color: sg-color($sogoBlue, 400);
-    }
-    &.sg-loading {
-      color: sg-color($sogoBlue, 200);
-    }
-  }
-}
-.md-sidenav-left {
-  md-bottom-sheet {
-    md-list-item:hover {
-      background-color: transparent;
+    .md-button {
+      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
    }
  }
 }
--- a/UI/WebServerResources/scss/components/subheader/subheader.scss
+++ b/UI/WebServerResources/scss/components/subheader/subheader.scss
@@ -28,13 +28,3 @@
    font-weight: $sg-font-medium;
  }
 }
-
-md-list .md-subheader.sg-md-subheader {
-  font-weight: $sg-font-medium;
-  font-size: $sg-font-size-2;
-}
-
-.sg-md-subheader > * {
-  font-weight: inherit;
-  font-size: inherit;
-}
--- a/UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss
@@ -0,0 +1,12 @@
+md-toolbar {
+  background-image: url("../img/felt-transp.png");
+  background-blend-mode: luminosity;
+}
+
+.sg-toolbar-search {
+  background-color: sg-color($sogoPaper, 100);
+  color: rgba(0,0,0,0.54);
+  md-icon {
+    color: rgba(0,0,0,0.54);
+  }
+}
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -16,9 +16,6 @@ md-toolbar {
  z-index: $z-index-toolbar;
  // dirty fix to override angular-material botchy typography
  font-size: 1em !important;
-  background-image: url("../img/felt-transp.png");
-  background-blend-mode: luminosity;
-  //box-shadow: $whiteframe-shadow-z1;
 }

 .md-toolbar-tools {
@@ -43,11 +40,6 @@ md-toolbar,
  }
 }

-// angular-material is overspecifying so we are
-.md-toolbar-tools[layout-align="start start"] {
-  //align-items: flex-start;
-}
-
 .md-toolbar-tools.md-toolbar-tools-top {
  align-items: flex-start;
 }
@@ -66,24 +58,16 @@ header {
 }
 hgroup {
  align-items: center;
-  //flex: 1 1 auto;
  &h3 {
    margin-bottom: 0;
  }
 }
-.toolbar-main .md-button {
-//  color: inherit;
-//  font-size: sg-size(headline);
-}

 .sg-toolbar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
-//  & > .sg-icon-button:first-child {
-//    padding-left: 0;
-//  }
  &-1 {
    order: 1;
    max-width: $listView-width;
@@ -98,10 +82,5 @@ hgroup {
 }

 .sg-toolbar-search {
-  background-color: sg-color($sogoPaper, 100);
-  color: rgba(0,0,0,0.54);
  padding: $toolbar-padding 0;
-  md-icon {
-    color: rgba(0,0,0,0.54);
-  }
 }
--- a/UI/WebServerResources/scss/core/base_styles/_base_style.scss
+++ b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
@@ -1,10 +1,5 @@
 /// _base_style.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

-
-main {
-  background-color: $background-base-color;
-}
-
 // Utility class to add padding on containers
 // Because of the border-box sizing model, padding can affect width specialy
 // in nested containers
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -18,10 +18,10 @@ $version: '3.0.0';
 //@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
@import 'components/palette';        // fixme : The maps in color-palettes are more js then scss

-$primary-color:            sg-color($sogoBlue, 300) !default;
+//$primary-color:            sg-color($sogoBlue, 300) !default;
 //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
-$foreground-primary-color: rgba($primary-color, 0.87);//override
-$background-base-color:    sg-color($sogoPaper, 200);
+//$foreground-primary-color: rgba($primary-color, 0.87);//override
+//$background-base-color:    sg-color($sogoPaper, 200);

 // Typography
 // ------------------------------