From eb72cc41dbb8620d6a95a29875cb9d2dbfaeee1b Mon Sep 17 00:00:00 2001 From: Jenn Medellin <54321jenn@gmail.com> Date: Thu, 25 Jan 2018 15:11:20 -0800 Subject: [PATCH] chore(): update patterns to use stackblitz (#1064) * chore()/update cards pattern - Add stackblitz example - Modify layout to match new patterns * chore()/update patterns - Remove example logic from cards - Rework alert pattern * chore()/update mgmt list - update management list example to stackblitz - fix layout * chore()/update mgmt list - update ts * chore()/update patterns - update mgmt list & nav drawer pattern layouts & examples * chore()/update layouts - cleanup all layouts * chore()/clean up - Clean up guidance * chore(docs): update patterns - Add [inset]="true" on MatDividers - Fix Do's and Don'ts (lost in code conflict) * chore(docs)/update patterns to stackblitz - make all typography divs include relative class * chore(docs)/update to stackblitz - remove unused css * chore(patterns): fix dividers & lists * chore(theme): fix link style * chore(patterns): add missing dividers --- .../alerts/alerts.component.html | 449 ++++--------- .../alerts/alerts.component.ts | 70 +- .../cards/cards.component.html | 630 +++--------------- .../design-patterns/cards/cards.component.ts | 24 +- .../empty-states/empty-states.component.html | 42 +- .../management-list.component.html | 354 +++------- .../management-list.component.ts | 102 +-- .../navigation-drawer.component.html | 235 +++---- .../navigation-drawer.component.scss | 17 - .../navigation-drawer.component.ts | 46 +- .../steppers/steppers.component.html | 53 +- .../steppers/steppers.component.scss | 3 - .../core/common/styles/core/_card.scss | 3 + src/theme.scss | 3 +- 14 files changed, 485 insertions(+), 1546 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index 4a9d809eef..85d8c23eed 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -1,327 +1,140 @@ -
- +
+ Alert Patterns - -

Problem

-

Need to provide information or feedback to the user and potentially prompt them to take action. -

Solution

-

Notifications have a signifigant impact on the user's overall impression of the application. This is how the app communicates directly with the user, so it is important to consider the form of notification. For exmaple, dialogs are most useful in situations where the user most take some action or the app needs to communicate critical information. On the other hand, toasts and snackbars are passive and do not require any user action or interruption to the user's workflow. Inline errors are useful for forms validation while guiding the user through the form.

+ +

When to use

+

Dialogs, toasts, and inline errors all provide a means to communicate with the user to provide feedback or a call to action.

 - - - Resources - - - - launch - Material Design Dialogs - - - - launch - Material Design Toasts & Snackbars - - - - launch - Material Design Errors - - - - launch - Angular Material Dialogs - - - - launch - Angular Material Snackbars - - - - launch - Covalent Dialogs - - - -
- - - Examples - - - -
-
- Dialogs - Notification with call to action - -

Since dialogs are disruptive, reserve use to inform users about a specific task or critical information, such as - a verbose/critical error, alert or a confirmation of an action.

- + + +
+ Example + + + launch +
-
- - -
- - -
- -
- -
- - - HTML - - View Error - - ]]> - - - - Typescript - - { - if (accept) { - // DO SOMETHING - } else { - // DO SOMETHING ELSE - } - }); - } - ]]> - - - -
- -
- - - - - -
-
- -
-
- Toast - Brief, floating notification with optional user interaction - -

Toasts & snackbars provide brief feedback about an operation through a message at the bottom of the screen. This information is transient and will go away momentarily.

- + + +
+
+

Usage

+ + +

Dialogs

+

Catastrophic errors & confirmations

+ + + +

Snackbars (Toasts)

+

Passive temporary confirmations

+ + + +

Form Errors & Hints

+

Informative inline tips

+ + + +

Messages

+

Priority info or errors

+ + + +

Lists

+

Use lists inside cards

+ + + +

Images

+

Various size & location options

+ + + +

Guidelines

+ + + launch +

Material Design

+

Dialogs

+ + + + launch +

Angular Material

+

Dialogs

+ + + + launch +

Material Design

+

Snackbars

+ + + + launch + Angular Material +

Snackbars

+ + + + launch + Material Design +

Errors

+ +
-
- - -
- - -
- -
- -
- - - HTML - - Send toast - ]]> - - - - Typescript - - - - - -
- -
- - - - +
+
- -
-
- Inline Errors - For forms and inputs use inline errors for contextual feedback. - -

