modify frontend and use vuetify framework

Author: bakai-dev

frontend/assets/img/favicon-32x32.png

@@ -0,0 +1,64 @@
+<template>
+  <div id="app">
+
+    <transition name="page" mode="out-in">
+      <component v-if="layout" :is="layout"></component>
+    </transition>
+  </div>
+</template>
+
+<script>
+
+
+// Load layout components dynamically.
+const requireContext = require.context('../layouts', false, /.*\.vue$/)
+
+const layouts = requireContext.keys()
+  .map(file =>
+    [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
+  )
+  .reduce((components, [name, component]) => {
+    components[name] = component
+    return components
+  }, {})
+
+export default {
+
+  components: {
+    'v-loading': Loading
+  },
+
+  metaInfo () {
+    const { appName } = process.env.APP_NAME
+
+    return {
+      title: appName,
+      titleTemplate: `%s · ${appName}`
+    }
+  },
+
+  data: () => ({
+    layout: null,
+    defaultLayout: 'app'
+  }),
+
+  mounted () {
+    this.$loading = this.$refs.loading
+  },
+
+  methods: {
+    /**
+     * Set the application layout.
+     *
+     * @param {String} layout
+     */
+    setLayout (layout) {
+      if (!layout || !layouts[layout]) {
+        layout = this.defaultLayout
+      }
+
+      this.layout = layouts[layout]
+    }
+  }
+}
+</script>

frontend/static/v.png renamed to frontend/assets/img/v.png

@@ -0,0 +1,42 @@
+<template>
+    <v-layout row justify-center>
+        <v-dialog v-if="responseMessage.modal" :value.sync="responseMessage.show" persistent>
+            <v-card>
+                <v-card-title class="headline white--text" :class="responseMessage.type">{{ responseMessage.title }}
+                </v-card-title>
+                <v-divider></v-divider>
+                <v-card-text>{{ responseMessage.text }}</v-card-text>
+                <v-layout row justify-center>
+                    <v-btn :color="responseMessage.type" flat="flat" @click.native="close">{{ $t('ok') }}</v-btn>
+                </v-layout>
+            </v-card>
+        </v-dialog>
+        <v-snackbar v-else top v-model="responseMessage.show" :color="responseMessage.type">
+            {{ responseMessage.text }}
+            <v-btn dark flat @click.native="close">{{ $t('close') }}</v-btn>
+        </v-snackbar>
+    </v-layout>
+</template>
+
+<script>
+    import {mapGetters} from 'vuex'
+
+    export default {
+        name: 'feedback-message',
+        computed: mapGetters({
+                responseMessage: 'message/responseMessage'
+            }
+        ),
+        methods: {
+            close() {
+                this.$store.dispatch('message/clearMessage')
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" scoped>
+    .snack__content
+        max-width: 100vw
+        min-width: 100vw
+</style>

frontend/components/App.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <v-toolbar flat>
+      <v-list>
+        <v-list-tile>
+          <v-list-tile-title class="title">
+            {{ name }}
+          </v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+    </v-toolbar>
+    <v-divider></v-divider>
+    <v-list>
+      <v-list-tile
+        value="true"
+        v-for="(item, i) in items"
+        :key="i"
+        :to="item.route"
+      >
+        <v-list-tile-action>
+          <v-icon light v-html="item.icon"></v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title v-text="item.title"></v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </v-list>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: this.$t('nav_menu_title'),
+      items: [
+        { title: 'Dashboard', icon: 'dashboard', route: { name: 'home' } },
+        { title: 'Account', icon: 'account_box', route: { name: 'settings.profile' } }
+      ]
+    }
+  }
+}
+</script>

frontend/components/FeedbackMessage.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-footer :fixed="fixed" app>
+    <span>&copy; 2017</span>
+  </v-footer>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      fixed: false
+    }
+  }
+}
+</script>

frontend/components/LocaleDropdown.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-progress-linear 
+    :indeterminate="true" 
+    :color="color"
+    height="4" 
+    v-if="show"
+  >
+  </v-progress-linear>
+</template>
+
+<script>
+export default {
+  name: 'progress-bar',
+  props: {
+    show: {
+      type: [Boolean, String],
+      required: true
+    },
+    color: {
+      type: String,
+      default: 'accent'
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.progress-linear
+  height: 4px
+  left: 0
+  margin: 0
+  position: absolute
+  right: 0
+  top: 0
+  width: 100%
+  z-index: 999999
+</style>