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

Commit 31a278a

Browse files
trimoxtrimox
authored
feat(dialog): Implement MDC Dialog (#70)
1 parent bcd7450 commit 31a278a

File tree

10 files changed

+489
-6
lines changed

10 files changed

+489
-6
lines changed

‎src/demo-app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component';
1010
import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
1111
import { CardDemoComponent } from './components/card-demo/card-demo.component';
1212
import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
13+
import { DialogDemoComponent } from './components/dialog-demo/dialog-demo.component';
1314
import { DrawerDemoComponent } from './components/drawer-demo/drawer-demo.component';
1415
import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
1516
import { ElevationDemoComponent } from './components/elevation-demo/elevation-demo.component';
@@ -46,6 +47,7 @@ import { demoAppRoutes } from './routes';
4647
ButtonDemoComponent,
4748
CardDemoComponent,
4849
CheckboxDemoComponent,
50+
DialogDemoComponent,
4951
DrawerDemoComponent,
5052
ElevationDemoComponent,
5153
FabDemoComponent,

‎src/demo-app/common/navigation-links.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
export const navigationLinks = [
22
{ name: 'Home', route: '/', icon: 'home', desc: '' },
3-
{ name: 'Button', route: 'button-demo', icon: 'code', desc: 'Buttons communicate the action that will occur when the user touches them.' },
3+
{ name: 'Button', route: 'button-demo', icon: 'send', desc: 'Buttons communicate the action that will occur when the user touches them.' },
44
{ name: 'Card', route: 'card-demo', icon: 'credit_card', desc: 'A card is a sheet of material that serves as an entry point to more detailed information.' },
55
{ name: 'Checkbox', route: 'checkbox-demo', icon: 'check_box', desc: 'Checkboxes allow the user to select multiple options from a set.' },
6+
{ name: 'Dialog', route: 'dialog-demo', icon: 'code', desc: 'Dialogs inform users about a specific task, require decisions, or involve multiple tasks.' },
67
{ name: 'Drawer', route: 'drawer-demo', icon: 'code', desc: 'Drawers slide in from the left and contains the navigation destinations for your app.' },
7-
{ name: 'Elevation', route: 'elevation-demo', icon: 'code', desc: 'Elevation is the relative depth, or distance, between two surfaces along the z-axis.' },
8-
{ name: 'Floating Action Button (FAB)', route: 'fab-demo', icon: 'code', desc: 'A floating action button represents the primary action in an application.' },
8+
{ name: 'Elevation', route: 'elevation-demo', icon: 'filter', desc: 'Elevation is the relative depth, or distance, between two surfaces along the z-axis.' },
9+
{ name: 'Floating Action Button (FAB)', route: 'fab-demo', icon: 'add_circle_outline', desc: 'A floating action button represents the primary action in an application.' },
910
{ name: 'Linear-Progress', route: 'linear-progress-demo', icon: 'linear_scale', desc: 'Progress and activity indicators are visual indications of an app loading content.' },
1011
{ name: 'List', route: 'list-demo', icon: 'list', desc: 'Lists present multiple line items vertically as a single continuous element.' },
1112
{ name: 'Menu', route: 'menu-demo', icon: 'menu', desc: 'Menus display a list of choices on a transient sheet of material.' },
1213
{ name: 'Radio Button', route: 'radio-demo', icon: 'radio_button_checked', desc: 'Radio buttons allow the user to select one option from a set.' },
1314
{ name: 'Snackbar', route: 'snackbar-demo', icon: 'info_outline', desc: 'Snackbars provide brief feedback through a message at the bottom of the screen.' },
1415
{ name: 'Switch', route: 'switch-demo', icon: 'wb_incandescent', desc: 'On/off switches toggle the state of a single settings option.' },
15-
{ name: 'Tabs', route: 'tab-demo', icon: 'code', desc: 'Tabs make it easy to explore and switch between different views.' },
16-
{ name: 'Textfield', route: 'textfield-demo', icon: 'input', desc: 'Text fields allow users to input, edit, and select text.' },
16+
{ name: 'Tabs', route: 'tab-demo', icon: 'tab', desc: 'Tabs make it easy to explore and switch between different views.' },
17+
{ name: 'Textfield', route: 'textfield-demo', icon: 'text_fields', desc: 'Text fields allow users to input, edit, and select text.' },
1718
{ name: 'Toolbar', route: 'toolbar-demo', icon: 'code', desc: 'Toolbars appear a step above the sheet of material affected by their actions.' },
18-
{ name: 'Typography', route: 'typography-demo', icon: 'text_fields', desc: 'Material Design typography uses the Roboto font.' }
19+
{ name: 'Typography', route: 'typography-demo', icon: 'text_format', desc: 'Material Design typography uses the Roboto font.' }
1920
];

‎src/demo-app/components/dialog-demo/dialog-demo.component.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
2+
<h1 mdc-typography-display1>Dialog</h1>
3+
<div mdc-typography-subheading2>Dialogs inform users about a specific task, require decisions, or involve multiple tasks.</div>
4+
<div class="info-banner" mdc-typography-subheading1>
5+
<![CDATA[import { DialogModule } from '@angular-mdc/web';]]>
6+
</div>
7+
<div class="docs-api">
8+
<table>
9+
<thead>
10+
<tr>
11+
<th>Component</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr>
16+
<td>mdc-dialog</td>
17+
<td>The main component which is composed of mdc-dialog elements.</td>
18+
</tr>
19+
</tbody>
20+
<thead>
21+
<tr>
22+
<th>Methods</th>
23+
<th>Parameters</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr>
28+
<td>open()</td>
29+
<td>Opens the dialog, registers appropriate event listeners, sets aria attributes, focuses elements.</td>
30+
</tr>
31+
<tr>
32+
<td>isOpen()</td>
33+
<td>Returns true if the dialog is open, false otherwise.</td>
34+
</tr>
35+
<tr>
36+
<td>close()</td>
37+
<td>Closes the dialog, deregisters appropriate event listeners, resets aria attributes, focuses elements.</td>
38+
</tr>
39+
</tbody>
40+
<thead>
41+
<tr>
42+
<th>Events</th>
43+
<th>Description</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<td>accept</td>
49+
<td>Broadcast when a user accepts the dialog.</td>
50+
</tr>
51+
<tr>
52+
<td>cancel</td>
53+
<td>Broadcast when a user cancels the dialog.</td>
54+
</tr>
55+
</tbody>
56+
</table>
57+
</div>
58+
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start start" class="mdc-padding">
59+
<button mdc-button [primary]="true" [raised]="true" (click)="showDialog();">Show Dialog</button>
60+
<button mdc-button [primary]="true" [raised]="true" (click)="showDialogScroll();">Show Scrolling Dialog</button>
61+
62+
<span mdc-typography-headline>Sample - Dialog</span>
63+
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialog</span>></span>
64+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
65+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
66+
Use Google's location service?
67+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
68+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
69+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
70+
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
71+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
72+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
73+
<span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"cancelDialog();"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
74+
<span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"acceptDialog();"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
75+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
76+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
77+
</pre>
78+
79+
<span mdc-typography-headline>Sample - Scrolling Dialog</span>
80+
<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialogscroll</span>></span>
81+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
82+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
83+
Choose a Ringtone
84+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
85+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
86+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span> [<span style="color:#89bdff">scrollable</span>]=<span style="color:#65b042">"true"</span>></span>
87+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
88+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>None<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
89+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Callisto<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
90+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Ganymede<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
91+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Luna<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
92+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Marimba<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
93+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Schwifty<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
94+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Callisto<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
95+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Ganymede<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
96+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Luna<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
97+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Marimba<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
98+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Schwifty<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
99+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
100+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
101+
<span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
102+
<span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"cancelDialog();"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
103+
<span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"acceptDialog();"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
104+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
105+
<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
106+
</pre>
107+
<mdc-dialog #dialog>
108+
<mdc-dialog-header>
109+
<mdc-dialog-header-title>
110+
Use Google's location service?
111+
</mdc-dialog-header-title>
112+
</mdc-dialog-header>
113+
<mdc-dialog-body>
114+
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
115+
</mdc-dialog-body>
116+
<mdc-dialog-footer>
117+
<button mdc-button mdc-dialog-button-cancel (click)="cancelDialog();">Decline</button>
118+
<button mdc-button mdc-dialog-button-accept (click)="acceptDialog();">Accept</button>
119+
</mdc-dialog-footer>
120+
</mdc-dialog>
121+
122+
<mdc-dialog #dialogscroll>
123+
<mdc-dialog-header>
124+
<mdc-dialog-header-title>
125+
Choose a Ringtone
126+
</mdc-dialog-header-title>
127+
</mdc-dialog-header>
128+
<mdc-dialog-body [scrollable]="true">
129+
<mdc-list>
130+
<mdc-list-item>None</mdc-list-item>
131+
<mdc-list-item>Callisto</mdc-list-item>
132+
<mdc-list-item>Ganymede</mdc-list-item>
133+
<mdc-list-item>Luna</mdc-list-item>
134+
<mdc-list-item>Marimba</mdc-list-item>
135+
<mdc-list-item>Schwifty</mdc-list-item>
136+
<mdc-list-item>Callisto</mdc-list-item>
137+
<mdc-list-item>Ganymede</mdc-list-item>
138+
<mdc-list-item>Luna</mdc-list-item>
139+
<mdc-list-item>Marimba</mdc-list-item>
140+
<mdc-list-item>Schwifty</mdc-list-item>
141+
</mdc-list>
142+
</mdc-dialog-body>
143+
<mdc-dialog-footer>
144+
<button mdc-button mdc-dialog-button-cancel (click)="cancelDialog();">Decline</button>
145+
<button mdc-button mdc-dialog-button-accept (click)="acceptDialog();">Accept</button>
146+
</mdc-dialog-footer>
147+
</mdc-dialog>
148+
</div>
149+
</div>

‎src/demo-app/components/dialog-demo/dialog-demo.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
3+
import { DialogComponent } from '@angular-mdc/web';
4+
5+
@Component({
6+
selector: 'dialog-demo',
7+
templateUrl: './dialog-demo.component.html'
8+
})
9+
export class DialogDemoComponent {
10+
@ViewChild('dialog') dialog: DialogComponent;
11+
@ViewChild('dialogscroll') dialogScroll: DialogComponent;
12+
13+
showDialog() {
14+
this.dialog.show();
15+
}
16+
17+
showDialogScroll() {
18+
this.dialogScroll.show();
19+
}
20+
21+
acceptDialog() {
22+
this.dialog.accept();
23+
}
24+
25+
cancelDialog() {
26+
this.dialog.cancel();
27+
}
28+
}

‎src/demo-app/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { HomeComponent } from './components/home/home.component';
44
import { ButtonDemoComponent } from './components/button-demo/button-demo.component';
55
import { CardDemoComponent } from './components/card-demo/card-demo.component';
66
import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component';
7+
import { DialogDemoComponent } from './components/dialog-demo/dialog-demo.component';
78
import { DrawerDemoComponent } from './components/drawer-demo/drawer-demo.component';
89
import { ElevationDemoComponent } from './components/elevation-demo/elevation-demo.component';
910
import { FabDemoComponent } from './components/fab-demo/fab-demo.component';
@@ -35,6 +36,7 @@ export const demoAppRoutes: Routes = [
3536
{ path: 'elevation-demo', component: ElevationDemoComponent },
3637
{ path: 'list-demo', component: ListDemoComponent },
3738
{ path: 'drawer-demo', component: DrawerDemoComponent },
39+
{ path: 'dialog-demo', component: DialogDemoComponent },
3840
{ path: 'tab-demo', component: TabDemoComponent, children: TABS_DEMO_ROUTES },
3941
{ path: '', component: HomeComponent, pathMatch: 'full' },
4042
{ path: '**', redirectTo: '' }

‎src/lib/dialog/dialog-adapter.d.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export interface MDCDialogAdapter {
2+
addClass: (className: string) => void;
3+
removeClass: (className: string) => void;
4+
addBodyClass: (className: string) => void;
5+
removeBodyClass: (className: string) => void;
6+
eventTargetHasClass: (target: HTMLElement, className: string) => boolean;
7+
registerInteractionHandler: (evt: string, handler: EventListener) => void;
8+
deregisterInteractionHandler: (evt: string, handler: EventListener) => void;
9+
registerSurfaceInteractionHandler: (evt: string, handler: EventListener) => void;
10+
deregisterSurfaceInteractionHandler: (evt: string, handler: EventListener) => void;
11+
registerDocumentKeydownHandler: (handler: EventListener) => void;
12+
deregisterDocumentKeydownHandler: (handler: EventListener) => void;
13+
registerTransitionEndHandler: (handler: EventListener) => void;
14+
deregisterTransitionEndHandler: (handler: EventListener) => void;
15+
notifyAccept: () => void;
16+
notifyCancel: () => void;
17+
trapFocusOnSurface: () => void;
18+
untrapFocusOnSurface: () => void;
19+
isDialog: (el: Element) => boolean;
20+
}

0 commit comments

Comments
 (0)