From 346a4bf8e0de59e3c70ba12cd3b49c32c216d757 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Thu, 6 Jul 2017 20:16:21 -0700 Subject: [PATCH] feat(layout): add toggle/open/close directives for layouts with sidenav. (#745) * feat(layout): add toggle/open/close directives for layouts with sidenav. so we can open/close/toggle any sidenav from any child component, we need special directives that access their parent layouts. with this we can affect the behavior of it, and it also includes [hideWhenOpened] input and a default input to disable/enable the action leveraging the media service * fix(): lint errors * update(docs): overhaul layout demos --- .../components/components.component.html | 8 +- src/app/components/docs/docs.component.html | 4 +- .../card-over/card-over.component.html | 393 ++++++++--- .../card-over/card-over.component.scss | 7 + .../layouts/card-over/card-over.component.ts | 65 ++ .../components/layouts/layouts.component.html | 8 +- src/app/components/layouts/layouts.module.ts | 4 +- .../manage-list/manage-list.component.html | 659 ++++++++++++------ .../manage-list/manage-list.component.scss | 7 + .../manage-list/manage-list.component.ts | 64 ++ .../layouts/nav-list/nav-list.component.html | 538 ++++++++------ .../layouts/nav-list/nav-list.component.scss | 7 + .../layouts/nav-list/nav-list.component.ts | 64 ++ .../layouts/nav-view/nav-view.component.html | 411 ++++++++--- .../layouts/nav-view/nav-view.component.scss | 7 + .../layouts/nav-view/nav-view.component.ts | 37 + .../layouts/overview/overview.component.html | 316 ++++----- .../layouts/overview/overview.component.scss | 3 - .../style-guide/style-guide.component.html | 6 +- src/platform/core/layout/README.md | 12 +- .../core/layout/layout-manage-list/README.md | 18 +- .../layout-manage-list.component.ts | 23 +- .../layout-manage-list.directives.ts | 66 ++ .../core/layout/layout-nav-list/README.md | 18 +- .../layout-nav-list.component.ts | 25 +- .../layout-nav-list.directives.ts | 66 ++ .../core/layout/layout-toggle.class.ts | 63 +- src/platform/core/layout/layout.component.ts | 15 +- src/platform/core/layout/layout.directives.ts | 66 ++ src/platform/core/layout/layout.module.ts | 32 +- .../core/loading/services/loading.factory.ts | 2 +- 31 files changed, 2113 insertions(+), 901 deletions(-) create mode 100644 src/platform/core/layout/layout-manage-list/layout-manage-list.directives.ts create mode 100644 src/platform/core/layout/layout-nav-list/layout-nav-list.directives.ts create mode 100644 src/platform/core/layout/layout.directives.ts diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html index 311bc91156..254b3cd8e7 100644 --- a/src/app/components/components/components.component.html +++ b/src/app/components/components/components.component.html @@ -15,7 +15,7 @@

Core Components

[routerLink]="[item.route]" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" - (click)="!media.query('gt-sm') && navList.close()"> + [tdLayoutNavListClose]="!media.query('gt-sm')"> {{item.icon}}

{{item.title}}

{{item.description}}

@@ -28,7 +28,7 @@

Optional Components

[routerLink]="[item.route]" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" - (click)="!media.query('gt-sm') && navList.close()"> + [tdLayoutNavListClose]="!media.query('gt-sm')"> {{item.icon}}

{{item.title}}

{{item.description}}

@@ -50,7 +50,7 @@

Angular Material

[routerLink]="[item.route]" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" - (click)="!media.query('gt-sm') && navList.close()"> + [tdLayoutNavListClose]="!media.query('gt-sm')"> {{item.icon}}

{{item.title}}

{{item.description}}

@@ -59,7 +59,7 @@

{{item.title}}

- Components & Addons diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html index edbe31eb10..4954b60663 100644 --- a/src/app/components/docs/docs.component.html +++ b/src/app/components/docs/docs.component.html @@ -14,7 +14,7 @@ [routerLink]="[item.route]" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" - (click)="!media.query('gt-sm') && navList.close()"> + [tdLayoutNavListClose]="!media.query('gt-sm')"> {{item.icon}}

{{item.title}}

{{item.description}}

@@ -23,7 +23,7 @@

{{item.title}}

- Documentation diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html index 541bfcbdfa..d93e660000 100644 --- a/src/app/components/layouts/card-over/card-over.component.html +++ b/src/app/components/layouts/card-over/card-over.component.html @@ -1,119 +1,282 @@ - - - - - Card Over Layout - A card overlaying a toolbar (this page is using card over) - - - -

Recommended usage:

- -

Multi-step form view

- - - -

Blog post or item detail

- - - -
-
- - - - -

]]>

-

Builds the top toolbar and content area

- - - -

toolbarTitle?: string

-

The title of your toolbar

- - - -

logo?: string

-

The path to your toolbar logo

- - - - - - - -

]]>

-

Builds the card and content area

- - - -

cardTitle?: string

-

The card title

- - - -

cardSubtitle?: string

-

The card subtitle

- - - -

color?: string

-

Toolbar color (primary | accent | warn | none)

- - - -

cardWidth?: number

-

The card width percentage (default 70)

- - + + Minimum Demo + Minimum code for this layout with no wrapper + + + + Content goes here + + + + + + + Content goes here + + ]]> + + + + + Basic Demo + Basic layout wrapper & nav drawer + + + + + + homeHome + + + + + + + Content goes here + + + + + + + + + + + homeHome + + + + + + + Content goes here + + + + ]]> + + + + + Full Demo + Full working code with all options and templates + + + + + + {{item.icon}}{{item.title}} + + + + +
+ + + Covalent + + chrome_reader_mode + +
+ + Card Over Layout + A card over layout with all available options + + + +

Metadata

+ -

]]>

-

Loads html for each route (view)

+ {{item.icon}} +

{{item.title}}

+

{{item.description}}

- - - - - + + + +

Dates

+ -

]]>

-

Optional footer

+ {{item.icon}} +

{{item.date | timeAgo}}

+

{{item.description}}

- - - -
-
-

HTML

- - - - - - - - Optional footer - - - ]]> - -
-
- - - - Go Back - - Manage List - - - - - Optional footer - - + + + + + + + + + + + + + + + + + + + { {item.icon} }{ {item.title} } + + + + +
+ + + Covalent + + chrome_reader_mode + +
+ + Card Over Layout + A card over layout with all available options + + + +

Metadata

+ + + { {item.icon} } +

{ {item.title} }

+

{ {item.description} }

+ + + + +

Dates

+ + + { {item.icon} } +

{ {item.date | timeAgo} }

+

{ {item.description} }

+ + + + + + + + + + + + + ]]> + +

TypeScript:

+ + + + + + diff --git a/src/app/components/layouts/card-over/card-over.component.scss b/src/app/components/layouts/card-over/card-over.component.scss index e69de29bb2..8b4767991a 100644 --- a/src/app/components/layouts/card-over/card-over.component.scss +++ b/src/app/components/layouts/card-over/card-over.component.scss @@ -0,0 +1,7 @@ +:host /deep/ { + .mat-sidenav-container[fullscreen] { + position: static; + width: 100%; + min-height: 200px; + } +} diff --git a/src/app/components/layouts/card-over/card-over.component.ts b/src/app/components/layouts/card-over/card-over.component.ts index 81a0b9014a..537f76a7f3 100644 --- a/src/app/components/layouts/card-over/card-over.component.ts +++ b/src/app/components/layouts/card-over/card-over.component.ts @@ -14,4 +14,69 @@ export class CardOverComponent { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; + routes: Object[] = [{ + icon: 'home', + route: '.', + title: 'Home', + }, { + icon: 'library_books', + route: '.', + title: 'Documentation', + }, { + icon: 'color_lens', + route: '.', + title: 'Style Guide', + }, { + icon: 'view_quilt', + route: '.', + title: 'Layouts', + }, { + icon: 'picture_in_picture', + route: '.', + title: 'Components & Addons', + }, + ]; + usermenu: Object[] = [{ + icon: 'swap_horiz', + route: '.', + title: 'Switch account', + }, { + icon: 'tune', + route: '.', + title: 'Account settings', + }, { + icon: 'exit_to_app', + route: '.', + title: 'Sign out', + }, + ]; + cardlist: Object[] = [{ + icon: 'account_box', + route: '.', + title: 'John Jameson', + description: 'Owner', + }, { + icon: 'description', + route: '.', + title: 'An item description', + description: 'Description', + }, { + icon: 'vpn_key', + route: '.', + title: '1141e8e8-8d24-4956-93c2', + description: 'API Key', + }, + ]; + carddates: Object[] = [{ + icon: 'access_time', + route: '.', + date: '2017-07-07T00:25:49+00:00', + description: 'Last Updated', + }, { + icon: 'today', + route: '.', + date: '2017-07-04T00:25:49+00:00', + description: 'Created', + }, + ]; } diff --git a/src/app/components/layouts/layouts.component.html b/src/app/components/layouts/layouts.component.html index 90c6b64632..2fba7b3717 100644 --- a/src/app/components/layouts/layouts.component.html +++ b/src/app/components/layouts/layouts.component.html @@ -1 +1,7 @@ - \ No newline at end of file + + + + + diff --git a/src/app/components/layouts/layouts.module.ts b/src/app/components/layouts/layouts.module.ts index 29cb47ce20..21414bcec8 100644 --- a/src/app/components/layouts/layouts.module.ts +++ b/src/app/components/layouts/layouts.module.ts @@ -12,7 +12,8 @@ import { ManageListComponent } from './manage-list/manage-list.component'; import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdToolbarModule, MdCoreModule } from '@angular/material'; -import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentStepsModule, CovalentMediaModule } from '../../../platform/core'; +import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentStepsModule, CovalentMediaModule, + CovalentCommonModule } from '../../../platform/core'; import { CovalentHighlightModule } from '../../../platform/highlight'; import { DocumentationToolsModule } from '../../documentation-tools'; @@ -44,6 +45,7 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; CovalentStepsModule, CovalentMediaModule, CovalentHighlightModule, + CovalentCommonModule, DocumentationToolsModule, layoutsRoutes, ToolbarModule, diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html index 484179df81..5f34259b76 100644 --- a/src/app/components/layouts/manage-list/manage-list.component.html +++ b/src/app/components/layouts/manage-list/manage-list.component.html @@ -1,222 +1,449 @@ - - - - - - Optional Title - - - folderItem Name - peopleItem Name - - - - Optional Subtitle - - - - - - Manage List Layout - Content/object management views (this page is using manage list) - - + + Minimum Demo + Minimum code for this layout with no wrapper + + + + +
+ Sidenav content here +
+ + Content goes here + + + + + + + +
+ Sidenav content here +
+ + Content goes here + + ]]> + + + + + Basic Demo + Basic layout wrapper & nav drawer + + + + -

Recommended usage:

- -

Product landing page with subnavigation

- launch - - - -

Manage list view (users, systems, settings, etc.)

- launch - - + homeHome -
-
- - - - -

]]>

-

Builds the top toolbar

- - - -

toolbarTitle?: string

-

The title of your toolbar

- - - -

logo?: string

-

The path to your toolbar logo

- - - - - - - -

]]>

-

Builds the left nav and content area

- - - -

]]>

-

Optional Title]]>

-

Optional list toolbar w/ title

- - - -

]]>

-

The list items wrapper

- - - -

]]>

-

Loads html for each route (view)

- - - - - - - -

]]>

-

The toolbar for the content

- - - -

]]>

-

The button to toggle the manage list sidenav

- - - -

Optional Subtitle]]>

-

Optional subtitle

- - - -

]]>

-

Used as a spacer between buttons

- - - -

]]>

-

Toolbar icon buttons

- - - - - - - -

]]>

-

Optional footer before ]]>

- - - -

]]>

-

Optional inner footer before ]]>

- - - - - - -

[opened], [mode], [sidenavWidth]

-

Set media breakpoints to change the value of the inputs

- - - -

(click) media prevention

-

Close sidenav only on certain media breakpoints

- - - - + + + + + + Nav Title +
+ Sidenav content here +
+ + + Content Title + + Content goes here + + + + + + + + + + + homeHome + + + + + + + Nav Title +
+ Sidenav content here +
+ + + Content Title + + Content goes here + + + + ]]> + + + + + Full Demo + Full working code with all options and templates + + + + + + {{item.icon}}{{item.title}} + + + + +
+ + + Covalent + + chrome_reader_mode + +
+ + + Optional Title + + + + + {{item.icon}} {{item.title}} + + + + +
+ + Content Title + + +
+ +
+
+ + Products Sales + usage stats for our products + + + card content + + + + + View More + + + + + Customer Activity + Recent activity from select members + + + card content + + + + + View More + + + +
+
+ + Alerts + Items requiring attention + + + card content + + + + + View More + + + + + Favorites + Your favorite products + + + card content + + + + + View More + + + +
-
-

HTML

- - - + + Covalent + + chrome_reader_mode + +
+ + + Optional Title + + + + + { {item.icon} } { {item.title} } + + + + +
+ - - - Optional Title - - - folderItem Name - peopleItem Name - - - - Optional Subtitle - - - - - - - Optional inner footer - - - - Optional footer - - - ]]> - -

Typescript

- - Content Title + + +
+ +
+
+ + Products Sales + usage stats for our products + + + card content + + + + + View More + + + + + Customer Activity + Recent activity from select members + + + card content + + + + + View More + + + +
+
+ + Alerts + Items requiring attention + + + card content + + + + + View More + + + + + Favorites + Your favorite products + + + card content + + + + + View More + + + +
+
+ + Optional inner footer + + + +
+ Copyright © 2017 Teradata. All rights reserved +
+ + + + ]]> + +

TypeScript:

+ + - -
-
- - - - Go Back - - - - - - Optional footer - - + routes: Object[] = [{ + icon: 'home', + route: '.', + title: 'Home', + }, { + icon: 'library_books', + route: '.', + title: 'Documentation', + }, { + icon: 'color_lens', + route: '.', + title: 'Style Guide', + }, { + icon: 'view_quilt', + route: '.', + title: 'Layouts', + }, { + icon: 'picture_in_picture', + route: '.', + title: 'Components & Addons', + }, + ]; + usermenu: Object[] = [{ + icon: 'swap_horiz', + route: '.', + title: 'Switch account', + }, { + icon: 'tune', + route: '.', + title: 'Account settings', + }, { + icon: 'exit_to_app', + route: '.', + title: 'Sign out', + }, + ]; + navmenu: Object[] = [{ + icon: 'looks_one', + route: '.', + title: 'First item', + description: 'Item description', + }, { + icon: 'looks_two', + route: '.', + title: 'Second item', + description: 'Item description', + }, { + icon: 'looks_3', + route: '.', + title: 'Third item', + description: 'Item description', + }, { + icon: 'looks_4', + route: '.', + title: 'Fourth item', + description: 'Item description', + }, { + icon: 'looks_5', + route: '.', + title: 'Fifth item', + description: 'Item description', + }, + ]; + + constructor(private _changeDetectorRef: ChangeDetectorRef, + public media: TdMediaService) {} + + ngAfterViewInit(): void { + // broadcast to all listener observables when loading the page + this.media.broadcast(); + this._changeDetectorRef.detectChanges(); + } + + } + + ]]> + + + + \ No newline at end of file diff --git a/src/app/components/layouts/manage-list/manage-list.component.scss b/src/app/components/layouts/manage-list/manage-list.component.scss index e69de29bb2..8b4767991a 100644 --- a/src/app/components/layouts/manage-list/manage-list.component.scss +++ b/src/app/components/layouts/manage-list/manage-list.component.scss @@ -0,0 +1,7 @@ +:host /deep/ { + .mat-sidenav-container[fullscreen] { + position: static; + width: 100%; + min-height: 200px; + } +} diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts index 8a63f8ade5..3af8cb6fc9 100644 --- a/src/app/components/layouts/manage-list/manage-list.component.ts +++ b/src/app/components/layouts/manage-list/manage-list.component.ts @@ -15,6 +15,70 @@ export class ManageListComponent implements AfterViewInit { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; + routes: Object[] = [{ + icon: 'home', + route: '.', + title: 'Home', + }, { + icon: 'library_books', + route: '.', + title: 'Documentation', + }, { + icon: 'color_lens', + route: '.', + title: 'Style Guide', + }, { + icon: 'view_quilt', + route: '.', + title: 'Layouts', + }, { + icon: 'picture_in_picture', + route: '.', + title: 'Components & Addons', + }, + ]; + usermenu: Object[] = [{ + icon: 'swap_horiz', + route: '.', + title: 'Switch account', + }, { + icon: 'tune', + route: '.', + title: 'Account settings', + }, { + icon: 'exit_to_app', + route: '.', + title: 'Sign out', + }, + ]; + navmenu: Object[] = [{ + icon: 'looks_one', + route: '.', + title: 'First item', + description: 'Item description', + }, { + icon: 'looks_two', + route: '.', + title: 'Second item', + description: 'Item description', + }, { + icon: 'looks_3', + route: '.', + title: 'Third item', + description: 'Item description', + }, { + icon: 'looks_4', + route: '.', + title: 'Fourth item', + description: 'Item description', + }, { + icon: 'looks_5', + route: '.', + title: 'Fifth item', + description: 'Item description', + }, + ]; + constructor(private _changeDetectorRef: ChangeDetectorRef, public media: TdMediaService) {} diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html index d6f43572b5..604a46978a 100644 --- a/src/app/components/layouts/nav-list/nav-list.component.html +++ b/src/app/components/layouts/nav-list/nav-list.component.html @@ -1,215 +1,333 @@ - - - - - view_compact -

Item Name

-

item description

- - - - view_quilt -

Item Name

-

item description

- - -
- - Nav List - -
- - Nav List Layout - The Nav View with an embedded list (this page is using nav list) - - -

Recommended usage:

- -

Category list view (docs, blog or logs)

- launch - - - -

List of content items (email app, chat app, etc.)

- launch - - - - -
-
- - - - -

]]>

-

Builds the top toolbar, left nav and content area

- - - -

toolbarTitle?: string

-

The title of your toolbar

- - - -

logo?: string

-

The path to your toolbar logo

- - - -

navigationRoute?: string

-

Optional route navigation on logo/icon/title

- - - -

color?: string

-

Toolbar color (primary | accent | warn | none)

- - - -

]]>

-

menu button always at the left

-

(can be used to toggle main sidenav with [tdLayoutToggle])

- - - -

]]>

-

The list items wrapper

- - - -

]]>

-

Right column page title (optional)

- - - -

]]>

-

The button to toggle the nav list sidenav

- - - -

]]>

-

Loads html for each route (view)

- - - - - - - -

]]>

-

Optional footer

- + + Minimum Demo + Minimum code for this layout with no wrapper + + + +
+ Sidenav content here +
+ Content goes here + + + + + + +
+ Sidenav content here +
+ Content goes here + + ]]> + + + + + Basic Demo + Basic layout wrapper & nav drawer + + + + + + homeHome + + + + + +
+ Sidenav content here +
+
+ +
+ Content goes here + + + + + + + + + + homeHome + + + + + +
+ Sidenav content here +
+
+ +
+ Content goes here + + + ]]> + + + + + Full Demo + Full working code with all options and templates + + + + + + {{item.icon}}{{item.title}} + + + + +
+ + + Covalent +
+
+ + Page Title + + chrome_reader_mode + +
+ + + + {{item.icon}} +

{{item.title}}

+

{{item.description}}

+ + + + +
+ + Main Content + content area + + + card content + + + + + View More + + + +
+ + Optional inner footer + + +
+ Copyright © 2017 Teradata. All rights reserved +
+ + + + + + + + + + + { {item.icon} }{ {item.title} } + + + + +
+ + + Covalent +
+
+ + Page Title + + chrome_reader_mode + +
+ + + + { {item.icon} } +

{ {item.title} }

+

{ {item.description} }

+ + + + +
+ + Main Content + content area - -

]]>

-

Optional inner footer

- - - - - - -

[opened], [mode], [sidenavWidth]

-

Set media breakpoints to change the value of the inputs

- + + card content + - -

(click) media prevention

-

Close sidenav only on certain media breakpoints

- - - - -
-
-

HTML

- - - - - - view_compact -

Item Name

-

item description

+ + + View More - - - view_quilt -

Item Name

-

item description

- - -
- - Page Title - -
- - - Optional inner footer - - - Optional footer - - - ]]> - -

Typescript

- - + +
+ + Optional inner footer + + +
+ Copyright © 2017 Teradata. All rights reserved +
+ + + + ]]> + +

TypeScript:

+ + - -
-
- - - - Go back - - Card Over - - - - - Optional footer - - + routes: Object[] = [{ + icon: 'home', + route: '.', + title: 'Home', + }, { + icon: 'library_books', + route: '.', + title: 'Documentation', + }, { + icon: 'color_lens', + route: '.', + title: 'Style Guide', + }, { + icon: 'view_quilt', + route: '.', + title: 'Layouts', + }, { + icon: 'picture_in_picture', + route: '.', + title: 'Components & Addons', + }, + ]; + usermenu: Object[] = [{ + icon: 'swap_horiz', + route: '.', + title: 'Switch account', + }, { + icon: 'tune', + route: '.', + title: 'Account settings', + }, { + icon: 'exit_to_app', + route: '.', + title: 'Sign out', + }, + ]; + navmenu: Object[] = [{ + icon: 'looks_one', + route: '.', + title: 'First item', + description: 'Item description', + }, { + icon: 'looks_two', + route: '.', + title: 'Second item', + description: 'Item description', + }, { + icon: 'looks_3', + route: '.', + title: 'Third item', + description: 'Item description', + }, { + icon: 'looks_4', + route: '.', + title: 'Fourth item', + description: 'Item description', + }, { + icon: 'looks_5', + route: '.', + title: 'Fifth item', + description: 'Item description', + }, + ]; + + constructor(private _changeDetectorRef: ChangeDetectorRef, + public media: TdMediaService) {} + + ngAfterViewInit(): void { + // broadcast to all listener observables when loading the page + this.media.broadcast(); + this._changeDetectorRef.detectChanges(); + } + + } + ]]> + + + + \ No newline at end of file diff --git a/src/app/components/layouts/nav-list/nav-list.component.scss b/src/app/components/layouts/nav-list/nav-list.component.scss index e69de29bb2..8b4767991a 100644 --- a/src/app/components/layouts/nav-list/nav-list.component.scss +++ b/src/app/components/layouts/nav-list/nav-list.component.scss @@ -0,0 +1,7 @@ +:host /deep/ { + .mat-sidenav-container[fullscreen] { + position: static; + width: 100%; + min-height: 200px; + } +} diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts index 46d40a7a47..81df7635b7 100644 --- a/src/app/components/layouts/nav-list/nav-list.component.ts +++ b/src/app/components/layouts/nav-list/nav-list.component.ts @@ -15,6 +15,70 @@ export class NavListComponent implements AfterViewInit { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; + routes: Object[] = [{ + icon: 'home', + route: '.', + title: 'Home', + }, { + icon: 'library_books', + route: '.', + title: 'Documentation', + }, { + icon: 'color_lens', + route: '.', + title: 'Style Guide', + }, { + icon: 'view_quilt', + route: '.', + title: 'Layouts', + }, { + icon: 'picture_in_picture', + route: '.', + title: 'Components & Addons', + }, + ]; + usermenu: Object[] = [{ + icon: 'swap_horiz', + route: '.', + title: 'Switch account', + }, { + icon: 'tune', + route: '.', + title: 'Account settings', + }, { + icon: 'exit_to_app', + route: '.', + title: 'Sign out', + }, + ]; + navmenu: Object[] = [{ + icon: 'looks_one', + route: '.', + title: 'First item', + description: 'Item description', + }, { + icon: 'looks_two', + route: '.', + title: 'Second item', + description: 'Item description', + }, { + icon: 'looks_3', + route: '.', + title: 'Third item', + description: 'Item description', + }, { + icon: 'looks_4', + route: '.', + title: 'Fourth item', + description: 'Item description', + }, { + icon: 'looks_5', + route: '.', + title: 'Fifth item', + description: 'Item description', + }, + ]; + constructor(private _changeDetectorRef: ChangeDetectorRef, public media: TdMediaService) {} diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html index eb54e6a88d..f85de9c63a 100644 --- a/src/app/components/layouts/nav-view/nav-view.component.html +++ b/src/app/components/layouts/nav-view/nav-view.component.html @@ -1,108 +1,309 @@ - - - -
- - Nav View - A simple layout with toolbar & sidenav (this page is using nav view) - - -

Recommended usage:

- -

Oveview dashboard with cards

- launch - - - -

Dashboard with charts

- launch - - - - -
-
- - - - -

]]>

-

Builds the top toolbar and content area

- - - -

toolbarTitle?: string

-

The title of your toolbar

- - - -

logo?: string

-

The path to your toolbar logo

- - - -

color?: string

-

Toolbar color (primary | accent | warn | none)

- - - -

navigationRoute?: string

-

Optional route navigation on logo/icon/title

- - - -

]]>

-

menu button always at the left

-

(can be used to toggle main sidenav with [tdLayoutToggle])

- - - -

]]>

-

Loads html for each route (view)

- - - - - - - -

]]>

-

Optional footer

- - - - + + Minimum Demo + Minimum code for this layout with no wrapper + + + + + Content goes here + + + + + + + + Content goes here + + ]]> + + + + + Basic Demo + Basic layout wrapper & nav drawer + + + + + + homeHome + + + + + + Content goes here + + + + + + + + + + homeHome + + + + + + Content goes here + + + ]]> + + + + + Full Demo + Full working code with all options and templates + + + + + + {{item.icon}}{{item.title}} + + + + +
+ + + Covalent + + chrome_reader_mode + +
+
+
+ + Products Sales + usage stats for our products + + + card content + + + + + View More + + + + + Customer Activity + Recent activity from select members + + + card content + + + + + View More + + +
-
-

HTML

- - - - - - Optional footer - - - ]]> - +
+ + Alerts + Items requiring attention + + + card content + + + + + View More + + + + + Favorites + Your favorite products + + + card content + + + + + View More + + +
- - - - Go back - - Nav List - - - -
- - Optional footer - - + +
+ Copyright © 2017 Teradata. All rights reserved +
+ + + + + + + + + + + { {item.icon} }{ {item.title} } + + + + +
+ + + Covalent + + chrome_reader_mode + +
+
+
+ + Products Sales + usage stats for our products + + + card content + + + + Customer Activity + Recent activity from select members + + + card content + + +
+
+ + Alerts + Items requiring attention + + + card content + + + + + View More + + + + + Favorites + Your favorite products + + + card content + + + + View More + + + +
+
+ +
+ Copyright © 2017 Teradata. All rights reserved +
+ + + + ]]> + +

