MODULE-TYPO

- Sass set-up - md-list - md-theming (install)
2026-06-11 05:19:43 +00:00 · 2015-01-16 07:52:29 -05:00
parent ec1b4b9b0c
commit f1d2b8cb75
312 changed files with 26839 additions and 1309 deletions
@@ -0,0 +1,32 @@
+
+<div ng-controller="AppCtrl">
+
+  <md-content>
+
+    <md-toolbar>
+      <h2 class="md-toolbar-tools">
+        <span>Toolbar</span>
+      </h2>
+    </md-toolbar>
+
+    <br>
+
+    <br>
+
+    <md-toolbar class="md-tall md-accent">
+      <h2 class="md-toolbar-tools">
+        <span>Toolbar: tall (md-accent)</span>
+      </h2>
+    </md-toolbar>
+
+    <br>
+
+    <md-toolbar class="md-tall md-warn md-hue-3">
+      <span flex></span>
+      <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
+        <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
+      </h2>
+    </md-toolbar>
+
+  </md-content>
+</div>
@@ -0,0 +1,14 @@
+
+angular.module('toolbarDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+
+})
+
+.directive('svgIcon', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: '<svg viewBox="0 0 24 24" style="pointer-events: none;"><g><g><rect fill="none" width="24" height="24"></rect><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></g></svg>'
+  }
+});
@@ -0,0 +1,35 @@
+<div ng-controller="AppCtrl" layout="column" layout-fill>
+
+  <md-toolbar md-scroll-shrink>
+    <div class="md-toolbar-tools">
+      <h3>
+        <span>My App Title</span>
+      </h3>
+    </div>
+  </md-toolbar>
+
+  <md-content style="height: 600px;">
+
+    <md-list>
+
+      <md-item ng-repeat="item in todos">
+        <md-item-content>
+          <div class="md-tile-left">
+            <img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
+          </div>
+          <div class="md-tile-content">
+            <h3>{{item.what}}</h3>
+            <h4>{{item.who}}</h4>
+            <p>
+              {{item.notes}}
+            </p>
+          </div>
+        </md-item-content>
+        <md-divider inset></md-divider>
+      </md-item>
+
+    </md-list>
+
+  </md-content>
+
+</div>
@@ -0,0 +1,19 @@
+var app = angular.module('toolbarDemo2', ['ngMaterial']);
+
+app.controller('AppCtrl', function($scope) {
+  var item = {
+    face: '/img/list/60.jpeg',
+    what: 'Brunch this weekend?',
+    who: 'Min Li Chan',
+    notes: "I'll be in your neighborhood doing errands."
+  };
+  $scope.todos = [];
+  for (var i = 0; i < 15; i++) {
+    $scope.todos.push({
+      face: '/img/list/60.jpeg',
+      what: "Brunch this weekend?",
+      who: "Min Li Chan",
+      notes: "I'll be in your neighborhood doing errands."
+    });
+  }
+});
@@ -0,0 +1,6 @@
+.face {
+  width: 48px;
+  margin: 16px;
+  border-radius: 48px;
+  border: 1px solid #ddd;
+}
@@ -0,0 +1,17 @@
+md-toolbar.md-THEME_NAME-theme {
+  background-color: '{{primary-color}}';
+  color: '{{primary-contrast}}';
+
+  .md-button {
+    color: '{{primary-contrast}}';
+  }
+
+  &.md-accent {
+    background-color: '{{accent-color}}';
+    color: '{{accent-contrast}}';
+  }
+  &.md-warn {
+    background-color: '{{warn-color}}';
+    color: '{{warn-contrast}}';
+  }
+}
@@ -0,0 +1,151 @@
+(function() {
+'use strict';
+
+/**
+ * @ngdoc module
+ * @name material.components.toolbar
+ */
+angular.module('material.components.toolbar', [
+  'material.core',
+  'material.components.content'
+])
+  .directive('mdToolbar', mdToolbarDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdToolbar
+ * @module material.components.toolbar
+ * @restrict E
+ * @description
+ * `md-toolbar` is used to place a toolbar in your app.
+ *
+ * Toolbars are usually used above a content area to display the title of the
+ * current page, and show relevant action buttons for that page.
+ *
+ * You can change the height of the toolbar by adding either the
+ * `md-medium-tall` or `md-tall` class to the toolbar.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <div layout="column" layout-fill>
+ *   <md-toolbar>
+ *
+ *     <div class="md-toolbar-tools">
+ *       <span>My App's Title</span>
+ *
+ *       <!-- fill up the space between left and right area -->
+ *       <span flex></span>
+ *
+ *       <md-button>
+ *         Right Bar Button
+ *       </md-button>
+ *     </div>
+ *
+ *   </md-toolbar>
+ *   <md-content>
+ *     Hello!
+ *   </md-content>
+ * </div>
+ * </hljs>
+ *
+ * @param {boolean=} md-scroll-shrink Whether the header should shrink away as
+ * the user scrolls down, and reveal itself as the user scrolls up.
+ * Note: for scrollShrink to work, the toolbar must be a sibling of a
+ * `md-content` element, placed before it. See the scroll shrink demo.
+ *
+ *
+ * @param {number=} md-shrink-speed-factor How much to change the speed of the toolbar's
+ * shrinking by. For example, if 0.25 is given then the toolbar will shrink
+ * at one fourth the rate at which the user scrolls down. Default 0.5.
+ */
+function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
+
+  return {
+    restrict: 'E',
+    controller: angular.noop,
+    link: function(scope, element, attr) {
+      $mdTheming(element);
+
+      if (angular.isDefined(attr.mdScrollShrink)) {
+        setupScrollShrink();
+      }
+
+      function setupScrollShrink() {
+        // Current "y" position of scroll
+        var y = 0;
+        // Store the last scroll top position
+        var prevScrollTop = 0;
+
+        var shrinkSpeedFactor = attr.mdShrinkSpeedFactor || 0.5;
+
+        var toolbarHeight;
+        var contentElement;
+
+        var debouncedContentScroll = $$rAF.debounce(onContentScroll);
+        var debouncedUpdateHeight = $mdUtil.debounce(updateToolbarHeight, 5 * 1000);
+
+        // Wait for $mdContentLoaded event from mdContent directive.
+        // If the mdContent element is a sibling of our toolbar, hook it up
+        // to scroll events.
+        scope.$on('$mdContentLoaded', onMdContentLoad);
+
+        function onMdContentLoad($event, newContentEl) {
+          // Toolbar and content must be siblings
+          if (element.parent()[0] === newContentEl.parent()[0]) {
+            // unhook old content event listener if exists
+            if (contentElement) {
+              contentElement.off('scroll', debouncedContentScroll);
+            }
+
+            newContentEl.on('scroll', debouncedContentScroll);
+            newContentEl.attr('scroll-shrink', 'true');
+
+            contentElement = newContentEl;
+            $$rAF(updateToolbarHeight);
+          }
+        }
+
+        function updateToolbarHeight() {
+          toolbarHeight = element.prop('offsetHeight');
+          // Add a negative margin-top the size of the toolbar to the content el.
+          // The content will start transformed down the toolbarHeight amount,
+          // so everything looks normal.
+          //
+          // As the user scrolls down, the content will be transformed up slowly
+          // to put the content underneath where the toolbar was.
+          contentElement.css(
+            'margin-top',
+            (-toolbarHeight * shrinkSpeedFactor) + 'px'
+          );
+          onContentScroll();
+        }
+
+        function onContentScroll(e) {
+          var scrollTop = e ? e.target.scrollTop : prevScrollTop;
+
+          debouncedUpdateHeight();
+
+          y = Math.min(
+            toolbarHeight / shrinkSpeedFactor,
+            Math.max(0, y + scrollTop - prevScrollTop)
+          );
+
+          element.css(
+            $mdConstant.CSS.TRANSFORM,
+            'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'
+          );
+          contentElement.css(
+            $mdConstant.CSS.TRANSFORM,
+            'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)'
+          );
+
+          prevScrollTop = scrollTop;
+        }
+
+      }
+
+    }
+  };
+
+}
+})();
@@ -0,0 +1,76 @@
+$toolbar-tools-height: 64px !default;
+$toolbar-height: 64px !default;
+$toolbar-medium-tall-height: 88px !default;
+$toolbar-tall-height: 128px !default;
+$toolbar-indent-margin: 64px !default;
+$toolbar-padding: 16px !default;
+
+md-toolbar {
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+  z-index: 2;
+
+  font-size: 1.3em;
+  min-height: $baseline-grid * 8;
+  width: 100%;
+
+  &.md-tall {
+    height: $toolbar-tall-height;
+    min-height: $toolbar-tall-height;
+    max-height: $toolbar-tall-height;
+  }
+
+  &.md-medium-tall {
+    height: $toolbar-medium-tall-height;
+    min-height: $toolbar-medium-tall-height;
+    max-height: $toolbar-medium-tall-height;
+
+    .md-toolbar-tools {
+      height: 48px;
+      min-height: 48px;
+      max-height: 48px;
+    }
+  }
+
+  .md-indent {
+    margin-left: $toolbar-indent-margin;
+  }
+}
+
+.md-toolbar-tools {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+
+  width: 100%;
+  height: $toolbar-tools-height;
+  min-height: 100%;
+  max-height: $toolbar-tools-height;
+  font-size: inherit;
+  font-weight: normal;
+  padding: 0 $toolbar-padding;
+  margin: 0;
+
+  > * {
+    font-size: inherit;
+  }
+  h2, h3 {
+    font-weight: normal;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .fill-height {
+    display: flex;
+    align-items: center;
+  }
+  .md-tools {
+    margin-left: auto;
+  }
+  .md-button {
+    font-size: 14px;
+  }
+}
@@ -0,0 +1,73 @@
+describe('<md-toolbar>', function() {
+
+  beforeEach(module('material.components.toolbar', function($provide) {
+    //Create fake raf to instant-trigger the callback
+    function raf(cb) { cb(); }
+    raf.debounce = function(cb) { 
+      var args = arguments;
+      return function() {
+        return cb.apply(null, arguments);
+      };
+    };
+
+    $provide.value('$$rAF', raf);
+  }));
+
+  it('with scrollShrink, it should shrink scrollbar when going to bottom', inject(function($compile, $rootScope, $mdConstant, mdToolbarDirective) {
+
+    var parent = angular.element('<div>');
+    var toolbar = angular.element('<md-toolbar>');
+    var contentEl = angular.element('<div>');
+    // Make content and toolbar siblings
+    parent.append(toolbar).append(contentEl);
+
+    //Prop will be used for offsetHeight, give a fake offsetHeight
+    spyOn(toolbar, 'prop').andCallFake(function() {
+      return 100;
+    });
+
+    // Fake the css function so we can read css values properly,
+    // no matter which browser the tests are being run on.
+    // (IE, firefox, chrome all give different results when reading element.style)
+    var toolbarCss = {};
+    spyOn(toolbar, 'css').andCallFake(function(k, v) {
+      toolbarCss[k] = v;
+    });
+    var contentCss = {};
+    spyOn(contentEl, 'css').andCallFake(function(k, v) {
+      contentCss[k] = v;
+    });
+
+    // Manually link so we can give our own elements with spies on them
+    mdToolbarDirective[0].link($rootScope, toolbar, { 
+      mdScrollShrink: true,
+      mdShrinkSpeedFactor: 1
+    });
+
+    $rootScope.$broadcast('$mdContentLoaded', contentEl);
+
+    //Expect everything to be in its proper initial state.
+    expect(toolbarCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,0px,0)');
+    expect(contentCss['margin-top']).toEqual('-100px');
+    expect(contentCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,100px,0)');
+
+    // Fake scroll to the bottom
+    contentEl.triggerHandler({
+      type: 'scroll',
+      target: { scrollTop: 500 }
+    });
+
+    expect(toolbarCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,-100px,0)');
+    expect(contentCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,0px,0)');
+
+    // Fake scroll back to the top
+    contentEl.triggerHandler({
+      type: 'scroll',
+      target: { scrollTop: 0 }
+    });
+
+    expect(toolbarCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,0px,0)');
+    expect(contentCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,100px,0)');
+
+  }));
+});