Various Web interface changes

- more contrasted primary palette;
- white toolbars for list and detail views;
- modules navigation always visible;
- wrapped detail views into a md-card;
- moved preferences button to the sidenav;
- moved the sidenav toggle button to the top toolbar;
- new "flip" visual effect when looking at the raw source of cards and
  messages.

UI/WebServerResources/scss/components/button/button.scss

@@ -20,6 +20,15 @@
     width: 100%;
 }
 
+// Remove left margin when in first menu button of dialogs
+.md-toolbar-tools {
+  md-menu:first-child {
+    .md-icon-button:first-child {
+      margin-left: 0
+    }
+  }
+}
+
 ///
 /// sg-icon-button
 /// according to Material design specs:
@@ -50,13 +59,12 @@ $button-fab-height: 56px;
 a.md-button.sg-icon-button,
 .md-button.sg-icon-button,
 md-list md-list-item button.md-button.sg-icon-button {
-  z-index: 1;
-  //line-height: inherit;
-  border-radius: 50%;
-  min-width: $iconButton-size;
+  @extend .md-button.md-icon-button;
   transition: $iconButton-transition;
-  .md-ripple-container {
-    border-radius: 50%;
+  &:hover:not([disabled]),
+  &:active {
+    background-color: transparent;
+    transform: scale($iconButton-hover-scale);
   }
 }
 

UI/WebServerResources/scss/components/card/card.scss

@@ -8,6 +8,18 @@ md-card {
     transition: $swift-ease-in-out;
   }
 
+  md-card-actions:not(.layout-column) {
+    .md-button {
+      // "last-of-type" doesn't work well when we have multiple types so we overwrite md's directive
+      &.md-icon-button,
+      &.md-icon-button:last-of-type,
+      &.sg-icon-button,
+      &.sg-icon-button:last-of-type {
+        margin: 0 $baseline-grid * .5;
+      }
+    }
+  }
+
   // Collapsed/expanded states for cards in ACL editor
   &.sg-collapsed, &.sg-expanded {
     transition: $swift-ease-in-out;

UI/WebServerResources/scss/components/dialog/dialog.scss

@@ -15,17 +15,17 @@
 
 body.popup {
   md-dialog {
-    &[flex-sm="100"],
-    &.flex-sm-100 {
+    &[flex-xs="100"],
+    &.flex-xs-100 {
       @include fullscreen;
     }
   }
 }
 
-@media (max-width: $layout-breakpoint-sm) {
+@media (max-width: $layout-breakpoint-xs) {
   md-dialog {
-    &[flex-sm="100"],
-    &.flex-sm-100 {
+    &[flex-xs="100"],
+    &.flex-xs-100 {
       @include fullscreen;
     }
   }

UI/WebServerResources/scss/components/list/list.scss

@@ -21,7 +21,7 @@ $sg-color-chip-width: $subhead-font-size-base;
 md-list-item {
   .md-list-item-inner {
     flex-grow: 1; // use all column space
-    overflow: hidden;
+    //overflow: hidden;
 
     // Gain some space since we want small list items
     & > md-checkbox {
@@ -173,7 +173,7 @@ div.md-tile-left {
 
   &-counter-badge {
     border-left-width: 1px;
-    border-left-color: #999;
+    border-left-color: $colorGrey500;
     border-style: solid;
     margin: 0;
     padding: 0 rem(0.500);

UI/WebServerResources/scss/components/menu/menu.scss

@@ -1,2 +1,10 @@
 /// menu.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
+
+md-card {
+  md-card-actions:not(.layout-column) {
+    .md-menu {
+      padding: 0; // don't add padding so all icon buttons are of the same height
+    }
+  }
+}

UI/WebServerResources/scss/components/toolbar/toolbar.scss

@@ -50,6 +50,12 @@ md-toolbar,
       transform: translateX(-$touch-zone-width);
     }
   }
+  &.md-accent.md-hue-1 {
+    md-icon {
+      // Hack until this bug is fixed: https://github.com/angular/material/issues/5989
+      color: rgba(0,0,0,0.54);
+    }
+  }
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {