fix: hide page actions when not applicable

client/components/admin.vue

@@ -125,7 +125,10 @@ export default {
   computed: {
     darkMode: get('site/dark')
   },
-  router
+  router,
+  created() {
+    this.$store.commit('page/SET_MODE', 'admin')
+  }
 }
 </script>
 

client/components/common/nav-header.vue

@@ -26,23 +26,27 @@
         v-list-tile(avatar, @click='pageNew')
           v-list-tile-avatar: v-icon(color='green') add_box
           v-list-tile-content New Page
-        v-divider.my-0
+        template(v-if='path && path.length')
-        v-subheader Current Page
+          v-divider.my-0
-        v-list-tile(avatar, @click='pageEdit')
+          v-subheader Current Page
-          v-list-tile-avatar: v-icon(color='indigo') edit
+          v-list-tile(avatar, @click='pageView', v-if='mode !== `view`')
-          v-list-tile-content Edit
+            v-list-tile-avatar: v-icon(color='indigo') subject
-        v-list-tile(avatar, @click='pageHistory')
+            v-list-tile-content View
-          v-list-tile-avatar: v-icon(color='indigo') history
+          v-list-tile(avatar, @click='pageEdit', v-if='mode !== `edit`')
-          v-list-tile-content History
+            v-list-tile-avatar: v-icon(color='indigo') edit
-        v-list-tile(avatar, @click='pageSource')
+            v-list-tile-content Edit
-          v-list-tile-avatar: v-icon(color='indigo') code
+          v-list-tile(avatar, @click='pageHistory', v-if='mode !== `history`')
-          v-list-tile-content View Source
+            v-list-tile-avatar: v-icon(color='indigo') history
-        v-list-tile(avatar, @click='pageMove')
+            v-list-tile-content History
-          v-list-tile-avatar: v-icon(color='indigo') forward
+          v-list-tile(avatar, @click='pageSource', v-if='mode !== `source`')
-          v-list-tile-content Move / Rename
+            v-list-tile-avatar: v-icon(color='indigo') code
-        v-list-tile(avatar, @click='pageDelete')
+            v-list-tile-content View Source
-          v-list-tile-avatar: v-icon(color='red darken-2') delete
+          v-list-tile(avatar, @click='pageMove')
-          v-list-tile-content Delete
+            v-list-tile-avatar: v-icon(color='indigo') forward
+            v-list-tile-content Move / Rename
+          v-list-tile(avatar, @click='pageDelete')
+            v-list-tile-avatar: v-icon(color='red darken-2') delete
+            v-list-tile-content Delete
         v-divider.my-0
         v-subheader Assets
         v-list-tile(avatar, @click='')
@@ -138,7 +142,8 @@ export default {
   computed: {
     isLoading: get('isLoading'),
     title: get('site/title'),
-    path: get('page/path')
+    path: get('page/path'),
+    mode: get('page/mode')
   },
   created() {
     if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {
@@ -160,6 +165,9 @@ export default {
     pageNew () {
       this.newPageModal = true
     },
+    pageView () {
+      window.location.assign(`/${this.path}`)
+    },
     pageEdit () {
       window.location.assign(`/e/${this.path}`)
     },
@@ -167,7 +175,7 @@ export default {
       window.location.assign(`/h/${this.path}`)
     },
     pageSource () {
-
+      window.location.assign(`/s/${this.path}`)
     },
     pageMove () {
 

client/components/editor.vue

@@ -11,13 +11,6 @@
           v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
         v-btn.mx-0(
-          outline
-          color='red'
-          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
-          )
-          v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') close
-          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
-        v-btn(
           outline
           color='blue'
           @click.native.stop='openModal(`properties`)'
@@ -25,6 +18,13 @@
           )
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
+        v-btn(
+          outline
+          color='red'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
+          )
+          v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') close
+          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
     v-content
       component(:is='currentEditor')
       component(:is='currentModal')
@@ -170,6 +170,8 @@ export default {
     this.$store.commit('page/SET_PATH', this.path)
     this.$store.commit('page/SET_TAGS', this.tags)
     this.$store.commit('page/SET_TITLE', this.title)
+
+    this.$store.commit('page/SET_MODE', 'edit')
   },
   mounted() {
     this.$store.set('editor/mode', this.initMode || 'create')

client/components/history.vue

@@ -122,6 +122,8 @@ export default {
     this.$store.commit('page/SET_ID', this.id)
     this.$store.commit('page/SET_LOCALE', this.locale)
     this.$store.commit('page/SET_PATH', this.path)
+
+    this.$store.commit('page/SET_MODE', 'history')
   },
   methods: {
     goLive() {

client/components/profile.vue

@@ -60,7 +60,10 @@ export default {
   computed: {
     darkMode() { return siteConfig.darkMode }
   },
-  router
+  router,
+  created() {
+    this.$store.commit('page/SET_MODE', 'profile')
+  }
 }
 </script>
 

client/store/page.js

@@ -13,7 +13,8 @@ const state = {
   publishStartDate: '',
   tags: [],
   title: '',
-  updatedAt: ''
+  updatedAt: '',
+  mode: ''
 }
 
 export default {

client/themes/default/components/page.vue

@@ -210,6 +210,8 @@ export default {
     this.$store.commit('page/SET_TAGS', this.tags)
     this.$store.commit('page/SET_TITLE', this.title)
     this.$store.commit('page/SET_UPDATED_AT', this.updatedAt)
+
+    this.$store.commit('page/SET_MODE', 'view')
   },
   mounted () {
     Prism.highlightAllUnder(this.$refs.container)

client/themes/default/scss/app.scss

@@ -88,9 +88,9 @@
   }
 
   code {
-    background-color: rgba(mc('pink', '500'), .1);
+    background-color: rgba(mc('indigo', '50'), 1);
     padding: 0 5px;
-    color: mc('pink', '800');
+    color: mc('indigo', '800');
     font-family: 'Source Code Pro', monospace;
     font-weight: normal;
     font-size: 1rem;