refactor: client structure + editor preview logic

2018-02-24 17:35:56 -05:00
parent 37c28691ff
commit 4fa7ed4e93
19 changed files with 26 additions and 8 deletions
--- a/client/components/navigator.vue
+++ b/client/components/navigator.vue
@@ -0,0 +1,155 @@
+<template lang="pug">
+  .navigator
+    .navigator-bar
+      .navigator-fab
+        .navigator-fab-button(@click='toggleMainMenu')
+          svg.icons.is-24(role='img')
+            title Navigation
+            use(xlink:href='#gg-apps-grid')
+      .navigator-title
+        h1 {{ siteTitle }}
+      .navigator-subtitle(:class='subtitleClass')
+        transition(name='navigator-subtitle-icon')
+          svg.icons.is-24.navigator-subtitle-icon(role='img', v-if='subtitleIcon')
+            title {{subtitleText}}
+            use(:xlink:href='subtitleIconClass')
+        h2 {{subtitleText}}
+      .navigator-action
+        .navigator-action-item(:class='{"is-active": userMenuShown}', @click='toggleUserMenu')
+          svg.icons.is-32(role='img')
+            title User
+            use(xlink:href='#nc-user-circle')
+          transition(name='navigator-action-item-dropdown')
+            ul.navigator-action-item-dropdown(v-show='userMenuShown', v-cloak)
+              li
+                label Account
+                svg.icons.is-24(role='img')
+                  title Account
+                  use(xlink:href='#nc-man-green')
+              li(@click='logout')
+                label Sign out
+                svg.icons.is-24(role='img')
+                  title Sign Out
+                  use(xlink:href='#nc-exit')
+    transition(name='navigator-sd')
+      .navigator-sd(v-show='sdShown', v-cloak)
+        .navigator-sd-actions
+          a.is-active(href='', title='Search')
+            svg.icons.is-24(role='img')
+              title Search
+              use(xlink:href='#gg-search')
+          a(href='', title='New Document')
+            svg.icons.is-24(role='img')
+              title New Document
+              use(xlink:href='#nc-plus-circle')
+          a(href='', title='Edit Document')
+            svg.icons.is-24(role='img')
+              title Edit Document
+              use(xlink:href='#nc-pen-red')
+          a(href='', title='History')
+            svg.icons.is-24(role='img')
+              title History
+              use(xlink:href='#nc-restore')
+          a(href='', title='View Source')
+            svg.icons.is-24(role='img')
+              title View Source
+              use(xlink:href='#nc-code-editor')
+          a(href='', title='Move Document')
+            svg.icons.is-24(role='img')
+              title Move Document
+              use(xlink:href='#nc-move')
+          a(href='', title='Delete Document')
+            svg.icons.is-24(role='img')
+              title Delete Document
+              use(xlink:href='#nc-trash')
+        .navigator-sd-search
+          input(type='text', ref='iptSearch', placeholder='Search')
+        .navigator-sd-results
+        .navigator-sd-footer
+          a(href='', title='Settings')
+            svg.icons.is-24(role='img')
+              title Settings
+              use(xlink:href='#nc-gear')
+          a(href='', title='Users')
+            svg.icons.is-24(role='img')
+              title Users
+              use(xlink:href='#nc-users')
+          a(href='', title='Assets')
+            svg.icons.is-24(role='img')
+              title Assets
+              use(xlink:href='#nc-image')
+</template>
+
+<script>
+/* global siteConfig */
+
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      sdShown: false,
+      userMenuShown: false
+    }
+  },
+  computed: {
+    ...mapState('navigator', [
+      'subtitleShown',
+      'subtitleStyle',
+      'subtitleText',
+      'subtitleIcon'
+    ]),
+    siteTitle() {
+      return siteConfig.title
+    },
+    subtitleClass() {
+      return {
+        'is-active': this.subtitleShown,
+        'is-error': this.subtitleStyle === 'error',
+        'is-warning': this.subtitleStyle === 'warning',
+        'is-success': this.subtitleStyle === 'success',
+        'is-info': this.subtitleStyle === 'info'
+      }
+    },
+    subtitleIconClass() { return '#' + this.subtitleIcon }
+  },
+  methods: {
+    toggleMainMenu() {
+      this.sdShown = !this.sdShown
+      this.userMenuShown = false
+      if (this.sdShown) {
+        this.$nextTick(() => {
+          this.bindOutsideClick()
+          this.$refs.iptSearch.focus()
+        })
+      } else {
+        this.unbindOutsideClick()
+      }
+    },
+    toggleUserMenu() {
+      this.userMenuShown = !this.userMenuShown
+      this.sdShown = false
+      if (this.userMenuShown) {
+        this.bindOutsideClick()
+      } else {
+        this.unbindOutsideClick()
+      }
+    },
+    bindOutsideClick() {
+      document.addEventListener('mousedown', this.handleOutsideClick, false)
+    },
+    unbindOutsideClick() {
+      document.removeEventListener('mousedown', this.handleOutsideClick, false)
+    },
+    handleOutsideClick(ev) {
+      if (!this.$el.contains(ev.target)) {
+        this.sdShown = false
+        this.userMenuShown = false
+      }
+    },
+    logout() {
+      window.location.assign(this.$helpers.resolvePath('logout'))
+    }
+  }
+}
+</script>