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

fix(layout): 'flex' change per recommended workarounds #6205

Closed
wants to merge 5 commits into from
Closed

fix(layout): 'flex' change per recommended workarounds #6205

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33dd0a1
fix(layout): 'flex' change per recommended workarounds
ThomasBurleson Dec 9, 2015
800dd43
fix(layout): 'flex' change per recommended workarounds
ThomasBurleson Dec 9, 2015
17c3466
fix(layout): 'flex' change per recommended workarounds
ThomasBurleson Dec 9, 2015
3fd83bd
fix(layout): 'flex' change per recommended workarounds
ThomasBurleson Dec 9, 2015
bb0fd20
fix(layout): 'flex' change per recommended workarounds
ThomasBurleson Dec 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@
<div layout="row" layout-align="center center">
<h4>With clickOutsideToClose option, drag down or press ESC to close</h4>
</div>
<md-list flex layout="row" layout-align="center center">
<md-list-item ng-repeat="item in items">
<div>
<md-list flex layout="row" layout-align="center center">
<md-list-item ng-repeat="item in items">

<md-button class="md-grid-item-content" ng-click="listItemClick($index)">
<md-icon md-svg-src="{{item.icon}}"></md-icon>
<div class="md-grid-text"> {{ item.name }} </div>
</md-button>
<md-button class="md-grid-item-content" ng-click="listItemClick($index)">
<md-icon md-svg-src="{{item.icon}}"></md-icon>
<div class="md-grid-text"> {{ item.name }} </div>
</md-button>

</md-list-item>
</md-list>
</md-list-item>
</md-list>
</div>
</md-bottom-sheet>
87 changes: 46 additions & 41 deletions src/components/checkbox/demoBasicUsage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,50 @@

<div ng-controller="AppCtrl" class="md-padding" ng-cloak>
<fieldset class="standard">
<legend>Using <code>ng-model</code></legend>
<div layout="row" layout-wrap>
<div flex="50">
<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
Checkbox 1: {{ data.cb1 }}
</md-checkbox>
<div>
<fieldset class="standard">
<legend>Using <code>ng-model</code></legend>
<div layout="column" layout-wrap layout-gt-sm="row" >
<div flex-xs flex="50">
<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
Checkbox 1: {{ data.cb1 }}
</md-checkbox>
</div>
<div flex-xs flex="50">
<div layout-xs="column" flex-xs="100">
<md-checkbox
ng-model="data.cb2"
aria-label="Checkbox 2"
ng-true-value="'yup'"
ng-false-value="'nope'"
class="md-warn md-align-top-left" flex>
Checkbox 2 (md-warn) <br/>
<span class="ipsum">
Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
sit amet dapibus tortor ligula non nibh.
</span>
<br/>
{{ data.cb2 }}
</md-checkbox>
</div>
</div>
<div flex-xs flex="50">
<md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
Checkbox: Disabled
</md-checkbox>
</div>
<div flex-xs flex="50">
<md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
Checkbox: Disabled, Checked
</md-checkbox>
</div>
<div flex-xs flex="50">
<md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
Checkbox (md-primary): No Ink
</md-checkbox>
</div>
</div>
<div flex="50">
<md-checkbox
ng-model="data.cb2"
aria-label="Checkbox 2"
ng-true-value="'yup'"
ng-false-value="'nope'"
class="md-warn md-align-top-left">
Checkbox 2 (md-warn) <br/>
<span class="ipsum">
Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
sit amet dapibus tortor ligula non nibh.
</span>
<br/>
{{ data.cb2 }}
</md-checkbox>
</div>
<div flex="50">
<md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
Checkbox: Disabled
</md-checkbox>
</div>
<div flex="50">
<md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
Checkbox: Disabled, Checked
</md-checkbox>
</div>
<div flex="50">
<md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
Checkbox (md-primary): No Ink
</md-checkbox>
</div>
</div>
</fieldset>
</fieldset>

</div>
</div>
4 changes: 4 additions & 0 deletions src/components/checkbox/demoBasicUsage/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
div.flex-xs {
min-height:40px;

}
.checkboxDemo1 div {
clear: both;
}
Expand Down
12 changes: 7 additions & 5 deletions src/components/checkbox/demoSyncing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div ng-controller="AppCtrl" class="md-padding" ng-cloak style="height:250px">
<div ng-controller="AppCtrl" class="md-padding" ng-cloak style="min-height:270px">
<div layout="row" layout-wrap>

