fix(divider): make divider work with new md-list

closes #2125
angular · Apr 2, 2015 · ebcd7f0 · ebcd7f0
1 parent bc32eb4
commit ebcd7f0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 34 deletions.
diff --git a/src/components/divider/demoBasicUsage/index.html b/src/components/divider/demoBasicUsage/index.html
@@ -8,16 +8,12 @@ <h2 class="md-toolbar-tools">
 
   <md-content>
     <md-list>
-      <md-item ng-repeat="item in messages">
-        <md-item-content>
-          <div class="md-tile-content">
-            <h3>{{item.what}}</h3>
-            <h4>{{item.who}}</h4>
-            <p>
-              {{item.notes}}
-            </p>
-          </div>
-        </md-item-content>
+      <md-item class="md-3-line" ng-repeat="item in messages">
+        <div class="md-item-text">
+          <h3>{{item.what}}</h3>
+          <h4>{{item.who}}</h4>
+          <p>{{item.notes}}</p>
+        </div>
         <md-divider ng-if="!$last"></md-divider>
       </md-item>
     </md-list>
@@ -31,19 +27,13 @@ <h2 class="md-toolbar-tools">
 
   <md-content>
     <md-list>
-      <md-item ng-repeat="item in messages">
-        <md-item-content>
-          <div class="md-tile-left">
-            <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
-          </div>
-          <div class="md-tile-content">
-            <h3>{{item.what}}</h3>
-            <h4>{{item.who}}</h4>
-            <p>
-              {{item.notes}}
-            </p>
-          </div>
-        </md-item-content>
+      <md-item class="md-3-line" ng-repeat="item in messages">
+        <img ng-src="{{item.face}}?{{$index}}" class="face" alt="{{item.who}}">
+        <div class="md-item-text">
+          <h3>{{item.what}}</h3>
+          <h4>{{item.who}}</h4>
+          <p>{{item.notes}}</p>
+        </div>
         <md-divider md-inset ng-if="!$last"></md-divider>
       </md-item>
     </md-list>

diff --git a/src/components/divider/demoBasicUsage/script.js b/src/components/divider/demoBasicUsage/script.js
@@ -1,31 +1,31 @@
 angular.module('dividerDemo1', ['ngMaterial'])
   .controller('AppCtrl', function($scope) {
     $scope.messages = [{
-      face: '/img/list/60.jpeg',
+      face : 'http://lorempixel.com/50/50/people',
       what: 'Brunch this weekend?',
       who: 'Min Li Chan',
       when: '3:08PM',
       notes: " I'll be in your neighborhood doing errands"
     }, {
-      face: '/img/list/60.jpeg',
+      face : 'http://lorempixel.com/50/50/people',
       what: 'Brunch this weekend?',
       who: 'Min Li Chan',
       when: '3:08PM',
       notes: " I'll be in your neighborhood doing errands"
     }, {
-      face: '/img/list/60.jpeg',
+      face : 'http://lorempixel.com/50/50/people',
       what: 'Brunch this weekend?',
       who: 'Min Li Chan',
       when: '3:08PM',
       notes: " I'll be in your neighborhood doing errands"
     }, {
-      face: '/img/list/60.jpeg',
+      face : 'http://lorempixel.com/50/50/people',
       what: 'Brunch this weekend?',
       who: 'Min Li Chan',
       when: '3:08PM',
       notes: " I'll be in your neighborhood doing errands"
     }, {
-      face: '/img/list/60.jpeg',
+      face : 'http://lorempixel.com/50/50/people',
       what: 'Brunch this weekend?',
       who: 'Min Li Chan',
       when: '3:08PM',

diff --git a/src/components/divider/divider.js b/src/components/divider/divider.js
@@ -11,8 +11,6 @@ angular.module('material.components.divider', [
 ])
   .directive('mdDivider', MdDividerDirective);
 
-function MdDividerController(){}
-
 /**
  * @ngdoc directive
  * @name mdDivider
@@ -34,8 +32,7 @@ function MdDividerController(){}
 function MdDividerDirective($mdTheming) {
   return {
     restrict: 'E',
-    link: $mdTheming,
-    controller: [MdDividerController]
+    link: $mdTheming
   };
 }
 })();
diff --git a/src/components/list/list.js b/src/components/list/list.js
@@ -97,7 +97,7 @@ function mdItemDirective($document, $log, $mdUtil, $mdAria) {
         if (hasProxiedElement) {
           wrapIn('div');
         } else {
-          tEl.addClass('md-no-style');
+          tEl.addClass('md-no-proxy');
         }
       } else {
         wrapIn('button');

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -25,6 +25,7 @@ $list-item-primary-icon-width: $baseline-grid * 3 !default;
 $list-item-secondary-left-margin: $baseline-grid * 2 !default;
 $list-item-text-padding-top: $baseline-grid * 2 !default;
 $list-item-text-padding-bottom: $baseline-grid * 2.5 !default;
+$list-item-inset-divider-offset: 12 * $baseline-grid !default;
 
 md-list {
   display: block;
@@ -37,8 +38,9 @@ md-list {
 }
 
 md-item {
-  &.md-no-style,
+  &.md-no-proxy,
   .md-no-style {
+    position: relative;
     padding: $list-item-padding-vertical $list-item-padding-horizontal;
     flex: 1;
     &:focus {
@@ -51,6 +53,18 @@ md-item {
   &.md-clickable:hover {
     cursor: pointer;
   }
+
+  md-divider {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    &[md-inset] {
+      left: $list-item-inset-divider-offset;
+      width: calc(100% - #{$list-item-inset-divider-offset});
+      margin: 0;
+    }
+  }
 }
 
 md-item, md-item .md-item-inner {