feat: github sponsor button + keep parent path in page selector

2019-10-12 21:10:06 -04:00
parent acb57879dd
commit daa8174d7f
7 changed files with 46 additions and 18 deletions
--- a/client/components/admin/admin-contribute.vue
+++ b/client/components/admin/admin-contribute.vue
@@ -25,6 +25,9 @@
              slider-color='#FFF'
              icons-and-text
              )
+              v-tab
+                span GitHub
+                v-icon.my-1(size='24') mdi-github-circle
              v-tab
                span Patreon
                img.my-1(src='/svg/icon-patreon.svg', style='height: 24px;')
@@ -40,6 +43,10 @@
              v-tab
                span T-Shirts
                img.my-1(src='/svg/icon-t-shirt.svg', style='height: 24px;')
+              v-tab-item(:transition='false', :reverse-transition='false')
+                .body-2.pa-3 {{ $t('admin:contribute.github') }}
+                a.ml-3(href='https://github.com/users/NGPixel/sponsorship', :title='$t(`admin:contribute.becomeASponsor`)')
+                  img(src='/img/donate_github.svg', :alt='$t(`admin:contribute.becomeASponsor`)' style='width:200px;')
              v-tab-item(:transition='false', :reverse-transition='false')
                .body-2.pa-3 {{ $t('admin:contribute.patreon') }}
                a.ml-3(href='https://www.patreon.com/bePatron?u=16744039', :title='$t(`admin:contribute.becomeAPatron`)')
