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

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`)')

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(

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

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

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>

client/graph/common/common-pages-query-tree.gql

@@ -5,6 +5,7 @@ query ($parent: Int!, $mode: PageTreeMode!, $locale: String!) {
       path
       title
       isFolder
+      pageId
       parent
     }
   }