Skip to content

W
wiki-js
Commit 6ea3ff11 authored by Nick's avatar Nick
Browse files
Options

feat: admin enter animation

parent f3b8d37f
Show whitespace changes
Inline Side-by-side
Showing with 65 additions and 66 deletions
client/components/admin/admin-auth.vue
View file @ 6ea3ff11
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text Authentication .headline.primary--text.animated.fadeInLeft Authentication
.subheading.grey--text Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon] .subheading.grey--text.animated.fadeInLeft.wait-p4s Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon]
v-spacer 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-icon refresh
v-btn(color='success', @click='save', depressed, large) v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-card.mt-3 v-card.mt-3.animated.fadeInUp
v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark) v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
v-tab(key='settings'): v-icon settings v-tab(key='settings'): v-icon settings
v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }} v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }}
......
client/components/admin/admin-contribute.vue
View file @ 6ea3ff11
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text {{ $t('admin:contribute.title') }} .headline.primary--text.animated.fadeInLeft {{ $t('admin:contribute.title') }}
.subheading.grey--text {{ $t('admin:contribute.subtitle') }} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:contribute.subtitle') }}
v-card.mt-3 v-card.mt-3.animated.fadeInUp
v-card-text v-card-text
i18next.body-1.pl-3(path='admin:contribute.openSource', tag='div') i18next.body-1.pl-3(path='admin:contribute.openSource', tag='div')
v-icon(color='red') favorite v-icon(color='red') favorite
......
client/components/admin/admin-general.vue
View file @ 6ea3ff11
...@@ -3,19 +3,19 @@ ...@@ -3,19 +3,19 @@
v-layout(row wrap) v-layout(row wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text {{ $t('admin:general.title') }} .headline.primary--text.animated.fadeInLeft {{ $t('admin:general.title') }}
.subheading.grey--text {{ $t('admin:general.subtitle') }} .subheading.grey--text.animated.fadeInLeft {{ $t('admin:general.subtitle') }}
v-spacer v-spacer
v-btn(color='success', depressed, @click='save', large) v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-form.pt-3 v-form.pt-3
v-layout(row wrap) v-layout(row wrap)
v-flex(lg6 xs12) v-flex(lg6 xs12)
v-form v-form
v-card.wiki-form v-card.wiki-form.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat) v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading {{ $t('admin:general.siteInfo') }} .subheading {{ $t('admin:general.siteInfo') }}
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
hint='A unique identifier provided by your analytics service provider.' hint='A unique identifier provided by your analytics service provider.'
) )
v-flex(lg6 xs12) v-flex(lg6 xs12)
v-card.wiki-form v-card.wiki-form.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dark, dense, flat) v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading {{ $t('admin:general.siteBranding') }} .subheading {{ $t('admin:general.siteBranding') }}
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.' hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
) )
v-card.wiki-form.mt-3 v-card.wiki-form.mt-3.animated.fadeInUp.wait-p4s
v-toolbar(color='primary', dark, dense, flat) v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading Features .subheading Features
...@@ -169,7 +169,7 @@ export default { ...@@ -169,7 +169,7 @@ export default {
analyticsServices: [ analyticsServices: [
{ text: 'None', value: '' }, { text: 'None', value: '' },
{ text: 'Google Analytics', value: 'ga' }, { text: 'Google Analytics', value: 'ga' },
{ text: 'Google Tag Manager', value: 'gtm' }, { text: 'Google Tag Manager', value: 'gtm' }
], ],
metaRobots: [ metaRobots: [
{ text: 'Index', value: 'index' }, { text: 'Index', value: 'index' },
......
client/components/admin/admin-groups.vue
View file @ 6ea3ff11
...@@ -3,15 +3,15 @@ ...@@ -3,15 +3,15 @@
v-layout(row wrap) v-layout(row wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.blue--text.text--darken-2 Groups .headline.blue--text.text--darken-2.animated.fadeInLeft Groups
.subheading.grey--text Manage groups and their permissions .subheading.grey--text.animated.fadeInLeft.wait-p4s Manage groups and their permissions
v-spacer v-spacer
v-btn(color='grey', outline, @click='refresh', large) v-btn.animated.fadeInDown.wait-p2s(color='grey', outline, @click='refresh', large)
v-icon refresh v-icon refresh
v-dialog(v-model='newGroupDialog', max-width='500') v-dialog(v-model='newGroupDialog', max-width='500')
v-btn(color='primary', depressed, slot='activator', large) v-btn.animated.fadeInDown(color='primary', depressed, slot='activator', large)
v-icon(left) add v-icon(left) add
span New Group span New Group
v-card.wiki-form v-card.wiki-form
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
v-spacer v-spacer
v-btn(flat, @click='newGroupDialog = false') Cancel v-btn(flat, @click='newGroupDialog = false') Cancel
v-btn(color='primary', @click='createGroup') Create v-btn(color='primary', @click='createGroup') Create
v-card.mt-3 v-card.mt-3.animated.fadeInUp
v-data-table( v-data-table(
:items='groups' :items='groups'
:headers='headers' :headers='headers'
...@@ -63,7 +63,6 @@ import _ from 'lodash' ...@@ -63,7 +63,6 @@ import _ from 'lodash'
import groupsQuery from 'gql/admin/groups/groups-query-list.gql' import groupsQuery from 'gql/admin/groups/groups-query-list.gql'
import createGroupMutation from 'gql/admin/groups/groups-mutation-create.gql' import createGroupMutation from 'gql/admin/groups/groups-mutation-create.gql'
import deleteGroupMutation from 'gql/admin/groups/groups-mutation-delete.gql'
export default { export default {
data() { data() {
......
client/components/admin/admin-locale.vue
View file @ 6ea3ff11
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text {{ $t('admin:locale.title') }} .headline.primary--text.animated.fadeInLeft {{ $t('admin:locale.title') }}
.subheading.grey--text {{ $t('admin:locale.subtitle') }} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:locale.subtitle') }}
v-spacer v-spacer
v-btn(color='success', depressed, @click='save', large, :loading='loading') v-btn.animated.fadeInDown(color='success', depressed, @click='save', large, :loading='loading')
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-form.pt-3 v-form.pt-3
v-layout(row wrap) v-layout(row wrap)
v-flex(lg6 xs12) v-flex(lg6 xs12)
v-card.wiki-form v-card.wiki-form.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat) v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading {{ $t('admin:locale.settings') }} .subheading {{ $t('admin:locale.settings') }}
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
:hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")' :hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
) )
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(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading {{ $t('admin:locale.namespacing') }} .subheading {{ $t('admin:locale.namespacing') }}
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
v-list-tile-action v-list-tile-action
v-checkbox(:input-value='data.tile.props.value', color='primary', value) v-checkbox(:input-value='data.tile.props.value', color='primary', value)
v-flex(lg6 xs12) v-flex(lg6 xs12)
v-card v-card.animated.fadeInUp.wait-p4s
v-toolbar(color='teal', dark, dense, flat) v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading {{ $t('admin:locale.download') }} .subheading {{ $t('admin:locale.download') }}
......
client/components/admin/admin-mail.vue
View file @ 6ea3ff11
<template lang='pug'> <template lang='pug'>
v-container(fluid, grid-list-lg) v-container(fluid, grid-list-lg)
v-layout(row wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text {{ $t('admin:mail.title') }} .headline.primary--text.animated.fadeInLeft {{ $t('admin:mail.title') }}
.subheading.grey--text {{ $t('admin:mail.subtitle') }} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:mail.subtitle') }}
v-spacer v-spacer
v-btn(color='success', depressed, @click='save', large) v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-form.pt-3 v-form.pt-3
v-layout(row wrap) v-layout(row wrap)
v-flex(lg6 xs12) v-flex(lg6 xs12)
v-form v-form
v-card.wiki-form v-card.wiki-form.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat) v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
.subheading {{ $t('admin:mail.configuration') }} .subheading {{ $t('admin:mail.configuration') }}
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
) )
v-flex(lg6 xs12) v-flex(lg6 xs12)
v-card.wiki-form v-card.wiki-form.animated.fadeInUp.wait-p2s
v-form v-form
v-toolbar(color='primary', dark, dense, flat) v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title v-toolbar-title
......
client/components/admin/admin-navigation.vue
View file @ 6ea3ff11
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
v-layout(row wrap) v-layout(row wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text {{$t('navigation.title')}} .headline.primary--text.animated.fadeInLeft {{$t('navigation.title')}}
.subheading.grey--text {{$t('navigation.subtitle')}} .subheading.grey--text.animated.fadeInLeft.wait-p4s {{$t('navigation.subtitle')}}
v-spacer 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-icon refresh
v-btn(color='success', depressed, @click='save', large) v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-container.pa-0.mt-3(fluid, grid-list-lg) v-container.pa-0.mt-3(fluid, grid-list-lg)
v-layout(row) v-layout(row)
v-flex(style='flex: 0 0 350px;') v-flex(style='flex: 0 0 350px;')
v-card v-card.animated.fadeInUp
v-list.py-2(dense, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"') v-list.py-2(dense, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"')
v-list-tile(v-if='navTree.length < 1') v-list-tile(v-if='navTree.length < 1')
v-list-tile-avatar: v-icon(color='grey') explore_off v-list-tile-avatar: v-icon(color='grey') explore_off
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
v-list-tile(@click='addItem("divider")') v-list-tile(@click='addItem("divider")')
v-list-tile-avatar: v-icon power_input v-list-tile-avatar: v-icon power_input
v-list-tile-title {{$t('navigation.divider')}} v-list-tile-title {{$t('navigation.divider')}}
v-flex v-flex.animated.fadeInUp.wait-p2s
v-card.wiki-form(v-if='current.kind === "link"') v-card.wiki-form(v-if='current.kind === "link"')
v-toolbar(dense, color='blue', flat, dark) v-toolbar(dense, color='blue', flat, dark)
.subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}} .subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}}
......
client/components/admin/admin-rendering.vue
View file @ 6ea3ff11
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text Rendering .headline.primary--text.animated.fadeInLeft Rendering
.subheading.grey--text Configure how content is rendered .subheading.grey--text.animated.fadeInLeft.wait-p4s Configure how content is rendered
v-spacer 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-icon refresh
v-btn(color='success', @click='save', depressed, large) v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-flex(lg3, xs12) v-flex.animated.fadeInUp(lg3, xs12)
v-toolbar( v-toolbar(
color='primary' color='primary'
dense dense
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
v-divider.my-0(v-if='n < core.children.length - 1') v-divider.my-0(v-if='n < core.children.length - 1')
v-flex(lg9, xs12) v-flex(lg9, xs12)
v-card.wiki-form v-card.wiki-form.animated.fadeInUp
v-toolbar( v-toolbar(
color='grey darken-1' color='grey darken-1'
dark dark
...@@ -138,7 +138,7 @@ export default { ...@@ -138,7 +138,7 @@ export default {
} }
}, },
computed: { computed: {
darkMode: get('site/dark'), darkMode: get('site/dark')
}, },
watch: { watch: {
renderers(newValue, oldValue) { renderers(newValue, oldValue) {
......
client/components/admin/admin-storage.vue
View file @ 6ea3ff11
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.primary--text Storage .headline.primary--text.animated.fadeInLeft Storage
.subheading.grey--text Set backup and sync targets for your content .subheading.grey--text.animated.fadeInLeft.wait-p4s Set backup and sync targets for your content
v-spacer 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-icon refresh
v-btn(color='success', @click='save', depressed, large) v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) check v-icon(left) check
span {{$t('common:actions.apply')}} span {{$t('common:actions.apply')}}
v-card.mt-3 v-card.mt-3.animated.fadeInUp
v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark, v-model='currentTab') v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark, v-model='currentTab')
v-tab(key='settings'): v-icon settings v-tab(key='settings'): v-icon settings
v-tab(v-for='tgt in activeTargets', :key='tgt.key') {{ tgt.title }} v-tab(v-for='tgt in activeTargets', :key='tgt.key') {{ tgt.title }}
......
client/components/admin/admin-users.vue
View file @ 6ea3ff11
...@@ -3,17 +3,17 @@ ...@@ -3,17 +3,17 @@
v-layout(row, wrap) v-layout(row, wrap)
v-flex(xs12) v-flex(xs12)
.admin-header .admin-header
img(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;') img.animated.fadeInUp(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
.admin-header-title .admin-header-title
.headline.blue--text.text--darken-2 Users .headline.blue--text.text--darken-2.animated.fadeInLeft Users
.subheading.grey--text Manage users .subheading.grey--text.animated.fadeInLeft.wait-p4s Manage users
v-spacer v-spacer
v-btn(outline, color='grey', large, @click='refresh') v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', large, @click='refresh')
v-icon refresh v-icon refresh
v-btn(color='primary', large, depressed, @click='createUser') v-btn.animated.fadeInDown(color='primary', large, depressed, @click='createUser')
v-icon(left) add v-icon(left) add
span New User span New User
v-card.mt-3 v-card.mt-3.animated.fadeInUp
v-data-table( v-data-table(
v-model='selected' v-model='selected'
:items='users', :items='users',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment