Restructure Sass files and folders for proper application Sass development

UI/WebServerResources/scss/components/list/demoBasicUsage/index.html

@@ -0,0 +1,25 @@
+
+<div ng-controller="AppCtrl">
+  <md-content>
+
+    <md-list>
+
+      <md-item ng-repeat="item in todos">
+        <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>
+
+    </md-list>
+
+  </md-content>
+</div>

UI/WebServerResources/scss/components/list/demoBasicUsage/script.js

@@ -0,0 +1,44 @@
+
+angular.module('listDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+    $scope.todos = [
+      {
+        face : '/img/list/60.jpeg',
+        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',
+        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',
+        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',
+        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',
+        what: 'Brunch this weekend?',
+        who: 'Min Li Chan',
+        when: '3:08PM',
+        notes: " I'll be in your neighborhood doing errands"
+      },
+    ]
+
+});
+

UI/WebServerResources/scss/components/list/demoBasicUsage/style.css

@@ -0,0 +1,7 @@
+
+.face {
+  border-radius: 30px;
+  border: 1px solid #ddd;
+  width: 48px;
+  margin: 16px;
+}

UI/WebServerResources/scss/components/list/list.js

@@ -0,0 +1,88 @@
+(function() {
+'use strict';
+
+/**
+ * @ngdoc module
+ * @name material.components.list
+ * @description
+ * List module
+ */
+angular.module('material.components.list', [
+  'material.core'
+])
+  .directive('mdList', mdListDirective)
+  .directive('mdItem', mdItemDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdList
+ * @module material.components.list
+ *
+ * @restrict E
+ *
+ * @description
+ * The `<md-list>` directive is a list container for 1..n `<md-item>` tags.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-list>
+ *   <md-item ng-repeat="item in todos">
+ *     <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>
+ * </md-list>
+ * </hljs>
+ *
+ */
+function mdListDirective() {
+  return {
+    restrict: 'E',
+    link: function($scope, $element, $attr) {
+      $element.attr({
+        'role' : 'list'
+      });
+    }
+  };
+}
+
+/**
+ * @ngdoc directive
+ * @name mdItem
+ * @module material.components.list
+ *
+ * @restrict E
+ *
+ * @description
+ * The `<md-item>` directive is a container intended for row items in a `<md-list>` container.
+ *
+ * @usage
+ * <hljs lang="html">
+ *  <md-list>
+ *    <md-item>
+ *            Item content in list
+ *    </md-item>
+ *  </md-list>
+ * </hljs>
+ *
+ */
+function mdItemDirective() {
+  return {
+    restrict: 'E',
+    link: function($scope, $element, $attr) {
+      $element.attr({
+        'role' : 'listitem'
+      });
+    }
+  };
+}
+})();

UI/WebServerResources/scss/components/list/list.scss

@@ -0,0 +1,103 @@
+$list-h3-font-size: 1.1em !default;
+$list-h3-margin: 0 0 3px 0 !default;
+$list-h3-font-weight: 400 !default;
+$list-h4-font-size: 0.9em !default;
+$list-h4-font-weight: 400 !default;
+$list-h4-margin: 0 0 3px 0 !default;
+$list-p-font-size: 0.75em !default;
+$list-p-margin: 0 0 3px 0 !default;
+
+$list-padding-top: $baseline-grid !default;
+$list-padding-right: 0px !default;
+$list-padding-left: 0px !default;
+$list-padding-bottom: $baseline-grid !default;
+
+$item-padding-top: 0px !default;
+$item-padding-right: 0px !default;
+$item-padding-left: 0px !default;
+$item-padding-bottom: 0px !default;
+
+md-list {
+  padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
+}
+
+md-item {
+
+}
+
+md-item-content {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  position: relative;
+
+  padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
+}
+
+/**
+ * The left tile for a list item.
+ */
+.md-tile-left {
+  min-width: 56px;
+  margin-right: -16px;
+  // for dev only
+  height: 56px;
+  background-color: grey;
+}
+
+/**
+ * The center content tile for a list item.
+ */
+.md-tile-content {
+  flex: 1;
+
+  padding: $baseline-grid * 2;
+  text-overflow: ellipsis;
+
+  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;
+  }
+}
+.sg {
+  &-tile-content {
+    @extend .md-tile-content;
+    margin-left: $layout-gutter-width; // dirty fix for vs-repeat damages
+    .name  {
+      margin: $list-h3-margin;
+      font-weight: $list-h3-font-weight;
+      font-size: $list-h3-font-size;
+    }
+    .subject {
+      margin: $list-h4-margin;
+      font-weight: $list-h4-font-weight;
+      font-size: $list-h4-font-size;
+      // dirty fix for vs-repeat damages
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    p {
+      margin: $list-p-margin;
+      font-size: $list-p-font-size;
+    }
+  }
+}
+/**
+ * The right tile for a list item.
+ */
+.md-tile-right {
+  padding-right: $item-padding-right;
+}

UI/WebServerResources/scss/components/list/list.spec.js

@@ -0,0 +1,11 @@
+describe('mdList directive', function() {
+  function setup(attrs) {
+    module('material.components.list');
+    var el;
+    inject(function($compile, $rootScope) {
+      el = $compile('<md-list '+(attrs || '')+'></md-list>')($rootScope.$new());
+      $rootScope.$apply();
+    });
+    return el;
+  }
+});