chore(): fix snackbar demos (#863)

* chore(): fix snackbar demos - Do not include action on toasts/snackbars for dismiss - Use 'Ok' on alert rather than "Dismiss" - Use single word actions if possible - Duplicated in HTML and TS because of example with code sample * chore(): fix lint - Add whitespace * chore(): add pad - add some padding on dynamic buttons so they don't get cut off in the demo. * chore(): fix wrapping in paging examples - reduce margin on all td-paging-bar elements to prevent wrapping in demos * chore(): Adjust breakpoints in paging demo - Avoid custom CSS - Adjust breakpoinsts and links shown instead * chore(): minor fix to breakpoints - Minor chagne to breakpoints for Paging with Everything demo
Teradata · Sep 8, 2017 · 2342dea · 2342dea
1 parent be37ea1
commit 2342dea
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
@@ -230,8 +230,10 @@ <h3 class="md-title">Dynamic Boolean Elements</h3>
     <md-tab-group md-stretch-tabs dynamicHeight>
       <md-tab>
         <ng-template mdTabLabel>Demo</ng-template>
-        <td-dynamic-forms [elements]="booleanElements">
-        </td-dynamic-forms>
+        <div class="pad-sm">
+          <td-dynamic-forms [elements]="booleanElements">
+          </td-dynamic-forms>
+        </div>
       </md-tab>
       <md-tab>
         <ng-template mdTabLabel>Code</ng-template>

diff --git a/src/app/components/components/paging/paging.component.html b/src/app/components/components/paging/paging.component.html
@@ -266,7 +266,7 @@
         </md-card-content>
         <md-divider></md-divider>
         <td-paging-bar #pagingBarResponsive
-                       [pageLinkCount]="(media.registerQuery('md') | async) ? 0 : 5"
+                       [pageLinkCount]="(media.registerQuery('sm') | async) ? 0 : 3"
                        [firstLast]="media.registerQuery('gt-xs') | async"
                        [pageSize]="pageSizeResponsive"
                        [total]="1345"
@@ -278,7 +278,7 @@
             </md-option>
           </md-select>
           <p hide-xs hide-sm hide-md>Go to:</p>
-          <md-form-field [style.width.px]="30" *ngIf="media.registerQuery('gt-sm') | async">
+          <md-form-field [style.width.px]="30" *ngIf="media.registerQuery('gt-xs') | async">
             <input #goToResponsive
                     mdInput
                     type="number"

diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html
@@ -95,16 +95,16 @@ <h3>Solution</h3>
                           openAlert(): void {
                             this._dialogService.openAlert({
                               message: 'You don\'t have the required permissions to view this item! Contact an administrator!',
-                              title: '401 Permissions Error!',
-                              closeButton: 'Dismiss',
+                              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: 'No, Cancel',
-                              acceptButton: 'Yes, Delete',
+                              cancelButton: 'Cancel',
+                              acceptButton: 'Delete',
                             }).afterClosed().subscribe((accept: boolean) => {
                               if (accept) {
                                 // DO SOMETHING
@@ -168,7 +168,7 @@ <h3>Solution</h3>
                           constructor(private _snackBarService: MdSnackBar) {
                           }
                           showSnackBar(): void {
-                            this._snackBarService.open('Toast here!', 'Dismiss', { duration: 3000 });
+                            this._snackBarService.open('Connection timed out.  Showing limited messages.', 'Retry', { duration: 3000 });
                           }
                         }
                       ]]>

diff --git a/src/app/components/design-patterns/alerts/alerts.component.ts b/src/app/components/design-patterns/alerts/alerts.component.ts
@@ -32,22 +32,22 @@ export class AlertsComponent {
 
   showSnackBar(): void {
     this._snackBarService
-      .open('Toast here', 'Dismiss', { duration: 3000 });
+      .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: 'Dismiss',
+      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: 'No, Cancel',
-      acceptButton: 'Yes, Delete',
+      cancelButton: 'Cancel',
+      acceptButton: 'Delete',
     }).afterClosed().subscribe((accept: boolean) => {
       if (accept) {
         this.confirmDelete();
@@ -57,7 +57,7 @@ export class AlertsComponent {
     });
   }
   confirmDelete(): void {
-    this._snackBarService.open('Item deleted!', 'Ok', { duration: 3000 });
+    this._snackBarService.open('Item deleted', '', { duration: 3000 });
   }
   openPrompt(): void {
     this._dialogService.openPrompt({