<div flex="100" flex-gt-sm="50" layout="column">
<div flex>
<div>
<!--
In IE, we cannot apply flex directly to <fieldset>
@see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
Expand All @@ -21,7 +21,7 @@
</div>

<div flex="100" flex-gt-sm="50" layout="column">
<div flex>
<div >
<fieldset class="standard">
<legend>Using <code>&lt;input type="checkbox"&gt;</code></legend>
<div layout="row" layout-wrap flex>
Expand All @@ -37,9 +37,11 @@
</div>
</div>

<div flex="100">
<h2 class="md-title">Selected Items</h2>
<code style="display: block; padding: 8px;">{{selected | json}}</code>
</div>
</div>

<h2 class="md-title">Selected Items</h2>
<code style="display: block; padding: 8px;">{{selected | json}}</code>

</div>
10 changes: 5 additions & 5 deletions src/components/dialog/demoBasicUsage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@
</p>

<div class="dialog-demo-content" layout="row" layout-wrap layout-margin>
<md-button class="md-primary md-raised" ng-click="showAlert($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
<md-button class="md-primary md-raised" ng-click="showAlert($event)" flex="100" flex-gt-md="auto">
Alert Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex="100" flex-gt-md="auto">
Confirm Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex="100" flex-gt-md="auto">
Custom Dialog
</md-button>
<div hide-gt-sm layout="row" layout-align="center center" flex>
<div hide-gt-sm layout="row" layout-align="center center" flex="100">
<md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
</div>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex="100" flex-gt-md="auto">
Tab Dialog
</md-button>
</div>
Expand Down
12 changes: 7 additions & 5 deletions src/components/dialog/demoBasicUsage/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ angular.module('dialogDemo1', ['ngMaterial'])

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
$scope.status = ' ';
$scope.customFullscreen = $mdMedia('sm');
$scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');

$scope.showAlert = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
Expand Down Expand Up @@ -38,13 +38,15 @@ angular.module('dialogDemo1', ['ngMaterial'])
};

$scope.showAdvanced = function(ev) {
var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;

$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $mdMedia('sm') && $scope.customFullscreen
fullscreen: useFullScreen
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
Expand All @@ -55,9 +57,9 @@ angular.module('dialogDemo1', ['ngMaterial'])


$scope.$watch(function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block needs a comment as to what it's doing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

existing code.

return $mdMedia('sm');
}, function(sm) {
$scope.customFullscreen = (sm === true);
return $mdMedia('xs') || $mdMedia('sm');
}, function(wantsFullScreen) {
$scope.customFullscreen = (wantsFullScreen === true);
});

};
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialog/demoOpenFromCloseTo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<span id="left">left</span>
</div>

<div layout="column" layout-align="center start" layout-padding>
<div layout="column" layout-align="center start" layout-padding flex>
<p class="inset">
A dialog can specify its origin and target with <code>openFrom</code> and
<code>closeTo</code> properties.
Expand Down
2 changes: 1 addition & 1 deletion src/core/services/layout/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
var SUFFIXES = /(-gt)?-(sm|md|lg)/g;
var WHITESPACE = /\s+/g;

var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink'];
var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];
var LAYOUT_OPTIONS = ['row', 'column'];
var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];
var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];
Expand Down
12 changes: 10 additions & 2 deletions src/core/services/layout/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@
display: -ms-flexbox;
display: flex;
}
.layout#{$name}-column { flex-direction: column; }
.layout#{$name}-row { flex-direction: row; }
.layout#{$name}-column { flex-direction: column; flex-shrink: 0; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't change any existing behavior?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does not appear to change anything. But I also can not validate its value. I will redact this for now.

.layout#{$name}-row { flex-direction: row; }
}

@mixin flex-properties-for-name($name: null) {
Expand All @@ -131,6 +131,7 @@
.#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
.#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
.#{$flexName}-noshrink { flex: 1 0 auto; box-sizing: border-box; }
.#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }

// (1-20) * 5 = 0-100%
@for $i from 0 through 20 {
Expand Down Expand Up @@ -510,3 +511,10 @@
}

}

// IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More background on this? What it's fixing and a reference link for the fix would be good.

@media screen\0 {
.flex, .flex-xs, .flex-gt-xs, .flex-sm, .flex-gt-sm, .flex-md, .flex-gt-md, .flex-lg, .flex-gt-lg, .flex-xl {
flex: 1 1 0%;
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jelbourn - this is intended as an hack for IE-only CSS .

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still want more info commented on it.