Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

fix(fxShow, fxHide): support fxHide+fxShow usages on same element #190

Merged
merged 2 commits into from
Feb 21, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ build/Release

# Users Environment Variables
.lock-wscript
yarn.lock
yarn-error.log

# OS generated files #
.DS_Store
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@angular/compiler-cli": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/material": "2.0.0-beta.0",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-server": "^2.3.1",
"@angular/router": "~3.1.1",
"@angular/tsc-wrapped": "~0.4.0",
Expand Down
8 changes: 5 additions & 3 deletions src/demo-app/app/demo-app/demo-app.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ div.coloredContainerX > div, div.colorNested > div > div {
text-align: center;
}

div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1) {
div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1), div.box1 {
background-color: #009688;
}

div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2) {
div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2), div.box2 {
background-color: #3949ab;
}

div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3) {
div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3), div.box3 {
background-color: #9c27b0;
}

Expand Down Expand Up @@ -224,3 +224,5 @@ md-card-content pre {
.fxClass-lg2 {
text-shadow: #5c5c5c;
}

.fixed { height:275px; }
23 changes: 14 additions & 9 deletions src/demo-app/app/github-issues/DemosGithubIssues.ts
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
import {Component} from '@angular/core';

@Component({
selector: 'demos-github-issues',
template: `
selector: 'demos-github-issues',
template: `
<demo-issue-5345></demo-issue-5345>
<demo-issue-9897></demo-issue-9897>
<demo-issue-181></demo-issue-181>
`
})
export class DemosGithubIssues { }
export class DemosGithubIssues {
}

import {NgModule} from '@angular/core';
import {CommonModule} from "@angular/common";
import {MaterialModule} from "@angular/material";
import {FlexLayoutModule} from "../../../lib"; // `gulp build:components` to deploy to node_modules manually

import { DemoIssue5345 } from "./issue.5345.demo";
import { DemoIssue9897 } from "./issue.9897.demo";
import {DemoIssue5345} from "./issue.5345.demo";
import {DemoIssue9897} from "./issue.9897.demo";
import {DemoIssue181} from './issue.181.demo';

@NgModule({
declarations : [
declarations: [
DemosGithubIssues, // used by the Router with the root app component
DemoIssue5345,
DemoIssue9897
DemoIssue9897,
DemoIssue181
],
imports : [
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule
]
})
export class DemosGithubIssuesModule{ }
export class DemosGithubIssuesModule {
}
58 changes: 58 additions & 0 deletions src/demo-app/app/github-issues/issue.181.demo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import {Component, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

import {MediaChange} from "../../../lib/media-query/media-change";
import {ObservableMedia} from "../../../lib/media-query/observable-media-service";

@Component({
selector: 'demo-issue-181',
styleUrls: [
'../demo-app/material2.css'
],
template: `
<md-card class="card-demo" >
<md-card-title><a href="https://github.com/angular/flex-layout/issues/181" target="_blank">Issue #181</a></md-card-title>
<md-card-subtitle>Wrong layout when fxHide + fxShow usages do not cooperate properly:</md-card-subtitle>
<md-card-content>
<div class="containerX">
<div class="coloredContainerX box fixed"
[fxLayout]="direction"
(click)="pivot()">
<div fxHide fxShow.gt-xs class="box1"> Type 1, row a, fxHide fxShow.gt-xs </div>
<div fxHide fxShow.gt-xs class="box2"> Type 1, row b, fxHide fxShow.gt-xs </div>
<div fxHide fxShow.gt-xs class="box3"> Type 1, row c, fxHide fxShow.gt-xs </div>

<div fxShow fxHide.md class="box1"> Type 2, row a, fxShow fxHide.md</div>
<div fxShow fxHide.md class="box2"> Type 2, row b, fxShow fxHide.md</div>
<div fxShow fxHide.md class="box3"> Type 2, row c, fxShow fxHide.md</div>
</div>
</div>
</md-card-content>
<md-card-footer style="width:95%;padding-left:20px;margin-top:-5px;">
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
</md-card-footer>
</md-card>
`
})
export class DemoIssue181 implements OnDestroy {
public direction = "column";
public activeMediaQuery = "";

constructor(media$: ObservableMedia) {
this._watcher = media$.subscribe((change: MediaChange) => {
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
this.activeMediaQuery = value;
});
}

pivot() {
this.direction = (this.direction === "row") ? "column" : "row";
}

ngOnDestroy() {
this._watcher.unsubscribe();
}

private _watcher: Subscription;
}
6 changes: 2 additions & 4 deletions src/lib/flexbox/_module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import {MediaQueriesModule} from '../media-query/_module';

import {FlexDirective} from './api/flex';
import {LayoutDirective} from './api/layout';
import {HideDirective} from './api/hide';
import {ShowDirective} from './api/show';
import {ShowHideDirective} from './api/show-hide';
import {FlexAlignDirective} from './api/flex-align';
import {FlexFillDirective} from './api/flex-fill';
import {FlexOffsetDirective} from './api/flex-offset';
Expand Down Expand Up @@ -44,8 +43,7 @@ const ALL_DIRECTIVES = [
FlexOffsetDirective,
FlexFillDirective,
FlexAlignDirective,
ShowDirective,
HideDirective,
ShowHideDirective,
ClassDirective,
StyleDirective,
];
Expand Down
3 changes: 2 additions & 1 deletion src/lib/flexbox/api/base-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
get mqActivation(): ResponsiveActivation {
return this._mqActivation;
}

/**
* @see BaseFxDirective._queryInput
*/
Expand All @@ -28,7 +29,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
* Save the property value.
*/
cacheInput(key?: string, source?: any, cacheRaw = false) {
if ( cacheRaw ) {
if (cacheRaw) {
this._cacheInputRaw(key, source);
} else if (Array.isArray(source)) {
this._cacheInputArray(key, source);
Expand Down
2 changes: 1 addition & 1 deletion src/lib/flexbox/api/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {MediaQuerySubscriber} from '../../media-query/media-change';
* Definition of a css style. Either a property name (e.g. "flex-basis") or an object
* map of property name and value (e.g. {display: 'none', flex-order: 5}).
*/
export type StyleDefinition = string|{ [property: string]: string|number };
export type StyleDefinition = string|{[property: string]: string|number};

/** Abstract base class for the Layout API styling directives. */
export abstract class BaseFxDirective implements OnDestroy {
Expand Down
4 changes: 2 additions & 2 deletions src/lib/flexbox/api/hide.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {customMatchers, expect, NgMatchers} from '../../utils/testing/custom-mat
import {
makeCreateTestComponent, expectNativeEl, queryFor
} from '../../utils/testing/helpers';
import {HideDirective} from './hide';
import {ShowHideDirective} from './show-hide';
import {MediaQueriesModule} from '../../media-query/_module';

describe('hide directive', () => {
Expand Down Expand Up @@ -52,7 +52,7 @@ describe('hide directive', () => {
// Configure testbed to prepare services
TestBed.configureTestingModule({
imports: [CommonModule, MediaQueriesModule],
declarations: [TestHideComponent, HideDirective],
declarations: [TestHideComponent, ShowHideDirective],
providers: [
BreakPointRegistry, BreakPointsProvider,
{provide: MatchMedia, useClass: MockMatchMedia}
Expand Down
Loading