Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 77c050a

Browse files
ThomasBurlesonThomasBurleson
committed
fix(layouts): improve logic for layout > flex specificities
improve specificity for layout > flex with breakpoints and variants. fix demos and docs with expected layout classes
1 parent c47acca commit 77c050a

File tree

6 files changed

+62
-43
lines changed

6 files changed

+62
-43
lines changed

‎docs/app/css/layout-demo.css

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,32 @@ demo-include {
88
opacity: 0.9;
99
color: white;
1010
}
11-
.colorNested > div:nth-child(1)
11+
12+
.colorNested-noPad> div {
13+
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.26);
14+
opacity: 0.9;
15+
color: white;
16+
}
17+
18+
.colorNested > div:nth-child(1),
19+
.colorNested-noPad > div:nth-child(1)
1220
{
1321
background-color: #009688;
1422
}
15-
.colorNested > div:nth-child(2) {
23+
.colorNested> div:nth-child(2),
24+
.colorNested-noPad> div:nth-child(2) {
1625
background-color: #3949ab;
1726
}
18-
.colorNested > div:nth-child(3) {
27+
.colorNested> div:nth-child(3),
28+
.colorNested-noPad> div:nth-child(3) {
1929
background-color: #9c27b0;
2030
}
21-
.colorNested > div:nth-child(4) {
31+
.colorNested > div:nth-child(4),
32+
.colorNested-noPad > div:nth-child(4) {
2233
background-color: #8bc34a;
2334
}
24-
.colorNested > div:nth-child(5) {
35+
.colorNested > div:nth-child(5),
36+
.colorNested-noPad > div:nth-child(5) {
2537
background-color: #deb867;
2638
}
2739

‎docs/app/css/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,7 @@ md-tabs.demo-source-tabs .active md-tab-label {
522522
min-height: 224px;
523523
}
524524
.layout-content .small-demo .demo-content > div[layout],
525-
.layout-options .small-demo .demo-content > div[layout] {
525+
.layout-options .small-demo .demo-content > div.layout {
526526
min-height: auto !important;
527527
max-height: auto !important;
528528
height: 128px !important;

‎docs/app/partials/layout-options.tmpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
<docs-demo demo-title="Wrap" class="small-demo">
8080
<demo-file name="index.html">
81-
<div layout="row" layout-wrap class="colorNested">
81+
<div layout="row" layout-wrap class="colorNested-noPad">
8282
<div flex="33">[flex=33]</div>
8383
<div flex="66">[flex=67]</div>
8484
<div flex="66">[flex=67]</div>

‎src/core/services/layout/layout.js

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -50,32 +50,28 @@
5050
*/
5151
.factory("$$mdLayout", function() {
5252
return {
53-
/**
54-
* Do NOT remove the original layout Attribute selectors
55-
* after translation injection; or the media breakpoints will not fire
56-
*/
5753
removeAttributes : true
5854

5955
};
6056
})
6157

6258
// Attribute directives with optional value(s)
6359

64-
.directive('layout' , attributeWithObserve('layout' , true) )
65-
.directive('layoutSm' , attributeWithObserve('layout-sm' , true) )
66-
.directive('layoutGtSm' , attributeWithObserve('layout-gt-sm', true) )
67-
.directive('layoutMd' , attributeWithObserve('layout-md' , true) )
68-
.directive('layoutGtMd' , attributeWithObserve('layout-gt-md', true) )
69-
.directive('layoutLg' , attributeWithObserve('layout-lg' , true) )
70-
.directive('layoutGtLg' , attributeWithObserve('layout-gt-lg', true) )
71-
72-
.directive('flex' , attributeWithObserve('flex' , true) )
73-
.directive('flexSm' , attributeWithObserve('flex-sm' , true) )
74-
.directive('flexGtSm' , attributeWithObserve('flex-gt-sm' , true) )
75-
.directive('flexMd' , attributeWithObserve('flex-md' , true) )
76-
.directive('flexGtMd' , attributeWithObserve('flex-gt-md' , true) )
77-
.directive('flexLg' , attributeWithObserve('flex-lg' , true) )
78-
.directive('flexGtLg' , attributeWithObserve('flex-gt-lg' , true) )
60+
.directive('layout' , attributeWithObserve('layout' ) )
61+
.directive('layoutSm' , attributeWithObserve('layout-sm' ) )
62+
.directive('layoutGtSm' , attributeWithObserve('layout-gt-sm') )
63+
.directive('layoutMd' , attributeWithObserve('layout-md' ) )
64+
.directive('layoutGtMd' , attributeWithObserve('layout-gt-md') )
65+
.directive('layoutLg' , attributeWithObserve('layout-lg' ) )
66+
.directive('layoutGtLg' , attributeWithObserve('layout-gt-lg') )
67+
68+
.directive('flex' , attributeWithObserve('flex' ) )
69+
.directive('flexSm' , attributeWithObserve('flex-sm' ) )
70+
.directive('flexGtSm' , attributeWithObserve('flex-gt-sm' ) )
71+
.directive('flexMd' , attributeWithObserve('flex-md' ) )
72+
.directive('flexGtMd' , attributeWithObserve('flex-gt-md' ) )
73+
.directive('flexLg' , attributeWithObserve('flex-lg' ) )
74+
.directive('flexGtLg' , attributeWithObserve('flex-gt-lg' ) )
7975

8076
// Attribute directives with optional value(s) but directiveName is NOT added as a class
8177

@@ -155,9 +151,8 @@
155151
* Creates a directive registration function where a possbile dynamic attribute value will
156152
* be observed/watched.
157153
* @param {string} className attribute name; eg `md-layout-gt-md` with value ="row"
158-
* @param {boolean=} addDirectiveAsClass
159154
*/
160-
function attributeWithObserve(className, addDirectiveAsClass) {
155+
function attributeWithObserve(className) {
161156

162157
return ['$mdUtil', '$$mdLayout', '$document', '$parse', '$interpolate', function(_$mdUtil_, _$$mdLayout_, $document, _$parse_, _$interpolate_) {
163158
$mdUtil = _$mdUtil_;
@@ -204,6 +199,7 @@
204199
// Add special layout class: either '.md-layout-row' or '.md-layout-column'
205200
if ( addImmediate ) element.addClass( $mdUtil.supplant('md-layout{0}-{1}',[it,attrValue]) );
206201
if ( watchValue ) attrs.$observe( normalizedAttr, updateClassFn );
202+
if ( $$mdLayout.removeAttributes ) element.removeAttr(className);
207203

208204
injected = true;
209205
}
@@ -224,10 +220,11 @@
224220
var watchValue = needsInterpolation(attrValue);
225221

226222
// Add transformed class selector(s)
227-
if (addDirectiveAsClass) element.addClass(className);
228223

229224
if ( addImmediate ) element.addClass(className + "-" + attrValue);
230225
if ( watchValue ) attrs.$observe( normalizedAttr, updateClassFn );
226+
if ( !addImmediate && !watchValue ) element.addClass(className);
227+
231228
if ( $$mdLayout.removeAttributes ) element.removeAttr(className);
232229
}
233230

‎src/core/services/layout/layout.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -193,15 +193,19 @@
193193
$value : #{$i * 5 + '%'};
194194

195195
.#{$flexName}-#{$i * 5} { flex: 0 0 #{$value}; }
196+
197+
.md-layout-row > .#{$flexName}-#{$i * 5},
196198
.md-layout#{$name}-row > .#{$flexName}-#{$i * 5} { flex: 0 0 #{$value}; max-width: #{$value}; max-height: 100%; }
197-
.md-layout#{$name}-column > .#{$flexName}-#{$i * 5}, { flex: 0 0 #{$value}; max-width: 100%; max-height: #{$value}; }
199+
200+
.md-layout-column > .#{$flexName}-#{$i * 5},
201+
.md-layout#{$name}-column > .#{$flexName}-#{$i * 5} { flex: 0 0 #{$value}; max-width: 100%; max-height: #{$value}; }
198202
}
199203

200-
.md-layout#{$name}-row {
204+
.md-layout-row, .md-layout#{$name}-row {
201205
> .#{$flexName}-33 , > .#{$flexName}-34 { flex: 0 0 33%; max-width: 33%; max-height: 100%; }
202206
> .#{$flexName}-66 , > .#{$flexName}-67 { flex: 0 0 67%; max-width: 67%; max-height: 100%; }
203207
}
204-
.md-layout#{$name}-column {
208+
.md-layout-column, .md-layout#{$name}-column {
205209
> .#{$flexName}-33 , > .#{$flexName}-34 { flex: 0 0 33%; max-width: 100%; max-height: 33%; }
206210
> .#{$flexName}-66 , > .#{$flexName}-67 { flex: 0 0 67%; max-width: 100%; max-height: 67%; }
207211
}
@@ -386,8 +390,8 @@
386390
@include offset-for-name($name);
387391
@include layout-align-for-name($name);
388392

389-
@include layout-for-name($name);
390393
@include flex-properties-for-name($name);
394+
@include layout-for-name($name);
391395
}
392396

393397
/*

‎src/core/services/layout/layout.spec.js

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,11 @@ describe('layout directives', function() {
1515
"space-between", "space-between center", "space-between start", "space-between end",
1616
"start center", "start start", "start end"];
1717
var mappings = [
18-
{ attribute: 'flex', suffixes: suffixes, values: flexValues, addDirectiveAsClass: true, testStandAlone: true},
18+
{ attribute: 'flex', suffixes: suffixes, values: flexValues, testStandAlone: true},
1919
{ attribute: 'flex-order', suffixes: suffixes, values: flexOrderValues },
2020
{ attribute: 'offset', suffixes: suffixes, values: offsetValues },
2121
{ attribute: 'hide', suffixes: suffixes, testStandAlone: true },
2222
{ attribute: 'show', suffixes: suffixes, testStandAlone: true },
23-
//{ attribute: 'layout', suffixes: suffixes, values: directionValues, addDirectiveAsClass: true, testStandAlone: true },
2423
{ attribute: 'layout-align', suffixes: suffixes, values: alignmentValues },
2524
{ attribute: 'layout-padding', testStandAlone: true },
2625
{ attribute: 'layout-margin', testStandAlone: true },
@@ -29,15 +28,17 @@ describe('layout directives', function() {
2928
];
3029

3130
// Run all the tests; iterating the mappings...
31+
testWithSuffix('layout', suffixes, directionValues);
3232

3333
for (var i = 0; i < mappings.length; i++) {
3434
var map = mappings[i];
3535

3636
if (map.testStandAlone) testSimpleDirective(map.attribute);
37-
if (map.values) testWithSuffixAndValue(map.attribute, map.values, undefined, map.addDirectiveAsClass);
38-
if (map.suffixes) testWithSuffix(map.attribute, map.suffixes, map.values, map.testStandAlone, map.addDirectiveAsClass);
37+
if (map.values) testWithSuffixAndValue(map.attribute, map.values, undefined );
38+
if (map.suffixes) testWithSuffix(map.attribute, map.suffixes, map.values, map.testStandAlone );
3939
}
4040

41+
4142
/** Test a simple layout directive to validate that the layout class is added. */
4243
function testSimpleDirective(attribute, expectedClass) {
4344
// default fallback is attribute as class...
@@ -50,8 +51,7 @@ describe('layout directives', function() {
5051
}
5152

5253
/** Test directives with 'sm', 'gt-sm', 'md', 'gt-md', 'lg', and 'gt-lg' suffixes */
53-
function testWithSuffixAndValue(attribute, values, suffix, addDirectiveAsClass) {
54-
54+
function testWithSuffixAndValue(attribute, values, suffix) {
5555
for (var j = 0; j < values.length; j++) {
5656
var value = values[j].toString();
5757
var attr = suffix ? attribute + '-' + suffix : attribute;
@@ -71,10 +71,16 @@ describe('layout directives', function() {
7171
* @param {string} attrClass Full attribute name; eg 'layout-gt-lg'
7272
* @param {string} attrValue HTML directive; eg "column"
7373
*
74-
* @returns {string} Class name(s) to be added; e.g., `layout-gt-lg layout-gt-lg-column`.
74+
* @returns {string} Class name(s) to be added; e.g., `layout-gt-lg-column`.
7575
*/
7676
function buildExpectedClass(attrClass, attrValue) {
77-
if (addDirectiveAsClass) attrClass += ' ' + attrClass;
77+
78+
// Layout attributes have special md-layout prefix class names
79+
angular.forEach([''].concat(suffixes), function(it){
80+
var layout = (it ? "layout-" : "layout") + it;
81+
if (attrClass == layout) attrClass = "md-" + attrClass;
82+
});
83+
7884
return attrClass + "-" + attrValue.replace(/\s+/g, "-");
7985
}
8086

@@ -97,13 +103,13 @@ describe('layout directives', function() {
97103
* Test directive as simple with media suffix and with associated values.
98104
* E.g., layout-gt-md="row"
99105
*/
100-
function testWithSuffix(attribute, suffixes, values, testStandAlone, addDirectiveAsClass) {
106+
function testWithSuffix(attribute, suffixes, values, testStandAlone) {
101107
for (var j = 0; j < suffixes.length; j++) {
102108
var suffix = suffixes[j];
103109
var attr = attribute + '-' + suffix;
104110

105111
if (testStandAlone) testSimpleDirective(attr);
106-
if (values) testWithSuffixAndValue(attribute, values, suffix, addDirectiveAsClass);
112+
if (values) testWithSuffixAndValue(attribute, values, suffix);
107113
}
108114
}
109115
});

0 commit comments

Comments
 (0)