feat(Virtual repeater)

Implements a virtual repeater to use instead of ng-repeat for substantially better performance in components. review edits Make tests pass in FF. fix(tabs): prevents error on empty tab list Closes angular#3264 fix(button): fixes button styles for components that override their default styles chore(toast): fix type typo in toast docs (`boolean` > `string`). fix(utils): update for Angular 1.4.1 compatibility Fixes angular#3315, Fixes angular#3325. fix(icons): improve use of material-icons style Improve logic to auto-add `.material-icons` style to **md-icon**. > NOTE: will not auto-add if using any class or ng-class attributes; see demoFontIconsWithLigatures Fixes angular#3333. update(icon): removed **ddescribe** used for isolated karma tests update(docs, icon): clarify auto-add of 'material-icons' style. update(build): use of Angular v1.4.1 update(util): update initOptionalProperties() implementation Closes angular#3316. feat(menu): do not propagate event in mdOpenMenu Do not propagate the event in mdOpenMenu. This way a menu can be nested in elements that also have handlers of the same event type, without triggering any of these events. To enable this functionality, `$event` should be passed as the first argument to `$mdOpenMenu`. Fixes angular#3296. Closes angular#3332. update(tests, mocks): test for stopPropogation angular-material-mocks captures $timeout.flush() errors. add menu event propogation test Switched RawGit for GitCDN Switch to GitCDN, which lets you get the latest master branch, without losing the CDN and without it's service getting harmed. Closes angular#3262. update(README): change docs to reference 0.10.0 Closes angular#3319.
kseamon · Jun 18, 2015 · 16594e0 · 16594e0
1 parent 0c66974
commit 16594e0
Show file tree

Hide file tree

Showing 24 changed files with 1,299 additions and 408 deletions.
diff --git a/README.md b/README.md
@@ -117,8 +117,8 @@ when using online tools such as [CodePen](http://codepen.io/), [Plunkr](http://p
 ```html
  <head>
 
- <!-- Angular Material CSS now available via Google CDN; version 0.8 used here -->
- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
+ <!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
+ <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
 
  </head>
  <body>
@@ -129,22 +129,22 @@ when using online tools such as [CodePen](http://codepen.io/), [Plunkr](http://p
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
 
 
- <!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
- <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
+ <!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
+ <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
  </body>
 ```
 
-> Note that the above sample references the 0.8.3 CDN release. Your version will change based on the latest stable release version.
+> Note that the above sample references the 0.10.0 CDN release. Your version will change based on the latest stable release version.
 
-Developers seeking the latest, most-current build versions can use [RawGit.com](//rawgit.com) to
+Developers seeking the latest, most-current build versions can use [GitCDN.xyz](//gitcdn.xyz) to
 pull directly from the distribution GitHub
 [Bower-Material](https:/angular/bower-material) repository:
 
 ```html
  <head>
 
- <!-- Angular Material CSS using RawGit to load directly from `bower-material/master` -->
- <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
+ <!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
+ <link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
 
  </head>
  <body>
@@ -154,11 +154,9 @@ pull directly from the distribution GitHub
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
 
- <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
- <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
+ <!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
+ <script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
 
  </body>
 ```
 
-> Please note that the above RawGit access is intended **ONLY** for development purposes or sharing
- low-traffic, temporary examples or demos with small numbers of people.
diff --git a/config/build.config.js b/config/build.config.js
@@ -3,7 +3,7 @@ var fs = require('fs');
 var versionFile = __dirname + '/../dist/commit';
 
 module.exports = {
- ngVersion: '1.3.15',
+ ngVersion: '1.4.1',
  version: pkg.version,
  repository: pkg.repository.url
  .replace(/^git/,'https')

diff --git a/config/karma.conf.js b/config/karma.conf.js
@@ -14,15 +14,17 @@ module.exports = function(config) {
  // demos in the tests, and Karma doesn't support advanced
  // globbing.
 
+ 'dist/angular-material.css',
+
  'src/core/**/*.js',
  'src/components/*/*.js',
  'src/components/*/js/*.js',
 
  'src/**/*.spec.js'
-
  ];
 
  var COMPILED_SRC = [
+ 'dist/angular-material.min.css',
  'dist/angular-material.min.js', // Minified source
  'src/**/*.spec.js'
  ];

diff --git a/package.json b/package.json
@@ -5,12 +5,12 @@
  "url": "git:/angular/material.git"
  },
  "devDependencies": {
- "angular": "^1.3.15 || >1.4.0-beta.0",
- "angular-animate": "^1.3.15 || >1.4.0-beta.0",
- "angular-aria": "^1.3.15 || >1.4.0-beta.0",
- "angular-messages": "^1.3.0 || >1.4.0-beta.0",
- "angular-mocks": "^1.3.0 || >1.4.0-beta.0",
- "angular-route": "^1.3.0 || >1.4.0-beta.0",
+ "angular": "^1.4.0",
+ "angular-animate": "^1.4.0",
+ "angular-aria": "^1.4.0",
+ "angular-messages": "^1.4.0",
+ "angular-mocks": "^1.4.0",
+ "angular-route": "^1.4.0",
  "angularytics": "^0.3.0",
  "canonical-path": "0.0.2",
  "cli-color": "^1.0.0",
@@ -58,4 +58,4 @@
  "stream-series": "^0.1.1",
  "through2": "^0.6.3"
  }
-}
+}
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -151,10 +151,6 @@ $icon-button-margin: rem(0.600) !default;
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
  }
 
