comp(MdApp): create a app shell utility to hold drawers

vuematerial · Jul 11, 2017 · 9d2617e · 9d2617e
1 parent 53a9d98
commit 9d2617e
Show file tree

Hide file tree

Showing 20 changed files with 583 additions and 251 deletions.
diff --git a/docs/app/i18n/en-US.js b/docs/app/i18n/en-US.js
@@ -25,6 +25,9 @@ export default {
       title: 'Button',
       description: 'Buttons communicate the action that will occur when the user touches them.'
     },
+    app: {
+      title: 'App'
+    },
     checkbox: {
       title: 'Checkbox'
     },

diff --git a/docs/app/pages/Components/App/App.vue b/docs/app/pages/Components/App/App.vue
@@ -0,0 +1,31 @@
+<example src="./examples/App.vue" />
+
+<template>
+  <page-container centered :title="$t('pages.app.title')">
+    <div class="page-container-section">
+      <p>The content surfaces that comprise applications are referred to in this spec as material, or sheets of material. The content component is commonly used to resemble a piece of paper. It'll be useful to theme a arbitrary content.</p>
+    </div>
+
+    <div class="page-container-section">
+      <h2>App</h2>
+
+      <code-example title="App Shell" :component="examples['app']" />
+
+      <api-item title="API - md-app">
+        <p>This component do not have any extra option.</p>
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  import examples from 'docs-mixins/docsExample'
+
+  export default {
+    name: 'App',
+    mixins: [examples],
+    data: () => ({
+
+    })
+  }
+</script>
diff --git a/docs/app/pages/Components/App/examples/App.vue b/docs/app/pages/Components/App/examples/App.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="page-container">
+    <md-app>
+      <md-toolbar class="md-primary">
+        <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+          <md-icon>menu</md-icon>
+        </md-button>
+        <span class="md-title">Permanent - Full</span>
+      </md-toolbar>
+
+      <md-drawer md-permanent="full" :md-visible.sync="menuVisible">
+        <md-list>
+          <md-list-item>
+            <md-icon>move_to_inbox</md-icon>
+            <span class="md-list-item-text">Inbox</span>
+          </md-list-item>
+        </md-list>
+      </md-drawer>
+
+      <md-content>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+      </md-content>
+    </md-app>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .md-app {
+    border: 1px solid rgba(#000, .12);
+  }
+
+   // Demo purposes only
+  .md-drawer {
+    width: 230px;
+    max-width: calc(100vw - 125px);
+  }
+</style>
+
+<script>
+  export default {
+    name: 'App',
+    data: () => ({
+      menuVisible: false
+    })
+  }
+</script>
diff --git a/docs/app/pages/Components/Drawer/examples/PermanentCard.vue b/docs/app/pages/Components/Drawer/examples/PermanentCard.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="page-container">
-    <md-toolbar class="md-primary">
-      <span class="md-title">My Title</span>
-    </md-toolbar>
+  <div>
+    <md-app>
+      <md-toolbar class="md-primary">
+        <span class="md-title">My Title</span>
+      </md-toolbar>
 
-    <main class="page-wrapper md-layout-row">
       <md-drawer md-permanent="card">
         <md-list>
           <md-list-item>
@@ -29,13 +29,15 @@
         </md-list>
       </md-drawer>
 
-      <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
-    </main>
+      <md-content>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+      </md-content>
+    </md-app>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .page-container {
+  .md-app {
     border: 1px solid rgba(#000, .12);
   }
 
@@ -44,10 +46,6 @@
     width: 230px;
     max-width: calc(100vw - 125px);
   }
-
-  .page-content {
-    padding: 16px 0;
-  }
 </style>
 
 <script>

diff --git a/docs/app/pages/Components/Drawer/examples/PermanentClipped.vue b/docs/app/pages/Components/Drawer/examples/PermanentClipped.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="page-container">
-    <md-toolbar class="md-primary">
-      <span class="md-title">My Title</span>
-    </md-toolbar>
+    <md-app>
+      <md-toolbar class="md-primary">
+        <span class="md-title">My Title</span>
+      </md-toolbar>
 
-    <main class="page-wrapper md-layout-row">
       <md-drawer md-permanent="clipped">
         <md-list>
           <md-list-item>
@@ -29,13 +29,15 @@
         </md-list>
       </md-drawer>
 
-      <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
-    </main>
+      <md-content>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+      </md-content>
+    </md-app>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .page-container {
+  .md-app {
     border: 1px solid rgba(#000, .12);
   }
 
@@ -44,11 +46,6 @@
     width: 230px;
     max-width: calc(100vw - 125px);
   }
-
-  .page-content {
-    padding: 16px;
-    border-left: 1px solid rgba(#000, .12);
-  }
 </style>
 
 <script>

diff --git a/docs/app/pages/Components/Drawer/examples/PermanentFull.vue b/docs/app/pages/Components/Drawer/examples/PermanentFull.vue
@@ -1,45 +1,47 @@
 <template>
   <div class="page-container md-layout-row">
-    <md-drawer md-permanent="full">
-      <md-toolbar class="md-transparent" md-elevation="0">
-        Navigation
-      </md-toolbar>
-
-      <md-list>
-        <md-list-item>
-          <md-icon>move_to_inbox</md-icon>
-          <span class="md-list-item-text">Inbox</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon>send</md-icon>
-          <span class="md-list-item-text">Sent Mail</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon>delete</md-icon>
-          <span class="md-list-item-text">Trash</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon>error</md-icon>
-          <span class="md-list-item-text">Spam</span>
-        </md-list-item>
-      </md-list>
-    </md-drawer>
-
-    <main class="page-wrapper md-flex md-layout-column">
+    <md-app>
       <md-toolbar class="md-primary">
         <span class="md-title">My Title</span>
       </md-toolbar>
 
-      <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
-    </main>
+      <md-drawer md-permanent="full">
+        <md-toolbar class="md-transparent" md-elevation="0">
+          Navigation
+        </md-toolbar>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>move_to_inbox</md-icon>
+            <span class="md-list-item-text">Inbox</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>send</md-icon>
+            <span class="md-list-item-text">Sent Mail</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>delete</md-icon>
+            <span class="md-list-item-text">Trash</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>error</md-icon>
+            <span class="md-list-item-text">Spam</span>
+          </md-list-item>
+        </md-list>
+      </md-drawer>
+
+      <md-content>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+      </md-content>
+    </md-app>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .page-container {
+  .md-app {
     border: 1px solid rgba(#000, .12);
   }
 
@@ -48,11 +50,6 @@
     width: 230px;
     max-width: calc(100vw - 125px);
   }
-
-  .page-content {
-    padding: 16px;
-    border-left: 1px solid rgba(#000, .12);
-  }
 </style>
 
 <script>

diff --git a/docs/app/pages/Components/Drawer/examples/Persistent.vue b/docs/app/pages/Components/Drawer/examples/Persistent.vue
@@ -1,55 +1,57 @@
 <template>
-  <div class="page-container md-layout-row">
-    <md-drawer :md-visible.sync="menuVisible" md-persistent>
-      <md-toolbar class="md-transparent" md-elevation="0">
-        <span>Navigation</span>
-
-        <div class="md-toolbar-section-end">
-          <md-button class="md-icon-button md-dense" @click="toggleMenu">
-            <md-icon>keyboard_arrow_left</md-icon>
-          </md-button>
-        </div>
-      </md-toolbar>
-
-      <md-list>
-        <md-list-item>
-          <md-icon>move_to_inbox</md-icon>
-          <span class="md-list-item-text">Inbox</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon>send</md-icon>
-          <span class="md-list-item-text">Sent Mail</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon>delete</md-icon>
-          <span class="md-list-item-text">Trash</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon>error</md-icon>
-          <span class="md-list-item-text">Spam</span>
-        </md-list-item>
-      </md-list>
-    </md-drawer>
-
-    <main class="page-wrapper md-flex md-layout-column">
+  <div class="page-container">
+    <md-app>
       <md-toolbar class="md-primary">
         <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
           <md-icon>menu</md-icon>
         </md-button>
         <span class="md-title">My Title</span>
       </md-toolbar>
 
-      <div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
-    </main>
+      <md-drawer :md-visible.sync="menuVisible" md-persistent>
+        <md-toolbar class="md-transparent" md-elevation="0">
+          <span>Navigation</span>
+
+          <div class="md-toolbar-section-end">
+            <md-button class="md-icon-button md-dense" @click="toggleMenu">
+              <md-icon>keyboard_arrow_left</md-icon>
+            </md-button>
+          </div>
+        </md-toolbar>
+
+        <md-list>
+          <md-list-item>
+            <md-icon>move_to_inbox</md-icon>
+            <span class="md-list-item-text">Inbox</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>send</md-icon>
+            <span class="md-list-item-text">Sent Mail</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>delete</md-icon>
+            <span class="md-list-item-text">Trash</span>
+          </md-list-item>
+
+          <md-list-item>
+            <md-icon>error</md-icon>
+            <span class="md-list-item-text">Spam</span>
+          </md-list-item>
+        </md-list>
+      </md-drawer>
+
+      <md-content>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+      </md-content>
+    </md-app>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .page-container {
-    overflow: hidden;
+  .md-app {
+    min-height: 300px;
     border: 1px solid rgba(#000, .12);
   }
 
@@ -58,11 +60,6 @@
     width: 230px;
     max-width: calc(100vw - 125px);
   }
-
-  .page-content {
-    padding: 16px;
-    border-left: 1px solid rgba(#000, .12);
-  }
 </style>
 
 <script>