fix(layout): allow layout-align without cross-axis or main-axis value

* fix parsing issue to allow single value * add demo to test omitting second value fixes #5996. closes #6003.
angular · Dec 2, 2015 · 6b1d758 · ngraef · Dec 2, 2015 · ngraef
1 parent 097b799
commit 6b1d758
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -633,7 +633,8 @@ function($scope, $attrs, $location, $rootScope) {
     direction: 'row'
   };
   $scope.layoutAlign = function() {
-    return $scope.layoutDemo.mainAxis + ' ' + $scope.layoutDemo.crossAxis;
+    return $scope.layoutDemo.mainAxis +
+     ($scope.layoutDemo.crossAxis ? ' ' + $scope.layoutDemo.crossAxis : '')
   };
 }])
 

diff --git a/docs/app/partials/layout-alignment.tmpl.html b/docs/app/partials/layout-alignment.tmpl.html
@@ -69,7 +69,8 @@
     <div>
       <md-subheader>Alignment in Layout Direction ({{layoutDemo.direction == 'row' ? 'horizontal' : 'vertical'}})</md-subheader>
       <md-radio-group ng-model="layoutDemo.mainAxis">
-        <md-radio-button value="start">start</md-radio-button>
+        <md-radio-button value="">none</md-radio-button>
+        <md-radio-button value="start">start (default)</md-radio-button>
         <md-radio-button value="center">center</md-radio-button>
         <md-radio-button value="end">end</md-radio-button>
         <md-radio-button value="space-around">space-around</md-radio-button>
@@ -79,10 +80,11 @@
     <div>
       <md-subheader>Alignment in Perpendicular Direction ({{layoutDemo.direction == 'column' ? 'horizontal' : 'vertical'}})</md-subheader>
       <md-radio-group ng-model="layoutDemo.crossAxis">
+        <md-radio-button value="none"><em>none</em></md-radio-button>
         <md-radio-button value="start">start</md-radio-button>
         <md-radio-button value="center">center</md-radio-button>
         <md-radio-button value="end">end</md-radio-button>
-        <md-radio-button value="stretch">stretch</md-radio-button>
+        <md-radio-button value="stretch">stretch (default)</md-radio-button>
       </md-radio-group>
     </div>
 

diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
@@ -15,7 +15,7 @@
     /**
      * Enable directive attribute-to-class conversions
      * Developers can use `<body md-layout-css />` to quickly
-     * disable the Layout directivees and prohibit the injection of Layout classnames
+     * disable the Layout directives and prohibit the injection of Layout classNames
      */
     enabled: true,
 
@@ -173,15 +173,6 @@
     };
   }
 
-  // *********************************************************************************
-  //
-  // These functions create registration functions for ngMaterial Layout attribute directives
-  // This provides easy translation to switch ngMaterial attribute selectors to
-  // CLASS selectors and directives; which has huge performance implications
-  // for IE Browsers
-  //
-  // *********************************************************************************
-
   /**
    * Tail-hook ngCloak to delay the uncloaking while Layout transformers
    * finish processing. Eliminates flicker with Material.Layoouts
@@ -210,6 +201,16 @@
     }];
   }
 
+
+  // *********************************************************************************
+  //
+  // These functions create registration functions for ngMaterial Layout attribute directives
+  // This provides easy translation to switch ngMaterial attribute selectors to
+  // CLASS selectors and directives; which has huge performance implications
+  // for IE Browsers
+  //
+  // *********************************************************************************
+
   /**
    * Creates a directive registration function where a possible dynamic attribute
    * value will be observed/watched.
@@ -427,14 +428,16 @@
     return found;
   }
 
-  function extractAlignAxis(value) {
+  function extractAlignAxis(config) {
+    config = (config || "");
+
     var axis = {
       main : "start",
       cross: "stretch"
-    };
+    }, values;
 
-    var values = (value || "").toLowerCase().trim().replace(WHITESPACE, "-").split("-");
-    if ( values.length == 3 ) {
+    values = (config || "").toLowerCase().trim().replace(WHITESPACE, "-").split("-");
+    if ( values[0] === "space" ) {
       values = [ values[0]+"-"+values[1],values[2] ];
     }