docs(demo): Update demo src to match demo-app site

trimox · Aug 12, 2017 · 31306fd · 31306fd
1 parent bcdc8ce
commit 31306fd
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 38 deletions.
diff --git a/config/rollup-demo.config.js b/config/rollup-demo.config.js
@@ -1,11 +1,6 @@
 import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 
-const ROLLUP_GLOBALS = {
-  '@angular-mdc/web': 'ng.material',
-  'rxjs': 'Rx'
-};
-
 export default {
   entry: 'publish-demo/main-aot.js',
   dest: 'publish-demo/dist/build.js',
@@ -15,7 +10,7 @@ export default {
   plugins: [
     nodeResolve({ jsnext: true, module: true }),
     commonjs({
-      include: 'node_modules/rxjs/**',
+      include: 'node_modules/**',
     })
   ],
   onwarn: function(warning) {

diff --git a/src/demo-app/common/navigation-links.ts b/src/demo-app/common/navigation-links.ts
@@ -1,9 +1,9 @@
 export const navigationLinks = [
   { name: 'Home', route: '/', icon: 'home', desc: '' },
-  { name: 'Button', route: 'button-demo', icon: 'send', desc: 'Buttons communicate the action that will occur when the user touches them.' },
+  { name: 'Button', route: 'button-demo', icon: 'code', desc: 'Buttons communicate the action that will occur when the user touches them.' },
   { name: 'Card', route: 'card-demo', icon: 'credit_card', desc: 'A card is a sheet of material that serves as an entry point to more detailed information.' },
   { name: 'Checkbox', route: 'checkbox-demo', icon: 'check_box', desc: 'Checkboxes allow the user to select multiple options from a set.' },
-  { name: 'Dialog', route: 'dialog-demo', icon: 'code', desc: 'Dialogs inform users about a specific task, require decisions, or involve multiple tasks.' },
+  { name: 'Dialog', route: 'dialog-demo', icon: 'question_answer', desc: 'Dialogs inform users about a specific task, require decisions, or involve multiple tasks.' },
   { name: 'Drawer', route: 'drawer-demo', icon: 'code', desc: 'Drawers slide in from the left and contains the navigation destinations for your app.' },
   { name: 'Elevation', route: 'elevation-demo', icon: 'filter', desc: 'Elevation is the relative depth, or distance, between two surfaces along the z-axis.' },
   { name: 'Floating Action Button (FAB)', route: 'fab-demo', icon: 'add_circle_outline', desc: 'A floating action button represents the primary action in an application.' },

diff --git a/src/demo-app/components/list-demo/list-demo.component.html b/src/demo-app/components/list-demo/list-demo.component.html
@@ -150,14 +150,17 @@ <h3>Single-Line</h3>
       <mdc-list-item>Single-line item</mdc-list-item>
       <mdc-list-item>Single-line item</mdc-list-item>
     </mdc-list>
+    <div fxLayout="column" fxLayoutAlign="start start">
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>
- [<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"isSinglelineDense"</span>
+ [<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"false"</span>
  [<span style="color:#89bdff">mdc-theme-dark</span>]=<span style="color:#65b042">"false"</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Single-line item<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Single-line item<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>Single-line item<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
-</pre>  </div>
+</pre> 
+</div>
+ </div>
   <div fxLayout="column" class="mdc-padding">
     <h3>Two-line List</h3>
     <div fxLayout="row">
@@ -191,6 +194,7 @@ <h3>Two-line List</h3>
       </mdc-list-item>
     </mdc-list>
 
+   <div fxLayout="column" fxLayoutAlign="start start">
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span> 
   [<span style="color:#89bdff">twoLine</span>]=<span style="color:#65b042">"true"</span>
   [<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"false"</span>
@@ -214,7 +218,7 @@ <h3>Two-line List</h3>
     <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item-text</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
-</pre></div>
+</pre></div></div>
 
   <div fxLayout="column" class="mdc-padding">
     <h3>Start Detail</h3>
@@ -269,6 +273,7 @@ <h3>Start + End Detail</h3>
         <i mdc-list-item-start material-icon>data_usage</i>Data Usage<i mdc-list-item-end material-icon>info</i>
       </mdc-list-item>
     </mdc-list>
+        <div fxLayout="column" fxLayoutAlign="start start">
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span> [<span style="color:#89bdff">mdc-theme-dark</span>]=<span style="color:#65b042">"false"</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
     <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>network_wifi<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
@@ -286,7 +291,7 @@ <h3>Start + End Detail</h3>
     <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
-</pre>  </div>
+</pre></div>  </div>
 
   <div fxLayout="column" class="mdc-padding">
     <h3>Avatar List</h3>
@@ -314,35 +319,63 @@ <h3>Avatar List</h3>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <h3>Avatar List + Checkbox</h3>
-    <mdc-list class="demo-wrapper" avatar="true" [dense]="isAvatarDense" [mdc-theme-dark]="isAvatarDarkTheme">
-      <mdc-list-item>
-        <i mdc-list-item-start material-icon class="grey-avatar">person</i>Single-line item
-          <mdc-checkbox mdc-list-item-end></mdc-checkbox>
-      </mdc-list-item>
-      <mdc-list-item>
-        <i mdc-list-item-start material-icon class="grey-avatar">person</i>Single-line item
-          <mdc-checkbox mdc-list-item-end></mdc-checkbox>
-      </mdc-list-item>
-      <mdc-list-item>
-        <i mdc-list-item-start material-icon class="grey-avatar">person</i>Single-line item
-          <mdc-checkbox mdc-list-item-end></mdc-checkbox>
-      </mdc-list-item>
-    </mdc-list>
+<mdc-list class="demo-wrapper" [avatar]="true" [dense]="isAvatarDense" [mdc-theme-dark]="isAvatarDarkTheme">
+  <mdc-list-item>
+    <i mdc-list-item-start material-icon class="grey-avatar">person</i>Single-line item
+      <mdc-checkbox mdc-list-item-end></mdc-checkbox>
+  </mdc-list-item>
+  <mdc-list-item>
+    <i mdc-list-item-start material-icon class="grey-avatar">person</i>Single-line item
+      <mdc-checkbox mdc-list-item-end></mdc-checkbox>
+  </mdc-list-item>
+  <mdc-list-item>
+    <i mdc-list-item-start material-icon class="grey-avatar">person</i>Single-line item
+      <mdc-checkbox mdc-list-item-end></mdc-checkbox>
+  </mdc-list-item>
+</mdc-list>
+        <div fxLayout="column" fxLayoutAlign="start start">
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span> [<span style="color:#89bdff">avatar</span>]=<span style="color:#65b042">"true"</span> [<span style="color:#89bdff">dense</span>]=<span style="color:#65b042">"false"</span> [<span style="color:#89bdff">mdc-theme-dark</span>]=<span style="color:#65b042">"false"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span> <span style="color:#e0c589">class</span>=<span style="color:#65b042">"grey-avatar"</span>></span>person<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>Single-line item
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-checkbox</span> <span style="color:#89bdff">mdc-list-item-end</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-checkbox</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span> <span style="color:#e0c589">class</span>=<span style="color:#65b042">"grey-avatar"</span>></span>person<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>Single-line item
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-checkbox</span> <span style="color:#89bdff">mdc-list-item-end</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-checkbox</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span> <span style="color:#e0c589">class</span>=<span style="color:#65b042">"grey-avatar"</span>></span>person<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>Single-line item
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-checkbox</span> <span style="color:#89bdff">mdc-list-item-end</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-checkbox</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+</pre></div>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <h3>Interactive Lists (using ink ripple)</h3>
-    <mdc-list class="demo-wrapper">
-      <a mdc-list-item href="#/list-demo">
-        <i mdc-list-item-start material-icon>network_wifi</i>Wi-Fi<i mdc-list-item-end material-icon>info</i>
-      </a>
-      <a mdc-list-item href="#/list-demo">
-        <i mdc-list-item-start material-icon>bluetooth</i>Bluetooth<i mdc-list-item-end material-icon>info</i>
-      </a>
-      <a mdc-list-item href="#/list-demo">
-        <i mdc-list-item-start material-icon>data_usage</i>Data Usage<i mdc-list-item-end material-icon>info</i>
-      </a>
-    </mdc-list>
-  </div>
+<mdc-list class="demo-wrapper">
+  <a mdc-list-item href="#/list-demo">
+    <i mdc-list-item-start material-icon>network_wifi</i>Wi-Fi<i mdc-list-item-end material-icon>info</i>
+  </a>
+  <a mdc-list-item href="#/list-demo">
+    <i mdc-list-item-start material-icon>bluetooth</i>Bluetooth<i mdc-list-item-end material-icon>info</i>
+  </a>
+  <a mdc-list-item href="#/list-demo">
+    <i mdc-list-item-start material-icon>data_usage</i>Data Usage<i mdc-list-item-end material-icon>info</i>
+  </a>
+</mdc-list>
+        <div fxLayout="column" fxLayoutAlign="start start">
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+  <span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-list-item</span> <span style="color:#e0c589">href</span>=<span style="color:#65b042">"#/list-demo"</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>network_wifi<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>Wi-Fi<span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+  <span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
+  <span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-list-item</span> <span style="color:#e0c589">href</span>=<span style="color:#65b042">"#/list-demo"</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>bluetooth<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>Bluetooth<span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+  <span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
+  <span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-list-item</span> <span style="color:#e0c589">href</span>=<span style="color:#65b042">"#/list-demo"</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span>></span>data_usage<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>Data Usage<span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-end</span> <span style="color:#e0c589">material-icon</span>></span>info<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>
+  <span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+</pre></div>  </div>
   <div fxLayout="column" class="mdc-padding">
     <h3>Grouped Lists</h3>
     <mdc-list-group class="demo-wrapper">