Adapt to latest md changes

2026-08-14 11:23:19 +00:00 · 2016-03-08 13:21:11 -05:00
parent bd81a56e58
commit 19d22cdcfb
39 changed files with 198 additions and 123 deletions
@@ -9,12 +9,9 @@
    "angular-sanitize": "1.4.x",
    "angular-ui-router": "latest",
    "angular-file-upload": "latest",
-    "angular-material": "v1.0.5",
+    "angular-material": "master",
    "lodash": "latest",
    "Sortable": "latest",
    "breakpoint-sass": ">=2.4.2"
-  },
-  "resolutions": {
-    "angular": "1.4.x"
  }
 }
@@ -29,11 +29,17 @@
    }, window.currentDay.secondsBeforeTomorrow * 1000);

    $scope.toggleLeft = function() {
-      $scope.leftIsClose = leftIsClose();
-      $mdSidenav('left').toggle()
-        .then(function () {
-          $log.debug("toggle left is done");
-        });
+      if ($scope.isGtMedium) {
+        // Left sidenav is toggled while sidenav is locked open; bypass $mdSidenav
+        $scope.leftIsClose = !$scope.leftIsClose;
+      }
+      else {
+        $scope.leftIsClose = leftIsClose();
+        $mdSidenav('left').toggle()
+          .then(function () {
+            $log.debug("toggle left is done");
+          });
+      }
    };
    $scope.toggleRight = function() {
      $mdSidenav('right').toggle()
@@ -42,7 +42,8 @@
        '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
        '  }',
        // Set the contrast color of input labels
-        '  .bg-folder{{ cssCtrl.ngModel.id }} label {',
+        '  .bg-folder{{ cssCtrl.ngModel.id }} label,',
+        '  .bg-folder{{ cssCtrl.ngModel.id }} .md-input {',
        '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
        '    opacity: 0.8;',
        '  }',
@@ -56,10 +57,10 @@
        '    border-color: {{ cssCtrl.ngModel.color }} !important;',
        '  }',
        /* Checkbox color */
-        '  .checkbox-folder{{ cssCtrl.ngModel.id }} .md-icon {',
+        '  .checkbox-folder{{ cssCtrl.ngModel.id }} ._md-icon {',
        '    background-color: {{ cssCtrl.ngModel.color }} !important;',
        '  }',
-        '  .checkbox-folder{{ cssCtrl.ngModel.id }}.md-checked .md-icon:after {',
+        '  .checkbox-folder{{ cssCtrl.ngModel.id }}.md-checked ._md-icon:after {',
        '    border-color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
        '  }',
        '</style>'
@@ -29,7 +29,7 @@
    vm.newMessage = newMessage;
    vm.newMessageWithSelectedCards = newMessageWithSelectedCards;
    vm.newMessageWithRecipient = newMessageWithRecipient;
-    vm.mode = { search: false };
+    vm.mode = { search: false, multiple: 0 };
    
    function selectCard(card) {
      $state.go('app.addressbook.card.view', {addressbookId: stateAddressbook.id, cardId: card.id});
@@ -37,6 +37,7 @@
    
    function toggleCardSelection($event, card) {
      card.selected = !card.selected;
+      vm.mode.multiple += card.selected? 1 : -1;
      $event.preventDefault();
      $event.stopPropagation();
    }
@@ -84,7 +85,10 @@
    }

    function unselectCards() {
-      _.forEach(vm.selectedFolder.$cards, function(card) { card.selected = false; });
+      _.forEach(vm.selectedFolder.$cards, function(card) {
+        card.selected = false;
+      });
+      vm.mode.multiple = 0;
    }
    
    function confirmDeleteSelectedCards() {
@@ -116,6 +120,7 @@
      _.forEach(vm.selectedFolder.$cards, function(card) {
        card.selected = true;
      });
+      vm.mode.multiple = vm.selectedFolder.$cards.length;
    }

    function sort(field) {
@@ -34,7 +34,7 @@
    vm.sortedBy = sortedBy;
    vm.cancelSearch = cancelSearch;
    vm.newMessage = newMessage;
-    vm.mode = { search: false };
+    vm.mode = { search: false, multiple: 0 };

    function selectMessage(message) {
      if (Mailbox.$virtualMode)
@@ -45,12 +45,16 @@

    function toggleMessageSelection($event, message) {
      message.selected = !message.selected;
+      vm.mode.multiple += message.selected? 1 : -1;
      $event.preventDefault();
      $event.stopPropagation();
    }

    function unselectMessages() {
-      _.forEach(vm.selectedFolder.$messages, function(message) { message.selected = false; });
+      _.forEach(vm.selectedFolder.$messages, function(message) {
+        message.selected = false;
+      });
+      vm.mode.multiple = 0;
    }

    function confirmDeleteSelectedMessages() {
@@ -96,6 +100,7 @@
    function unselectMessage(message, index) {
      // Unselect current message and cleverly load the next message
      var nextMessage, previousMessage, nextIndex = index;
+      vm.mode.multiple = vm.selectedFolder.$selectedCount();
      if (message) {
        if (Mailbox.$virtualMode) {
          $state.go('mail.account.virtualMailbox');
@@ -158,6 +163,7 @@
      var i = 0, length = vm.selectedFolder.$messages.length;
      for (; i < length; i++)
        vm.selectedFolder.$messages[i].selected = true;
+      vm.mode.multiple = length;
    }

    function markSelectedMessagesAsFlagged() {
@@ -21,13 +21,14 @@
    vm.openEvent = openEvent;
    vm.openTask = openTask;
    vm.newComponent = newComponent;
+    vm.filterpopup = filterpopup;
    vm.filter = filter;
    vm.filteredBy = filteredBy;
    vm.sort = sort;
    vm.sortedBy = sortedBy;
    vm.reload = reload;
    vm.cancelSearch = cancelSearch;
-    vm.mode = { search: false };
+    vm.mode = { search: false, multiple: 0 };

    // Select list based on user's settings
    Preferences.ready().then(function() {
@@ -59,17 +60,22 @@
    }

    function unselectComponents() {
-      _.forEach(Component['$' + vm.componentType], function(component) { component.selected = false; });
+      _.forEach(Component['$' + vm.componentType], function(component) {
+        component.selected = false;
+      });
+      vm.mode.multiple = 0;
    }

    function selectAll() {
      _.forEach(Component['$' + vm.componentType], function(component) {
        component.selected = true;
      });
+      vm.mode.multiple = Component['$' + vm.componentType].length;
    }

    function toggleComponentSelection($event, component) {
      component.selected = !component.selected;
+      vm.mode.multiple += component.selected? 1 : -1;
      $event.preventDefault();
      $event.stopPropagation();
    }
@@ -282,6 +288,10 @@
      }
    }

+    function filterpopup() {
+      return Component['$query' + vm.componentType.capitalize()].filterpopup;
+    }
+
    function filter(filterpopup) {
      Component.$filter(vm.componentType, { filterpopup: filterpopup });
    }
@@ -6,14 +6,3 @@
    right: $baseline-grid*2;
  }
 }
-
-md-autocomplete {
-  &.sg-input-no-message {
-    &[md-floating-label] {
-      md-input-container {
-        // See .md-input-has-messages
-        padding-bottom: $input-container-padding;
-      }
-    }
-  }
-}
@@ -20,6 +20,7 @@ body.popup {
 }

 md-dialog {
+  background-color: white !important;
  md-dialog-content {
    &.sg-dialog-message {
      // Prepare content to receive a "close" button on the right
@@ -25,6 +25,13 @@ md-input-container .bgroup {
  left-margin: -1.25em;
 }

+md-autocomplete .sg-input-no-message [md-floating-label] {
+  md-input-container {
+    // See .md-input-has-messages
+    padding-bottom: $input-container-padding;
+  }
+}
+
 .PseudoField input {
  flex: 1;
  order: 2;
@@ -28,7 +28,7 @@ md-list-item {
    }
  }

-  .md-list-item-inner {
+  ._md-list-item-inner {
    flex-grow: 1; // use all column space
    overflow: hidden;

@@ -71,14 +71,20 @@ md-list-item {
  }

  md-list-item {
-    .md-button {
+    // Gain some space on the right side of the folder icon
+    ._md-list-item-inner > md-icon:first-child,
+    ._md-list-item-inner > md-checkbox:first-child {
+      margin-right: $bl * 2;
+    }
+
+    .md-button,
+    &.md-clickable {
      margin: 0;
      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
    }
-    // Gain some space on the right side of the folder icon
-    .md-list-item-inner > md-icon:first-child,
-    .md-list-item-inner > md-checkbox:first-child {
-      margin-right: $bl * 2;
+
+    &.md-clickable:hover {
+      background-color: rgba(158,158,158,0.2);
    }
  }
 }
@@ -123,9 +129,9 @@ div.md-tile-left {

 .sg-section-list {
  md-list-item {
-    &.md-button-wrap {
+    &._md-button-wrap {
      > .md-button:first-child {
-        .md-list-item-inner {
+        ._md-list-item-inner {
          // Expect the container to include a sg-tile-icons
          padding-right: 0px;
        }
@@ -264,6 +270,7 @@ sg-avatar-image md-icon,
 }
 .sg-avatar-selected {
  &:before {
+    color: inherit;
    content: "\e5ca"; // check
  }
 }
@@ -13,6 +13,9 @@
  bottom: auto;
  background-color: white;
  border-radius: 50%;
-  //padding: $baseline-grid/2;
+  padding: $baseline-grid/2;
  box-shadow: $whiteframe-shadow-3dp;
+  md-progress-circular {
+    display: block;
+  }
 }
@@ -1,25 +1,28 @@
 /// sidenav.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-@import "extends";
-$sidenav-default-width: (4 * $pitch);
+
+$sidenav-desktop-width: (4 * $pitch);
 $sidenav-min-space: $pitch;
 //$sidenav-right-width: (8 * $pitch);

-md-sidenav {
-  &.md-locked-open {
-    @include from(md) {
-      @include flex-col(md, 4, 1, 0);
-      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
-      // Used in in "locked open" mode.
-      &.sg-closed.md-sidenav-left {
-        transform: translateX(-100%);
-        margin-right: -20vw; // See views/_views.scss
-      }
-    }
-  }
-}
+@import "extends";

 md-sidenav {
  overflow: inherit;
+
+  &._md-locked-open {
+    @include from(md) {
+      @include flex-col($breakpoint: md, $nb: 4, $grow: 1, $shrink: 0);
+      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
+      // Used in in "locked open" mode.
+      &.md-sidenav-left {
+        transition: $swift-ease-out;
+        &.sg-close {
+          margin-right: -20vw; // See views/_views.scss
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
 }

 // MAIN SIDENAV, actually to the left
@@ -3,7 +3,6 @@

 .md-subheader {
  margin-right: 0;
-  line-height: $touch-zone-width;
 }

 .md-subheader {
@@ -16,14 +16,16 @@ md-toolbar {
  z-index: $z-index-toolbar;
  // dirty fix to override angular-material botchy typography
  font-size: 1em !important;
+  // No transition when switching toolbars
+  transition-duration: 0s;
 }

-// Colors transition when changing folder in dialogs
+// Colors transition when changing folder color in dialogs
 md-dialog {
  md-toolbar,
  md-toolbar .md-input,
  md-toolbar md-input-container.md-input-has-value label,
-  md-toolbar md-input-container label:not(.md-no-float),
+  md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
  md-toolbar md-icon {
    transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
    color $swift-ease-out-duration $swift-ease-out-timing-function;
@@ -0,0 +1,5 @@
+/// layout-attributes.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+// Import from sources for extends
+// -------------------------------
+@import "../../angular-material/src/core/services/layout/layout-attributes";
@@ -56,4 +56,8 @@ html * {
  @extend .md-padding;
  background-color: white;
  margin-bottom: $mg/2;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
@@ -96,6 +96,9 @@ $slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl';

 $media-pointer: (pointer fine);

+// Button
+$button-left-right-padding: rem(0.600);
+
 // Icon
 $icon-size: rem(2.400) !default;

@@ -19,6 +19,7 @@
 // fixme : refactor all this to meet our practices
 // ------------------------------------------------------------------------------
@import 'core/mixins';
+@import 'core/layout-attributes';
@import 'core/structure';
@import 'core/layout';
@import 'core/typography';
@@ -5,7 +5,7 @@
  padding-bottom: $baseline-grid;
  padding: 0 $baseline-grid*2 $baseline-grid $baseline-grid*2;
  text-align: center;
-  md-progress-linear > .md-container {
+  md-progress-linear > ._md-container {
    height: 2px;
  }
 }
@@ -67,7 +67,7 @@ md-sidenav {
  md-checkbox {
    &.sg-folder {
      // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
-      .md-container:after {
+      ._md-container:after {
        color: rgba(0,0,0,0.54);
        font-family: 'Material Icons';
        font-size: 24px;
@@ -77,14 +77,14 @@ md-sidenav {
        width: 1em;
        height: 1em;
      }
-      .md-icon {
+      ._md-icon {
        border-width: 0;
      }
      &.md-checked {
-        .md-container:after {
+        ._md-container:after {
          content: "\e2c8";
        }
-        .md-icon {
+        ._md-icon {
          background-color: initial;
          &:after {
            border-style: none;
@@ -94,7 +94,6 @@ md-sidenav {
    }
  }
  .sg-item-name {
-    line-height: 6 * $baseline-grid; // $list-item-height, 48px
    &:focus {
      outline: none;
    }
@@ -56,11 +56,11 @@ $listView-width: grid-step(6) !global;
  // right side of the list item. Since we define the avatar as the secondary button, we must move it to the left
  // side of the list item and add some padding to the main button (.md-no-style).
  .md-with-secondary {
-    .md-no-style {
+    ._md-no-style {
      min-height: $baseline-grid * 7; // 56px
-      padding-left: 40 + $baseline-grid * 3;
+      padding-left: 40 + $baseline-grid * 2 !important; // 56px
    }
-    .md-secondary-container {
+    ._md-secondary-container {
      left: $baseline-grid * 2;
      right: initial;
      padding: 0;
@@ -92,6 +92,9 @@ $listView-width: grid-step(6) !global;
      min-height: 0;
    }
  }
+  md-card {
+    background-color: white;
+  }

  // On small screens, the view slides from the right and takes all screen place.
  // Expected Display Steps: