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

Commit

Permalink
fix(layouts): improve logic for layout > flex specificities
Browse files Browse the repository at this point in the history 
improve specificity for layout > flex with breakpoints and variants.
fix demos and docs with expected layout classes
  • Loading branch information
@ThomasBurleson
ThomasBurleson committed Oct 1, 2015
1 parent c47acca commit 77c050a
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 43 deletions.
22 changes: 17 additions & 5 deletions docs/app/css/layout-demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,32 @@ demo-include {
opacity: 0.9;
color: white;
}
.colorNested > div:nth-child(1)

.colorNested-noPad> div {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.26);
opacity: 0.9;
color: white;
}

.colorNested > div:nth-child(1),
.colorNested-noPad > div:nth-child(1)
{
background-color: #009688;
}
.colorNested > div:nth-child(2) {
.colorNested> div:nth-child(2),
.colorNested-noPad> div:nth-child(2) {
background-color: #3949ab;
}
.colorNested > div:nth-child(3) {
.colorNested> div:nth-child(3),
.colorNested-noPad> div:nth-child(3) {
background-color: #9c27b0;
}
.colorNested > div:nth-child(4) {
.colorNested > div:nth-child(4),
.colorNested-noPad > div:nth-child(4) {
background-color: #8bc34a;
}
.colorNested > div:nth-child(5) {
.colorNested > div:nth-child(5),
.colorNested-noPad > div:nth-child(5) {
background-color: #deb867;
}

Expand Down
2 changes: 1 addition & 1 deletion docs/app/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@ md-tabs.demo-source-tabs .active md-tab-label {
min-height: 224px;
}
.layout-content .small-demo .demo-content > div[layout],
.layout-options .small-demo .demo-content > div[layout] {
.layout-options .small-demo .demo-content > div.layout {
min-height: auto !important;
max-height: auto !important;
height: 128px !important;
Expand Down
2 changes: 1 addition & 1 deletion docs/app/partials/layout-options.tmpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@

<docs-demo demo-title="Wrap" class="small-demo">
<demo-file name="index.html">
<div layout="row" layout-wrap class="colorNested">
<div layout="row" layout-wrap class="colorNested-noPad">
<div flex="33">[flex=33]</div>
<div flex="66">[flex=67]</div>
<div flex="66">[flex=67]</div>
Expand Down
41 changes: 19 additions & 22 deletions src/core/services/layout/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,32 +50,28 @@
*/
.factory("$$mdLayout", function() {
return {
/**
* Do NOT remove the original layout Attribute selectors
* after translation injection; or the media breakpoints will not fire
*/
removeAttributes : true

};
})

// Attribute directives with optional value(s)

.directive('layout' , attributeWithObserve('layout' , true) )
.directive('layoutSm' , attributeWithObserve('layout-sm' , true) )
.directive('layoutGtSm' , attributeWithObserve('layout-gt-sm', true) )
.directive('layoutMd' , attributeWithObserve('layout-md' , true) )
.directive('layoutGtMd' , attributeWithObserve('layout-gt-md', true) )
.directive('layoutLg' , attributeWithObserve('layout-lg' , true) )
.directive('layoutGtLg' , attributeWithObserve('layout-gt-lg', true) )

.directive('flex' , attributeWithObserve('flex' , true) )
.directive('flexSm' , attributeWithObserve('flex-sm' , true) )
.directive('flexGtSm' , attributeWithObserve('flex-gt-sm' , true) )
.directive('flexMd' , attributeWithObserve('flex-md' , true) )
.directive('flexGtMd' , attributeWithObserve('flex-gt-md' , true) )
.directive('flexLg' , attributeWithObserve('flex-lg' , true) )
.directive('flexGtLg' , attributeWithObserve('flex-gt-lg' , true) )
.directive('layout' , attributeWithObserve('layout' ) )
.directive('layoutSm' , attributeWithObserve('layout-sm' ) )
.directive('layoutGtSm' , attributeWithObserve('layout-gt-sm') )
.directive('layoutMd' , attributeWithObserve('layout-md' ) )
.directive('layoutGtMd' , attributeWithObserve('layout-gt-md') )
.directive('layoutLg' , attributeWithObserve('layout-lg' ) )
.directive('layoutGtLg' , attributeWithObserve('layout-gt-lg') )

.directive('flex' , attributeWithObserve('flex' ) )
.directive('flexSm' , attributeWithObserve('flex-sm' ) )
.directive('flexGtSm' , attributeWithObserve('flex-gt-sm' ) )
.directive('flexMd' , attributeWithObserve('flex-md' ) )
.directive('flexGtMd' , attributeWithObserve('flex-gt-md' ) )
.directive('flexLg' , attributeWithObserve('flex-lg' ) )
.directive('flexGtLg' , attributeWithObserve('flex-gt-lg' ) )

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

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

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

injected = true;
}
Expand All @@ -224,10 +220,11 @@
var watchValue = needsInterpolation(attrValue);

// Add transformed class selector(s)
if (addDirectiveAsClass) element.addClass(className);

if ( addImmediate ) element.addClass(className + "-" + attrValue);
if ( watchValue ) attrs.$observe( normalizedAttr, updateClassFn );
if ( !addImmediate && !watchValue ) element.addClass(className);

if ( $$mdLayout.removeAttributes ) element.removeAttr(className);
}

Expand Down
12 changes: 8 additions & 4 deletions src/core/services/layout/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,15 +193,19 @@
$value : #{$i * 5 + '%'};

.#{$flexName}-#{$i * 5} { flex: 0 0 #{$value}; }

.md-layout-row > .#{$flexName}-#{$i * 5},
.md-layout#{$name}-row > .#{$flexName}-#{$i * 5} { flex: 0 0 #{$value}; max-width: #{$value}; max-height: 100%; }
.md-layout#{$name}-column > .#{$flexName}-#{$i * 5}, { flex: 0 0 #{$value}; max-width: 100%; max-height: #{$value}; }

.md-layout-column > .#{$flexName}-#{$i * 5},
.md-layout#{$name}-column > .#{$flexName}-#{$i * 5} { flex: 0 0 #{$value}; max-width: 100%; max-height: #{$value}; }
}

.md-layout#{$name}-row {
.md-layout-row, .md-layout#{$name}-row {
> .#{$flexName}-33 , > .#{$flexName}-34 { flex: 0 0 33%; max-width: 33%; max-height: 100%; }
> .#{$flexName}-66 , > .#{$flexName}-67 { flex: 0 0 67%; max-width: 67%; max-height: 100%; }
}
.md-layout#{$name}-column {
.md-layout-column, .md-layout#{$name}-column {
> .#{$flexName}-33 , > .#{$flexName}-34 { flex: 0 0 33%; max-width: 100%; max-height: 33%; }
> .#{$flexName}-66 , > .#{$flexName}-67 { flex: 0 0 67%; max-width: 100%; max-height: 67%; }
}
Expand Down Expand Up @@ -386,8 +390,8 @@
@include offset-for-name($name);
@include layout-align-for-name($name);

@include layout-for-name($name);
@include flex-properties-for-name($name);
@include layout-for-name($name);
}

/*
Expand Down
26 changes: 16 additions & 10 deletions src/core/services/layout/layout.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,11 @@ describe('layout directives', function() {
"space-between", "space-between center", "space-between start", "space-between end",
"start center", "start start", "start end"];
var mappings = [
{ attribute: 'flex', suffixes: suffixes, values: flexValues, addDirectiveAsClass: true, testStandAlone: true},
{ attribute: 'flex', suffixes: suffixes, values: flexValues, testStandAlone: true},
{ attribute: 'flex-order', suffixes: suffixes, values: flexOrderValues },
{ attribute: 'offset', suffixes: suffixes, values: offsetValues },
{ attribute: 'hide', suffixes: suffixes, testStandAlone: true },
{ attribute: 'show', suffixes: suffixes, testStandAlone: true },
//{ attribute: 'layout', suffixes: suffixes, values: directionValues, addDirectiveAsClass: true, testStandAlone: true },
{ attribute: 'layout-align', suffixes: suffixes, values: alignmentValues },
{ attribute: 'layout-padding', testStandAlone: true },
{ attribute: 'layout-margin', testStandAlone: true },
Expand All @@ -29,15 +28,17 @@ describe('layout directives', function() {
];

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

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

if (map.testStandAlone) testSimpleDirective(map.attribute);
if (map.values) testWithSuffixAndValue(map.attribute, map.values, undefined, map.addDirectiveAsClass);
if (map.suffixes) testWithSuffix(map.attribute, map.suffixes, map.values, map.testStandAlone, map.addDirectiveAsClass);
if (map.values) testWithSuffixAndValue(map.attribute, map.values, undefined );
if (map.suffixes) testWithSuffix(map.attribute, map.suffixes, map.values, map.testStandAlone );
}


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

/** Test directives with 'sm', 'gt-sm', 'md', 'gt-md', 'lg', and 'gt-lg' suffixes */
function testWithSuffixAndValue(attribute, values, suffix, addDirectiveAsClass) {

function testWithSuffixAndValue(attribute, values, suffix) {
for (var j = 0; j < values.length; j++) {
var value = values[j].toString();
var attr = suffix ? attribute + '-' + suffix : attribute;
Expand All @@ -71,10 +71,16 @@ describe('layout directives', function() {
* @param {string} attrClass Full attribute name; eg 'layout-gt-lg'
* @param {string} attrValue HTML directive; eg "column"
*
* @returns {string} Class name(s) to be added; e.g., `layout-gt-lg layout-gt-lg-column`.
* @returns {string} Class name(s) to be added; e.g., `layout-gt-lg-column`.
*/
function buildExpectedClass(attrClass, attrValue) {
if (addDirectiveAsClass) attrClass += ' ' + attrClass;

// Layout attributes have special md-layout prefix class names
angular.forEach([''].concat(suffixes), function(it){
var layout = (it ? "layout-" : "layout") + it;
if (attrClass == layout) attrClass = "md-" + attrClass;
});

return attrClass + "-" + attrValue.replace(/\s+/g, "-");
}

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

if (testStandAlone) testSimpleDirective(attr);
if (values) testWithSuffixAndValue(attribute, values, suffix, addDirectiveAsClass);
if (values) testWithSuffixAndValue(attribute, values, suffix);
}
}
});
Expand Down

0 comments on commit 77c050a

Please sign in to comment.