From aaeb24a8ec5168472acb0cc9e5bf9b82cf630d73 Mon Sep 17 00:00:00 2001 From: Nicolas Giard Date: Mon, 19 Nov 2018 01:08:55 -0500 Subject: [PATCH] fix: hide page actions when not applicable --- client/components/admin.vue | 5 ++- client/components/common/nav-header.vue | 46 +++++++++++++---------- client/components/editor.vue | 16 ++++---- client/components/history.vue | 2 + client/components/profile.vue | 5 ++- client/store/page.js | 3 +- client/themes/default/components/page.vue | 2 + client/themes/default/scss/app.scss | 4 +- 8 files changed, 52 insertions(+), 31 deletions(-) diff --git a/client/components/admin.vue b/client/components/admin.vue index bae6a6c0..57674105 100644 --- a/client/components/admin.vue +++ b/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') + } } diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue index dbc451a0..3c2065c1 100644 --- a/client/components/common/nav-header.vue +++ b/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 - v-subheader Current Page - v-list-tile(avatar, @click='pageEdit') - v-list-tile-avatar: v-icon(color='indigo') edit - v-list-tile-content Edit - v-list-tile(avatar, @click='pageHistory') - v-list-tile-avatar: v-icon(color='indigo') history - v-list-tile-content History - v-list-tile(avatar, @click='pageSource') - v-list-tile-avatar: v-icon(color='indigo') code - v-list-tile-content View Source - v-list-tile(avatar, @click='pageMove') - 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 + template(v-if='path && path.length') + v-divider.my-0 + v-subheader Current Page + v-list-tile(avatar, @click='pageView', v-if='mode !== `view`') + v-list-tile-avatar: v-icon(color='indigo') subject + v-list-tile-content View + v-list-tile(avatar, @click='pageEdit', v-if='mode !== `edit`') + v-list-tile-avatar: v-icon(color='indigo') edit + v-list-tile-content Edit + v-list-tile(avatar, @click='pageHistory', v-if='mode !== `history`') + v-list-tile-avatar: v-icon(color='indigo') history + v-list-tile-content History + v-list-tile(avatar, @click='pageSource', v-if='mode !== `source`') + v-list-tile-avatar: v-icon(color='indigo') code + v-list-tile-content View Source + v-list-tile(avatar, @click='pageMove') + 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 () { diff --git a/client/components/editor.vue b/client/components/editor.vue index fcea3584..d5683d64 100644 --- a/client/components/editor.vue +++ b/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') diff --git a/client/components/history.vue b/client/components/history.vue index 9244f030..aef4d001 100644 --- a/client/components/history.vue +++ b/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() { diff --git a/client/components/profile.vue b/client/components/profile.vue index 0ac591e5..d5502b98 100644 --- a/client/components/profile.vue +++ b/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') + } } diff --git a/client/store/page.js b/client/store/page.js index ad054451..aa4c2d9d 100644 --- a/client/store/page.js +++ b/client/store/page.js @@ -13,7 +13,8 @@ const state = { publishStartDate: '', tags: [], title: '', - updatedAt: '' + updatedAt: '', + mode: '' } export default { diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue index 9d44ce0c..62951e1d 100644 --- a/client/themes/default/components/page.vue +++ b/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) diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss index 074c0467..0b4078e2 100644 --- a/client/themes/default/scss/app.scss +++ b/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;