diff --git a/client/components/admin/admin-auth.vue b/client/components/admin/admin-auth.vue index a66023e4..00e24324 100644 --- a/client/components/admin/admin-auth.vue +++ b/client/components/admin/admin-auth.vue @@ -6,7 +6,7 @@ img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;') .admin-header-title .headline.primary--text Authentication - .subheading.grey--text Configure the authentication settings of your wiki + .subheading.grey--text Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon] v-spacer v-btn(outline, color='grey', @click='refresh', large) v-icon refresh diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue index 4b7ae4c3..a7ab8c0a 100644 --- a/client/components/admin/admin-dashboard.vue +++ b/client/components/admin/admin-dashboard.vue @@ -3,12 +3,12 @@ v-layout(row, wrap) v-flex(xs12) .admin-header - img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;') + img.animated.fadeInUp(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;') .admin-header-title - .headline.primary--text {{ $t('admin:dashboard.title') }} - .subheading.grey--text {{ $t('admin:dashboard.subtitle') }} + .headline.primary--text.animated.fadeInLeft {{ $t('admin:dashboard.title') }} + .subheading.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:dashboard.subtitle') }} v-flex(xs12 md6 lg4 xl3 d-flex) - v-card.primary.dashboard-card(dark) + v-card.primary.dashboard-card.animated.fadeInUp(dark) v-card-text v-icon.dashboard-icon insert_drive_file .subheading Pages @@ -19,7 +19,7 @@ easing='easeOutQuint' ) v-flex(xs12 md6 lg4 xl3 d-flex) - v-card.indigo.lighten-1.dashboard-card(dark) + v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark) v-card-text v-icon.dashboard-icon person .subheading Users @@ -30,7 +30,7 @@ easing='easeOutQuint' ) v-flex(xs12 md6 lg4 xl3 d-flex) - v-card.indigo.lighten-2.dashboard-card(dark) + v-card.indigo.lighten-2.dashboard-card.animated.fadeInUp.wait-p4s(dark) v-card-text v-icon.dashboard-icon people .subheading Groups @@ -41,7 +41,7 @@ easing='easeOutQuint' ) v-flex(xs12 md6 lg12 xl3 d-flex) - v-card.dashboard-card( + v-card.dashboard-card.animated.fadeInUp.wait-p6s( :class='isLatestVersion ? "teal lighten-2" : "red lighten-2"' dark ) diff --git a/client/components/admin/admin-editor.vue b/client/components/admin/admin-editor.vue index 6acb5757..cfe88253 100644 --- a/client/components/admin/admin-editor.vue +++ b/client/components/admin/admin-editor.vue @@ -6,7 +6,7 @@ img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;') .admin-header-title .headline.primary--text Editor - .subheading.grey--text Configure the content editors + .subheading.grey--text Configure the content editors #[v-chip(label, color='primary', small).white--text coming soon] v-spacer v-btn(outline, color='grey', @click='refresh', large) v-icon refresh diff --git a/client/components/admin/admin-mail.vue b/client/components/admin/admin-mail.vue index 292331e1..11cf054a 100644 --- a/client/components/admin/admin-mail.vue +++ b/client/components/admin/admin-mail.vue @@ -127,7 +127,7 @@ <script> import _ from 'lodash' -import { get, sync } from 'vuex-pathify' +import { get } from 'vuex-pathify' import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql' import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql' diff --git a/client/components/admin/admin-search.vue b/client/components/admin/admin-search.vue index e01f59a9..2e882d0e 100644 --- a/client/components/admin/admin-search.vue +++ b/client/components/admin/admin-search.vue @@ -3,22 +3,22 @@ v-layout(row, wrap) v-flex(xs12) .admin-header - img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;') + img.animated.fadeInUp(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;') .admin-header-title - .headline.primary--text Search Engine - .subheading.grey--text Configure the search capabilities of your wiki + .headline.primary--text.animated.fadeInLeft Search Engine + .subheading.grey--text.animated.fadeInLeft.wait-p2s Configure the search capabilities of your wiki v-spacer - v-btn(outline, color='grey', @click='refresh', large) + v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large) v-icon refresh - v-btn(color='black', dark, large, depressed, @click='rebuild') + v-btn.animated.fadeInDown.wait-p1s(color='black', dark, large, depressed, @click='rebuild') v-icon(left) cached span Rebuild Index - v-btn(color='success', @click='save', depressed, large) + v-btn.animated.fadeInDown(color='success', @click='save', depressed, large) v-icon(left) check span {{$t('common:actions.apply')}} v-flex(lg3, xs12) - v-card + v-card.animated.fadeInUp v-toolbar(flat, color='primary', dark, dense) .subheading Search Engine v-card-text @@ -34,7 +34,7 @@ ) v-flex(lg9, xs12) - v-card.wiki-form + v-card.wiki-form.animated.fadeInUp.wait-p2s v-toolbar(color='primary', dense, flat, dark) .subheading {{engine.title}} v-card-text diff --git a/client/components/admin/admin-system.vue b/client/components/admin/admin-system.vue index 5ebbd0e2..e07cc223 100644 --- a/client/components/admin/admin-system.vue +++ b/client/components/admin/admin-system.vue @@ -3,14 +3,14 @@ v-layout(row, wrap) v-flex(xs12) .admin-header - img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;') + img.animated.fadeInUp(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;') .admin-header-title - .headline.primary--text {{ $t('admin:system.title') }} - .subheading.grey--text {{ $t('admin:system.subtitle') }} + .headline.primary--text.animated.fadeInLeft {{ $t('admin:system.title') }} + .subheading.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:system.subtitle') }} v-layout.mt-3(row wrap) v-flex(lg6 xs12) - v-card - v-btn(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh + v-card.animated.fadeInUp + v-btn.animated.fadeInLeft.wait-p2s(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh v-list(two-line, dense) v-subheader Wiki.js v-list-tile(avatar) @@ -70,7 +70,7 @@ v-list-tile-sub-title {{ info.configFile }} v-flex(lg6 xs12) - v-card.pb-3 + v-card.pb-3.animated.fadeInUp.wait-p4s v-list(dense) v-subheader Node.js v-list-tile(avatar) diff --git a/client/components/admin/admin-theme.vue b/client/components/admin/admin-theme.vue index e6e7b73c..478878de 100644 --- a/client/components/admin/admin-theme.vue +++ b/client/components/admin/admin-theme.vue @@ -3,18 +3,18 @@ v-layout(row wrap) v-flex(xs12) .admin-header - img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;') + img.animated.fadeInUp(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;') .admin-header-title - .headline.primary--text Theme - .subheading.grey--text Modify the look & feel of your wiki + .headline.primary--text.animated.fadeInLeft Theme + .subheading.grey--text.animated.fadeInLeft.wait-p2s Modify the look & feel of your wiki v-spacer - v-btn(color='success', depressed, @click='save', large, :loading='loading') + v-btn.animated.fadeInRight(color='success', depressed, @click='save', large, :loading='loading') v-icon(left) check span {{$t('common:actions.apply')}} v-form.pt-3 v-layout(row wrap) v-flex(lg6 xs12) - v-card.wiki-form + v-card.wiki-form.animated.fadeInUp v-toolbar(color='primary', dark, dense, flat) v-toolbar-title .subheading Theme @@ -43,7 +43,7 @@ persistent-hint hint='Not recommended for accessibility. May not be supported by all themes.' ) - v-card.wiki-form.mt-3 + v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s v-toolbar(color='primary', dark, dense, flat) v-toolbar-title .subheading Code Injection @@ -79,7 +79,7 @@ auto-grow ) v-flex(lg6 xs12) - v-card + v-card.animated.fadeInUp.wait-p2s v-toolbar(color='teal', dark, dense, flat) v-toolbar-title .subheading Download Themes diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue index 69603593..99399fcc 100644 --- a/client/components/common/nav-header.vue +++ b/client/components/common/nav-header.vue @@ -100,15 +100,17 @@ v-toolbar(flat, color='grey darken-4', dense) v-icon.mr-2 search v-subheader.pl-0 Advanced Search + v-spacer + v-chip(label, small, color='primary') Coming soon v-card-text.pa-4 v-checkbox.mt-0( - label='Restrict to Current Language' + label='Restrict to current language' color='white' v-model='searchRestrictLocale' hide-details ) v-checkbox( - label='Restrict to Below Current Path' + label='Search below current path only' color='white' v-model='searchRestrictPath' hide-details diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index e38a9398..0a4095cd 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -60,15 +60,15 @@ .editor-markdown-preview-title(@click='previewShown = false') Preview .editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML') - v-speed-dial.editor-markdown-insert(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, bottom, :right='!previewShown || $vuetify.breakpoint.smAndDown') - v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator') - v-icon add_circle - v-icon close - v-btn(color='teal', fab, dark): v-icon image - v-btn(color='pink', fab, dark): v-icon insert_drive_file - v-btn(color='red', fab, dark): v-icon play_circle_outline - v-btn(color='purple', fab, dark): v-icon multiline_chart - v-btn(color='indigo', fab, dark): v-icon functions + //- v-speed-dial.editor-markdown-insert(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, bottom, :right='!previewShown || $vuetify.breakpoint.smAndDown') + //- v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator') + //- v-icon add_circle + //- v-icon close + //- v-btn(color='teal', fab, dark): v-icon image + //- v-btn(color='pink', fab, dark): v-icon insert_drive_file + //- v-btn(color='red', fab, dark): v-icon play_circle_outline + //- v-btn(color='purple', fab, dark): v-icon multiline_chart + //- v-btn(color='indigo', fab, dark): v-icon functions </template> <script> @@ -229,10 +229,10 @@ export default { * Update toolbar state */ toolbarSync(cm) { - const pos = cm.getCursor('start') - const token = cm.getTokenAt(pos) + // const pos = cm.getCursor('start') + // const token = cm.getTokenAt(pos) - if (!token.type) { return } + // if (!token.type) { return } // console.info(token) }, diff --git a/client/scss/app.scss b/client/scss/app.scss index 53bbe011..bb287b30 100644 --- a/client/scss/app.scss +++ b/client/scss/app.scss @@ -2,9 +2,10 @@ @import "base/base"; @import "base/icons"; +@import "base/animation"; -@import "../libs/animate/animate"; -@import '~vue2-animate/src/sass/vue2-animate'; +// @import "../libs/animate/animate"; +// @import '~vue2-animate/src/sass/vue2-animate'; @import '~vuescroll/dist/vuescroll.css'; @import '~diff2html/dist/diff2html.min.css'; diff --git a/client/scss/base/animation.scss b/client/scss/base/animation.scss new file mode 100644 index 00000000..b7e21812 --- /dev/null +++ b/client/scss/base/animation.scss @@ -0,0 +1,12 @@ +$use-fade: true; +$use-zoom: true; +$use-bounce: true; + +@import "~animate-sass/animate"; + + +@for $i from 1 to 9 { + .wait-p#{$i}s { + animation-delay: $i * .1s !important; + } +} diff --git a/package.json b/package.json index 7f0e860c..f2380fd6 100644 --- a/package.json +++ b/package.json @@ -137,8 +137,8 @@ "pem-jwk": "2.0.0", "pg": "7.8.0", "pg-hstore": "2.3.2", - "pg-tsquery": "8.0.3", "pg-query-stream": "2.0.0", + "pg-tsquery": "8.0.3", "pm2": "3.2.9", "pug": "2.0.3", "qr-image": "3.2.0", @@ -178,6 +178,7 @@ "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.3.1", "@panter/vue-i18next": "0.15.0", + "animate-sass": "0.8.2", "animated-number-vue": "0.1.4", "apollo-cache-inmemory": "1.4.2", "apollo-client": "2.4.12", diff --git a/yarn.lock b/yarn.lock index 4b919410..a7a7a3fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1514,6 +1514,11 @@ amp@0.3.1, amp@~0.3.1: resolved "https://registry.yarnpkg.com/amp/-/amp-0.3.1.tgz#6adf8d58a74f361e82c1fa8d389c079e139fc47d" integrity sha1-at+NWKdPNh6CwfqNOJwHnhOfxH0= +animate-sass@0.8.2: + version "0.8.2" + resolved "https://registry.yarnpkg.com/animate-sass/-/animate-sass-0.8.2.tgz#fbfa76e049177d217a50b0f99c8ee77af490b7d9" + integrity sha512-6sZ34dusqb1HdZLNpJUNaZc0CuuLgFI8SqlyaxbSSKE9zqfoNtOeO3IpVUCqvaSm/oMNH1VlEAsJlppjg+idKQ== + animated-number-vue@0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/animated-number-vue/-/animated-number-vue-0.1.4.tgz#d60447582e5375ac006137f41c40fdddac76171e"