- md-icon {
- margin-top: 0;
- }
-
  &.md-mini {
  line-height: $button-fab-mini-line-height;
  width: $button-fab-mini-width;

diff --git a/src/components/icon/demoFontIconsWithLigatures/index.html b/src/components/icon/demoFontIconsWithLigatures/index.html
@@ -11,7 +11,7 @@
  <div class="preview-glyphs">
  <md-icon ng-style="{color: font.color}"
  aria-label="{{ font.name }}"
- class="step"
+ class="material-icons step"
  ng-class="it.size">
  {{ font.name }}
  </md-icon>

diff --git a/src/components/icon/iconDirective.js b/src/components/icon/iconDirective.js
@@ -117,11 +117,12 @@ angular.module('material.components.icon', [
  * When using Material Font Icons with ligatures:
  * <hljs lang="html">
  * <!-- For Material Design Icons -->
- * <!-- The class '.material-icons' is auto-added. -->
+ * <!-- The class '.material-icons' is auto-added if a style has NOT been specified -->
  * <md-icon> face </md-icon>
- * <md-icon class="md-light md-48"> face </md-icon>
  * <md-icon md-font-set="material-icons"> face </md-icon>
  * <md-icon> #xE87C; </md-icon>
+ * <!-- The class '.material-icons' must be manually added if other styles are also specified-->
+ * <md-icon class="material-icons md-light md-48"> face </md-icon>
  * </hljs>
  *
  * When using other Font-Icon libraries:
@@ -209,12 +210,23 @@ function mdIconDirective($mdIcon, $mdTheming, $mdAria, $interpolate ) {
 
  function prepareForFontIcon () {
  if (!scope.svgIcon && !scope.svgSrc) {
+
  if (scope.fontIcon) {
  element.addClass('md-font');
  element.addClass(scope.fontIcon);
- } else {
+ }
+
+ if (scope.fontSet) {
  element.addClass($mdIcon.fontSet(scope.fontSet));
  }
+
+ // For Material Design font icons, the class '.material-icons'
+ // is auto-added IF a style has not been specified
+
+ if (!scope.fontIcon && !scope.fontSet && !angular.isDefined(attr.class)) {
+
+ element.addClass('material-icons');
+ }
  }
 
  }

diff --git a/src/components/icon/iconDirective.spec.js b/src/components/icon/iconDirective.spec.js
@@ -11,6 +11,7 @@ describe('mdIcon directive', function() {
  }));
  afterEach( function() {
  $mdIconProvider.defaultFontSet('material-icons');
+ $mdIconProvider.fontSet('fa', 'fa');
  });
 
 
@@ -21,6 +22,7 @@ describe('mdIcon directive', function() {
  $compile = _$compile_;
  }));
 
+
  describe('using font-icons with deprecated md-font-icon=""', function() {
 
  it('should render correct HTML with md-font-icon value as class', function() {
@@ -64,7 +66,7 @@ describe('mdIcon directive', function() {
 
  expect(el.attr('md-font-icon')).toBe($scope.font.name);
  expect(el.hasClass('step')).toBe(true);
- expect(el.hasClass('material-icons')).toBe(true);
+ expect(el.hasClass('material-icons')).toBe(false);
  expect(el.attr('aria-label')).toBe($scope.font.name + $scope.font.size);
  expect(el.attr('role')).toBe('img');
  })
@@ -77,7 +79,7 @@ describe('mdIcon directive', function() {
  el = make( '<md-icon class="md-48">face</md-icon>');
 
  expect(el.text()).toEqual('face');
- expect(el.hasClass('material-icons')).toBeTruthy();
+ expect(el.hasClass('material-icons')).toBeFalsy();
  expect(el.hasClass('md-48')).toBeTruthy();
  });
 
@@ -90,6 +92,15 @@ describe('mdIcon directive', function() {
  expect( clean(el.attr('class')) ).toEqual("fontawesome");
  });
 
+
+ it('should render correctly using a md-font-set alias', function() {
+ el = make( '<md-icon md-font-set="fa" md-font-icon="fa-info"></md-icon>');
+
+ expect( clean(el.attr('class')) ).toEqual("md-font fa-info fa");
+ });
+
+
+
  it('should render correctly using md-font-set value as class', function() {
 
  el = make( '<md-icon md-font-set="fontawesome">email</md-icon>');
@@ -101,11 +112,19 @@ describe('mdIcon directive', function() {
 
  describe('using font-icons with classnames', function() {
 
+ it('should auto-add the material-icons style', function() {
+ el = make( '<md-icon>apple</md-icon>');
+
+ expect(el.text()).toEqual('apple');
+ expect(el.hasClass('material-icons')).toBeTruthy();
+ });
+
+
  it('should render with icon classname', function() {
  el = make( '<md-icon class="custom-cake"></md-icon>');
 
  expect(el.text()).toEqual('');
- expect(el.hasClass('material-icons')).toBeTruthy();
+ expect(el.hasClass('material-icons')).toBeFalsy();
  expect(el.hasClass('custom-cake')).toBeTruthy();
  });
 

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -52,6 +52,8 @@ md-list-item {
  text-transform: none;
  width: 100%;
  white-space: normal;
+ flex-direction: inherit;
+ align-items: inherit;
  }
  &:focus {
  outline: none

diff --git a/src/components/menu/_menu.js b/src/components/menu/_menu.js
@@ -22,8 +22,9 @@ angular.module('material.components.menu', [
  *
  * Every `md-menu` must specify exactly two child elements. The first element is what is
  * left in the DOM and is used to open the menu. This element is called the trigger element.
- * The trigger element's scope has access to `$mdOpenMenu()`
- * which it may call to open the menu.
+ * The trigger element's scope has access to `$mdOpenMenu($event)`
+ * which it may call to open the menu. By passing $event as argument, the
+ * corresponding event is stopped from propagating up the DOM-tree.
  *
  * The second element is the `md-menu-content` element which represents the
  * contents of the menu when it is open. Typically this will contain `md-menu-item`s,
@@ -32,7 +33,7 @@ angular.module('material.components.menu', [
  * <hljs lang="html">
  * <md-menu>
  * <!-- Trigger element is a md-button with an icon -->
- * <md-button ng-click="$mdOpenMenu()" class="md-icon-button" aria-label="Open sample menu">
+ * <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="Open sample menu">
  * <md-icon md-svg-icon="call:phone"></md-icon>
  * </md-button>
  * <md-menu-content>
@@ -74,7 +75,7 @@ angular.module('material.components.menu', [
  *
  * <hljs lang="html">
  * <md-menu>
- * <md-button ng-click="$mdOpenMenu()" class="md-icon-button" aria-label="Open some menu">
+ * <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="Open some menu">
  * <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
  * </md-button>
  * <md-menu-content>
@@ -117,7 +118,7 @@ angular.module('material.components.menu', [
  * @usage
  * <hljs lang="html">
  * <md-menu>
- * <md-button ng-click="$mdOpenMenu()" class="md-icon-button">
+ * <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button">
  * <md-icon md-svg-icon="call:phone"></md-icon>
  * </md-button>
  * <md-menu-content>
@@ -190,7 +191,9 @@ function MenuController($mdMenu, $attrs, $element, $scope) {
  };
 
  // Uses the $mdMenu interim element service to open the menu contents
- this.open = function openMenu() {
+ this.open = function openMenu(ev) {
+ ev && ev.stopPropagation();
+
  ctrl.isOpen = true;
  triggerElement.setAttribute('aria-expanded', 'true');
  $mdMenu.show({

diff --git a/src/components/menu/demoBasicUsage/index.html b/src/components/menu/demoBasicUsage/index.html
@@ -4,7 +4,7 @@
  <h2 class="md-title">Simple dropdown menu</h2>
  <p>Note that applying the <code>md-menu-origin</code> and <code>md-menu-align-target</code> attributes ensure that the menu elements align</p>
  <md-menu>
- <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
  </md-button>
  <md-menu-content width="4">

diff --git a/src/components/menu/demoMenuPositionModes/index.html b/src/components/menu/demoMenuPositionModes/index.html
@@ -7,7 +7,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
  <div layout="column" flex="33" flex-sm="100" layout-align="center center">
  <p>Target Mode Positioning (default)</p>
  <md-menu>
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:business"></md-icon>
  </md-button>
  <md-menu-content width="6">
@@ -23,7 +23,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
  <div layout="column" flex-sm="100" flex="33" layout-align="center center">
  <p>Target mode with <code>md-offset</code></p>
  <md-menu md-offset="0 -5">
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:ring-volume"></md-icon>
  </md-button>
  <md-menu-content width="4">
@@ -36,7 +36,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
  <div layout="column" flex-sm="100" flex="33" layout-align="center center">
  <p><code>md-position-mode="target-right target"</code></p>
  <md-menu md-position-mode="target-right target">
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:portable-wifi-off"></md-icon>
  </md-button>
  <md-menu-content width="4">

diff --git a/src/components/menu/demoMenuWidth/index.html b/src/components/menu/demoMenuWidth/index.html
@@ -6,7 +6,7 @@ <h2 class="md-title">Different Widths</h2>
  <div layout="column" flex="33" flex-sm="100" layout-align="center center">
  <p>Wide menu (<code>width=6</code>)</p>
  <md-menu md-offset="0 -7">
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
  </md-button>
  <md-menu-content width="6">
@@ -19,7 +19,7 @@ <h2 class="md-title">Different Widths</h2>
  <div layout="column" flex-sm="100" flex="33" layout-align="center center">
  <p>Medium menu (<code>width=4</code>)</p>
  <md-menu md-offset="0 -7">
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:email"></md-icon>
  </md-button>
  <md-menu-content width="4">
@@ -32,7 +32,7 @@ <h2 class="md-title">Different Widths</h2>
  <div layout="column" flex="33" flex-sm="100" layout-align="center center">
  <p>Small menu (<code>width=2</code>)</p>
  <md-menu md-offset="0 -7">
- <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
  <md-icon md-menu-origin md-svg-icon="call:chat"></md-icon>
  </md-button>
  <md-menu-content width="2">