Replace bottom-bar by bottom-sheet

Adjust sidenav layout Unify background colors
2026-10-05 20:10:33 +00:00 · 2015-06-12 11:18:00 -04:00
parent 69d0a3ad57
commit e756053f8b
14 changed files with 177 additions and 94 deletions
@@ -28,9 +28,10 @@
        'A400': '00e676',
        'A700': '00c853',
        'contrastDefaultColor': 'dark',
-        'contrastLightColors': '500 600 700 800 900'
+        'contrastDarkColors': '50 100 200',
+        'contrastLightColors': '300 400 500 600 700 800 900'
      });
-      $mdThemingProvider.definePalette('vintage-blue', {
+      $mdThemingProvider.definePalette('sogo-blue', {
        '50': 'f0faf9',
        '100': 'e1f5f3',
        '200': 'ceebe8',
@@ -49,7 +50,7 @@
        'contrastDarkColors': ['50', '100', '200'],
        'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
      });
-      $mdThemingProvider.definePalette('paper', {
+      $mdThemingProvider.definePalette('sogo-paper', {
        '50': 'fcf7f8',
        '100': 'f7f1dc',
        '200': 'ede5ca',
@@ -71,14 +72,19 @@
      // 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('vintage-blue', {
+        .primaryPalette('sogo-blue', {
          'default': '300',
          'hue-1': '100',
          'hue-2': '400',
          'hue-3': 'A700'
        })
-        .accentPalette('sogo-green')
-        .backgroundPalette('paper', {
+        .accentPalette('sogo-green', {
+          'default': '300',
+          'hue-1': '200',
+          'hue-2': '500',
+          'hue-3': 'A700'
+        })
+        .backgroundPalette('sogo-paper', {
          'default': '500',
          'hue-1': '200',
          'hue-2': '50',
@@ -98,7 +104,7 @@
      return l;
    })

-    .controller('toggleCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', function ($scope, $timeout, $mdSidenav, $log) {
+    .controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$log', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $log) {
      $scope.toggleLeft = function () {
        $mdSidenav('left').toggle()
          .then(function () {
@@ -111,5 +117,11 @@
            $log.debug("toggle RIGHT is done");
          });
      };
+      $scope.openBottomSheet = function() {
+        $mdBottomSheet.show({
+          parent: angular.element(document.getElementById('left-sidenav')),
+          templateUrl: 'bottomSheetTemplate.html'
+        });
+      };
    }]);
 })();
@@ -393,10 +393,10 @@ $colorBlueGrey900:  nth($paletteBlueGrey, 10);
  $hues: map-keys($palette);
  @each $hue in $hues {
    $color: map-get($palette, $hue);
-    .fg-#{$name}-#{$hue} {
+    .md-default-theme.fg-#{$name}-#{$hue} {
      color: $color;
    };
-    .bg-#{$name}-#{$hue} {
+    .md-default-theme.bg-#{$name}-#{$hue} {
      background-color: $color;
    };
  };
@@ -1 +1,17 @@
-@import 'extends';
+@import 'extends';
+
+md-bottom-sheet.md-default-theme {
+  border: none;
+  background-color: transparent;
+}
+
+md-bottom-sheet.md-default-theme .md-button.md-default-theme {
+  &:hover:not([disabled]) {
+    background-color: transparent;
+    color: sg-color($sogoBlue, 800);
+  }
+  &[disabled] {
+    padding: 6px; // The server remove the 'a' tag when disabling
+    text-transform: uppercase;
+  }
+}
@@ -10,17 +10,26 @@

 // Buttons for the sidenav folder tree
 // ------------------------------------
-sg-folder-tree .md-button {
+sg-folder-tree .md-button,
+md-sidenav md-list button.md-button {
  outline: none;
  color: inherit;
  font-size: sg-size(button);
  padding: 0;
+  text-transform: initial;
  -webkit-font-smoothing: auto;
-
+}
+.sg-folder {
+  flex: 1;
+  text-align: left;
 }
 .sg-active .md-button {
  color: sg-color($sogoBlue, 800);
 }
+
+.md-button [class ^= md-icon] {
+  margin-right: 1em;
+}
 ///
 /// iconButton
 /// according to Material design specs:
@@ -1,4 +1,4 @@
@import 'extends';
 md-content {
  background-color: transparent;
-}
+}
@@ -17,7 +17,7 @@ md-select.md-default-theme.sg-toolbar-sort {
 }

 md-select.md-default-theme.sg-logout {
-  margin-top: 0;
+  margin-top: $bl;
  color: $colorWhite;

  // angular material overqualifies, so we are
@@ -12,7 +12,6 @@

 main {
  background-color: sg-color($sogoPaper, 200);
-  padding-bottom: $toolbar-height; // padding to compensate for the bottom bar
 }

 .sg-logo {
@@ -10,7 +10,7 @@
  margin: 0 auto;
  overflow: auto;
  height: 100%;
-  background-color: sg-color($sogoPaper, 100);
+  background-color: sg-color($sogoPaper, 50);
  transform: translateY(-1 * $pitch);
  z-index: 40;
  box-shadow: $whiteframe-shadow-z1;