From 6e7c3ac4a25a7b2043fcff832a6265e8527784ea Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Sun, 13 Jan 2019 13:54:50 -0600 Subject: [PATCH] feat(demo): add demo to show fxHide with used with custom breakpoint Add demo showing custom breakpoint working with `fxHide.yba-min-height` Refs #961. --- package.json | 2 +- src/apps/demo-app/src/app/app.module.ts | 17 ++++- .../hide-custom-bp.component.scss | 33 +++++++++ .../hide-with-custom-bp.component.ts | 67 ++++++++++++++++++ .../stack-overflow/stack-overflow.module.ts | 12 +++- .../stack-overflow.component.ts | 1 + src/apps/demo-app/src/styles.scss | 4 +- yarn.lock | 70 +++++++------------ 8 files changed, 154 insertions(+), 52 deletions(-) create mode 100644 src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss create mode 100644 src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts diff --git a/package.json b/package.json index c0646db2c..07e9e95f1 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "karma-coverage": "^1.1.2", "karma-firefox-launcher": "^1.0.1", "karma-jasmine": "^1.1.2", - "karma-sauce-launcher": "^1.2.0", + "karma-sauce-launcher": "^2.0.2", "karma-sourcemap-loader": "^0.3.7", "magic-string": "^0.22.5", "merge2": "^1.2.3", diff --git a/src/apps/demo-app/src/app/app.module.ts b/src/apps/demo-app/src/app/app.module.ts index f39a75bd8..7de9dc187 100644 --- a/src/apps/demo-app/src/app/app.module.ts +++ b/src/apps/demo-app/src/app/app.module.ts @@ -6,9 +6,12 @@ import {FlexLayoutModule, BREAKPOINT} from '@angular/flex-layout'; import {RoutingModule} from './routing.module'; import {AppComponent} from './app.component'; import {DemoMaterialModule} from './material.module'; +import { + YBA_BREAKPOINT_PROVIDER +} from './stack-overflow/hide-custom-bp/hide-with-custom-bp.component'; import {WatermarkComponent} from './watermark.component'; -const EXTRA_BREAKPOINT = [{ +const EXTRA_BREAKPOINTS = [{ alias: 'xs.landscape', suffix: 'XsLandscape', mediaQuery: 'screen and (orientation: landscape) and (max-width: 559px)', @@ -18,7 +21,8 @@ const EXTRA_BREAKPOINT = [{ @NgModule({ declarations: [ - AppComponent, WatermarkComponent + AppComponent, + WatermarkComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), @@ -30,7 +34,14 @@ const EXTRA_BREAKPOINT = [{ printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs'] }), ], - providers: [{provide: BREAKPOINT, useValue: EXTRA_BREAKPOINT, multi: true}], + providers: [ + YBA_BREAKPOINT_PROVIDER, + { + provide: BREAKPOINT, + useValue: EXTRA_BREAKPOINTS, + multi: true + } + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss b/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss new file mode 100644 index 000000000..c1f4ee482 --- /dev/null +++ b/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss @@ -0,0 +1,33 @@ +.bounds { + background-color:#ddd; + height :800px; + } + + .sec1 { + background: red; + color:white; + text-transform: uppercase; + padding: 20px; + } + + .sec2 { + background: yellow; + color:blue; + padding: 20px; + } + + .sec3 { + background: blue; + color:white; + text-transform: uppercase; + padding: 20px; + } + + .sec1, .sec2, .sec3 { + padding-top:20px; + text-align:center + } + + .content { + min-width: 300px; + } diff --git a/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts b/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts new file mode 100644 index 000000000..c075632e0 --- /dev/null +++ b/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts @@ -0,0 +1,67 @@ +import {Component, Directive} from '@angular/core'; +import {BREAKPOINT, ShowHideDirective} from '@angular/flex-layout'; + +const YBA_BREAKPOINT = { + alias: 'yba', + suffix: 'Yba', + mediaQuery: 'screen and (max-height: 600px)', + overlapping: false, +}; + +export const YBA_BREAKPOINT_PROVIDER = { + provide: BREAKPOINT, + useValue: [YBA_BREAKPOINT], + multi: true +}; + +const inputs = ['fxHide', 'fxHide.yba']; +const selector = `[fxHide], [fxHide.yba]`; + +@Directive({selector, inputs}) +export class CustomHideDirective extends ShowHideDirective { + protected inputs = inputs; +} + +@Component({ + selector: 'demo-hide-custom-bp', + styleUrls: [ + 'hide-custom-bp.component.scss' + ], + template: ` + + StackBlitz + Hide when height < 800px using custom breakpoint fxHide.yba + + +
+ +
+ first-section +
+
+ second-section +
+
+ third-section +
+ +
+ + +
<div fxLayout="row" fxLayout.xs="column" fxFlexFill fxHide.yba > +
+ + + ` +}) +export class HideWithCustomBPComponent { +} + + diff --git a/src/apps/demo-app/src/app/stack-overflow/stack-overflow.module.ts b/src/apps/demo-app/src/app/stack-overflow/stack-overflow.module.ts index 273b92a8b..2f537aaef 100644 --- a/src/apps/demo-app/src/app/stack-overflow/stack-overflow.module.ts +++ b/src/apps/demo-app/src/app/stack-overflow/stack-overflow.module.ts @@ -5,13 +5,17 @@ import {FlexLayoutModule} from '@angular/flex-layout'; import {MatCardModule} from '@angular/material/card'; import {StackOverflowComponent} from './stack-overflow/stack-overflow.component'; -import { - ComplexColumnOrderingComponent -} from './complex-column-ordering/complex-column-ordering.component'; import {GridAreaRowSpanComponent} from './grid-area-row-span/grid-area-row-span.component'; import {GridColumnSpanComponent} from './grid-column-span/grid-column-span.component'; import {MozHolyGrailComponent} from './moz-holy-grail/moz-holy-grail.component'; import {RoutingModule} from './routing.module'; +import { + ComplexColumnOrderingComponent +} from './complex-column-ordering/complex-column-ordering.component'; +import { + HideWithCustomBPComponent, + CustomHideDirective +} from './hide-custom-bp/hide-with-custom-bp.component'; @NgModule({ imports: [ @@ -27,6 +31,8 @@ import {RoutingModule} from './routing.module'; GridAreaRowSpanComponent, GridColumnSpanComponent, MozHolyGrailComponent, + CustomHideDirective, + HideWithCustomBPComponent ] }) export class DocsStackOverflowModule {} diff --git a/src/apps/demo-app/src/app/stack-overflow/stack-overflow/stack-overflow.component.ts b/src/apps/demo-app/src/app/stack-overflow/stack-overflow/stack-overflow.component.ts index 7014110c2..243d38f53 100644 --- a/src/apps/demo-app/src/app/stack-overflow/stack-overflow/stack-overflow.component.ts +++ b/src/apps/demo-app/src/app/stack-overflow/stack-overflow/stack-overflow.component.ts @@ -3,6 +3,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'demo-stack-overflow', template: ` + diff --git a/src/apps/demo-app/src/styles.scss b/src/apps/demo-app/src/styles.scss index 8595a6f27..98da337d5 100644 --- a/src/apps/demo-app/src/styles.scss +++ b/src/apps/demo-app/src/styles.scss @@ -144,7 +144,7 @@ div.colored > div:nth-child(10n+7), .seven { } .hint { - margin: 5px 5px 0; + margin: 5px 5px 0 20px; font-size: 0.9em; color: #a3a3a3; } @@ -324,7 +324,7 @@ mat-card-content pre { .hint { color: #a3a3a3; font-size: 0.9em; - margin: 5px 5px 0; + margin: 5px 5px 0 20px; } .forceAbove { diff --git a/yarn.lock b/yarn.lock index 3dc80b4e5..a6ff43205 100644 --- a/yarn.lock +++ b/yarn.lock @@ -967,7 +967,7 @@ archiver-utils@^1.3.0: normalize-path "^2.0.0" readable-stream "^2.0.0" -archiver@2.1.1, archiver@^2.1.1: +archiver@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc" integrity sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw= @@ -1183,13 +1183,6 @@ async@1.x, async@^1.3.0, async@^1.5.2: resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo= -async@2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/async/-/async-2.0.1.tgz#b709cc0280a9c36f09f4536be823c838a9049e25" - integrity sha1-twnMAoCpw28J9FNr6CPIOKkEniU= - dependencies: - lodash "^4.8.0" - async@2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4" @@ -5952,15 +5945,14 @@ karma-parallel@^0.3.1: istanbul "^0.4.5" lodash "^4.17.11" -karma-sauce-launcher@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/karma-sauce-launcher/-/karma-sauce-launcher-1.2.0.tgz#6f2558ddef3cf56879fa27540c8ae9f8bfd16bca" - integrity sha512-lEhtGRGS+3Yw6JSx/vJY9iQyHNtTjcojrSwNzqNUOaDceKDu9dPZqA/kr69bUO9G2T6GKbu8AZgXqy94qo31Jg== +karma-sauce-launcher@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/karma-sauce-launcher/-/karma-sauce-launcher-2.0.2.tgz#dbf98e70d86bf287b03a537cf637eb7aefa975c3" + integrity sha512-jLUFaJhHMcKpxFWUesyWYihzM5FvQiJsDwGcCtKeOy2lsWhkVw0V0Byqb1d+wU6myU1mribBtsIcub23HS4kWA== dependencies: - q "^1.5.0" - sauce-connect-launcher "^1.2.2" - saucelabs "^1.4.0" - wd "^1.4.0" + sauce-connect-launcher "^1.2.4" + saucelabs "^1.5.0" + selenium-webdriver "^4.0.0-alpha.1" karma-sourcemap-loader@^0.3.7: version "0.3.7" @@ -6469,11 +6461,6 @@ lodash.values@^2.4.1, lodash.values@~2.4.1: dependencies: lodash.keys "~2.4.1" -lodash@4.17.11, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.10: - version "4.17.11" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" - integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== - lodash@4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" @@ -6484,6 +6471,11 @@ lodash@^3.10.1: resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y= +lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.10: + version "4.17.11" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" + integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== + lodash@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551" @@ -8233,7 +8225,7 @@ q@1.4.1: resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e" integrity sha1-VXBbzZPF82c1MMLCy8DCs63cKG4= -q@^1.4.1, q@^1.5.0, q@^1.5.1, q@~1.5.0: +q@^1.4.1, q@^1.5.1, q@~1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= @@ -8618,7 +8610,7 @@ replace-homedir@^1.0.0: is-absolute "^1.0.0" remove-trailing-separator "^1.1.0" -request@2.88.0, request@^2.55.0, request@^2.72.0, request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.85.0, request@^2.87.0, request@^2.88.0: +request@^2.55.0, request@^2.72.0, request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.85.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -8885,7 +8877,7 @@ sass-graph@^2.2.4: scss-tokenizer "^0.2.3" yargs "^7.0.0" -sauce-connect-launcher@^1.2.2: +sauce-connect-launcher@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.4.tgz#8d38f85242a9fbede1b2303b559f7e20c5609a1c" integrity sha512-X2vfwulR6brUGiicXKxPm1GJ7dBEeP1II450Uv4bHGrcGOapZNgzJvn9aioea5IC5BPp/7qjKdE3xbbTBIVXMA== @@ -8896,7 +8888,7 @@ sauce-connect-launcher@^1.2.2: lodash "^4.16.6" rimraf "^2.5.4" -saucelabs@^1.4.0, saucelabs@^1.5.0: +saucelabs@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d" integrity sha512-jlX3FGdWvYf4Q3LFfFWS1QvPg3IGCGWxIc8QBFdPTbpTJnt/v17FHXYVAn7C8sHf1yUXo2c7yIM0isDryfYtHQ== @@ -8939,6 +8931,16 @@ selenium-webdriver@3.6.0, "selenium-webdriver@>= 2.53.1", selenium-webdriver@^3. tmp "0.0.30" xml2js "^0.4.17" +selenium-webdriver@^4.0.0-alpha.1: + version "4.0.0-alpha.1" + resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.1.tgz#cc93415e21d2dc1dfd85dfc5f6b55f3ac53933b1" + integrity sha512-z88rdjHAv3jmTZ7KSGUkTvo4rGzcDGMq0oXWHNIDK96Gs31JKVdu9+FMtT4KBrVoibg8dUicJDok6GnqqttO5Q== + dependencies: + jszip "^3.1.3" + rimraf "^2.5.4" + tmp "0.0.30" + xml2js "^0.4.17" + semver-diff@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36" @@ -10601,11 +10603,6 @@ validate.js@^0.12.0: resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.12.0.tgz#17f989e37c192ea2f826bbf19bf4e97e6e4be68f" integrity sha512-/x2RJSvbqEyxKj0RPN4xaRquK+EggjeVXiDDEyrJzsJogjtiZ9ov7lj/svVb4DM5Q5braQF4cooAryQbUwOxlA== -vargs@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/vargs/-/vargs-0.1.0.tgz#6b6184da6520cc3204ce1b407cac26d92609ebff" - integrity sha1-a2GE2mUgzDIEzhtAfKwm2SYJ6/8= - vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -10709,19 +10706,6 @@ void-elements@^2.0.0: resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w= -wd@^1.4.0: - version "1.11.1" - resolved "https://registry.yarnpkg.com/wd/-/wd-1.11.1.tgz#21a33e21977ad20522bb189f6529c3b55ac3862c" - integrity sha512-XNK6EbOrXF7cG8f3pbps6mb/+xPGZH2r1AL1zGJluGynA/Xt6ip1Tvqj2AkavyDFworreaGXoe+0AP/r7EX9pg== - dependencies: - archiver "2.1.1" - async "2.0.1" - lodash "4.17.11" - mkdirp "^0.5.1" - q "1.4.1" - request "2.88.0" - vargs "0.1.0" - webdriver-js-extender@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz#57d7a93c00db4cc8d556e4d3db4b5db0a80c3bb7"