From 6677818f41ea25083835c69089ff56c04d875735 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Wed, 3 Jan 2018 09:50:24 -0800 Subject: [PATCH 01/13] chore()/update cards pattern - Add stackblitz example - Modify layout to match new patterns --- .../cards/cards.component.html | 614 +++--------------- .../design-patterns/cards/cards.component.ts | 16 +- 2 files changed, 97 insertions(+), 533 deletions(-) diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index a628486f54..9e65b88d4f 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -1,534 +1,100 @@ -
- - 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 + +

When to use

+

Useful in displaying content composed of different elements. Also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

 - - 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

+

Elements

+

All elements are optional including the title, subtitle, content, and bottom action buttons

+ +

Rich Components

+

Cards support many rich components, including our management list. Seperate multiple lists with a mat-divider.

+ +

Search

+

Cards support a search component in the top left.

+ +

Faux Columns

+

Using the flex model, you can simulate columns by using the same layout on each row.

+ +

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 unnessary information

+ + + looks_two +

Don't use in place of galleries or lists

+ + + looks_3 +

Don't modify styling

+ + +
- - \ 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 88fbd908f7..2895a30b0e 100644 --- a/src/app/components/design-patterns/cards/cards.component.ts +++ b/src/app/components/design-patterns/cards/cards.component.ts @@ -1,6 +1,7 @@ import { Component, HostBinding } from '@angular/core'; import { TdCollapseAnimation } from '@covalent/core'; +import { BrowserModule, DomSanitizer } from '@angular/platform-browser'; import { slideInDownAnimation } from '../../../app.animations'; @Component({ @@ -16,15 +17,8 @@ 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; + + source: any = ''; invalidError: boolean = false; @@ -38,4 +32,8 @@ export class CardsComponent { toggle(div: string): void { this[div] = !this[div]; } + + constructor(private sanitizer: DomSanitizer) { + this.source = sanitizer.bypassSecurityTrustResourceUrl('https://cards-patterns.stackblitz.io/'); + } } From 736d5ab7f33a8f638441cc30b5ab6ca5b43a7146 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Wed, 3 Jan 2018 13:07:10 -0800 Subject: [PATCH 02/13] chore()/update patterns - Remove example logic from cards - Rework alert pattern --- .../alerts/alerts.component.html | 422 +++++------------- .../alerts/alerts.component.ts | 72 +-- .../design-patterns/cards/cards.component.ts | 18 +- 3 files changed, 109 insertions(+), 403 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index 091ddf99f1..c1a5c2e777 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -1,327 +1,111 @@ -
- - 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.

- - - - - Resources - - - - launch - Material Design Dialogs - +
+ + Alert Patterns - - launch - Material Design Toasts & Snackbars - + +

When to use

+

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.

+ + + + +
+ Example + + + launch + +
+ - - 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.

- -
-
- - -
- - -
- -
- -
- - - 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

+

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.

+ +

Toasts & Snackbars

+

Toasts are similar very similar, except snackbars but do not contain actions and cannot be swiped off screen. Both provide brief feedback about an operation through a message at the bottom of the screen. This information is transient and will go away momentarily.

+ +

Inline Errors

+

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

+ +

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 - - - - - -
- -
- - - + +
+
+ + + Do + + + + + looks_one +

text

+ + + looks_two +

text

+ +
-
- -
-
- 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 - -
-
+
+ + + Don't + + + + + looks_one +

text

+ + + looks_two +

text

+ + + looks_3 +

text

+ +
- - \ No newline at end of file +
+ \ No newline at end of file diff --git a/src/app/components/design-patterns/alerts/alerts.component.ts b/src/app/components/design-patterns/alerts/alerts.component.ts index 0622c8d39b..33e1636808 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 { BrowserModule, DomSanitizer } from '@angular/platform-browser'; import { slideInDownAnimation } from '../../../app.animations'; -import { TdDialogService } from '../../../../platform/core'; -import { TdCollapseAnimation } from '@covalent/core'; - -import { MatSnackBar } from '@angular/material/snack-bar'; - @Component({ selector: 'design-patterns-alerts', styleUrls: ['./alerts.component.scss'], templateUrl: './alerts.component.html', animations: [ - slideInDownAnimation, - TdCollapseAnimation(), + slideInDownAnimation ], }) 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.ts b/src/app/components/design-patterns/cards/cards.component.ts index 2895a30b0e..746b768b6c 100644 --- a/src/app/components/design-patterns/cards/cards.component.ts +++ b/src/app/components/design-patterns/cards/cards.component.ts @@ -1,6 +1,4 @@ import { Component, HostBinding } from '@angular/core'; - -import { TdCollapseAnimation } from '@covalent/core'; import { BrowserModule, DomSanitizer } from '@angular/platform-browser'; import { slideInDownAnimation } from '../../../app.animations'; @@ -9,8 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations'; styleUrls: ['./cards.component.scss'], templateUrl: './cards.component.html', animations: [ - slideInDownAnimation, - TdCollapseAnimation(), + slideInDownAnimation ], }) export class CardsComponent { @@ -20,19 +17,6 @@ export class CardsComponent { source: any = ''; - invalidError: boolean = false; - - login(): void { - this.invalidError = true; - setTimeout(() => { - this.invalidError = false; - }, 500); - } - - toggle(div: string): void { - this[div] = !this[div]; - } - constructor(private sanitizer: DomSanitizer) { this.source = sanitizer.bypassSecurityTrustResourceUrl('https://cards-patterns.stackblitz.io/'); } From 12a8fcb61a95aae6d037f6e7b86536111f04d2aa Mon Sep 17 00:00:00 2001 From: jm186140 Date: Wed, 3 Jan 2018 14:32:22 -0800 Subject: [PATCH 03/13] chore()/update mgmt list - update management list example to stackblitz - fix layout --- .../management-list.component.html | 347 ++++-------------- .../management-list.component.ts | 100 +---- 2 files changed, 84 insertions(+), 363 deletions(-) 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 68d5f5c960..16aaba4b24 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,85 @@ -
- - 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 - +
+ + Cards 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

- - - - launch - Covalent Paging -

td-paging-bar

- - + + +
+
+ + + Do + + + + + looks_one +

text

+ + + looks_two +

text

+ + +
-
- - -
- - -
- -
-
- - - 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}} - - +
+ + + Don't + + + + + looks_one +

text

+ + + looks_two +

text

+ +
- - +
+ \ No newline at end of file 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 414e3f5d57..b9566a5194 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 @@ -3,107 +3,23 @@ import { Component, OnInit, HostBinding } from '@angular/core'; import { TdCollapseAnimation } from '@covalent/core'; 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(), + slideInDownAnimation ], }) -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-pattern.stackblitz.io/'); } } From 3efe98a23ed414fe76793be24421646a2611da9e Mon Sep 17 00:00:00 2001 From: jm186140 Date: Wed, 3 Jan 2018 14:33:03 -0800 Subject: [PATCH 04/13] chore()/update mgmt list - update ts --- .../management-list/management-list.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 b9566a5194..26582b953e 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,6 +1,5 @@ -import { Component, OnInit, HostBinding } from '@angular/core'; - -import { TdCollapseAnimation } from '@covalent/core'; +import { Component, HostBinding } from '@angular/core'; +import { BrowserModule, DomSanitizer } from '@angular/platform-browser'; import { slideInDownAnimation } from '../../../app.animations'; @Component({ From 751d79ab58aff4f55c4721acb7d535e53688c8a2 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Thu, 4 Jan 2018 18:31:09 -0800 Subject: [PATCH 05/13] chore()/update patterns - update mgmt list & nav drawer pattern layouts & examples --- .../management-list.component.html | 4 +- .../management-list.component.ts | 2 +- .../navigation-drawer.component.html | 233 +++++++----------- .../navigation-drawer.component.ts | 9 +- 4 files changed, 94 insertions(+), 154 deletions(-) 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 16aaba4b24..9416cbdb88 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,6 +1,6 @@
- Cards Patterns + Management List Patterns

When to use

@@ -13,7 +13,7 @@

When to use

Example - + launch
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 26582b953e..a72aa88008 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 @@ -19,6 +19,6 @@ export class ManagementListComponent { source: any = ''; constructor(private sanitizer: DomSanitizer) { - this.source = sanitizer.bypassSecurityTrustResourceUrl('https://manage-list-pattern.stackblitz.io/'); + 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..16fb7c31b4 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,89 @@ -
- - 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

- - - - launch - Material Design Icon -

mat-icons

+
+ + 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.

+ + + + + + + +
+
+

Usage

+

text

+

text

+ +

text

+

text

+ +

text

+

text

+ +

text

+

text

+ +

Guidelines

+ + + launch + Material Design Nav Drawer - +
+
+ +
+
+ +
+
+ + + Do + + + + + looks_one +

text

+ + + looks_two +

text

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

text

+ + + looks_two +

text

+ +
- - \ 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.ts b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.ts index 1252f00c2b..f532fe39e0 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,5 +1,5 @@ import { Component, HostBinding } from '@angular/core'; - +import { BrowserModule, DomSanitizer } from '@angular/platform-browser'; import { TdCollapseAnimation } from '@covalent/core'; import { slideInDownAnimation } from '../../../app.animations'; @@ -59,4 +59,11 @@ export class NavigationDrawerComponent { toggle(div: string ): void { this[div] = !this[div]; } + + + source: any = ''; + + constructor(private sanitizer: DomSanitizer) { + this.source = sanitizer.bypassSecurityTrustResourceUrl('https://nav-drawer-patterns.stackblitz.io'); + } } From 8c5121102a5b27b9ebf36afbee92aadc75ba0532 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Fri, 5 Jan 2018 14:29:06 -0800 Subject: [PATCH 06/13] chore()/update layouts - cleanup all layouts --- .../alerts/alerts.component.html | 30 +++++++++---------- .../cards/cards.component.html | 6 +--- .../management-list.component.html | 25 ++++++++-------- .../navigation-drawer.component.html | 29 ++++++++---------- 4 files changed, 42 insertions(+), 48 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index c1a5c2e777..d03e83ed31 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -25,37 +25,41 @@

Dialogs

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.

Toasts & Snackbars

-

Toasts are similar very similar, except snackbars but do not contain actions and cannot be swiped off screen. Both provide brief feedback about an operation through a message at the bottom of the screen. This information is transient and will go away momentarily.

+

Toasts and snackbars are similar, except snackbars but do not contain actions and cannot be swiped off screen. Both provide brief feedback about an operation through a message at the bottom of the screen.

Inline Errors

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

Guidelines

- launch - Material Design Dialogs + Material Design +

Dialogs

 launch - Angular Material Dialogs + Angular Material +

Dialogs

 launch - Material Design Snackbars + Material Design +

Snackbars

 launch - Angular Material Snackbars + Angular Material +

Snackbars

 launch - Material Design Errors + Material Design +

Errors
@@ -75,11 +79,11 @@

Guidelines

looks_one -

text

+

Float buttons to the right.

 looks_two -

text

+

Keep dialogs simple.

 @@ -93,15 +97,11 @@

text

looks_one -

text

+

Don't use dialogs with forms.

 looks_two -

text

- - - looks_3 -

text

+

Don't include unnessary buttons like dismiss.

 diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index 9e65b88d4f..b2e68f367e 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -4,7 +4,7 @@

When to use

-

Useful in displaying content composed of different elements. Also well-suited for showcasing +

Useful wrapper for other components and elements. Also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

 @@ -89,10 +89,6 @@

Don't overload cards with unnessary information

looks_two

Don't use in place of galleries or lists

- - looks_3 -

Don't modify styling

-
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 9416cbdb88..8913440cd9 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 @@ -23,17 +23,22 @@

When to use

Usage

Search

-

Useful for finding data on long lists

+

A search component can be added to the card header.

-

text

-

text

+

Sorting

+

Consider sorting columns.

+

Paging

+

For long lists, add pagination

+ +

Faux Columns

+

Using the flex model, simulate columns by using the same layout on each row.

Guidelines

- launch - Material Design Lists + Material Design +

Lists Guidelines
@@ -53,11 +58,11 @@

Guidelines

looks_one -

text

+

Adjust content with media queries.

 looks_two -

text

+

Limit number of columns.

 @@ -71,11 +76,7 @@

text

looks_one -

text

- - - looks_two -

text

+

Don't add too many columns.

 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 16fb7c31b4..8c9e9436df 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 @@ -21,23 +21,24 @@

When to use

Usage

-

text

-

text

+

Permanent

+

Permanent drawers are always visible.

-

text

-

text

+

Persistent

+

Persistent drawers can be toggled open and closed.

-

text

-

text

+

Mini Variant

+

Mini variant drawers change based on screen width.

-

text

-

text

+

Temporary

+

Temporary drawers can be toggled open and close automatically.

Guidelines

launch - Material Design Nav Drawer + Material Design +

Nav Drawer
@@ -57,11 +58,11 @@

Guidelines

looks_one -

text

+

Use standard layout

 looks_two -

text

+

Be consistenet

 @@ -75,11 +76,7 @@

text

looks_one -

text

- - - looks_two -

text

+

Use nested navigation

 From 4c2c36fe64b1d8e7af634e98ce67544e4bb2aca9 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Fri, 5 Jan 2018 15:42:56 -0800 Subject: [PATCH 07/13] chore()/clean up - Clean up guidance --- .../alerts/alerts.component.html | 210 +++++++++--------- .../alerts/alerts.component.ts | 2 +- .../cards/cards.component.html | 25 +-- .../design-patterns/cards/cards.component.ts | 2 +- .../empty-states/empty-states.component.html | 5 +- .../management-list.component.html | 11 +- .../management-list.component.ts | 2 +- .../navigation-drawer.component.html | 6 +- .../navigation-drawer.component.ts | 44 ---- 9 files changed, 130 insertions(+), 177 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index d03e83ed31..fc86b7dc1e 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -1,111 +1,111 @@
- - Alert Patterns - - -

When to use

-

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.

- - - - -
- Example - - - launch - -
- - -
-
-

Usage

-

Dialogs

-

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.

- -

Toasts & Snackbars

-

Toasts and snackbars are similar, except snackbars but do not contain actions and cannot be swiped off screen. Both provide brief feedback about an operation through a message at the bottom of the screen.

- -

Inline Errors

-

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

- -

Guidelines

- - - launch - Material Design -

Dialogs

- - - - launch - Angular Material -

Dialogs

- - - - launch - Material Design -

Snackbars

- - - - launch - Angular Material -

Snackbars

- - - - launch - Material Design -

Errors

- - -
-
- -
+ + Alert Patterns + + +

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.

+ + + + +
+ Example + + + launch +
- -
-
- - - Do - - - - - looks_one -

Float buttons to the right.

- - - looks_two -

Keep dialogs simple.

- - - + + +
+
+

Usage

+

Dialogs

+

Inform users about a specific task or critical information, such as + a verbose/critical error, alert or a confirmation of an action.

+ +

Toasts & Snackbars

+

Toasts and snackbars provide brief feedback about an operation through a message at the bottom of the screen. Unlike toasts, snackbars do not contain actions and cannot be swiped off screen.

+ +

Inline Errors

+

Use warning color and position on the left.

+ +

Guidelines

+ + + launch + Material Design +

Dialogs

+ + + + launch + Angular Material +

Dialogs

+ + + + launch + Material Design +

Snackbars

+ + + + launch + Angular Material +

Snackbars

+ + + + launch + Material Design +

Errors

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

Don't use dialogs with forms.

- - - looks_two -

Don't include unnessary buttons like dismiss.

- - - +
+
+ +
+
+ + + Do + + + + + looks_one +

Float buttons to the right.

+ + + looks_two +

Keep dialogs simple.

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

Don't use dialogs with forms.

+ + + looks_two +

Don't include unnecessary buttons like dismiss.

+ + + +
- \ No newline at end of file +
diff --git a/src/app/components/design-patterns/alerts/alerts.component.ts b/src/app/components/design-patterns/alerts/alerts.component.ts index 33e1636808..e7cdd8418f 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.ts +++ b/src/app/components/design-patterns/alerts/alerts.component.ts @@ -7,7 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations'; styleUrls: ['./alerts.component.scss'], templateUrl: './alerts.component.html', animations: [ - slideInDownAnimation + slideInDownAnimation, ], }) export class AlertsComponent { diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index b2e68f367e..1f535cbbe6 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -4,8 +4,7 @@

When to use

-

Useful wrapper for other components and elements. Also well-suited for showcasing - elements whose size or supported actions vary, like photos with captions of variable length.

+

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.

 @@ -22,17 +21,11 @@

When to use

Usage

-

Elements

-

All elements are optional including the title, subtitle, content, and bottom action buttons

+

Card Elements

+

Optional elements include the title, subtitle, content, and action buttons.

-

Rich Components

-

Cards support many rich components, including our management list. Seperate multiple lists with a mat-divider.

- -

Search

-

Cards support a search component in the top left.

- -

Faux Columns

-

Using the flex model, you can simulate columns by using the same layout on each row.

+

Components

+

Cards support many components and serve as a container for other content.

Guidelines

@@ -65,11 +58,11 @@

Guidelines

looks_one -

Use flexbox for responsiveness

+

Use flexbox for responsiveness.

 looks_two -

Set tab-index for accessibility

+

Set tab-index for accessibility.

 @@ -83,11 +76,11 @@

Set tab-index for accessibility

looks_one -

Don't overload cards with unnessary information

+

Don't overload cards with unnecessary information.

 looks_two -

Don't use in place of galleries or lists

+

Don't use in place of galleries or lists.

 diff --git a/src/app/components/design-patterns/cards/cards.component.ts b/src/app/components/design-patterns/cards/cards.component.ts index 746b768b6c..540c4630ab 100644 --- a/src/app/components/design-patterns/cards/cards.component.ts +++ b/src/app/components/design-patterns/cards/cards.component.ts @@ -7,7 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations'; styleUrls: ['./cards.component.scss'], templateUrl: './cards.component.html', animations: [ - slideInDownAnimation + slideInDownAnimation, ], }) export class CardsComponent { 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 dfaa0ce5b9..74720f1936 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.

 @@ -24,9 +24,6 @@

Usage

Icon

Use the content type icon if possible.

-

Language

-

Follow the Material Design spec for language & text.

-

Primary Action

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

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 8913440cd9..74bcb76ff4 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 @@ -29,10 +29,11 @@

Sorting

Consider sorting columns.

Paging

-

For long lists, add pagination

+

For long lists, add pagination.

Faux Columns

-

Using the flex model, simulate columns by using the same layout on each row.

+

Using the flex model, you can simulate columns.

+

Guidelines

@@ -40,6 +41,12 @@

Guidelines

Material Design

Lists Guidelines

 + + + launch + Angular Material +

Lists Guidelines

+
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 a72aa88008..e51b2ece6d 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 @@ -7,7 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations'; styleUrls: ['./management-list.component.scss'], templateUrl: './management-list.component.html', animations: [ - slideInDownAnimation + slideInDownAnimation, ], }) 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 8c9e9436df..de740852a0 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 @@ -58,11 +58,11 @@

Guidelines

looks_one -

Use standard layout

+

Use standard layouts.

 looks_two -

Be consistenet

+

Be consistent.

 @@ -76,7 +76,7 @@

Be consistenet

looks_one -

Use nested navigation

+

Don't use nested navigation.

 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 f532fe39e0..ce500541c5 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 @@ -17,50 +17,6 @@ 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) { From f0d4a63d588eb5d945c02ed1afdd3c412f717128 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Thu, 25 Jan 2018 12:18:25 -0800 Subject: [PATCH 08/13] chore(docs): update patterns - Add [inset]="true" on MatDividers - Fix Do's and Don'ts (lost in code conflict) --- .../alerts/alerts.component.html | 23 +++++------ .../cards/cards.component.html | 39 ++++++++++++++----- .../empty-states/empty-states.component.html | 11 ++---- .../management-list.component.html | 31 ++++++++++----- .../navigation-drawer.component.html | 17 ++++---- .../steppers/steppers.component.html | 21 +++------- .../steppers/steppers.component.scss | 3 -- 7 files changed, 76 insertions(+), 69 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index fc86b7dc1e..78b2290bfb 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -24,13 +24,13 @@

Usage

Dialogs

Inform users about a specific task or critical information, such as a verbose/critical error, alert or a confirmation of an action.

- +

Toasts & Snackbars

Toasts and snackbars provide brief feedback about an operation through a message at the bottom of the screen. Unlike toasts, snackbars do not contain actions and cannot be swiped off screen.

- +

Inline Errors

Use warning color and position on the left.

- +

Guidelines

@@ -38,25 +38,21 @@

Guidelines

Material Design

Dialogs

 - launch Angular Material

Dialogs

 - - + launch Material Design

Snackbars

 - launch Angular Material

Snackbars

 - launch Material Design @@ -65,8 +61,7 @@

Guidelines
- +
@@ -80,11 +75,11 @@

Guidelines

looks_one -

Float buttons to the right.

+

Float buttons to the right

 looks_two -

Keep dialogs simple.

+

Keep dialogs simple

 @@ -98,11 +93,11 @@

Keep dialogs simple.

looks_one -

Don't use dialogs with forms.

+

Don't use dialogs with forms

 looks_two -

Don't include unnecessary buttons like dismiss.

+

Don't include unnecessary buttons like dismiss

 diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index 5e90cecffa..77c5940974 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -3,8 +3,8 @@ Cards Patterns -

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.

+

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.

 @@ -12,21 +12,20 @@

When to use

 -

Usage

Card Elements

Optional elements include the title, subtitle, content, and action buttons.

- +

Components

Cards support many components and serve as a container for other content.

- +

Guidelines

@@ -34,7 +33,6 @@

Guidelines

Material Design

Cards Guidelines

 - launch Angular Material @@ -42,6 +40,29 @@

Guidelines
+
+ +
+
+ +
+
+ + + Do + + + + + looks_one +

Use flexbox for responsiveness

+ + + looks_two +

Set tab-index for accessibility

+ + +
@@ -52,11 +73,11 @@

Guidelines

looks_one -

Don't overload cards with unnecessary information.

+

Don't overload cards with unnecessary information

 looks_two -

Don't use in place of galleries or lists.

+

Don't use in place of galleries or lists

 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 396a6a3d99..384a5f7e65 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 @@ -25,14 +25,10 @@

Icon

Use the content type icon if possible.

Primary Action

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

-
- -
+

Secondary Action

Optionally include a secondary action button (not raised).

-
- -
+

Guidelines

@@ -43,8 +39,7 @@

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 9e18084eae..e5daa9e20c 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 @@ -24,16 +24,16 @@

When to use

Usage

Search

A search component can be added to the card header.

- +

Sorting

Consider sorting columns.

- +

Paging

For long lists, add pagination.

- +

Faux Columns

Using the flex model, you can simulate columns.

- +

Guidelines

 @@ -41,7 +41,6 @@

Guidelines

Material Design

Lists Guidelines

 - launch Angular Material @@ -50,8 +49,7 @@

Guidelines

- +
@@ -65,15 +63,28 @@

Guidelines

looks_one -

Adjust content with media queries.

+

Adjust content with media queries

 looks_two -

Limit number of columns.

+

Limit number of columns

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

Don't add too many columns
- \ No newline at end of file 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 de740852a0..442ca5f30b 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 @@ -23,16 +23,16 @@

When to use

Usage

Permanent

Permanent drawers are always visible.

- +

Persistent

Persistent drawers can be toggled open and closed.

- +

Mini Variant

Mini variant drawers change based on screen width.

- +

Temporary

Temporary drawers can be toggled open and close automatically.

- +

Guidelines

 @@ -43,8 +43,7 @@

Guidelines

- +
@@ -58,11 +57,11 @@

Guidelines

looks_one -

Use standard layouts.

+

Use standard layouts

 looks_two -

Be consistent.

+

Be consistent

 @@ -76,7 +75,7 @@

Be consistent.

looks_one -

Don't use nested navigation.

+

Don't use nested navigation

 diff --git a/src/app/components/design-patterns/steppers/steppers.component.html b/src/app/components/design-patterns/steppers/steppers.component.html index 58e916171b..9f30bc863d 100644 --- a/src/app/components/design-patterns/steppers/steppers.component.html +++ b/src/app/components/design-patterns/steppers/steppers.component.html @@ -23,29 +23,19 @@

When to use

Usage

Stepper Component

Follow component guidelines. Vertical mode prefered.

-
- -
+

Label

Follow Material Design guidelines.

-
- -
+

Sublabel

Follow Material Design guidelines.

-
- -
+

Step Contents

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

-
- -
+

Step Summary

Optional summary displayed when step is complete.

-
- -
+

Guidelines

 @@ -53,7 +43,6 @@

Guidelines

Material Design

Stepper Guidelines

 - launch Angular Material 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; -} From 38e2cdb09f0fd861e99b4317451564b8f5fbccef Mon Sep 17 00:00:00 2001 From: jm186140 Date: Thu, 25 Jan 2018 13:35:46 -0800 Subject: [PATCH 09/13] chore(docs)/update patterns to stackblitz - make all typography divs include relative class --- src/app/components/design-patterns/alerts/alerts.component.html | 2 +- src/app/components/design-patterns/cards/cards.component.html | 2 +- .../management-list/management-list.component.html | 2 +- .../navigation-drawer/navigation-drawer.component.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index 78b2290bfb..670d096c90 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -19,7 +19,7 @@

When to use

-
+

Usage

Dialogs

Inform users about a specific task or critical information, such as diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index 77c5940974..10d49f7133 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -18,7 +18,7 @@

When to use

-
+

Usage

Card Elements

Optional elements include the title, subtitle, content, and action buttons.

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 e5daa9e20c..cf7b5d7695 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 @@ -20,7 +20,7 @@

When to use

-
+

Usage

Search

A search component can be added to the card header.

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 442ca5f30b..c0ed9d487a 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 @@ -19,7 +19,7 @@

When to use

-
+

Usage

Permanent

Permanent drawers are always visible.

From 002af5a156eb3a8f9ad0b2417ee2d0ab6588c851 Mon Sep 17 00:00:00 2001 From: jm186140 Date: Thu, 25 Jan 2018 13:38:50 -0800 Subject: [PATCH 10/13] chore(docs)/update to stackblitz - remove unused css --- .../navigation-drawer.component.scss | 17 ----------------- 1 file changed, 17 deletions(-) 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; -} From 752db19b16a0a8f90ea88a5b541f3b9684d61432 Mon Sep 17 00:00:00 2001 From: Kyle Ledbetter Date: Thu, 25 Jan 2018 14:34:05 -0800 Subject: [PATCH 11/13] chore(patterns): fix dividers & lists --- .../alerts/alerts.component.html | 84 +++++++++++++------ .../cards/cards.component.html | 50 ++++++++--- .../empty-states/empty-states.component.html | 34 +++++--- .../management-list.component.html | 53 +++++++----- .../navigation-drawer.component.html | 42 ++++++---- .../steppers/steppers.component.html | 54 +++++++----- .../core/common/styles/core/_card.scss | 3 + 7 files changed, 212 insertions(+), 108 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index fc86b7dc1e..2d1f211b32 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -19,46 +19,68 @@

When to use

-
+

Usage

-

Dialogs

-

Inform users about a specific task or critical information, such as - a verbose/critical error, alert or a confirmation of an action.

- -

Toasts & Snackbars

-

Toasts and snackbars provide brief feedback about an operation through a message at the bottom of the screen. Unlike toasts, snackbars do not contain actions and cannot be swiped off screen.

- -

Inline Errors

-

Use warning color and position on the left.

- -

Guidelines

+ + +

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 + launch +

Material Design

Dialogs

 - + - launch - Angular Material + launch +

Angular Material

Dialogs

 - + - launch - Material Design + launch +

Material Design

Snackbars

 - + - launch + launch Angular Material

Snackbars

 - + - launch + launch Material Design

Errors

 @@ -80,12 +102,16 @@

Guidelines

looks_one -

Float buttons to the right.

+

Align action buttons to the right.

 looks_two

Keep dialogs simple.

 + + looks_3 +

Give informative error messages.

+
@@ -98,11 +124,15 @@

Keep dialogs simple.

looks_one -

Don't use dialogs with forms.

+

Don't use dialogs for complex forms.

 looks_two -

Don't include unnecessary buttons like dismiss.

+

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/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index 1f535cbbe6..5ca78e327d 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -19,25 +19,51 @@

When to use

-
+

Usage

-

Card Elements

-

Optional elements include the title, subtitle, content, and action buttons.

- -

Components

-

Cards support many components and serve as a container for other content.

- -

Guidelines

+ + +

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 + launch +

Material Design

Cards Guidelines

 - launch - Angular Material + launch +

Angular Material

Cards Guidelines

 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 74720f1936..9a2549d7e8 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 @@ -19,22 +19,30 @@

When to use

-
+

Usage

-

Icon

-

Use the content type icon if possible.

- -

Primary Action

-

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

- -

Secondary Action

-

Optionally include a secondary action button (not raised).

- -

Guidelines

+ + +

Icon

+

Content type icon

+ + + +

Primary Action

+

Raised accent button

+ + + +

Secondary Action

+

Grey standard button

+ + + +

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 74bcb76ff4..bbc1bdde75 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 @@ -20,31 +20,46 @@

When to use

-
+

Usage

-

Search

-

A search component can be added to the card header.

- -

Sorting

-

Consider sorting columns.

- -

Paging

-

For long lists, add pagination.

- -

Faux Columns

-

Using the flex model, you can simulate columns.

- -

Guidelines

+ + +

Toolbar

+

Secondary toolbar with title & actions

+ + + +

Left nav

+

Subnavigation for items

+ + + +

Search

+

Place search in card header

+ + + +

Sorting

+

Display sorting in toolbar

+ + + +

List or Datatable

+

Select best option for metadata

+ + + +

Guidelines

- launch - Material Design + launch +

Material Design

Lists Guidelines

 - + - launch - Angular Material + launch +

Angular Material

Lists Guidelines

 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 de740852a0..5c00f17d2d 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 @@ -19,25 +19,35 @@

When to use

-
+

Usage

-

Permanent

-

Permanent drawers are always visible.

- -

Persistent

-

Persistent drawers can be toggled open and closed.

- -

Mini Variant

-

Mini variant drawers change based on screen width.

- -

Temporary

-

Temporary drawers can be toggled open and close automatically.

- -

Guidelines

+ + +

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 + launch +

Material Design

Nav Drawer

 diff --git a/src/app/components/design-patterns/steppers/steppers.component.html b/src/app/components/design-patterns/steppers/steppers.component.html index 974cd690ed..d78fcc7c10 100644 --- a/src/app/components/design-patterns/steppers/steppers.component.html +++ b/src/app/components/design-patterns/steppers/steppers.component.html @@ -19,34 +19,46 @@

When to use

-
+

Usage

-

Stepper Component

-

Follow component guidelines. Vertical mode prefered.

- -

Label

-

Follow Material Design guidelines.

- -

Sublabel

-

Follow Material Design guidelines.

- -

Step Contents

-

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

- -

Step Summary

-

Optional summary displayed when step is complete.

- -

Guidelines

+ + +

Stepper Component

+

Group related tasks in steps

+ + + +

Label

+

Brief step introduction

+ + + +

Sublabel

+

More detailed explaination

+ + + +

Step Contents

+

Self-contained, related tasks

+ + + +

Step Summary

+

Summary of completed task

+ + + +

Guidelines

- launch - Material Design + launch +

Material Design

Stepper Guidelines

 - launch - Angular Material + launch +

Angular Material

Stepper Guidelines

 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 { From 1fd981a0067e0fdd80692b13b4cfa67823dd1a03 Mon Sep 17 00:00:00 2001 From: Kyle Ledbetter Date: Thu, 25 Jan 2018 15:06:46 -0800 Subject: [PATCH 12/13] chore(theme): fix link style --- src/theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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%); From f908cc3b563b5b66aa5f9f2c73da0343eb539a95 Mon Sep 17 00:00:00 2001 From: Kyle Ledbetter Date: Thu, 25 Jan 2018 15:07:08 -0800 Subject: [PATCH 13/13] chore(patterns): add missing dividers --- src/app/components/design-patterns/cards/cards.component.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index a1ff05ce98..68e5e3a1d2 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -12,11 +12,12 @@

When to use

Example - + launch
+

Usage

@@ -59,6 +60,7 @@

Guidelines

Material Design

Cards Guidelines

+ launch

Angular Material