Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit 8d161be

Browse files
trimoxtrimox
authored
fix(demos): Drawer navigation on keypress (#1618)
1 parent 6751dd7 commit 8d161be

File tree

9 files changed

+81
-64
lines changed

9 files changed

+81
-64
lines changed

‎demos/src/app/app-layout.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@
1717
<mdc-drawer class="demo-drawer" #appdrawer="mdcDrawer" [open]="!isScreenSmall()" [drawer]="isScreenSmall() ? 'modal' : 'dismissible'" mdcTopAppBarFixedAdjust>
1818
<mdc-drawer-content>
1919
<mdc-list useActivatedClass>
20-
<mdc-list-item [routerLink]="['home']" routerLinkActive #rlaHome="routerLinkActive">Home</mdc-list-item>
20+
<mdc-list-item (selectionChange)="onDrawerSelect('home')">Home</mdc-list-item>
2121
<mdc-list-divider></mdc-list-divider>
22-
<mdc-list-item (click)="startVisible = !startVisible">
22+
<mdc-list-item (selectionChange)="startVisible = !startVisible">
2323
Getting Started
2424
<mdc-icon mdcListItemMeta>keyboard_arrow_{{startVisible ? 'down' : 'right'}}</mdc-icon>
2525
</mdc-list-item>
2626
<div *ngIf="startVisible">
27-
<mdc-list-item *ngFor="let item of startRoutes" [routerLink]="[item.route]" routerLinkActive #rlaCore="routerLinkActive">{{item.name}}</mdc-list-item>
27+
<mdc-list-item *ngFor="let item of startRoutes" (selectionChange)="onDrawerSelect('getting-started')">{{item.name}}</mdc-list-item>
2828
</div>
2929
<mdc-list-divider></mdc-list-divider>
30-
<mdc-list-item *ngFor="let navItem of navigationLinks" [routerLink]="[navItem.route]" routerLinkActive #rla="routerLinkActive">{{navItem.name}}</mdc-list-item>
30+
<mdc-list-item *ngFor="let navItem of navigationLinks" (selectionChange)="onDrawerSelect(navItem.route)">{{navItem.name}}</mdc-list-item>
3131
</mdc-list>
3232
</mdc-drawer-content>
3333
</mdc-drawer>

‎demos/src/app/app-layout.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ export class AppLayout implements OnInit, OnDestroy {
2323
startVisible: boolean;
2424

2525
navigationLinks = [
26-
{ name: 'Button', route: '/button-demo' },
26+
{ name: 'Button', route: 'button-demo' },
2727
{ name: 'Card', route: 'card-demo' },
2828
{ name: 'Checkbox', route: 'checkbox-demo' },
2929
{ name: 'Chips', route: 'chips-demo' },
3030
{ name: 'Dialog', route: 'dialog-demo' },
3131
{ name: 'Drawer', route: 'drawer-demo' },
3232
{ name: 'Elevation', route: 'elevation-demo' },
33-
{ name: 'FAB', route: '/fab-demo' },
33+
{ name: 'FAB', route: 'fab-demo' },
3434
{ name: 'Form Field', route: 'form-field-demo' },
35-
{ name: 'Icon Button', route: '/icon-button-demo' },
35+
{ name: 'Icon Button', route: 'icon-button-demo' },
3636
{ name: 'Icon', route: 'icon-demo' },
3737
{ name: 'Image List', route: 'image-list-demo' },
3838
{ name: 'Linear Progress', route: 'linear-progress-demo' },
@@ -88,4 +88,8 @@ export class AppLayout implements OnInit, OnDestroy {
8888
this._destroy.next();
8989
this._destroy.complete();
9090
}
91+
92+
onDrawerSelect(route: any) {
93+
this._router.navigate([route]);
94+
}
9195
}

‎demos/src/app/app.component.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export class AppComponent implements OnInit {
1010
constructor(private _router: Router) { }
1111

1212
ngOnInit() {
13-
this._router.events.subscribe(event => {
14-
if (this._router.url !== '/') {
15-
if (event instanceof NavigationEnd) {
16-
if (environment.production) {
13+
if (environment.production) {
14+
this._router.events.subscribe(event => {
15+
if (this._router.url !== '/') {
16+
if (event instanceof NavigationEnd) {
1717
(<any>window).ga('set', 'page', event.urlAfterRedirects);
1818
(<any>window).ga('send', 'pageview');
1919
}
2020
}
21-
}
22-
});
21+
});
22+
}
2323
}
2424
}

‎demos/src/app/components/form-field-demo/form-field-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h3 class="demo-content__headline">Text Field - Fluid</h3>
5151
</div>
5252
<mdc-form-field #demoFluid fluid>
5353
<mdc-text-field label="First name" outlined required></mdc-text-field>
54-
<p mdcTextFieldHelperText persistent validation>*Required</p>
54+
<mdc-helper-text persistent validation>*Required</mdc-helper-text>
5555
</mdc-form-field>
5656
</div>
5757

‎demos/src/environments/environment.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export const environment = {
1313
* This import should be commented out in production mode because it will have a negative impact
1414
* on performance if an error is thrown.
1515
*/
16-
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16+
import 'zone.js/dist/zone-error'; // Included with Angular CLI.

‎demos/src/styles/_elevation.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
//
2-
// Elevation
3-
//
4-
51
.demo-elevation__surface {
62
display: flex;
73
align-items: center;

‎demos/src/styles/_demo.scss renamed to ‎demos/src/styles/_landing.scss

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -44,46 +44,3 @@
4444
margin: 8px;
4545
}
4646
}
47-
48-
//
49-
// Demo page
50-
//
51-
52-
.demo-page {
53-
padding-left: 10px;
54-
padding-bottom: 45px;
55-
max-width: calc(70% - 17rem);
56-
57-
@media (max-width: 1239px) {
58-
max-width: calc(100% - 1rem);
59-
}
60-
}
61-
62-
.demo-content {
63-
border: 1px solid rgba(0, 0, 0, .15);
64-
border-radius: .75rem;
65-
margin: 1.5rem;
66-
padding: 1rem;
67-
68-
&__headline {
69-
@include mdc-typography(headline6);
70-
71-
margin-top: .1em;
72-
margin-bottom: .3em;
73-
}
74-
}
75-
76-
.demo-top-app-bar {
77-
@include mdc-top-app-bar-fill-color($color-rally);
78-
79-
// only apply this style if below top app bar
80-
z-index: 7;
81-
}
82-
83-
.demo-drawer {
84-
position: fixed;
85-
86-
.mdc-list-item {
87-
cursor: pointer;
88-
}
89-
}

‎demos/src/styles/_layout.scss

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,63 @@
4545
align-items: center;
4646
justify-content: center;
4747
}
48+
49+
//
50+
// Containers
51+
//
52+
53+
.demo-container {
54+
display: flex;
55+
align-items: flex-start;
56+
justify-content: space-between;
57+
flex-wrap: wrap;
58+
padding: 1rem;
59+
min-width: 200px;
60+
}
61+
62+
.demo-page {
63+
padding-left: 10px;
64+
padding-bottom: 45px;
65+
max-width: calc(70% - 17rem);
66+
67+
@media (max-width: 1239px) {
68+
max-width: calc(100% - 1rem);
69+
}
70+
}
71+
72+
.demo-content {
73+
border: 1px solid rgba(0, 0, 0, .15);
74+
border-radius: .75rem;
75+
margin: 1.5rem;
76+
padding: 1rem;
77+
78+
&__headline {
79+
@include mdc-typography(headline6);
80+
81+
margin-top: .1em;
82+
margin-bottom: .3em;
83+
}
84+
}
85+
86+
//
87+
// Demo top-app-bar
88+
//
89+
90+
.demo-top-app-bar {
91+
@include mdc-top-app-bar-fill-color($color-rally);
92+
93+
// only apply this style if below top app bar
94+
z-index: 7;
95+
}
96+
97+
//
98+
// Demo drawer
99+
//
100+
101+
.demo-drawer {
102+
position: fixed;
103+
104+
.mdc-list-item {
105+
cursor: pointer;
106+
}
107+
}

‎demos/src/styles/app.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
@import "./color-palette";
22
@import "./global";
3-
@import "./layout";
43

54
// Import Angular MDC after _global.scss
65
@import "../../../packages/material-components-web/material.scss";
6+
@import "./layout";
77
@import "./button";
88
@import "./cards";
99
@import "./chips";
10-
@import "./demo";
1110
@import "./dialog";
1211
@import "./docs";
1312
@import "./drawer";
@@ -16,6 +15,7 @@
1615
@import "./icon";
1716
@import "./icon-button";
1817
@import "./image-list";
18+
@import "./landing";
1919
@import "./linear-progress";
2020
@import "./list";
2121
@import "./menu-surface";

0 commit comments

Comments
 (0)