Improved flyout demo & show iterator (#2239)

* added rough draft of iterator demo * updated to utilize highlightedRowId * updated demo to use rowHighlightedId * new demo * removed comments * PR feedback * style fix * pr feedback
blackbaud · Jan 10, 2019 · 79a78c4 · 79a78c4
1 parent 619e6af
commit 79a78c4
Show file tree

Hide file tree

Showing 8 changed files with 361 additions and 122 deletions.
diff --git a/src/demo.ts b/src/demo.ts
@@ -94,7 +94,8 @@ import {
   SkyTileDemoTile1Component,
   SkyTileDemoTile2Component,
   SkyWizardDemoModalComponent,
-  SkyFlyoutDemoInternalComponent
+  SkyFlyoutDemoInternalComponent,
+  SkyFlyoutDemoInternalSimpleComponent
 } from './demos';
 
 import { SkyDemoService } from './demos/demo.service';
@@ -121,6 +122,7 @@ const components = [
   SkyFluidGridDemoComponent,
   SkyFlyoutDemoComponent,
   SkyFlyoutDemoInternalComponent,
+  SkyFlyoutDemoInternalSimpleComponent,
   SkyGridDemoComponent,
   SkyIconDemoComponent,
   SkyHelpInlineDemoComponent,

diff --git a/src/demos/demo.service.ts b/src/demos/demo.service.ts
@@ -419,6 +419,11 @@ export class SkyDemoService {
           fileContents: require('!!raw-loader!./flyout/flyout-demo-internal.component.ts'),
           componentName: 'SkyFlyoutDemoInternalComponent'
         },
+        {
+          name: 'flyout-demo-internal-simple.component.ts',
+          fileContents: require('!!raw-loader!./flyout/flyout-demo-internal-simple.component.ts'),
+          componentName: 'SkyFlyoutDemoInternalSimpleComponent'
+        },
         {
           name: 'flyout-demo-context.ts',
           fileContents: require('!!raw-loader!./flyout/flyout-demo-context.ts')

diff --git a/src/demos/flyout/flyout-demo-context.ts b/src/demos/flyout/flyout-demo-context.ts
@@ -1,4 +1,7 @@
 export class FlyoutDemoContext {
   public id: number;
   public name: string;
+  public constituentCode: string;
+  public latestGift: number;
+  public status: string;
 }
diff --git a/src/demos/flyout/flyout-demo-internal-simple.component.ts b/src/demos/flyout/flyout-demo-internal-simple.component.ts
@@ -0,0 +1,23 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-flyout-demo-internal',
+  template: `
+    <div
+      class="sky-padding-even-large"
+    >
+      <h2>Sample flyout</h2>
+      <p>Flyouts can display large quantities of supplementary information related to a task, including:</p>
+        <ul>
+          <li><a href="https://developer.blackbaud.com/skyux/components/list">lists</a></li>
+          <li>record views</li>
+          <li>analytics</li>
+          <li>other information</li>
+        </ul>
+    </div>
+  `
+})
+export class SkyFlyoutDemoInternalSimpleComponent {
+}
diff --git a/src/demos/flyout/flyout-demo-internal.component.html b/src/demos/flyout/flyout-demo-internal.component.html
@@ -1,30 +1,39 @@
 <sky-page-summary>
-  <sky-page-summary-alert>
-    <sky-alert
-      alertType="info">
-      The internal flyout content is dynamic!
-    </sky-alert>
-  </sky-page-summary-alert>
   <sky-page-summary-image>
     <sky-avatar
       [name]="context.name"
-      [canChange]="false">
+    >
     </sky-avatar>
   </sky-page-summary-image>
   <sky-page-summary-title>
     {{context.name}}
   </sky-page-summary-title>
   <sky-page-summary-subtitle>
-    Board member
+    {{context.constituentCode}}
   </sky-page-summary-subtitle>
   <sky-page-summary-status>
     <sky-label
-      labelType="success">
-      Fundraiser
+      labelType="{{ context.status === 'Past due' ? 'danger' : 'success' }}"
+    >
+      {{ context.status }}
     </sky-label>
-    <sky-label>Inactive</sky-label>
   </sky-page-summary-status>
   <sky-page-summary-content>
-    This is the arbitrary content section.
+    <h2>
+      Constiuent Summary
+    </h2>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quae mollitia rem obcaecati. Aspernatur vitae iusto cum corporis adipisci corrupti dolore odit a impedit enim. Porro ab exercitationem quidem? Maiores!
+    </p>
   </sky-page-summary-content>
+  <sky-page-summary-key-info>
+    <sky-key-info>
+      <sky-key-info-value>
+        {{ context.latestGift }}
+      </sky-key-info-value>
+      <sky-key-info-label>
+        Latest gift
+      </sky-key-info-label>
+    </sky-key-info>
+  </sky-page-summary-key-info>
 </sky-page-summary>
diff --git a/src/demos/flyout/flyout-demo.component.html b/src/demos/flyout/flyout-demo.component.html
@@ -1,72 +1,123 @@
-<sky-list
-  [data]="users"
-  [defaultView]="grid">
-  <sky-list-view-grid #grid>
-    <sky-grid-column
-      [locked]="true"
-      [template]="customTemplate">
-    </sky-grid-column>
-    <sky-grid-column
-      field="name"
-      heading="Name"
-      [locked]="true">
-    </sky-grid-column>
-  </sky-list-view-grid>
-</sky-list>
+<h2
+  class="sky-section-heading"
+>
+  Basic flyout
+</h2>
 
-<ng-template
-  let-row="row"
-  #customTemplate>
+<p>
   <button
+    class="sky-btn sky-btn-default"
     type="button"
-    class="sky-btn sky-btn-link"
-    (click)="openRecord(row)">
-    View record
+    (click)="openSimpleFlyout()"
+  >
+    Standard width
   </button>
+
   <button
-    *ngIf="isRecordOpen(row)"
-    type="button"
     class="sky-btn sky-btn-default"
-    title="Close record"
-    (click)="closeFlyout()">
-    <sky-icon icon="close"></sky-icon>
+    type="button"
+    (click)="openFlyoutWithCutsomWidth()"
+  >
+    Custom width
   </button>
-</ng-template>
+</p>
 
-<div *ngIf="flyout">
-  <p>
-    This button will close the flyout and then delete the host element from the document.
-  </p>
+<h2
+  class="sky-section-heading"
+>
+  Flyout with customized headers
+</h2>
 
+<p>
   <button
+    class="sky-btn sky-btn-default"
     type="button"
+    (click)="openFlyoutWithUrlPermalink()"
+  >
+    URL permalink
+  </button>
+
+  <button
     class="sky-btn sky-btn-default"
-    (click)="removeFlyout()">
-    <sky-icon icon="trash"></sky-icon>
-    Delete flyout
+    type="button"
+    (click)="openFlyoutWithRoutePermalink()"
+  >
+    Angular routing permalink
   </button>
-</div>
 
-<div>
-  <p>
-    The following button will open a flyout with a URL permalink in the header.
-  </p>
   <button
+    class="sky-btn sky-btn-default"
     type="button"
+    (click)="openFlyoutWithIterators()"
+  >
+    Iterators
+  </button>
+</p>
+
+<h2
+  class="sky-section-heading"
+>
+    Close the flyout programmatically
+</h2>
+
+<p>
+  <button
     class="sky-btn sky-btn-default"
-    (click)="openFlyoutWithUrlPermalink()">
-    Open flyout with a URL permalink
+    type="button"
+    [disabled]="!flyout"
+    (click)="closeAndRemoveFlyout()"
+  >
+    Close
   </button>
-</div>
+</p>
 
-<div>
-  <p>
-    The following button will open a flyout with a button which invokes a custom action callback in the header.
-  </p>
+<h2
+  class="sky-section-heading"
+>
+  Grid with flyout
+</h2>
+
+<sky-list
+  [data]="users"
+  [defaultView]="grid"
+>
+  <sky-list-view-grid
+    [rowHighlightedId]="rowHighlightedId"
+    #grid
+  >
+    <sky-grid-column
+      field="name"
+      heading="Name"
+      [template]="customTemplate"
+    >
+    </sky-grid-column>
+    <sky-grid-column
+      field="constituentCode"
+      heading="Constituent code"
+    >
+    </sky-grid-column>
+    <sky-grid-column
+      field="latestGift"
+      heading="Latest gift"
+    >
+    </sky-grid-column>
+    <sky-grid-column
+      field="status"
+      heading="Status"
+    >
+    </sky-grid-column>
+  </sky-list-view-grid>
+</sky-list>
+
+<ng-template
+  let-row="row"
+  #customTemplate
+>
   <button
+    class="sky-btn sky-btn-link"
     type="button"
-    class="sky-btn sky-btn-default"
-    (click)="openFlyoutWithPrimaryAction()">
-    Open flyout with a primary action
+    (click)="onNameClick(row)"
+  >
+    {{ row.name }}
   </button>
-</div>
+</ng-template>