Skip to content

Commit cb614ed

Browse files
ThomasBurlesonmmalerba
ThomasBurleson
authored and
mmalerba
committed
fix(fxFlex): fxFlex=auto with overlapping breakpoints activated (angular#183)
Layout changes from gt-sm will not restore default layout with auto fixes angular#135.
1 parent aa0dab4 commit cb614ed

File tree

7 files changed

+149
-24
lines changed

7 files changed

+149
-24
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"@types/glob": "^5.0.29",
6464
"@types/gulp": "^3.8.29",
6565
"@types/hammerjs": "~2.0.33",
66-
"@types/jasmine": "^2.2.34",
66+
"@types/jasmine": "2.5.38",
6767
"@types/merge2": "0.0.28",
6868
"@types/minimist": "^1.1.28",
6969
"@types/node": "^6.0.45",

‎src/demo-app/app/docs-layout-responsive/DemosResponsiveLayouts.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,7 @@ import {DemoResponsiveStyle} from "./responsiveStyle.demo";
3535
DemoResponsiveFlexDirectives,
3636
DemoResponsiveFlexOrder,
3737
DemoResponsiveShowHide,
38-
DemoResponsiveStyle
39-
38+
DemoResponsiveStyle,
4039
],
4140
imports : [
4241
CommonModule,

‎src/demo-app/app/github-issues/DemosGithubIssues.ts‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,32 @@ import {Component} from '@angular/core';
33
@Component({
44
selector: 'demos-github-issues',
55
template: `
6-
<demo-issue-5345></demo-issue-5345>
7-
<demo-issue-9897></demo-issue-9897>
8-
<demo-issue-181></demo-issue-181>
9-
`
6+
<demo-issue-5345></demo-issue-5345>
7+
<demo-issue-9897></demo-issue-9897>
8+
<demo-issue-181></demo-issue-181>
9+
<demo-issue-135> </demo-issue-135>
10+
`
1011
})
1112
export class DemosGithubIssues {
1213
}
1314

14-
import {NgModule} from '@angular/core';
15-
import {CommonModule} from "@angular/common";
16-
import {MaterialModule} from "@angular/material";
17-
import {FlexLayoutModule} from "../../../lib"; // `gulp build:components` to deploy to node_modules manually
15+
import {NgModule} from '@angular/core';
16+
import {CommonModule} from "@angular/common";
17+
import {MaterialModule} from "@angular/material";
18+
import {FlexLayoutModule} from "../../../lib"; // `gulp build:components` to deploy to node_modules manually
1819

19-
import {DemoIssue5345} from "./issue.5345.demo";
20-
import {DemoIssue9897} from "./issue.9897.demo";
21-
import {DemoIssue181} from './issue.181.demo';
20+
import {DemoIssue5345} from "./issue.5345.demo";
21+
import {DemoIssue9897} from "./issue.9897.demo";
22+
import {DemoIssue181} from './issue.181.demo';
23+
import {DemoIssue135} from "./issue.135.demo";
2224

2325
@NgModule({
2426
declarations: [
2527
DemosGithubIssues, // used by the Router with the root app component
2628
DemoIssue5345,
2729
DemoIssue9897,
28-
DemoIssue181
30+
DemoIssue181,
31+
DemoIssue135
2932
],
3033
imports: [
3134
CommonModule,

‎src/demo-app/app/github-issues/issue.135.demo.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {Component, OnInit, OnDestroy} from '@angular/core';
2+
import {Subscription} from "rxjs/Subscription";
3+
import 'rxjs/add/operator/filter';
4+
5+
import {MediaChange} from "../../../lib/media-query/media-change";
6+
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
7+
8+
@Component({
9+
selector: 'demo-issue-135',
10+
styleUrls : [
11+
'../demo-app/material2.css'
12+
],
13+
template: `
14+
<md-card class="card-demo" >
15+
<md-card-title><a href="https://github.com/angular/flex-layout/issues/135" target="_blank">Issue #135</a></md-card-title>
16+
<md-card-subtitle>Layout with fxFlex="auto" not restoring max-height values properly:</md-card-subtitle>
17+
<md-card-content>
18+
<div class="containerX">
19+
<div fxLayout="column" class="coloredContainerX box">
20+
<div fxFlex="auto" fxFlex.gt-sm="70" > &lt;div fxFlex="auto" fxFlex.gt-sm="70" &gt; </div>
21+
<div fxFlex="auto" fxFlex.gt-sm="14.6"> &lt;div fxFlex="auto" fxFlex.gt-sm="14.6"&gt; </div>
22+
<div fxFlex="auto" fxFlex.gt-sm="15.4"> &lt;div fxFlex="auto" fxFlex.gt-sm="15.4"&gt; </div>
23+
</div>
24+
</div>
25+
</md-card-content>
26+
<md-card-footer style="width:95%">
27+
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
28+
</md-card-footer>
29+
</md-card>
30+
`
31+
})
32+
export class DemoIssue135 implements OnInit, OnDestroy {
33+
public activeMediaQuery = "";
34+
private _watcher : Subscription;
35+
36+
constructor(private _media$:ObservableMedia) { }
37+
38+
ngOnInit() {
39+
this._watcher = this.watchMQChanges();
40+
}
41+
42+
ngOnDestroy() {
43+
this._watcher.unsubscribe();
44+
}
45+
46+
47+
watchMQChanges() {
48+
return this._media$.subscribe((change:MediaChange) => {
49+
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
50+
this.activeMediaQuery = value;
51+
});
52+
}
53+
}

‎src/lib/flexbox/api/flex.spec.ts‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ import {MatchMedia} from '../../media-query/match-media';
1616
import {FlexLayoutModule} from '../_module';
1717

1818
import {__platform_browser_private__} from '@angular/platform-browser';
19-
import {customMatchers, expect } from '../../utils/testing/custom-matchers';
19+
import {customMatchers, expect} from '../../utils/testing/custom-matchers';
2020
import {
2121
makeExpectDOMFrom,
2222
makeExpectDOMForQuery,
23-
makeCreateTestComponent
23+
makeCreateTestComponent,
24+
expectNativeEl,
25+
queryFor
2426
} from '../../utils/testing/helpers';
2527

2628
const getDOM = __platform_browser_private__.getDOM;
@@ -31,6 +33,10 @@ describe('flex directive', () => {
3133
let expectDOMFrom = makeExpectDOMFrom(() => TestFlexComponent);
3234
let expectDomForQuery = makeExpectDOMForQuery(() => TestFlexComponent);
3335
let componentWithTemplate = makeCreateTestComponent(() => TestFlexComponent);
36+
let activateMediaQuery = (alias, allowOverlaps?: boolean) => {
37+
let matchMedia: MockMatchMedia = fixture.debugElement.injector.get(MatchMedia);
38+
matchMedia.activate(alias, allowOverlaps);
39+
};
3440

3541
beforeEach(() => {
3642
jasmine.addMatchers(customMatchers);
@@ -60,10 +66,10 @@ describe('flex directive', () => {
6066

6167
let dom = fRef.debugElement.children[0].nativeElement;
6268
let isBox = getDOM().hasStyle(dom, 'box-sizing', 'border-box');
63-
let hasFlex = getDOM().hasStyle(dom, 'flex', '1 1 1e-09px') || // IE
64-
getDOM().hasStyle(dom, 'flex', '1 1 1e-9px') || // Chrome
65-
getDOM().hasStyle(dom, 'flex', '1 1 0.000000001px') || // Safari
66-
getDOM().hasStyle(dom, 'flex', '1 1 0px');
69+
let hasFlex = getDOM().hasStyle(dom, 'flex', '1 1 1e-09px') || // IE
70+
getDOM().hasStyle(dom, 'flex', '1 1 1e-9px') || // Chrome
71+
getDOM().hasStyle(dom, 'flex', '1 1 0.000000001px') || // Safari
72+
getDOM().hasStyle(dom, 'flex', '1 1 0px');
6773

6874
expect(isBox).toBeTruthy();
6975
expect(hasFlex).toBeTruthy();
@@ -104,7 +110,7 @@ describe('flex directive', () => {
104110
});
105111
it('should work with calc values', () => {
106112
// @see http://caniuse.com/#feat=calc for IE issues with calc()
107-
if ( !isIE ) {
113+
if (!isIE) {
108114
expectDOMFrom(`<div fxFlex="calc(30vw - 10px)"></div>`).toHaveCssStyle({
109115
'box-sizing': 'border-box',
110116
'flex': '1 1 calc(30vw - 10px)'
@@ -246,7 +252,70 @@ describe('flex directive', () => {
246252
});
247253
});
248254

255+
describe('with responsive features', () => {
249256

257+
it('should initialize the component with the largest matching breakpoint', () => {
258+
fixture = componentWithTemplate(`
259+
<div fxFlex="auto"
260+
fxFlex.gt-xs="33%"
261+
fxFlex.gt-sm="50%" >
262+
</div>
263+
`);
264+
265+
activateMediaQuery('xl');
266+
expectNativeEl(fixture).toHaveCssStyle({
267+
'flex': '1 1 50%'
268+
});
269+
270+
activateMediaQuery('sm');
271+
expectNativeEl(fixture).toHaveCssStyle({
272+
'flex': '1 1 33%'
273+
});
274+
});
275+
276+
it('should fallback the default layout properly', () => {
277+
fixture = componentWithTemplate(`
278+
<div fxLayout="column">
279+
<div fxFlex="auto" fxFlex.gt-sm="50" > </div>
280+
<div fxFlex="auto" fxFlex.gt-sm="24.4"> </div>
281+
<div fxFlex="auto" fxFlex.gt-sm="25.6"> </div>
282+
</div>
283+
`);
284+
285+
activateMediaQuery('sm', true);
286+
fixture.detectChanges();
287+
288+
let nodes = queryFor(fixture, "[fxFlex]");
289+
expect(nodes.length).toEqual(3);
290+
expect(nodes[0].nativeElement).toHaveCssStyle({'flex': '1 1 auto'});
291+
expect(nodes[1].nativeElement).toHaveCssStyle({'flex': '1 1 auto'});
292+
expect(nodes[2].nativeElement).toHaveCssStyle({'flex': '1 1 auto'});
293+
294+
activateMediaQuery('xl', true);
295+
fixture.detectChanges();
296+
297+
nodes = queryFor(fixture, "[fxFlex]");
298+
expect(nodes[0].nativeElement).toHaveCssStyle({'flex': '1 1 100%', 'max-height': '50%'});
299+
expect(nodes[1].nativeElement).toHaveCssStyle({'flex': '1 1 100%', 'max-height': '24.4%'});
300+
expect(nodes[2].nativeElement).toHaveCssStyle({'flex': '1 1 100%', 'max-height': '25.6%'});
301+
302+
activateMediaQuery('sm', true);
303+
fixture.detectChanges();
304+
305+
nodes = queryFor(fixture, "[fxFlex]");
306+
expect(nodes.length).toEqual(3);
307+
expect(nodes[0].nativeElement).toHaveCssStyle({'flex': '1 1 auto'});
308+
expect(nodes[1].nativeElement).toHaveCssStyle({'flex': '1 1 auto'});
309+
expect(nodes[2].nativeElement).toHaveCssStyle({'flex': '1 1 auto'});
310+
311+
expect(nodes[0].nativeElement).not.toHaveCssStyle({'max-height': '50%'});
312+
expect(nodes[1].nativeElement).not.toHaveCssStyle({'max-height': '24.4%'});
313+
expect(nodes[2].nativeElement).not.toHaveCssStyle({'max-height': '25.6%'});
314+
expect(nodes[0].nativeElement).not.toHaveCssStyle({'max-height': '*'});
315+
expect(nodes[1].nativeElement).not.toHaveCssStyle({'max-height': '*'});
316+
expect(nodes[2].nativeElement).not.toHaveCssStyle({'max-height': '*'});
317+
});
318+
});
250319
});
251320

252321

‎src/lib/flexbox/api/flex.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
307307
let max = (direction === 'row') ? 'max-width' : 'max-height';
308308
let min = (direction === 'row') ? 'min-width' : 'min-height';
309309

310-
let usingCalc = String(basis).indexOf('calc') > -1;
310+
let usingCalc = (String(basis).indexOf('calc') > -1) || (basis == 'auto');
311311
let isPx = String(basis).indexOf('px') > -1 || usingCalc;
312312

313313

‎src/lib/utils/testing/custom-matchers.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,8 @@ export const customMatchers: jasmine.CustomMatcherFactories = {
148148
* (Safari, IE, etc) will use prefixed style instead of defaults.
149149
*/
150150
function hasPrefixedStyles(actual, key, value) {
151-
let hasStyle = getDOM().hasStyle(actual, key, value.trim());
151+
value = value !== "*" ? value.trim() : undefined;
152+
let hasStyle = getDOM().hasStyle(actual, key, value);
152153
if (!hasStyle) {
153154
let prefixedStyles = applyCssPrefixes({[key]: value});
154155
Object.keys(prefixedStyles).forEach(prop => {

0 commit comments

Comments
 (0)