enhance(textfield): created md-text-float directive and updated demos

angular · Oct 16, 2014 · 25cf6f1 · 25cf6f1
1 parent bea6d9f
commit 25cf6f1
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 65 deletions.
diff --git a/src/components/tabs/demoDynamicTabs/script.js b/src/components/tabs/demoDynamicTabs/script.js
@@ -4,7 +4,7 @@ angular.module('tabsDemo2', ['ngMaterial'])
       { title: 'Polymer', active: true, content: "Polymer practices are great!", style:"tab1"},
       { title: 'Material Design', active: false, content: "Material Design practices are better!", style:"tab2" },
       { title: 'Angular', active: false, content: "AngularJS practices are the best!", style:"tab3" },
-      { title: 'NodeJS', active: false, disabled: false, content: "NodeJS practices are amazing!" }
+      { title: 'NodeJS', active: false, disabled: false, content: "NodeJS practices are amazing!" ,style:"tab4" }
     ];
 
     $scope.tabs = tabs;
@@ -18,8 +18,9 @@ angular.module('tabsDemo2', ['ngMaterial'])
     $scope.announceDeselected = announceDeselected;
 
     $scope.addTab = function (title, view) {
+      var style = tabs[(tabs.length % 4)].style;
       view = view || title + " Content View";
-      tabs.push({ title: title, content: view, active: false, disabled: false});
+      tabs.push({ title: title, content: view, active: false, disabled: false, style:style});
     };
 
     $scope.removeTab = function (tab) {

diff --git a/src/components/tabs/demoDynamicTabs/style.css b/src/components/tabs/demoDynamicTabs/style.css
@@ -9,6 +9,9 @@ div.infoBar {
     font-size: .8em;
 }
 
+.btnRemove {
+    margin-bottom: 40px;
+}
 
 md-tabs .md-view {
   background: #EEE;
@@ -32,5 +35,66 @@ md-tabs .md-view {
 
 md-button {
     display:block;
-    margin-bottom: 40px;
+}
+
+
+.tab1 {
+    background-color: #abd6e4;
+    height:300px;
+}
+.tab2 {
+    background-color: #94caa6;
+    height:300px;
+}
+.tab3 {
+    background-color: #c4b5a2;
+    height:300px;
+}
+.tab4 {
+    background-color: #e3cde8;
+    height:300px;
+}
+
+
+.row {
+    padding-left:30px;
+    height:60px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    -moz-align-items: center;
+    align-items: center;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -webkit-flex-direction: row;
+    -moz-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    margin-left: -8px;
+}
+
+.row > * {
+    font-size: inherit;
+    margin: 0 8px;
+}
+
+.row md-button {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.title {
+    padding-top:20px;
+    padding-right: 10px;
+}
+
+
+md-input-group.long > input {
+    width: 264px;
 }
diff --git a/src/components/tabs/demoPagination/script.js b/src/components/tabs/demoPagination/script.js
@@ -5,7 +5,9 @@ angular.module('tabsDemo1', ['ngMaterial'] )
     $scope.data = {
       maxIndex : 9,
       selectedIndex : 0,
-      locked : true
+      locked : true,
+
+      label2 : "Item 2"
     };
 
     $scope.next = function() {

diff --git a/src/components/tabs/demoPagination/style.css b/src/components/tabs/demoPagination/style.css
@@ -100,3 +100,36 @@
 div.animate-switch-container div.animate-switch {
     padding:20px;
 }
+
+.title {
+  color: #999999;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+div.row {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    -moz-align-items: center;
+    align-items: center;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -webkit-flex-direction: row;
+    -moz-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    margin-left: -8px;
+}
+
+.row > * {
+    font-size: inherit;
+    margin: 0 8px;
+}
diff --git a/src/components/tabs/js/tabItemDirective.js b/src/components/tabs/js/tabItemDirective.js
@@ -1,7 +1,7 @@
 angular.module('material.components.tabs')
 
 .directive('mdTab', [
-  '$mdInkRipple', 
+  '$mdInkRipple',
   '$compile',
   '$mdAria',
   '$mdUtil',
@@ -74,16 +74,21 @@ function MdTabDirective($mdInkRipple, $compile, $mdAria, $mdUtil, $mdConstant) {
   function compile(element, attr) {
     var tabLabel = element.find('md-tab-label');
 
-    // If a tab label element is found, remove it for later re-use.
     if (tabLabel.length) {
+
+      // If a tab label element is found, remove it for later re-use.
       tabLabel.remove();
-    // Otherwise, try to use attr.label as the label
+
     } else if (angular.isDefined(attr.label)) {
+
+      // Otherwise, try to use attr.label as the label
       tabLabel = angular.element('<md-tab-label>').html(attr.label);
-    // If nothing is found, use the tab's content as the label
+
     } else {
+
+      // If nothing is found, use the tab's content as the label
       tabLabel = angular.element('<md-tab-label>')
-        .append(element.contents().remove());
+                        .append(element.contents().remove());
     }
 
     // Everything that's left as a child is the tab's content.

diff --git a/src/components/textField/demoBasicUsage/index.html b/src/components/textField/demoBasicUsage/index.html
@@ -3,25 +3,25 @@
 
   <md-toolbar class="theme-dark-tff md-medium-tall" style="padding-top:15px;">
     <div class="md-toolbar-tools dark">
-      <tf-float label="Title"  value="user.title"   ></tf-float>
-      <tf-float label="eMail"  value="user.email" type="email" ></tf-float>
+      <md-text-float label="Title"  ng-model="user.title"   ></md-text-float>
+      <md-text-float label="eMail"  ng-model="user.email" type="email" ></md-text-float>
     </div>
   </md-toolbar>
 
   <md-content>
     <form style="padding: 20px;">
-      <tf-float label="Company"       value="user.company"    disabled > </tf-float>
+      <md-text-float label="Company"       ng-model="user.company"    disabled > </md-text-float>
       <div class="row">
-          <tf-float label="FirstName" value="user.firstName"  > </tf-float>
-          <tf-float label="LastName"  value="user.lastName"   class="long"> </tf-float>
+          <md-text-float label="FirstName" ng-model="user.firstName"  > </md-text-float>
+          <md-text-float label="LastName"  ng-model="user.lastName"   class="long"> </md-text-float>
       </div>
-      <tf-float label="Address"       value="user.address"    > </tf-float>
+      <md-text-float label="Address"       ng-model="user.address"    > </md-text-float>
       <div class="row">
-        <tf-float label="City"        value="user.city"       > </tf-float>
-        <tf-float label="State"       value="user.state"      > </tf-float>
-        <tf-float label="Postal Code" value="user.postalCode" > </tf-float>
+        <md-text-float label="City"        ng-model="user.city"       > </md-text-float>
+        <md-text-float label="State"       ng-model="user.state"      > </md-text-float>
+        <md-text-float label="Postal Code" ng-model="user.postalCode" > </md-text-float>
       </div>
-      <tf-float label="Country"       value="user.country"    disabled > </tf-float>
+      <md-text-float label="Country"       ng-model="user.country"    disabled > </md-text-float>
     </form>
   </md-content>
 

diff --git a/src/components/textField/demoBasicUsage/script.js b/src/components/textField/demoBasicUsage/script.js
@@ -18,43 +18,6 @@ angular.module('textFieldDemo1', ['ngMaterial'])
        country:   "USA" ,
        postalCode : "94043"
     };
-  })
-
-  /**
-   *  Simple directive used to quickly construct `Floating Label` text fields
-   *  NOTE: the label field is considered a constant specified as an attribute
-   */
-  .directive('tfFloat', function() {
-    return {
-      restrict: 'E',
-      replace: true,
-      scope : {
-        fid : '@?',
-        value : '='
-      },
-      compile : function() {
-        return {
-          pre : function(scope, element, attrs) {
-            // transpose `disabled` flag
-            if ( angular.isDefined(attrs.disabled) ) {
-              element.attr('disabled', true);
-              scope.isDisabled = true;
-            }
+  });
 
-            // transpose the `label` value
-            scope.label = attrs.label || "";
-            scope.fid = scope.fid || scope.label;
 
-            // transpose optional `type` and `class` settings
-            element.attr('type', attrs.type || "text");
-            element.attr('class', attrs.class );
-          }
-        }
-      },
-      template:
-        '<md-input-group ng-disabled="isDisabled">' +
-          '<label for="{{fid}}">{{label}}</label>' +
-          '<md-input id="{{fid}}" ng-model="value">' +
-        '</md-input-group>'
-    };
-  });
diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js
@@ -5,15 +5,75 @@
  * Form
  */
 angular.module('material.components.textField', ['material.core'])
-  .directive('mdInputGroup', [
-    mdInputGroupDirective
-  ])
-  .directive('mdInput', [
-    '$mdUtil',
-    mdInputDirective
-  ]);
+       .directive('mdInputGroup', [ mdInputGroupDirective ])
+       .directive('mdInput', ['$mdUtil', mdInputDirective ])
+       .directive('mdTextFloat', [ mdTextFloatDirective ]);
+
+
 
 /**
+ * @ngdoc directive
+ * @name mdTextFloat
+ * @module material.components.textField
+ *
+ * @restrict E
+ *
+ * @description
+ * Use the `<md-text-float>` directive to quickly construct `Floating Label` text fields
+ *
+ * @param {string} label Attribute to specify the input text field hint.
+ * @param {string=} ng-model Optional value to assign as existing input text string
+ * @param {string=} type Optional value to define the type of input field. Defaults to string.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-text-float label="LastName" ng-model="user.lastName" > </md-text-float>
+ *
+ * <!-- Specify a read-only input field by using the `disabled` attribute -->
+ * <md-text-float label="Company"  ng-model="user.company"    disabled > </md-text-float>
+ *
+ * <!-- Specify an input type if desired. -->
+ * <md-text-float label="eMail"    ng-model="user.email" type="email" ></md-text-float>
+ * </hljs>
+ */
+function mdTextFloatDirective() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope : {
+      fid : '@?',
+      value : '=ngModel'
+    },
+    compile : function() {
+      return {
+        pre : function(scope, element, attrs) {
+          // transpose `disabled` flag
+          if ( angular.isDefined(attrs.disabled) ) {
+            element.attr('disabled', true);
+            scope.isDisabled = true;
+          }
+
+          // transpose the `label` value
+          scope.label = attrs.label || "";
+          scope.fid = scope.fid || scope.label;
+
+          // transpose optional `type` and `class` settings
+          element.attr('type', attrs.type || "text");
+          element.attr('class', attrs.class );
+        }
+      }
+    },
+    template:
+    '<md-input-group ng-disabled="isDisabled">' +
+    ' <label for="{{fid}}">{{label}}</label>' +
+    ' <md-input id="{{fid}}" ng-model="value">' +
+    '</md-input-group>'
+  };
+}
+
+/*
+ * @private
+ *
  * @ngdoc directive
  * @name mdInputGroup
  * @module material.components.textField
@@ -43,7 +103,9 @@ function mdInputGroupDirective() {
   };
 }
 
-/**
+/*
+ * @private
+ *
  * @ngdoc directive
  * @name mdInput
  * @module material.components.textField
@@ -110,3 +172,7 @@ function mdInputDirective($mdUtil) {
     }
   };
 }
+
+
+
+