TypeScript:

+ + + + + + \ No newline at end of file diff --git a/src/app/components/layouts/nav-view/nav-view.component.scss b/src/app/components/layouts/nav-view/nav-view.component.scss index e69de29bb2..8b4767991a 100644 --- a/src/app/components/layouts/nav-view/nav-view.component.scss +++ b/src/app/components/layouts/nav-view/nav-view.component.scss @@ -0,0 +1,7 @@ +:host /deep/ { + .mat-sidenav-container[fullscreen] { + position: static; + width: 100%; + min-height: 200px; + } +} diff --git a/src/app/components/layouts/nav-view/nav-view.component.ts b/src/app/components/layouts/nav-view/nav-view.component.ts index 2faf5d2557..18ad5b8080 100644 --- a/src/app/components/layouts/nav-view/nav-view.component.ts +++ b/src/app/components/layouts/nav-view/nav-view.component.ts @@ -14,4 +14,41 @@ export class NavViewComponent { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; + routes: Object[] = [{ + icon: 'home', + route: '.', + title: 'Home', + }, { + icon: 'library_books', + route: '.', + title: 'Documentation', + }, { + icon: 'color_lens', + route: '.', + title: 'Style Guide', + }, { + icon: 'view_quilt', + route: '.', + title: 'Layouts', + }, { + icon: 'picture_in_picture', + route: '.', + title: 'Components & Addons', + }, + ]; + usermenu: Object[] = [{ + icon: 'swap_horiz', + route: '.', + title: 'Switch account', + }, { + icon: 'tune', + route: '.', + title: 'Account settings', + }, { + icon: 'exit_to_app', + route: '.', + title: 'Sign out', + }, + ]; + } diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html index 48b47fdf4d..a647955ddc 100644 --- a/src/app/components/layouts/overview/overview.component.html +++ b/src/app/components/layouts/overview/overview.component.html @@ -1,178 +1,172 @@ - - - - - -

For your entire app or for different sections of your app, select one of these Material Design layout options:

- - - + + Layout Options + We offer 4 Material Design layouts for you + + +

For your entire app or for different sections of your app, select one of these Material Design layout options:

+
- - {{item.icon}} -

{{item.title}}

-

{{item.description}}

+ + {{item.title}} +
{{item.title}}
+
{{item.description}}
 - - - -
-

Flexbox Layout ("grid")

- - -
-

We've ported the CSS3 Flexbox layout system from Angular-Material v1, so those docs shoud be your starting point.

-

In a nutshell, the Flexbox layout gives you:

-
    -
  • Horizontal row layout for child elements
    • -
  • Vertical column layout for child elements
    • -
  • Alignment & ordering for child elements
    • -
  • Any "flex" elastic width for child elements
    • -
  • Conditionally responsive versions for xs,sm,md,lg,xl breakpoints
    • -
-
- - -
-

Horizontal row container:

+
+ + + + + {{item.icon}} +

{{item.title}}

+

{{item.description}}

+ + + + + + + + Flexbox Layout ("grid") + + +
+

We've ported the CSS3 Flexbox layout system from Angular-Material v1, so those docs shoud be your starting point.

+

In a nutshell, the Flexbox layout gives you:

+
    +
  • Horizontal row layout for child elements
    • +
  • Vertical column layout for child elements
    • +
  • Alignment & ordering for child elements
    • +
  • Any "flex" elastic width for child elements
    • +
  • Conditionally responsive versions for xs,sm,md,lg,xl breakpoints
    • +
+
+ + +
+

Horizontal row container:

+
+
child
+
child
+
child
+
+ + + -
child
-
child
-
child
+
child
+
child
+
child
- - - -
child
-
child
-
child
-
- ]]> - - -

Vertical column container:

+ ]]> + + +

Vertical column container:

+
+
child
+
child
+
child
+
+ + + -
child
-
child
-
child
+
child
+
child
+
child
- - - -
child
-
child
-
child
-
- ]]> - -
- - -
-

Layout margin

+ ]]> + +
+ + +
+

Layout margin

+
+
child
+
child
+
child
+
+ + + -
child
-
child
-
child
+
child
+
child
+
child
- - - -
child
-
child
-
child
-
- ]]> - - -

Layout padding

+ ]]> + + +

Layout padding

+
+
child
+
child
+
child
+
+ + + -
child
-
child
-
child
+
child
+
child
+
child
- - - -
child
-
child
-
child
-
- ]]> - - - - -
-

40/flex/30 (notice how flex fills remaining space):

+ ]]> + +
+ + +
+

40/flex/30 (notice how flex fills remaining space):

+
+
child
+
child
+
child
+
+ + + -
child
-
child
-
child
+
child
+
child
+
child
- - - -
child
-
child
-
child
- - ]]> - - -

Responsive widths (will change as you resize browser):

+ ]]> + + +

Responsive widths (will change as you resize browser):

+
+
child
+
child
+
child
+
+ + + -
child
-
child
-
child
+
child
+
child
+
child
- - - -
child
-
child
-
child
- - ]]> - - -

Typical responsive layout (just collapse on xs which is mobile)

+ ]]> + + +

Typical responsive layout (just collapse on xs which is mobile)

+
+
child
+
child
+
+ + + -
child
-
child
+
child
+
child
- - - -
child
-
child
- - ]]> - - - - - - - - - - + ]]> + + + + + \ No newline at end of file diff --git a/src/app/components/layouts/overview/overview.component.scss b/src/app/components/layouts/overview/overview.component.scss index ad212e52b0..66f8375527 100644 --- a/src/app/components/layouts/overview/overview.component.scss +++ b/src/app/components/layouts/overview/overview.component.scss @@ -2,6 +2,3 @@ img { height: auto; width: 100%; } -[td-after-card] { - margin: 20px 8px 8px 8px; -} \ No newline at end of file diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html index e3b8d37869..73ff73da2f 100644 --- a/src/app/components/style-guide/style-guide.component.html +++ b/src/app/components/style-guide/style-guide.component.html @@ -15,7 +15,7 @@

Style Guide

[routerLink]="[item.route]" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" - (click)="!media.query('gt-sm') && navList.close()"> + [tdLayoutNavListClose]="!media.query('gt-sm')"> {{item.icon}}

{{item.title}}

{{item.description}}

@@ -28,7 +28,7 @@

Design Patterns

[routerLink]="[item.route]" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" - (click)="!media.query('gt-sm') && navList.close()"> + [tdLayoutNavListClose]="!media.query('gt-sm')"> {{item.icon}}

{{item.title}}

{{item.description}}

@@ -37,7 +37,7 @@

{{item.title}}

