feat: edit shortcuts

2022-09-20 16:55:05 -04:00
parent fa35f3a254
commit 8715cd69b2
10 changed files with 246 additions and 10 deletions
--- a/client/components/admin/admin-general.vue
+++ b/client/components/admin/admin-general.vue
@@ -144,7 +144,7 @@
                  //-   )

                  //- v-divider.mt-3
-                  v-switch(
+                  v-switch.mt-0(
                    inset
                    label='Comments'
                    color='indigo'
@@ -177,6 +177,76 @@
                    persistent-hint
                    )

+              v-card.mt-5.animated.fadeInUp.wait-p7s
+                v-toolbar(color='primary', dark, dense, flat)
+                  v-toolbar-title.subtitle-1 {{$t('admin:general.editShortcuts')}}
+                v-card-text
+                  v-switch.mt-0(
+                    inset
+                    :label='$t(`admin:general.editFab`)'
+                    color='primary'
+                    v-model='config.editFab'
+                    persistent-hint
+                    :hint='$t(`admin:general.editFabHint`)'
+                    )
+                v-divider
+                .overline.grey--text.pa-4 {{$t('admin:general.editMenuBar')}}
+                .px-3.pb-3
+                  v-switch.mt-0.ml-1(
+                    inset
+                    :label='$t(`admin:general.displayEditMenuBar`)'
+                    color='primary'
+                    v-model='config.editMenuBar'
+                    persistent-hint
+                    :hint='$t(`admin:general.displayEditMenuBarHint`)'
+                    )
+                  v-switch.mt-4.ml-1(
+                    v-if='config.editMenuBar'
+                    inset
+                    :label='$t(`admin:general.displayEditMenuBtn`)'
+                    color='primary'
+                    v-model='config.editMenuBtn'
+                    persistent-hint
+                    :hint='$t(`admin:general.displayEditMenuBtnHint`)'
+                    )
+                  v-switch.mt-4.ml-1(
+                    v-if='config.editMenuBar'
+                    inset
+                    :label='$t(`admin:general.displayEditMenuExternalBtn`)'
+                    color='primary'
+                    v-model='config.editMenuExternalBtn'
+                    persistent-hint
+                    :hint='$t(`admin:general.displayEditMenuExternalBtnHint`)'
+                    )
+                template(v-if='config.editMenuBar && config.editMenuExternalBtn')
+                  v-divider
+                  .overline.grey--text.pa-4 External Edit Button
+                  .px-3.pb-3
+                    v-text-field(
+                      outlined
+                      :label='$t(`admin:general.editMenuExternalName`)'
+                      v-model='config.editMenuExternalName'
+                      prepend-icon='mdi-format-title'
+                      :hint='$t(`admin:general.editMenuExternalNameHint`)'
+                      persistent-hint
+                      )
+                    v-text-field.mt-3(
+                      outlined
+                      :label='$t(`admin:general.editMenuExternalIcon`)'
+                      v-model='config.editMenuExternalIcon'
+                      prepend-icon='mdi-dice-5'
+                      :hint='$t(`admin:general.editMenuExternalIconHint`)'
+                      persistent-hint
+                      )
+                    v-text-field.mt-3(
+                      outlined
+                      :label='$t(`admin:general.editMenuExternalUrl`)'
+                      v-model='config.editMenuExternalUrl'
+                      prepend-icon='mdi-near-me'
+                      :hint='$t(`admin:general.editMenuExternalUrlHint`)'
+                      persistent-hint
+                      )
+
    component(:is='activeModal')

 </template>
@@ -216,7 +286,14 @@ export default {
        featurePageComments: false,
        featurePersonalWikis: false,
        featureTinyPNG: false,
-        pageExtensions: ''
+        pageExtensions: '',
+        editFab: false,
+        editMenuBar: false,
+        editMenuBtn: false,
+        editMenuExternalBtn: false,
+        editMenuExternalName: '',
+        editMenuExternalIcon: '',
+        editMenuExternalUrl: ''
      },
      metaRobots: [
        { text: 'Index', value: 'index' },
@@ -274,6 +351,13 @@ export default {
              $featurePageRatings: Boolean
              $featurePageComments: Boolean
              $featurePersonalWikis: Boolean
+              $editFab: Boolean
+              $editMenuBar: Boolean
+              $editMenuBtn: Boolean
+              $editMenuExternalBtn: Boolean
+              $editMenuExternalName: String
+              $editMenuExternalIcon: String
+              $editMenuExternalUrl: String
            ) {
              site {
                updateConfig(
@@ -290,6 +374,13 @@ export default {
                  featurePageRatings: $featurePageRatings
                  featurePageComments: $featurePageComments
                  featurePersonalWikis: $featurePersonalWikis
+                  editFab: $editFab
+                  editMenuBar: $editMenuBar
+                  editMenuBtn: $editMenuBtn
+                  editMenuExternalBtn: $editMenuExternalBtn
+                  editMenuExternalName: $editMenuExternalName
+                  editMenuExternalIcon: $editMenuExternalIcon
+                  editMenuExternalUrl: $editMenuExternalUrl
                ) {
                  responseResult {
                    succeeded
@@ -314,7 +405,14 @@ export default {
            pageExtensions: _.get(this.config, 'pageExtensions', ''),
            featurePageRatings: _.get(this.config, 'featurePageRatings', false),
            featurePageComments: _.get(this.config, 'featurePageComments', false),
-            featurePersonalWikis: _.get(this.config, 'featurePersonalWikis', false)
+            featurePersonalWikis: _.get(this.config, 'featurePersonalWikis', false),
+            editFab: _.get(this.config, 'editFab', false),
+            editMenuBar: _.get(this.config, 'editMenuBar', false),
+            editMenuBtn: _.get(this.config, 'editMenuBtn', false),
+            editMenuExternalBtn: _.get(this.config, 'editMenuExternalBtn', false),
+            editMenuExternalName: _.get(this.config, 'editMenuExternalName', ''),
+            editMenuExternalIcon: _.get(this.config, 'editMenuExternalIcon', ''),
+            editMenuExternalUrl: _.get(this.config, 'editMenuExternalUrl', '')
          },
          watchLoading (isLoading) {
            this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-site-update')
@@ -368,6 +466,13 @@ export default {
              featurePageRatings
              featurePageComments
              featurePersonalWikis
+              editFab
+              editMenuBar
+              editMenuBtn
+              editMenuExternalBtn
+              editMenuExternalName
+              editMenuExternalIcon
+              editMenuExternalUrl
            }
          }
        }
--- a/client/store/page.js
+++ b/client/store/page.js
@@ -41,7 +41,16 @@ const state = {
      manage: false
    }
  },
-  commentsCount: 0
+  commentsCount: 0,
+  editShortcuts: {
+    editFab: false,
+    editMenuBar: false,
+    editMenuBtn: false,
+    editMenuExternalBtn: false,
+    editMenuExternalName: '',
+    editMenuExternalIcon: '',
+    editMenuExternalUrl: ''
+  }
 }

 export default {
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -49,10 +49,28 @@
            status-indicator.ml-3(negative, pulse)
        v-divider
      v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
-        v-row(no-gutters, align-content='center', style='height: 90px;')
+        v-row.page-header-section(no-gutters, align-content='center', style='height: 90px;')
          v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
            .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
            .caption.grey--text.text--darken-1 {{description}}
+            .page-edit-shortcuts(v-if='editShortcutsObj.editMenuBar')
+              v-btn(
+                v-if='editShortcutsObj.editMenuBtn'
+                @click='pageEdit'
+                depressed
+                small
+                )
+                v-icon.mr-2(small) mdi-pencil
+                span.text-none {{$t(`common:actions.edit`)}}
+              v-btn(
+                v-if='editShortcutsObj.editMenuExternalBtn'
+                :href='editMenuExternalUrl'
+                target='_blank'
+                depressed
+                small
+                )
+                v-icon.mr-2(small) {{ editShortcutsObj.editMenuExternalIcon }}
+                span.text-none {{$t(`common:page.editExternal`, { name: editShortcutsObj.editMenuExternalName })}}
      v-divider
      v-container.pl-5.pt-4(fluid, grid-list-xl)
        v-layout(row)
@@ -186,7 +204,7 @@
                v-spacer

          v-flex.page-col-content(xs12, lg9, xl10)
-            v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
+            v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
              template(v-slot:activator='{ on: onEditActivator }')
                v-speed-dial(
                  v-model='pageEditFab'
@@ -440,6 +458,14 @@ export default {
    commentsExternal: {
      type: Boolean,
      default: false
+    },
+    editShortcuts: {
+      type: String,
+      default: ''
+    },
+    filename: {
+      type: String,
+      default: ''
    }
  },
  data() {
@@ -478,6 +504,7 @@ export default {
    isAuthenticated: get('user/authenticated'),
    commentsCount: get('page/commentsCount'),
    commentsPerms: get('page/effectivePermissions@comments'),
+    editShortcutsObj: get('page/editShortcuts'),
    rating: {
      get () {
        return 3.5
@@ -519,7 +546,14 @@ export default {
      return this.hasAdminPermission || this.hasWritePagesPermission || this.hasManagePagesPermission ||
        this.hasDeletePagesPermission || this.hasReadSourcePermission || this.hasReadHistoryPermission
    },
-    printView: sync('site/printView')
+    printView: sync('site/printView'),
+    editMenuExternalUrl () {
+      if (this.editShortcutsObj.editMenuBar && this.editShortcutsObj.editMenuExternalBtn) {
+        return this.editShortcutsObj.editMenuExternalUrl.replace('{filename}', this.filename)
+      } else {
+        return ''
+      }
+    }
  },
  created() {
    this.$store.set('page/authorId', this.authorId)
@@ -537,6 +571,9 @@ export default {
    if (this.effectivePermissions) {
      this.$store.set('page/effectivePermissions', JSON.parse(Buffer.from(this.effectivePermissions, 'base64').toString()))
    }
+    if (this.editShortcuts) {
+      this.$store.set('page/editShortcuts', JSON.parse(Buffer.from(this.editShortcuts, 'base64').toString()))
+    }

    this.$store.set('page/mode', 'view')
  },
@@ -676,4 +713,43 @@ export default {
  display: none;
 }

+.page-header-section {
+  position: relative;
+
+  .page-edit-shortcuts {
+    position: absolute;
+    bottom: -14px;
+    right: 10px;
+
+    .v-btn {
+      border-right: 1px solid #DDD !important;
+      border-bottom: 1px solid #DDD !important;
+      border-radius: 0;
+      color: #777;
+      background-color: #FFF !important;
+
+      @at-root .theme--dark & {
+        background-color: #222 !important;
+        border-right-color: #444 !important;
+        border-bottom-color: #444 !important;
+        color: #CCC;
+      }
+
+      .v-icon {
+        color: mc('blue', '700');
+      }
+
+      &:first-child {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+    }
+  }
+}
+
 </style>
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -1036,4 +1036,8 @@
  .comments-container {
    display: none;
  }
+
+  .page-edit-shortcuts {
+    display: none;
+  }
 }