--- a/client/components/common/loader.vue
+++ b/client/components/common/loader.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-dialog(v-model='value', persistent, max-width='350')
+  v-dialog(v-model='value', persistent, max-width='350', :overlay-color='color', overlay-opacity='.7')
    v-card.loader-dialog.radius-7(:color='color', dark)
      v-card-text.text-center.py-4
        atom-spinner.is-inline(
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -132,10 +132,9 @@
                  v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-code-tags
                  v-list-item-title.body-2 {{$t('common:header.viewSource')}}
                v-list-item.pl-4(@click='pageMove', v-if='isAuthenticated')
-                  v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-content-save-move-outline
+                  v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-content-save-move-outline
                  v-list-item-content
-                    v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.move')}}
-                    v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
+                    v-list-item-title.body-2 {{$t('common:header.move')}}
                v-list-item.pl-4(@click='pageDelete', v-if='isAuthenticated')
                  v-list-item-avatar(size='24'): v-icon(color='red darken-2') mdi-trash-can-outline
                  v-list-item-title.body-2 {{$t('common:header.delete')}}
@@ -196,6 +195,7 @@
            span {{$t('common:header.login')}}

    page-selector(mode='create', v-model='newPageModal', :open-handler='pageNewCreate', :locale='locale')
+    page-selector(mode='move', v-model='movePageModal', :open-handler='pageMoveRename', :path='path', :locale='locale')
    page-delete(v-model='deletePageModal', v-if='path && path.length')
 </template>

@@ -226,6 +226,7 @@ export default {
      searchIsShown: true,
      searchAdvMenuShown: false,
      newPageModal: false,
+      movePageModal: false,
      deletePageModal: false,
      locales: siteLangs
    }
@@ -339,11 +340,10 @@ export default {
      window.location.assign(`/s/${this.locale}/${this.path}`)
    },
    pageMove () {
-      this.$store.commit('showNotification', {
-        style: 'indigo',
-        message: `Coming soon...`,
-        icon: 'ferry'
-      })
+      this.movePageModal = true
+    },
+    pageMoveRename ({ path, locale }) {
+
    },
    pageDelete () {
      this.deletePageModal = true
--- a/client/components/common/page-delete.vue
+++ b/client/components/common/page-delete.vue
@@ -1,5 +1,11 @@
 <template lang='pug'>
-  v-dialog(v-model='isShown', max-width='550', persistent)
+  v-dialog(
+    v-model='isShown'
+    max-width='550'
+    persistent
+    overlay-color='red darken-4'
+    overlay-opacity='.7'
+    )
    v-card
      .dialog-header.is-short.is-red
        v-icon.mr-2(color='white') mdi-file-document-box-remove-outline
--- a/client/components/common/page-selector.vue
+++ b/client/components/common/page-selector.vue
@@ -1,9 +1,15 @@
 <template lang="pug">
-  v-dialog(v-model='isShown', max-width='850px')
+  v-dialog(
+    v-model='isShown'
+    max-width='850px'
+    overlay-color='blue darken-4'
+    overlay-opacity='.7'
+    )
    v-card.page-selector
      .dialog-header.is-blue
        v-icon.mr-3(color='white') mdi-page-next-outline
-        .body-1 Select Page Location
+        .body-1(v-if='mode === `create`') Select New Page Location
+        .body-1(v-else-if='mode === `move`') Move / Rename Page Location
        v-spacer
        v-progress-circular(
          indeterminate
@@ -13,11 +19,11 @@
          v-show='searchLoading'
          )
      .d-flex(style='min-height:400px;')
-        v-flex.grey(xs4, :class='darkMode ? `darken-4` : `lighten-3`')
+        v-flex.grey(xs5, :class='darkMode ? `darken-4` : `lighten-3`')
          v-toolbar(color='grey darken-3', dark, dense, flat)
            .body-2 Virtual Folders
            v-spacer
-            v-btn(icon, tile, href='https://docs.requarks.io/', target='_blank')
+            v-btn(icon, tile, href='https://docs.requarks.io/guide/pages#folders', target='_blank')
              v-icon mdi-help-box
          v-treeview(
            :active.sync='currentNode'
@@ -33,7 +39,7 @@
            )
            template(slot='prepend', slot-scope='{ item, open, leaf }')
              v-icon mdi-{{ open ? 'folder-open' : 'folder' }}
-        v-flex(xs8)
+        v-flex(xs7)
          v-toolbar(color='blue darken-2', dark, dense, flat)
            .body-2 Pages
            v-spacer
@@ -121,6 +127,7 @@ export default {
    return {
      searchLoading: false,
      currentLocale: siteConfig.lang,
+      currentFolderPath: '',
      currentPath: 'new-page',
      currentPage: null,
      currentNode: [0],
@@ -142,7 +149,7 @@ export default {
      set(val) { this.$emit('input', val) }
    },
    currentPages () {
-      return _.filter(this.pages, ['parent', _.head(this.currentNode) || 0])
+      return _.sortBy(_.filter(this.pages, ['parent', _.head(this.currentNode) || 0]), ['title', 'path'])
    },
    isValidPath () {
      return this.currentPath && this.currentPath.length > 2
@@ -164,8 +171,9 @@ export default {
          this.currentNode = oldValue
        })
      } else {
+        const current = _.find(this.all, ['id', newValue[0]])
+
        if (this.openNodes.indexOf(newValue[0]) < 0) { // auto open and load children
-          const current = _.find(this.all, ['id', newValue[0]])
          if (current) {
            if (this.openNodes.indexOf(current.parent) < 0) {
              this.$nextTick(() => {
@@ -177,6 +185,8 @@ export default {
            this.openNodes.push(newValue[0])
          })
        }
+
+        this.currentPath = _.compact([_.get(current, 'path', ''), _.last(this.currentPath.split('/'))]).join('/')
      }
    },
    currentPage (newValue, oldValue) {
@@ -211,7 +221,7 @@ export default {
      })
      const items = _.get(resp, 'data.pages.tree', [])
      const itemFolders = _.filter(items, ['isFolder', true]).map(f => ({...f, children: []}))
-      const itemPages = _.filter(items, ['isFolder', false])
+      const itemPages = _.filter(items, i => i.pageId > 0)
      if (itemFolders.length > 0) {
        item.children = itemFolders
      } else {
@@ -233,6 +243,9 @@ export default {
  .v-treeview-node__label {
    font-size: 13px;
  }
+  .v-treeview-node__content {
+    cursor: pointer;
+  }
 }

 </style>