Add Material Design

dmstern · Jul 26, 2018 · da23a3c · da23a3c
1 parent 94234a2
commit da23a3c
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 26 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,32 +1,76 @@
 <template>
-  <div id="app">
-    <h1>jsFrog - Explore Artifactory's NPM registry</h1>
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
-    <router-view/>
-  </div>
+
+<div class="page-container">
+  <md-app id="app" md-waterfall md-mode="fixed">
+    <md-app-toolbar class="md-primary">
+      <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
+        <md-icon>menu</md-icon>
+      </md-button>
+      <span class="md-title">jsFrog - Explore Artifactory's NPM registry</span>
+    </md-app-toolbar>
+
+    <md-app-drawer  :md-active.sync="menuVisible">
+      <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-app-drawer>
+
+    <md-app-content>
+      <router-view/>
+    </md-app-content>
+  </md-app>
+</div>
+
 </template>
 
 <style lang="scss">
-@import url('//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons');
+@import url("//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons");
+
+.page-container {
+  height: 100vh;
+}
 
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  // font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  min-height: 100%;
 }
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+
+</style>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class App extends Vue {
+  @Prop() private menuVisibleProp!: boolean;
+  private menuVisible: boolean;
+
+  constructor() {
+    super();
+    this.menuVisible = false;
   }
 }
-</style>
+</script>
diff --git a/src/components/Packages.vue b/src/components/Packages.vue
@@ -2,14 +2,77 @@
   <div class="packages">
     <h2>Packages</h2>
     <span v-if="!Object.keys(packages).length">{{startMsg}}</span>
-    <ul v-else>
+    <!-- <ul v-else>
       <li v-for="(metaData, packageName) in packages" :key='packageName'>
         <router-link :to="`/package/${packageName}`">{{ packageName }} (by {{metaData.displayName}})</router-link>
-      </li>
-    </ul>
+      </li> -->
+    <!-- </ul> -->
+
+    <md-list v-else class="md-triple-line package-list">
+
+      <span v-for="(metaData, packageName) in packages" :key='packageName'>
+        <md-list-item>
+          <!-- <router-link :to="`/package/${packageName}`"> -->
+
+            <div class="md-list-item-text">
+              <span class="package-list--package-name">{{ packageName }}</span>
+              <span class="package-list--description">I'll be in your neighborhood doing errands this week. Do you want to meet?</span>
+              <span class="package-list--author">
+                <md-avatar>
+                  <img src="https://placeimg.com/40/40/people/1" alt="People">
+                </md-avatar>
+                <span>{{metaData.displayName}}</span>
+              </span>
+            </div>
+
+            <md-button class="md-icon-button md-list-action">
+              <md-icon class="md-primary">star</md-icon>
+            </md-button>
+          <!-- </router-link> -->
+        </md-list-item>
+
+        <md-divider class="md-full"></md-divider>
+      </span>
+    </md-list>
+
   </div>
 </template>
 
+<style lang="scss">
+
+.md-list-item-text * {
+  width: auto;
+}
+.md-list-item-text > * {
+  width: 100%;
+}
+
+.package-list {
+
+  & &--package-name {
+    font-weight: bold;
+  }
+
+  &--author {
+    display: flex;
+
+    .md-list.md-theme-default.md-triple-line .md-list-item-text &:nth-child(3) {
+      color: inherit;
+    }
+  }
+
+  & &--description {
+    color: var(--md-theme-default-text-accent-on-background, rgba(0,0,0,0.54));
+  }
+
+  & .md-avatar {
+    width: auto;
+  }
+}
+
+</style>
+
+
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import PackageService from '@/services/PackageService';
@@ -34,7 +97,7 @@ export default class Packages extends Vue {
 
       this.packages = {};
       for (const packageName of packageNames) {
-        let displayName: any = "";
+        let displayName: any = '';
         if (packagesResponse[packageName].author) {
           displayName = packagesResponse[packageName].author!.name
             ? packagesResponse[packageName].author!.name

diff --git a/src/main.ts b/src/main.ts
@@ -1,9 +1,14 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from '@/router';
+import VueMaterial from 'vue-material';
+import 'vue-material/dist/vue-material.min.css';
+import 'vue-material/dist/theme/default.css';
 
 Vue.config.productionTip = false;
 
+Vue.use(VueMaterial);
+
 new Vue({
   router,
   render: (h) => h(App),

diff --git a/tslint.json b/tslint.json
@@ -15,6 +15,7 @@
     "ordered-imports": false,
     "object-literal-sort-keys": false,
     "no-consecutive-blank-lines": false,
-    "no-console": false
+    "no-console": false,
+    "noImplicitAny": false
   }
 }