- Style Guide diff --git a/src/platform/core/layout/README.md b/src/platform/core/layout/README.md index f6bed416f4..968cb22970 100644 --- a/src/platform/core/layout/README.md +++ b/src/platform/core/layout/README.md @@ -27,12 +27,20 @@ Example for Main Layout: ``` -To toggle the main sidenav from child layouts/components, you can use the `[tdLayoutToggle]` directive on any element and its click event will trigger the toggle. +To toggle/close/open the main sidenav from child layouts/components, you can use the `[tdLayoutToggle]`, `[tdLayoutClose]` or `[tdLayoutOpen]` directives on any element and its click event will trigger the sidenav action. Example: ```html - +``` + +To disable the sidenav action, just set the input to false. + +```html + ``` diff --git a/src/platform/core/layout/layout-manage-list/README.md b/src/platform/core/layout/layout-manage-list/README.md index df7592f288..50e4636335 100644 --- a/src/platform/core/layout/layout-manage-list/README.md +++ b/src/platform/core/layout/layout-manage-list/README.md @@ -14,12 +14,20 @@ ## Usage -To toggle the manage list sidenav from child layouts/components, you can use the `[tdLayoutManageListToggle]` directive on any element and its click event will trigger the toggle. +To toggle/close/open the manage list sidenav from child layouts/components, you can use the `[tdLayoutManageListToggle]`, `[tdLayoutManageListClose]` or `[tdLayoutManageListOpen]` directives on any element and its click event will trigger the sidenav action. Example: ```html - +``` + +To disable the sidenav action, just set the input to false. + +```html + ``` @@ -32,6 +40,10 @@ Example: `[tdLayoutManageListToggle]` is used to add the sidenav toggle behavior to any clickable element. +`[tdLayoutManageListClose]` is used to add the sidenav close behavior to any clickable element. + +`[tdLayoutManageListOpen]` is used to add the sidenav open behavior to any clickable element. + Example for Manage List Layout / Nav Layout combo: ```html @@ -47,7 +59,7 @@ Example for Manage List Layout / Nav Layout combo: ... sidenav content - ... sub toolbar content diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts index b13eecd616..b34d9c4f0f 100644 --- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts @@ -1,19 +1,8 @@ -import { Component, Directive, Input, ViewChild, Inject, forwardRef, Renderer2, ElementRef } from '@angular/core'; +import { Component, Directive, Input, ViewChild } from '@angular/core'; import { MdSidenav, MdSidenavToggleResult } from '@angular/material'; -import { LayoutToggle, ILayoutTogglable } from '../layout-toggle.class'; - -@Directive({ - selector: '[tdLayoutManageListToggle]', -}) -export class TdLayoutManageListToggleDirective extends LayoutToggle { - constructor(@Inject(forwardRef(() => TdLayoutManageListComponent)) layout: TdLayoutManageListComponent, - renderer: Renderer2, - elementRef: ElementRef) { - super(layout, renderer, elementRef); - } -} +import { ILayoutTogglable } from '../layout-toggle.class'; @Component({ selector: 'td-layout-manage-list', @@ -22,7 +11,7 @@ export class TdLayoutManageListToggleDirective extends LayoutToggle { }) export class TdLayoutManageListComponent implements ILayoutTogglable { - @ViewChild(MdSidenav) _sideNav: MdSidenav; + @ViewChild(MdSidenav) sidenav: MdSidenav; /** * mode?: 'side', 'push' or 'over' @@ -69,21 +58,21 @@ export class TdLayoutManageListComponent implements ILayoutTogglable { * Proxy toggle method to access sidenav from outside (from td-layout template). */ public toggle(): Promise { - return this._sideNav.toggle(!this._sideNav.opened); + return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ public open(): Promise { - return this._sideNav.open(); + return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ public close(): Promise { - return this._sideNav.close(); + return this.sidenav.close(); } } diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.directives.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.directives.ts new file mode 100644 index 0000000000..467ccc8d3d --- /dev/null +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.directives.ts @@ -0,0 +1,66 @@ +import { Directive, Input, Renderer2, ElementRef, Inject, forwardRef } from '@angular/core'; +import { TdLayoutManageListComponent } from './layout-manage-list.component'; +import { LayoutToggle } from '../layout-toggle.class'; + +@Directive({ + selector: '[tdLayoutManageListToggle]', +}) +export class TdLayoutManageListToggleDirective extends LayoutToggle { + + @Input('tdLayoutManageListToggle') + set tdLayoutManageListToggle(tdLayoutManageListToggle: boolean) { + this.disabled = !(tdLayoutManageListToggle === '' || tdLayoutManageListToggle); + } + + constructor(@Inject(forwardRef(() => TdLayoutManageListComponent)) layout: TdLayoutManageListComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.toggle(); + } +} + +@Directive({ + selector: '[tdLayoutManageListClose]', +}) +export class TdLayoutManageListCloseDirective extends LayoutToggle { + + @Input('tdLayoutManageListClose') + set tdLayoutManageListClose(tdLayoutManageListClose: boolean) { + this.disabled = !(tdLayoutManageListClose === '' || tdLayoutManageListClose); + } + + constructor(@Inject(forwardRef(() => TdLayoutManageListComponent)) layout: TdLayoutManageListComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.close(); + } +} + +@Directive({ + selector: '[tdLayoutManageListOpen]', +}) +export class TdLayoutManageListOpenDirective extends LayoutToggle { + + @Input('tdLayoutManageListOpen') + set tdLayoutManageListOpen(tdLayoutManageListOpen: boolean) { + this.disabled = !(tdLayoutManageListOpen === '' || tdLayoutManageListOpen); + } + + constructor(@Inject(forwardRef(() => TdLayoutManageListComponent)) layout: TdLayoutManageListComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.open(); + } +} diff --git a/src/platform/core/layout/layout-nav-list/README.md b/src/platform/core/layout/layout-nav-list/README.md index bdb46b4870..ac3a805eca 100644 --- a/src/platform/core/layout/layout-nav-list/README.md +++ b/src/platform/core/layout/layout-nav-list/README.md @@ -19,12 +19,20 @@ ## Usage -To toggle the nav list sidenav from child layouts/components, you can use the `[tdLayoutNavListToggle]` directive on any element and its click event will trigger the toggle. +To toggle/close/open the nav list sidenav from child layouts/components, you can use the `[tdLayoutNavListToggle]`, `[tdLayoutNavListClose]` or `[tdLayoutNavListOpen]` directives on any element and its click event will trigger the sidenav action. Example: ```html - +``` + +To disable the sidenav action, just set the input to false. + +```html + ``` @@ -43,6 +51,10 @@ Example: `[tdLayoutNavListToggle]` is used to add the sidenav toggle behavior to any clickable element. +`[tdLayoutNavListClose]` is used to add the sidenav close behavior to any clickable element. + +`[tdLayoutNavListOpen]` is used to add the sidenav open behavior to any clickable element. + Example for Nav List Layout: ```html @@ -54,7 +66,7 @@ Example for Nav List Layout: ... left toolbar content
- ... sidenav content diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts index 6c531c5c30..a24fc5c7b2 100644 --- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts @@ -1,22 +1,9 @@ -import { Component, Directive, Input, ViewChild, forwardRef, Optional, Inject, Renderer2, - ElementRef, HostBinding, HostListener } from '@angular/core'; +import { Component, Input, ViewChild, Optional } from '@angular/core'; import { Router } from '@angular/router'; import { MdSidenav, MdSidenavToggleResult } from '@angular/material'; -import { TdLayoutComponent } from '../layout.component'; -import { LayoutToggle, ILayoutTogglable } from '../layout-toggle.class'; - -@Directive({ - selector: '[tdLayoutNavListToggle]', -}) -export class TdLayoutNavListToggleDirective extends LayoutToggle { - constructor(@Inject(forwardRef(() => TdLayoutNavListComponent)) layout: TdLayoutNavListComponent, - renderer: Renderer2, - elementRef: ElementRef) { - super(layout, renderer, elementRef); - } -} +import { ILayoutTogglable } from '../layout-toggle.class'; @Component({ selector: 'td-layout-nav-list', @@ -25,7 +12,7 @@ export class TdLayoutNavListToggleDirective extends LayoutToggle { }) export class TdLayoutNavListComponent implements ILayoutTogglable { - @ViewChild(MdSidenav) _sideNav: MdSidenav; + @ViewChild(MdSidenav) sidenav: MdSidenav; /** * toolbarTitle?: string @@ -122,21 +109,21 @@ export class TdLayoutNavListComponent implements ILayoutTogglable { * Proxy toggle method to access sidenav from outside (from td-layout template). */ public toggle(): Promise { - return this._sideNav.toggle(!this._sideNav.opened); + return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ public open(): Promise { - return this._sideNav.open(); + return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ public close(): Promise { - return this._sideNav.close(); + return this.sidenav.close(); } } diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.directives.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.directives.ts new file mode 100644 index 0000000000..8bf0abf755 --- /dev/null +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.directives.ts @@ -0,0 +1,66 @@ +import { Directive, Input, Renderer2, ElementRef, Inject, forwardRef } from '@angular/core'; +import { TdLayoutNavListComponent } from './layout-nav-list.component'; +import { LayoutToggle } from '../layout-toggle.class'; + +@Directive({ + selector: '[tdLayoutNavListToggle]', +}) +export class TdLayoutNavListToggleDirective extends LayoutToggle { + + @Input('tdLayoutNavListToggle') + set tdLayoutNavListToggle(tdLayoutNavListToggle: boolean) { + this.disabled = !(tdLayoutNavListToggle === '' || tdLayoutNavListToggle); + } + + constructor(@Inject(forwardRef(() => TdLayoutNavListComponent)) layout: TdLayoutNavListComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.toggle(); + } +} + +@Directive({ + selector: '[tdLayoutNavListClose]', +}) +export class TdLayoutNavListCloseDirective extends LayoutToggle { + + @Input('tdLayoutNavListClose') + set tdLayoutNavListClose(tdLayoutNavListClose: boolean) { + this.disabled = !(tdLayoutNavListClose === '' || tdLayoutNavListClose); + } + + constructor(@Inject(forwardRef(() => TdLayoutNavListComponent)) layout: TdLayoutNavListComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.close(); + } +} + +@Directive({ + selector: '[tdLayoutNavListOpen]', +}) +export class TdLayoutNavListOpenDirective extends LayoutToggle { + + @Input('tdLayoutNavListOpen') + set tdLayoutNavListOpen(tdLayoutNavListOpen: boolean) { + this.disabled = !(tdLayoutNavListOpen === '' || tdLayoutNavListOpen); + } + + constructor(@Inject(forwardRef(() => TdLayoutNavListComponent)) layout: TdLayoutNavListComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.open(); + } +} diff --git a/src/platform/core/layout/layout-toggle.class.ts b/src/platform/core/layout/layout-toggle.class.ts index 942ad3396a..4d8a0369f5 100644 --- a/src/platform/core/layout/layout-toggle.class.ts +++ b/src/platform/core/layout/layout-toggle.class.ts @@ -1,42 +1,73 @@ -import { Input, HostBinding, HostListener, Renderer2, ElementRef } from '@angular/core'; +import { Input, HostBinding, HostListener, Renderer2, ElementRef, AfterViewInit } from '@angular/core'; -import { MdSidenavToggleResult } from '@angular/material'; +import { MdSidenavToggleResult, MdSidenav } from '@angular/material'; + +import { Observable } from 'rxjs/Observable'; +import { Subscription } from 'rxjs/Subscription'; +import { merge } from 'rxjs/observable/merge'; export interface ILayoutTogglable { - opened: boolean; + sidenav: MdSidenav; toggle(): Promise; + open(): Promise; + close(): Promise; } -export abstract class LayoutToggle { +export abstract class LayoutToggle implements AfterViewInit { - /** - * hideWhenOpened?: boolean - * When this is set to false, the host will not be hidden when - * the layout is set to [opened]="true". - */ - @Input('hideWhenOpened') hideWhenOpened: boolean = true; + private _initialized: boolean = false; + private _disabled: boolean = false; + private _hideWhenOpened: boolean = false; + + set disabled(disabled: boolean) { + this._disabled = disabled; + } /** - * Hides element if layout is opened and [hideWhenOpened] is set to true + * hideWhenOpened?: boolean + * When this is set to true, the host will be hidden when + * the sidenav is opened. */ - @HostBinding('style.display') - get hiddenBinding(): string { - return this._layout.opened && this.hideWhenOpened ? 'none' : undefined; + @Input('hideWhenOpened') + set hideWhenOpened(hideWhenOpened: boolean) { + this._hideWhenOpened = hideWhenOpened; + if (this._initialized) { + this._toggleVisibility(); + } } - constructor(private _layout: ILayoutTogglable, + constructor(protected _layout: ILayoutTogglable, private _renderer: Renderer2, private _elementRef: ElementRef) { this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-menu-button'); } + ngAfterViewInit(): void { + this._initialized = true; + merge(this._layout.sidenav.onOpenStart, this._layout.sidenav.onCloseStart).subscribe(() => { + this._toggleVisibility(); + }); + } + /** * Listens to host click event to trigger the layout toggle */ @HostListener('click', ['$event']) clickListener(event: Event): void { event.preventDefault(); - this._layout.toggle(); + if (!this._disabled) { + this.onClick(); + } + } + + abstract onClick(): void; + + private _toggleVisibility(): void { + if (this._layout.sidenav._opened && this._hideWhenOpened) { + this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none'); + } else { + this._renderer.setStyle(this._elementRef.nativeElement, 'display', ''); + } } } diff --git a/src/platform/core/layout/layout.component.ts b/src/platform/core/layout/layout.component.ts index 8c27385d86..21d2bce7aa 100644 --- a/src/platform/core/layout/layout.component.ts +++ b/src/platform/core/layout/layout.component.ts @@ -1,19 +1,8 @@ -import { Component, Directive, Input, ViewChild, Inject, forwardRef, Renderer2, ElementRef } from '@angular/core'; +import { Component, Input, ViewChild } from '@angular/core'; import { MdSidenav, MdSidenavToggleResult } from '@angular/material'; -import { LayoutToggle, ILayoutTogglable } from './layout-toggle.class'; - -@Directive({ - selector: '[tdLayoutToggle]', -}) -export class TdLayoutToggleDirective extends LayoutToggle { - constructor(@Inject(forwardRef(() => TdLayoutComponent)) layout: TdLayoutComponent, - renderer: Renderer2, - elementRef: ElementRef) { - super(layout, renderer, elementRef); - } -} +import { ILayoutTogglable } from './layout-toggle.class'; @Component({ selector: 'td-layout', diff --git a/src/platform/core/layout/layout.directives.ts b/src/platform/core/layout/layout.directives.ts new file mode 100644 index 0000000000..a5e8571f00 --- /dev/null +++ b/src/platform/core/layout/layout.directives.ts @@ -0,0 +1,66 @@ +import { Directive, Input, Renderer2, ElementRef, Inject, forwardRef } from '@angular/core'; +import { TdLayoutComponent } from './layout.component'; +import { LayoutToggle } from './layout-toggle.class'; + +@Directive({ + selector: '[tdLayoutToggle]', +}) +export class TdLayoutToggleDirective extends LayoutToggle { + + @Input('tdLayoutToggle') + set tdLayoutToggle(tdLayoutToggle: boolean) { + this.disabled = !(tdLayoutToggle === '' || tdLayoutToggle); + } + + constructor(@Inject(forwardRef(() => TdLayoutComponent)) layout: TdLayoutComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.toggle(); + } +} + +@Directive({ + selector: '[tdLayoutClose]', +}) +export class TdLayoutCloseDirective extends LayoutToggle { + + @Input('tdLayoutClose') + set tdLayoutClose(tdLayoutClose: boolean) { + this.disabled = !(tdLayoutClose === '' || tdLayoutClose); + } + + constructor(@Inject(forwardRef(() => TdLayoutComponent)) layout: TdLayoutComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.close(); + } +} + +@Directive({ + selector: '[tdLayoutOpen]', +}) +export class TdLayoutOpenDirective extends LayoutToggle { + + @Input('tdLayoutOpen') + set tdLayoutClose(tdLayoutOpen: boolean) { + this.disabled = !(tdLayoutOpen === '' || tdLayoutOpen); + } + + constructor(@Inject(forwardRef(() => TdLayoutComponent)) layout: TdLayoutComponent, + renderer: Renderer2, + elementRef: ElementRef) { + super(layout, renderer, elementRef); + } + + onClick(): void { + this._layout.open(); + } +} diff --git a/src/platform/core/layout/layout.module.ts b/src/platform/core/layout/layout.module.ts index 40e164ea50..092e60a2fd 100644 --- a/src/platform/core/layout/layout.module.ts +++ b/src/platform/core/layout/layout.module.ts @@ -4,11 +4,18 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MdSidenavModule, MdToolbarModule, MdButtonModule, MdIconModule, MdCardModule, MdListModule, ScrollDispatchModule } from '@angular/material'; -import { TdLayoutComponent, TdLayoutToggleDirective } from './layout.component'; +import { TdLayoutComponent } from './layout.component'; +import { TdLayoutToggleDirective, TdLayoutCloseDirective, TdLayoutOpenDirective } from './layout.directives'; import { TdLayoutNavComponent } from './layout-nav/layout-nav.component'; -import { TdLayoutNavListComponent, TdLayoutNavListToggleDirective } from './layout-nav-list/layout-nav-list.component'; +import { TdLayoutNavListComponent } from './layout-nav-list/layout-nav-list.component'; +import { + TdLayoutNavListToggleDirective, TdLayoutNavListCloseDirective, TdLayoutNavListOpenDirective, +} from './layout-nav-list/layout-nav-list.directives'; import { TdLayoutCardOverComponent } from './layout-card-over/layout-card-over.component'; -import { TdLayoutManageListComponent, TdLayoutManageListToggleDirective } from './layout-manage-list/layout-manage-list.component'; +import { TdLayoutManageListComponent } from './layout-manage-list/layout-manage-list.component'; +import { + TdLayoutManageListToggleDirective, TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective, +} from './layout-manage-list/layout-manage-list.directives'; import { TdLayoutFooterComponent } from './layout-footer/layout-footer.component'; import { TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective } from './navigation-drawer/navigation-drawer.component'; @@ -16,21 +23,34 @@ import { TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective } from './ const TD_LAYOUTS: Type[] = [ TdLayoutComponent, TdLayoutToggleDirective, + TdLayoutCloseDirective, + TdLayoutOpenDirective, + TdLayoutNavComponent, + TdLayoutNavListComponent, TdLayoutNavListToggleDirective, + TdLayoutNavListCloseDirective, + TdLayoutNavListOpenDirective, + TdLayoutCardOverComponent, + TdLayoutManageListComponent, TdLayoutManageListToggleDirective, + TdLayoutManageListCloseDirective, + TdLayoutManageListOpenDirective, + TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective, ]; -export { TdLayoutComponent, TdLayoutToggleDirective, TdLayoutNavComponent, TdLayoutNavListComponent, TdLayoutNavListToggleDirective, - TdLayoutCardOverComponent, TdLayoutManageListComponent, TdLayoutManageListToggleDirective, - TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective }; +export { TdLayoutComponent, TdLayoutToggleDirective, TdLayoutCloseDirective, TdLayoutOpenDirective, + TdLayoutNavComponent, TdLayoutNavListComponent, TdLayoutNavListToggleDirective, TdLayoutNavListCloseDirective, TdLayoutNavListOpenDirective, + TdLayoutCardOverComponent, TdLayoutManageListComponent, TdLayoutManageListToggleDirective, + TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective, + TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective }; @NgModule({ imports: [ diff --git a/src/platform/core/loading/services/loading.factory.ts b/src/platform/core/loading/services/loading.factory.ts index 828f5eb7b5..b835bd0c5b 100644 --- a/src/platform/core/loading/services/loading.factory.ts +++ b/src/platform/core/loading/services/loading.factory.ts @@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription'; import { TdLoadingContext } from '../directives/loading.directive'; import { TdLoadingComponent, LoadingType, LoadingMode, LoadingStrategy, LoadingStyle } from '../loading.component'; -import { ITdLoadingConfig} from './loading.service'; +import { ITdLoadingConfig } from './loading.service'; export interface IInternalLoadingOptions extends ITdLoadingConfig { height?: number;