Inline errors are useful in forms for validation, warnings and errors.

- -
-
- - -
- - -
- -
- -
- - -
- - - - Required - - - - - - Required - - -
-
- - - - Required - - {{addressEl.value.length}} / 50 - - - - -
-
- - - - - Required - 2 uppercase letters - - - e.g CA - - - - - - Required - 5 digits pls - - - e.g 92101 - -
- -
- -
- - ]]> - -
- -
- -
-
- - - - Required - - - - - - Required - - -
-
- - - - Required - - {{addressEl.value.length}} / 50 - - - - -
-
- - - - - Required - 2 uppercase letters - - - e.g CA - - - - - - Required - 5 digits pls - - - e.g 92101 - -
-
- -
+ +
+
+ + + Do + + + + + looks_one +

Align action buttons to the right.

+ + + looks_two +

Keep dialogs simple

+ + + looks_3 +

Give informative error messages.

+ + +
- - \ No newline at end of file +
+ + + Don't + + + + + looks_one +

Don't use dialogs for complex forms.

+ + + looks_two +

Don't use a dismiss button in snackbar.

+ + + looks_3 +

Don't use a snackbar for important info.

+ + + +
+
+
diff --git a/src/app/components/design-patterns/alerts/alerts.component.ts b/src/app/components/design-patterns/alerts/alerts.component.ts index d3d5c131e5..6840264084 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.ts +++ b/src/app/components/design-patterns/alerts/alerts.component.ts @@ -1,19 +1,13 @@ import { Component, HostBinding } from '@angular/core'; - +import { DomSanitizer } from '@angular/platform-browser'; import { slideInDownAnimation } from '../../../app.animations'; -import { TdDialogService } from '../../../../platform/core'; -import { TdCollapseAnimation } from '@covalent/core/common'; - -import { MatSnackBar } from '@angular/material/snack-bar'; - @Component({ selector: 'design-patterns-alerts', styleUrls: ['./alerts.component.scss'], templateUrl: './alerts.component.html', animations: [ slideInDownAnimation, - TdCollapseAnimation(), ], }) export class AlertsComponent { @@ -21,65 +15,9 @@ export class AlertsComponent { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; - firstName: string; - lastName: string; - address: string; - city: string; - state: string; - zip: string; - example1: boolean = true; - example2: boolean = true; - example3: boolean = true; + source: any = ''; - constructor(private _dialogService: TdDialogService, - private _snackBarService: MatSnackBar) {} - - showSnackBar(): void { - this._snackBarService - .open('Connection timed out. Showing limited messages.', 'Retry', { duration: 3000 }); - } - openAlert(): void { - this._dialogService.openAlert({ - message: 'You don\'t have the required permissions to view this item! Contact an administrator!', - disableClose: true, - title: '401 Permissions Error!', - closeButton: 'Ok', - }); - } - openConfirm(): void { - this._dialogService.openConfirm({ - message: 'Are you sure you want to delete this item? It\'s used on other items.', - title: 'Confirm', - cancelButton: 'Cancel', - acceptButton: 'Delete', - }).afterClosed().subscribe((accept: boolean) => { - if (accept) { - this.confirmDelete(); - } else { - // DO SOMETHING ELSE - } - }); - } - confirmDelete(): void { - this._snackBarService.open('Item deleted', '', { duration: 3000 }); - } - openPrompt(): void { - this._dialogService.openPrompt({ - message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.', - title: 'Prompt', - value: 'Prepopulated value', - cancelButton: 'Cancel', - acceptButton: 'Ok', - }).afterClosed().subscribe((newValue: string) => { - if (newValue) { - // DO SOMETHING - } else { - // DO SOMETHING ELSE - } - }); - } - - toggle(div: string ): void { - this[div] = !this[div]; + constructor(private sanitizer: DomSanitizer) { + this.source = sanitizer.bypassSecurityTrustResourceUrl('https://alert-patterns.stackblitz.io/'); } } diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index 385488664e..68e5e3a1d2 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -1,534 +1,114 @@ -
- - Card Patterns +
+ + Cards Patterns - -

Problem

-

Need to display item or set of content composed of different elements whose size or supported actions vary.

-

Solution

-

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing - elements whose size or supported actions vary, like photos with captions of variable length.

+ +

When to use

+

Use a card layout when displaying collections of multiple data types such as images, movies, and text. Also useful when content has variable length and a grid list is not suitable.

 - - Resources - - - - launch - Material Design Cards - - - - launch - Angular Material Cards - - - - launch - Google Now Cards - - - -
- - Examples - - -
-
- Standard Card - Card with standard card elements - -

A card can be used with any of the optional card sub-elements including:

- - - mat-card-title - - - - mat-card-subtitle - - - - mat-divider - - - - mat-card-content - - - - mat-card-actions - - -

Additionally, a card may contain other components such as search, lists, icons, and images.

- -
-
- - -
- - -
- -
-
- - - Standard Card - Subtitle - - -

Standard card with content

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

- - - - - - - - ]]> - -
- -
- - Title - Subtitle - - - - - - - - - - + + +
+ Example + + + launch +
-
-
-
- Login Card - Card with form - -

In special cases, cards may contain form elements, like the login card. However, in most sitautions, we recommend using the Card Over full page layout for forms.

- -
-
- - -
- - -
- -
-
- - Login - Sign In with Your Credentials - - -
-
- - - - Required - - { {userElement.value.length} } / 30 - -
-
- - - - Required - - Something hard to guess - -
-
-
The username or password is incorrect. Please try again.
- - - -
- -
- - - ]]> - -
- -
- - - Login - - Sign In with Your Credentials - - -
-
- - - - Required - - {{userElement.value.length}} / 30 - -
-
- - - - Required - - Something hard to guess - -
-
-
The username or password is incorrect. Please try again.
- - - -
- -
- - - + + +
+
+

Usage

+ + +

Card Title

+

Brief content header

+ + + +

Card subtitle

+

More detailed description

+ + + +

Dividers

+

Use dividers around content

+ + + +

Actions

+

Left aligned action buttons

+ + + +

Lists

+

Use lists inside cards

+ + + +

Images

+

Various size & location options

+ + + +

Guidelines

+ + + launch +

Material Design

+

Cards Guidelines

+ + + + launch +

Angular Material

+

Cards Guidelines

+ +
-
-
-
- Metadata List Card - Card with metadata for an item detail - -

Cards support many rich components, including our management list. When adding multiple lists to a card, seperate them using mat-divider and consider adding matSubheader.

- -
-
- - -
- - -
- -
-
- - - Item Info - Info About This Item - - -

Metadata

- - account_box -

John Jameson

-

Owner

- - - - description -

An Item Description

-

Description

- - - - vpn_key -

1141e8e8-8d24-4956-93c2

-

API Key

- - -

Dates

- - access_time -

Wed, July 6, 2016 11:13 AM

-

Last Updated

- - - - today -

Wed, July 4, 2016 09:11 AM

-

Created

- - - - - - - - ]]> - -
- -
- - Item Info - Info About This Item - - -

Metadata

- - account_box -

John Jameson

-

Owner

- - - - description -

An Item Description

-

Description

- - - - vpn_key -

1141e8e8-8d24-4956-93c2

-

API Key

- - -

Dates

- - access_time -

Wed, July 6, 2016 11:13 AM

-

Last Updated

- - - - today -

Wed, July 4, 2016 09:11 AM

-

Created

- - - - - - - - +
+
-
-
- CRUD Manage List Card - Card with faux-columns & search - -

In this example, notice the search component in the top left. Also, using the flex model, you can simulate columns by using the same layout on each row. See the management list for more implementation details.

- -
-
- - -
- - -
- -
-
- - - - - - search - - - - - apps -

App Name

- - Owner - Modified - - - - dns -

Item { {i} }

-

Item Description

- - Firstname Lastname - Apr 14, 2016 12:32 PM - - - - - - ]]> - -
- -
- - - - - search - - - - - apps -

App Name

- - Owner - Modified - - - - dns -

Item {{i}}

-

Item Description

- - Firstname Lastname - Apr 14, 2016 12:32 PM - - - - - - -
+ +
+
+ + + Do + + + + + looks_one +

Use flexbox for responsiveness

+ + + looks_two +

Set tab-index for accessibility

+ + +
-
-
- Card with Image Variations - Card with sepcial image elements - -

Images displayed within cards inherit styling which removes margin and padding, depending on where the imgae is positioned within the card. Notice if the image is first it has proper rounded corners.

-

Examples are leveraging the following special image elements:

- - - Card Small Image -

mat-card-sm-image

- - - - Card Medium Image -

mat-card-md-image

- - - -
-
- - -
- - -
- -
-
- - - - - Card with Image First - 100% Width Image - - - -
-
- - - Card with Small Image - 80px x 80px Image - - - -
-
- - - Card with Medium Image - 112px x 112px Image - - - -
-
- - - Card with Large Image - 152px x 152px image - - - -
- ]]> - -
- -
-
-
- - kitten - Card with Image First - 100% Width Image - - - -
-
- - - Card with Small Image - 80px x 80px Image - kitten - - -
-
- - - Card with Medium Image - 112px x 112px Image - kitten - - -
-
- - - Card with Large Image - 152px x 152px Image - kitten - - -
-
- -
+
+ + + Don't + + + + + looks_one +

Don't overload cards with unnecessary information

+ + + looks_two +

Don't use in place of galleries or lists

+ + +
- - \ No newline at end of file +
+
diff --git a/src/app/components/design-patterns/cards/cards.component.ts b/src/app/components/design-patterns/cards/cards.component.ts index 71f037e268..227a428ae2 100644 --- a/src/app/components/design-patterns/cards/cards.component.ts +++ b/src/app/components/design-patterns/cards/cards.component.ts @@ -1,4 +1,5 @@ import { Component, HostBinding } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; import { TdCollapseAnimation } from '@covalent/core/common'; import { slideInDownAnimation } from '../../../app.animations'; @@ -9,33 +10,16 @@ import { slideInDownAnimation } from '../../../app.animations'; templateUrl: './cards.component.html', animations: [ slideInDownAnimation, - TdCollapseAnimation(), ], }) export class CardsComponent { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; - - username: string; - password: string; - fadeDiv: boolean = true; - example1: boolean = true; - example2: boolean = true; - example3: boolean = true; - example4: boolean = true; - example5: boolean = true; - invalidError: boolean = false; - - login(): void { - this.invalidError = true; - setTimeout(() => { - this.invalidError = false; - }, 500); - } + source: any = ''; - toggle(div: string): void { - this[div] = !this[div]; + constructor(private sanitizer: DomSanitizer) { + this.source = sanitizer.bypassSecurityTrustResourceUrl('https://cards-patterns.stackblitz.io/'); } } diff --git a/src/app/components/design-patterns/empty-states/empty-states.component.html b/src/app/components/design-patterns/empty-states/empty-states.component.html index b503ceab24..97cd176a41 100644 --- a/src/app/components/design-patterns/empty-states/empty-states.component.html +++ b/src/app/components/design-patterns/empty-states/empty-states.component.html @@ -4,7 +4,7 @@

When to use

-

When no content is avaiable for a section and the user needs addtional instruction or feedback.

+

When no content is available for a section and the user needs additional instruction or feedback.

 @@ -21,38 +21,34 @@

When to use

Usage

-

Icon

-

Use the content type icon if possible.

-
- -
-

Language

-

Follow the Material Design spec for language & text.

-
+ + +

Icon

+

Content type icon

+ -
-

Primary Action

-

Optionally include a primary action button (raised with accent color).

-
+ +

Primary Action

+

Raised accent button

+ -
-

Secondary Action

-

Optionally include a secondary action button (not raised).

-
+ +

Secondary Action

+

Grey standard button

+ -
-

Guidelines

+ +

Guidelines

- launch - Material Design + launch +

Material Design

Empty State Guidelines
- +
diff --git a/src/app/components/design-patterns/management-list/management-list.component.html b/src/app/components/design-patterns/management-list/management-list.component.html index a77ecebe59..d83f5da323 100644 --- a/src/app/components/design-patterns/management-list/management-list.component.html +++ b/src/app/components/design-patterns/management-list/management-list.component.html @@ -1,280 +1,106 @@ -
- - Management Lists Patterns - - -

Problem

-

Need to display collection of data with a similar data type and a minimal amount of metadata.

-

Solution

-

If the amount of data or structure of the data does not justify a data grid, consider using a management list with - faux-columns and sorting instead.

- - - - Resources - - - - launch - Material Design Lists - +
+ + Management List Patterns - - launch - Material Design Lists Controls - + +

When to use

+

If the amount of data or structure of the data does not justify a data grid, consider using a management list with + faux-columns and sorting instead.

+ + + + +
+ Example + + + launch + +
+ - - launch - Angular Material Lists - - - -
- - Examples - - -
-
- Management List with Menu - Supports sorting & filtering - -

This example contains a variety of components including:

- - - launch - Covalent Search -

td-search

- +
+
+

Usage

+ + +

Toolbar

+

Secondary toolbar with title & actions

+ - - launch - Covalent Paging -

td-paging-bar

- + +

Left nav

+

Subnavigation for items

+ - - launch - Material Design List -

mat-list

- + +

Search

+

Place search in card header

+ - - launch - Material Design Menu -

mat-menu

- + +

Sorting

+

Display sorting in toolbar

+ + + +

List or Datatable

+

Select best option for metadata

+ - + +

Guidelines

+ + launch - Material Design Icons -

mat-icon

+

Material Design

+

Lists Guidelines

 - + launch - Material Design Select -

mat-select

+

Angular Material

+

Lists Guidelines

 - +
+
+ +
-
- - -
- - -
- -
-
- - - HTML - - -
- - Title here - - - - - - - - - -
- - - - apps -

App Name

- - Owner - - - - { {option.name}} - - - - - - { {isASC(sortKey)? 'arrow_upward' : 'arrow_downward'}} - - - - - - - desktop_mac -

{ {item.name}}

- - - { {item.owner}} - - - { {item[sortKey] | date:'short'}} - - - - - - - - Rows per page: - - - { {size} } - - - { {pagingBar.range} } of { {pagingBar.total} } - - - ]]> - - - - Typescript - - { - this.headers[option.value] = OrderBy.ASC; - }); - } - isASC(sortKey: string): boolean { - return this.headers[sortKey] === OrderBy.ASC; - } - sortBy(sortKey: string): void { - let sortedData: any[]; - if (this.headers[sortKey] === OrderBy.ASC) { - this.headers[sortKey] = OrderBy.DESC; - } else { - this.headers[sortKey] = OrderBy.ASC; - } - ... // Sorting algorithm goes here to populate [sortedData] - this.data = sortedData; - } - } - ]]> - - - -
- -
- -
- - Title here - - - - - - - - - -
- - - - apps -

App Name

- - Owner - - - - {{option.name}} - - - - - - {{isASC(sortKey)? 'arrow_upward' : 'arrow_downward'}} - - - - - - - desktop_mac -

{{item.name}}

- - - {{item.owner}} - - - {{item[sortKey] | date:'short'}} - - - - - - - - Rows per page: - - - {{size}} - - - {{pagingBar.range}} of {{pagingBar.total}} - - + +
+
+ + + Do + + + + + looks_one +

Adjust content with media queries

+ + + looks_two +

Limit number of columns

+ + + +
+
+ + + Don't + + + + + looks_one +

Don't add too many columns

+ +
- - +
diff --git a/src/app/components/design-patterns/management-list/management-list.component.ts b/src/app/components/design-patterns/management-list/management-list.component.ts index e532033875..73dc23eae3 100644 --- a/src/app/components/design-patterns/management-list/management-list.component.ts +++ b/src/app/components/design-patterns/management-list/management-list.component.ts @@ -1,109 +1,25 @@ -import { Component, OnInit, HostBinding } from '@angular/core'; - +import { Component, HostBinding } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; import { TdCollapseAnimation } from '@covalent/core/common'; import { slideInDownAnimation } from '../../../app.animations'; -export enum OrderBy { - ASC = 'asc', - DESC = 'desc', -} - -export interface IHeaders { - [key: string]: OrderBy; -} - @Component({ selector: 'design-patterns-management-list', styleUrls: ['./management-list.component.scss'], templateUrl: './management-list.component.html', animations: [ slideInDownAnimation, - TdCollapseAnimation(), ], }) -export class ManagementListComponent implements OnInit { + +export class ManagementListComponent { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; - - data: Object[] = [{ - 'created_at': '2015-12-15T19:00:31Z', - 'name': 'On the fly analytics', - 'owner': 'Jason', - 'updated_at': '2016-12-09T19:00:31Z', - }, { - 'created_at': '2015-11-04T19:00:31Z', - 'name': 'Change data capture for sales DB', - 'owner': 'Kyle', - 'updated_at': '2016-11-08T19:00:31Z', - }, { - 'created_at': '2015-11-08T19:00:31Z', - 'name': 'Change data capture for MF DB', - 'owner': 'Richa', - 'updated_at': '2016-11-09T19:00:31Z', - }, { - 'created_at': '2015-12-11T19:00:31Z', - 'name': 'Our Data Lake', - 'owner': 'Ed', - 'updated_at': '2016-12-07T19:00:31Z', - }, { - 'created_at': '2015-11-05T19:00:31Z', - 'name': 'Nightly batched analytics', - 'owner': 'Ilsun', - 'updated_at': '2016-11-07T19:00:31Z', - }, { - 'created_at': '2015-12-12T19:00:31Z', - 'name': 'Long term data storage', - 'owner': 'Jeremy', - 'updated_at': '2016-12-08T19:00:31Z', - }]; - - columnOptions: any[] = [{ - name: 'Updated', - value: 'updated_at', - }, { - name: 'Created', - value: 'created_at', - }]; - sortKey: string = this.columnOptions[0].value; - headers: IHeaders = {}; - pageSize: number = 5; - example1: boolean = true; - - ngOnInit(): void { - this.columnOptions.forEach((option: any) => { - this.headers[option.value] = OrderBy.ASC; - }); - } - - isASC(sortKey: string): boolean { - return this.headers[sortKey] === OrderBy.ASC; - } - - sortBy(sortKey: string): void { - if (this.headers[sortKey] === OrderBy.ASC) { - this.headers[sortKey] = OrderBy.DESC; - } else { - this.headers[sortKey] = OrderBy.ASC; - } - this.data = this.data.sort((rowA: Object, rowB: Object) => { - let cellA: string = rowA[sortKey]; - let cellB: string = rowB[sortKey]; - let sort: number = 0; - if (cellA < cellB) { - sort = -1; - } else if (cellA > cellB) { - sort = 1; - } - return sort * (this.headers[sortKey] === OrderBy.DESC ? -1 : 1); - }); - } - - search(): void { - // dummy func - } - - toggle(div: string ): void { - this[div] = !this[div]; + + source: any = ''; + + constructor(private sanitizer: DomSanitizer) { + this.source = sanitizer.bypassSecurityTrustResourceUrl('https://manage-list-patterns.stackblitz.io/'); } } diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html index faccf91202..668941831f 100644 --- a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html +++ b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html @@ -1,156 +1,95 @@ -
- - Navigation Drawers Patterns - - -

Problem

-

Need a means of navigation that is familiar and consistent.

-

Solution

-

The navigation drawer provides a familiar means of navigation along with access to additional account features, for example, the ability to switch accounts, access settings, and sign out.

- - - - Resources - - - - launch - Material Design Nav Drawer - - - -
- - Examples - - -
-
- Side Navigation - Sidenav toolbar & list from the Material Design spec - -

In addition to the Material Design Navigation Drawer component, this example leverages the following components:

- - - launch - Material Design List -

mat-list

- +
+ + Navigation Drawer Patterns + + +

When to use

+

The navigation drawer provides a familiar means of navigation along with access to additional account features, for example, the ability to switch accounts, access settings, and sign out.

+ + + + +
+ Example + + + launch + +
+ + +
+
+

Usage

+ + +

Logo & Title

+

Display your brand in nav drawer

+ + + +

Name & Email

+

Display your user info

+ + + +

Main navigation

+

Top level routes

+ - + +

Toggle user nav

+

Click on user info to display nav

+ + + +

Guidelines

+ + launch - Material Design Icon -

mat-icons

+

Material Design

+

Nav Drawer

 - +
+
+ +
-
- - -
- - -
- -
-
- - - HTML - - - - - { {item.icon} }{ {item.title} } - - - -
- © 2017 Your Company, Inc. -
- - - ]]> - - - - Typescript - - - - - -
- -
-
- - - - {{item.icon}}{{item.title}} - - - -
- © 2017 Your Company, Inc. -
- -
+ +
+
+ + + Do + + + + + looks_one +

Use standard layouts

+ + + looks_two +

Be consistent

+ + + +
+
+ + + Don't + + + + + looks_one +

Don't use nested navigation

+ +
- - \ No newline at end of file +
+ \ No newline at end of file diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss index 9d93e13ecf..e69de29bb2 100644 --- a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss +++ b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss @@ -1,17 +0,0 @@ -:host ::ng-deep { - .mat-drawer-container[fullscreen] { - position: static; - width: 100%; - height: 500px; - .td-layout-sidenav { - transform: translate3d(0, 0, 0) !important; - visibility: visible !important; - height: 100%; - position: relative; - } - } -} - -.border { - border: 1px solid #ebebeb; -} diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.ts b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.ts index c5f928706f..4c4d324e91 100644 --- a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.ts +++ b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.ts @@ -1,4 +1,5 @@ import { Component, HostBinding } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; import { TdCollapseAnimation } from '@covalent/core/common'; import { slideInDownAnimation } from '../../../app.animations'; @@ -17,46 +18,9 @@ export class NavigationDrawerComponent { @HostBinding('@routeAnimation') routeAnimation: boolean = true; @HostBinding('class.td-route-animation') classAnimation: boolean = true; - example1: 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', - }, - ]; - - toggle(div: string ): void { - this[div] = !this[div]; + source: any = ''; + + constructor(private sanitizer: DomSanitizer) { + this.source = sanitizer.bypassSecurityTrustResourceUrl('https://nav-drawer-patterns.stackblitz.io'); } } diff --git a/src/app/components/design-patterns/steppers/steppers.component.html b/src/app/components/design-patterns/steppers/steppers.component.html index 58e916171b..aef809350e 100644 --- a/src/app/components/design-patterns/steppers/steppers.component.html +++ b/src/app/components/design-patterns/steppers/steppers.component.html @@ -21,42 +21,43 @@

When to use

Usage

-

Stepper Component

-

Follow component guidelines. Vertical mode prefered.

-
+ + +

Stepper Component

+

Group related tasks in steps

+ -
-

Label

-

Follow Material Design guidelines.

-
+ +

Label

+

Brief step introduction

+ -
-

Sublabel

-

Follow Material Design guidelines.

-
+ +

Sublabel

+

More detailed explaination

+ -
-

Step Contents

-

Each step should be fully self-contained and complete before moving to the next step.

-
+ +

Step Contents

+

Self-contained, related tasks

+ -
-

Step Summary

-

Optional summary displayed when step is complete.

-
+ +

Step Summary

+

Summary of completed task

+ -
-

Guidelines

+ +

Guidelines

- launch - Material Design + launch +

Material Design

Stepper Guidelines

 - - launch - Angular Material + launch +

Angular Material

Stepper Guidelines

 diff --git a/src/app/components/design-patterns/steppers/steppers.component.scss b/src/app/components/design-patterns/steppers/steppers.component.scss index 993a28fb3e..e69de29bb2 100644 --- a/src/app/components/design-patterns/steppers/steppers.component.scss +++ b/src/app/components/design-patterns/steppers/steppers.component.scss @@ -1,3 +0,0 @@ -iframe { - border: none; -} diff --git a/src/platform/core/common/styles/core/_card.scss b/src/platform/core/common/styles/core/_card.scss index b816a5e4a6..335984a24f 100644 --- a/src/platform/core/common/styles/core/_card.scss +++ b/src/platform/core/common/styles/core/_card.scss @@ -62,6 +62,9 @@ $color: rgba(0, 0, 0, 0.01); margin-bottom: 0; padding-bottom: 8px; } + .mat-divider.relative { + position: relative; + } } &[dir='rtl'] { .mat-card-title-group { diff --git a/src/theme.scss b/src/theme.scss index 8dce021d82..1ddb088cdb 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -110,8 +110,7 @@ $theme: mat-light-theme($primary, $accent, $warn); .tc-warn { color: mat-color($warn-alt); } - a:not(.mat-button), - a:not(.mat-icon-button) { + a:not([class^="mat-"]) { color: mat-color($accent-alt); &:hover { color: darken(mat-color($accent-alt), 10%);