Merge pull request #9 from Infinity-OJ/feature-layout

Feature layout (Fix #8)
wycers · Feb 11, 2020 · 65f41d1 · 65f41d1
2 parents 33e7fdd + c4cf12d
commit 65f41d1
Show file tree

Hide file tree

Showing 22 changed files with 300 additions and 191 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,8 +8,6 @@
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title><%= htmlWebpackPlugin.options.title %></title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
-    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
 </head>
 
 <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,26 @@
 <template>
   <v-app>
-    <transition mode="out-in" name="slide-y-transition">
-      <router-view />
-    </transition>
+    <CoreDrawer />
+    <CoreToolbar />
+    <CoreView />
+    <!-- <BottomNav /> -->
   </v-app>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
+import CoreDrawer from "@/components/common/Drawer.vue";
+import CoreView from "@/components/common/View.vue";
+import CoreToolbar from "@/components/common/Toolbar.vue";
+// import BottomNav from "@/components/common/BottomNav.vue";
 
 export default Vue.extend({
-  name: "App"
+  name: "App",
+  components: {
+    CoreDrawer,
+    CoreView,
+    CoreToolbar
+    // BottomNav
+  }
 });
 </script>
diff --git a/src/assets/fonts/GoogleSans-Regular.ttf b/src/assets/fonts/GoogleSans-Regular.ttf
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-container class="pa-0">
+    <v-row align="center" justify="center" fill-height>
+      <v-col xs="12" sm="5" md="3" lg="3" xl="3" class="text-xs-center pa-3">
+      </v-col>
+      <v-col xs="12" sm="7" md="8" lg="8" xl="8" class="">
+        <p
+          class="google-font mb-1"
+          style="font-weight: 350;color: #616161;font-size:300%"
+        >
+          <b>Make good things <span style="color: #1a73e8;">together</span>.</b>
+        </p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chapterDetails: {}
+    };
+  }
+};
+</script>
diff --git a/src/components/common/Drawer.vue b/src/components/common/Drawer.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-navigation-drawer v-model="drawer" app temporary>
+    <v-col xs="12" class="pl-3 pt-5 grey lighten-5 pb-2">
+      <v-img
+        src="http://cdn.wycer.cn/0f2a8a4f-b69d-4331-b236-bd30293a8724"
+        lazy-src="http://cdn.wycer.cn/0f2a8a4f-b69d-4331-b236-bd30293a8724"
+        width="10vh"
+      >
+        <v-row
+          slot="placeholder"
+          fill-height
+          align="center"
+          justify="center"
+          ma-0
+        >
+          <v-progress-circular
+            indeterminate
+            color="grey lighten-5"
+          ></v-progress-circular>
+        </v-row>
+      </v-img>
+      <p class="google-font mt-2" style="font-size:130%">
+        Infinity OJ
+      </p>
+    </v-col>
+    <v-list shaped>
+      <v-subheader>Links</v-subheader>
+      <v-list-item-group color="primary">
+        <v-list-item v-for="(link, i) in links" :key="i" :to="link.to">
+          <!-- <v-list-item-icon>
+            <v-icon v-text="link.icon"></v-icon>
+          </v-list-item-icon> -->
+
+          <v-list-item-content>
+            <v-list-item-title class="google-font"
+              >{{ $t(link.text) }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+// Utilities
+import { mapGetters, mapMutations } from "vuex";
+export default {
+  name: "CoreDrawer",
+  computed: {
+    ...mapGetters(["links"]),
+    drawer: {
+      get() {
+        return this.$store.state.drawer;
+      },
+      set(val) {
+        this.setDrawer(val);
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(["setDrawer"]),
+    onClick(e, item) {
+      e.stopPropagation();
+      if (item.to === "/") {
+        this.$vuetify.goTo(0);
+        this.setDrawer(false);
+        return;
+      }
+      if (item.to || !item.href) return;
+      this.$vuetify.goTo(item.href);
+      this.setDrawer(false);
+    }
+  }
+};
+</script>
diff --git a/src/components/common/Toolbar.vue b/src/components/common/Toolbar.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-app-bar app color="white" height="55px">
+    <v-app-bar-nav-icon
+      class="hidden-md-and-up"
+      @click="toggleDrawer"
+    ></v-app-bar-nav-icon>
+
+    <v-toolbar-title class="ml-0 pl-1 mr-1">
+      <router-link
+        :to="{ name: 'home' }"
+        class="google-font"
+        style="text-decoration:none; color: rgba(0,0,0,.87);"
+      >
+        Infinity OJ
+      </router-link>
+    </v-toolbar-title>
+    <v-spacer />
+    <v-btn
+      v-for="(link, i) in links"
+      :key="i"
+      :to="link.to"
+      class="ml-0 google-font hidden-sm-and-down"
+      style="text-transform: capitalize;"
+      text
+      @click="onClick($event, link)"
+    >
+      {{ $t(link.text) }}
+    </v-btn>
+    <ToolbarAvatar />
+  </v-app-bar>
+</template>
+
+<script>
+// Utilities
+import { mapGetters, mapMutations } from "vuex";
+import ToolbarAvatar from "@/components/common/ToolbarAvatar.vue";
+export default {
+  name: "CoreToolbar",
+  components: {
+    ToolbarAvatar
+  },
+  computed: {
+    ...mapGetters(["links"])
+  },
+  methods: {
+    ...mapMutations(["toggleDrawer"]),
+    onClick(e, item) {
+      e.stopPropagation();
+      if (item.to || !item.href) return;
+      this.$vuetify.goTo(item.href);
+    }
+  }
+};
+</script>
diff --git a/src/components/common/ToolbarAvatar.vue b/src/components/common/ToolbarAvatar.vue
@@ -0,0 +1,29 @@
+<template lang="pug">
+v-menu(offset-y  open-on-hover )
+  template(v-slot:activator="{ on }")
+    v-avatar(
+      v-on="on"
+      color="grey lighten-4"
+      :size="44"
+    )
+      img(
+        src="http://cdn.wycer.cn/0f2a8a4f-b69d-4331-b236-bd30293a8724"
+        alt="avatar"
+      )
+  v-list
+    v-list-item(to="/profile")
+      v-list-item-title {{ $t('nav.profile') }}
+    v-divider
+    v-list-item(@click="logout")
+      v-list-item-title {{ $t('nav.logout') }}
+</template>
+<script>
+export default {
+  name: "ToolbarAvatar",
+  methods: {
+    logout() {
+      console.log("logout");
+    }
+  }
+};
+</script>
diff --git a/src/components/common/View.vue b/src/components/common/View.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-content id="home" class="pb-0">
+    <v-slide-y-reverse-transition>
+      <router-view v-show="show" />
+    </v-slide-y-reverse-transition>
+  </v-content>
+</template>
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "CoreView",
+  data() {
+    return {
+      show: true
+    };
+  }
+});
+</script>