feat(subheader): add subheader component with sticky scroll

Closes #216. Closes #269.
angular · Oct 4, 2014 · 7787c9c · 7787c9c
1 parent 6162156
commit 7787c9c
Show file tree

Hide file tree

Showing 21 changed files with 817 additions and 22 deletions.
diff --git a/config/build.config.js b/config/build.config.js
@@ -77,6 +77,9 @@ module.exports = {
       'src/components/animate/noEffect.js',
       'src/components/animate/inkCssRipple.js',
 
+      // Sticky Components
+      'src/components/sticky/sticky.js',
+
       // Components
       'src/components/buttons/buttons.js',
       'src/components/card/card.js',
@@ -90,6 +93,7 @@ module.exports = {
       'src/components/sidenav/sidenav.js',
       'src/components/slider/slider.js',
       'src/components/switch/switch.js',
+      'src/components/subheader/subheader.js',
       'src/components/tabs/tabs.js',
       'src/components/tabs/js/*.js',
       'src/components/toast/toast.js',

diff --git a/src/components/content/_content.scss b/src/components/content/_content.scss
@@ -1,6 +1,7 @@
 material-content {
 
   display: block;
+  position: relative;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 
@@ -18,10 +19,6 @@ material-content {
   &.material-content-padding {
     padding: 8px;
   }
-
-  &[scroll-shrink] {
-    position: relative;
-  }
 }
 
 @media (min-width: $layout-breakpoint-sm) {

diff --git a/src/components/content/content.js b/src/components/content/content.js
@@ -33,13 +33,14 @@ angular.module('material.components.content', [
 function materialContentDirective() {
   return {
     restrict: 'E',
-    controller: ['$element', ContentController],
+    controller: ['$scope', '$element', ContentController],
     link: function($scope, $element, $attr) {
       $scope.$broadcast('$materialContentLoaded', $element);
     }
   };
 
-  function ContentController($element) {
+  function ContentController($scope, $element) {
+    this.$scope = $scope;
     this.$element = $element;
   }
 }
diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
@@ -1,5 +1,9 @@
 material-list {
+  padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
 
+  &.with-subheader {
+    padding-top: 0px;
+  }
 }
 
 material-item {
@@ -35,16 +39,16 @@ material-item-content {
 
   text-overflow: ellipsis;
 
-  h2 {
-    margin: $list-h2-margin;
-    font-weight: $list-h2-font-weight;
-    font-size: $list-h2-font-size;
-  }
   h3 {
     margin: $list-h3-margin;
     font-weight: $list-h3-font-weight;
     font-size: $list-h3-font-size;
   }
+  h4 {
+    margin: $list-h4-margin;
+    font-weight: $list-h4-font-weight;
+    font-size: $list-h4-font-size;
+  }
   p {
     margin: $list-p-margin;
     font-size: $list-p-font-size;

diff --git a/src/components/list/demo1/index.html b/src/components/list/demo1/index.html
@@ -10,8 +10,8 @@
               <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
           </div>
           <div class="material-tile-content">
-            <h2>{{item.what}}</h2>
-            <h3>{{item.who}}</h3>
+            <h3>{{item.what}}</h3>
+            <h4>{{item.who}}</h4>
             <p>
               {{item.notes}}
             </p>

diff --git a/src/components/list/list.js b/src/components/list/list.js
@@ -31,8 +31,8 @@ angular.module('material.components.list', [])
  *      <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
  *    </div>
  *    <div class="material-tile-content">
- *      <h2>{{item.what}}</h2>
- *      <h3>{{item.who}}</h3>
+ *      <h3>{{item.what}}</h3>
+ *      <h4>{{item.who}}</h4>
  *      <p>
  *        {{item.notes}}
  *      </p>

diff --git a/src/components/sticky/_sticky.scss b/src/components/sticky/_sticky.scss
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+.material-subheader {
+  position:relative;
+}
+.material-sticky-invisible {
+  opacity: 0;
+}
+
+.material-sticky-container {
+  position: absolute;
+  z-index: 2;
+  overflow: hidden;
+  pointer-events: none;
+
+  .material-sticky-clone {
+    top: 0;
+    left: 0;
+    right: 24px;
+    position: absolute;
+    @include transform(translate3d(0, 0, 0));
+    &:not(.material-sticky-active) {
+      @include transform(translate3d(-9999px, -9999px, 0));
+    }
+  }
+}