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
     }
   }

client/static/img/donate_github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 326 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M325.5,7.65c0,-4.222 -3.428,-7.65 -7.65,-7.65l-310.2,0c-4.222,0 -7.65,3.428 -7.65,7.65l0,61.2c0,4.222 3.428,7.65 7.65,7.65l310.2,0c4.222,0 7.65,-3.428 7.65,-7.65l0,-61.2Z" style="fill:url(#_Linear1);stroke:#b7b7b7;stroke-width:0.75px;"/><path d="M96.758,45.53l-4.375,0c-0.632,0 -1.083,-0.141 -1.353,-0.425c-0.27,-0.283 -0.405,-0.734 -0.405,-1.352l0,-10.762c0,-0.631 0.138,-1.085 0.415,-1.362c0.277,-0.277 0.724,-0.415 1.343,-0.415l4.638,0c0.684,0 1.277,0.042 1.778,0.127c0.501,0.084 0.95,0.247 1.347,0.488c0.339,0.202 0.638,0.457 0.899,0.767c0.26,0.309 0.459,0.651 0.596,1.025c0.136,0.374 0.205,0.77 0.205,1.187c0,1.432 -0.716,2.48 -2.149,3.144c1.882,0.599 2.823,1.764 2.823,3.496c0,0.801 -0.206,1.522 -0.616,2.163c-0.41,0.642 -0.963,1.115 -1.66,1.421c-0.436,0.183 -0.937,0.311 -1.504,0.386c-0.566,0.075 -1.227,0.112 -1.982,0.112Zm-0.215,-6.357l-3.018,0l0,4.18l3.116,0c1.959,0 2.939,-0.707 2.939,-2.12c0,-0.722 -0.254,-1.246 -0.762,-1.572c-0.507,-0.325 -1.266,-0.488 -2.275,-0.488Zm-3.018,-5.781l0,3.701l2.657,0c0.722,0 1.281,-0.069 1.674,-0.205c0.394,-0.137 0.695,-0.397 0.904,-0.782c0.163,-0.273 0.244,-0.579 0.244,-0.918c0,-0.722 -0.257,-1.202 -0.772,-1.44c-0.514,-0.238 -1.298,-0.356 -2.353,-0.356l-2.354,0Z" style="fill-rule:nonzero;"/><path d="M114.463,33.45l-6.533,0l0,3.516l6.015,0c0.443,0 0.773,0.099 0.991,0.298c0.219,0.198 0.328,0.46 0.328,0.786c0,0.325 -0.108,0.591 -0.323,0.796c-0.214,0.205 -0.546,0.307 -0.996,0.307l-6.015,0l0,4.073l6.757,0c0.456,0 0.8,0.105 1.031,0.317c0.231,0.212 0.346,0.493 0.346,0.845c0,0.338 -0.115,0.613 -0.346,0.825c-0.231,0.211 -0.575,0.317 -1.031,0.317l-7.88,0c-0.632,0 -1.086,-0.14 -1.363,-0.42c-0.276,-0.28 -0.415,-0.732 -0.415,-1.357l0,-10.762c0,-0.416 0.062,-0.757 0.186,-1.02c0.124,-0.264 0.317,-0.456 0.581,-0.576c0.264,-0.121 0.6,-0.181 1.011,-0.181l7.656,0c0.462,0 0.806,0.102 1.03,0.307c0.225,0.206 0.337,0.474 0.337,0.806c0,0.339 -0.112,0.61 -0.337,0.816c-0.224,0.205 -0.568,0.307 -1.03,0.307Z" style="fill-rule:nonzero;"/><path d="M130.566,41.009c0,0.456 -0.112,0.949 -0.337,1.479c-0.224,0.531 -0.577,1.052 -1.059,1.563c-0.482,0.511 -1.097,0.926 -1.846,1.245c-0.749,0.319 -1.621,0.478 -2.617,0.478c-0.755,0 -1.442,-0.071 -2.061,-0.214c-0.618,-0.144 -1.18,-0.367 -1.684,-0.669c-0.505,-0.303 -0.969,-0.702 -1.392,-1.197c-0.377,-0.449 -0.7,-0.952 -0.967,-1.508c-0.266,-0.557 -0.467,-1.151 -0.6,-1.783c-0.134,-0.631 -0.2,-1.302 -0.2,-2.011c0,-1.153 0.167,-2.185 0.503,-3.096c0.335,-0.912 0.815,-1.691 1.44,-2.339c0.625,-0.648 1.357,-1.141 2.197,-1.479c0.84,-0.339 1.735,-0.508 2.686,-0.508c1.159,0 2.191,0.231 3.096,0.693c0.905,0.462 1.598,1.034 2.08,1.714c0.481,0.68 0.722,1.323 0.722,1.929c0,0.332 -0.117,0.625 -0.351,0.879c-0.235,0.253 -0.518,0.38 -0.85,0.38c-0.371,0 -0.649,-0.087 -0.835,-0.263c-0.185,-0.176 -0.392,-0.479 -0.62,-0.908c-0.378,-0.71 -0.822,-1.241 -1.333,-1.592c-0.511,-0.352 -1.141,-0.528 -1.89,-0.528c-1.191,0 -2.14,0.453 -2.846,1.358c-0.707,0.905 -1.06,2.191 -1.06,3.857c0,1.114 0.156,2.04 0.469,2.779c0.312,0.739 0.755,1.29 1.328,1.655c0.573,0.364 1.244,0.547 2.012,0.547c0.833,0 1.538,-0.207 2.114,-0.62c0.576,-0.414 1.011,-1.021 1.304,-1.822c0.123,-0.377 0.276,-0.685 0.459,-0.923c0.182,-0.237 0.475,-0.356 0.879,-0.356c0.345,0 0.641,0.12 0.888,0.361c0.248,0.241 0.371,0.541 0.371,0.899Z" style="fill-rule:nonzero;"/><path d="M139.473,30.97c1.484,0 2.758,0.301 3.823,0.903c1.064,0.602 1.87,1.458 2.417,2.568c0.547,1.11 0.82,2.414 0.82,3.912c0,1.106 -0.15,2.112 -0.449,3.017c-0.3,0.905 -0.749,1.69 -1.348,2.354c-0.599,0.664 -1.334,1.172 -2.207,1.523c-0.872,0.352 -1.871,0.527 -2.998,0.527c-1.12,0 -2.122,-0.18 -3.008,-0.542c-0.885,-0.361 -1.624,-0.87 -2.216,-1.528c-0.593,-0.657 -1.04,-1.448 -1.343,-2.373c-0.303,-0.924 -0.454,-1.924 -0.454,-2.998c0,-1.1 0.158,-2.109 0.473,-3.027c0.316,-0.918 0.773,-1.7 1.372,-2.344c0.599,-0.645 1.329,-1.138 2.188,-1.48c0.859,-0.341 1.836,-0.512 2.93,-0.512Zm4.121,7.363c0,-1.048 -0.17,-1.956 -0.508,-2.725c-0.339,-0.768 -0.822,-1.349 -1.45,-1.743c-0.629,-0.394 -1.35,-0.591 -2.163,-0.591c-0.58,0 -1.115,0.109 -1.607,0.328c-0.491,0.218 -0.915,0.535 -1.269,0.952c-0.355,0.416 -0.635,0.949 -0.84,1.596c-0.205,0.648 -0.308,1.376 -0.308,2.183c0,0.814 0.103,1.549 0.308,2.207c0.205,0.658 0.495,1.203 0.869,1.636c0.374,0.433 0.804,0.757 1.289,0.971c0.485,0.215 1.017,0.323 1.597,0.323c0.742,0 1.424,-0.186 2.046,-0.557c0.621,-0.371 1.116,-0.944 1.484,-1.719c0.368,-0.774 0.552,-1.728 0.552,-2.861Z" style="fill-rule:nonzero;"/><path d="M153.848,43.372l-2.295,-9.121l0,9.883c0,0.547 -0.122,0.957 -0.367,1.23c-0.244,0.274 -0.5Line truncated