Skip to content

Commit c687699

Browse files
NGPixelNGPixel
committed
fix: UI improvements
1 parent 358e79d commit c687699

13 files changed

+69
-48
lines changed

‎client/components/admin/admin-auth.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
77
.admin-header-title
88
.headline.primary--text Authentication
9-
.subheading.grey--text Configure the authentication settings of your wiki
9+
.subheading.grey--text Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon]
1010
v-spacer
1111
v-btn(outline, color='grey', @click='refresh', large)
1212
v-icon refresh

‎client/components/admin/admin-dashboard.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
v-layout(row, wrap)
44
v-flex(xs12)
55
.admin-header
6-
img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
6+
img.animated.fadeInUp(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
77
.admin-header-title
8-
.headline.primary--text {{ $t('admin:dashboard.title') }}
9-
.subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
8+
.headline.primary--text.animated.fadeInLeft {{ $t('admin:dashboard.title') }}
9+
.subheading.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:dashboard.subtitle') }}
1010
v-flex(xs12 md6 lg4 xl3 d-flex)
11-
v-card.primary.dashboard-card(dark)
11+
v-card.primary.dashboard-card.animated.fadeInUp(dark)
1212
v-card-text
1313
v-icon.dashboard-icon insert_drive_file
1414
.subheading Pages
@@ -19,7 +19,7 @@
1919
easing='easeOutQuint'
2020
)
2121
v-flex(xs12 md6 lg4 xl3 d-flex)
22-
v-card.indigo.lighten-1.dashboard-card(dark)
22+
v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark)
2323
v-card-text
2424
v-icon.dashboard-icon person
2525
.subheading Users
@@ -30,7 +30,7 @@
3030
easing='easeOutQuint'
3131
)
3232
v-flex(xs12 md6 lg4 xl3 d-flex)
33-
v-card.indigo.lighten-2.dashboard-card(dark)
33+
v-card.indigo.lighten-2.dashboard-card.animated.fadeInUp.wait-p4s(dark)
3434
v-card-text
3535
v-icon.dashboard-icon people
3636
.subheading Groups
@@ -41,7 +41,7 @@
4141
easing='easeOutQuint'
4242
)
4343
v-flex(xs12 md6 lg12 xl3 d-flex)
44-
v-card.dashboard-card(
44+
v-card.dashboard-card.animated.fadeInUp.wait-p6s(
4545
:class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
4646
dark
4747
)

‎client/components/admin/admin-editor.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
77
.admin-header-title
88
.headline.primary--text Editor
9-
.subheading.grey--text Configure the content editors
9+
.subheading.grey--text Configure the content editors #[v-chip(label, color='primary', small).white--text coming soon]
1010
v-spacer
1111
v-btn(outline, color='grey', @click='refresh', large)
1212
v-icon refresh

‎client/components/admin/admin-mail.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@
127127

128128
<script>
129129
import _ from 'lodash'
130-
import { get, sync } from 'vuex-pathify'
130+
import { get } from 'vuex-pathify'
131131
import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql'
132132
import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql'
133133

‎client/components/admin/admin-search.vue

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
v-layout(row, wrap)
44
v-flex(xs12)
55
.admin-header
6-
img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
6+
img.animated.fadeInUp(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
77
.admin-header-title
8-
.headline.primary--text Search Engine
9-
.subheading.grey--text Configure the search capabilities of your wiki
8+
.headline.primary--text.animated.fadeInLeft Search Engine
9+
.subheading.grey--text.animated.fadeInLeft.wait-p2s Configure the search capabilities of your wiki
1010
v-spacer
11-
v-btn(outline, color='grey', @click='refresh', large)
11+
v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
1212
v-icon refresh
13-
v-btn(color='black', dark, large, depressed, @click='rebuild')
13+
v-btn.animated.fadeInDown.wait-p1s(color='black', dark, large, depressed, @click='rebuild')
1414
v-icon(left) cached
1515
span Rebuild Index
16-
v-btn(color='success', @click='save', depressed, large)
16+
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
1717
v-icon(left) check
1818
span {{$t('common:actions.apply')}}
1919

2020
v-flex(lg3, xs12)
21-
v-card
21+
v-card.animated.fadeInUp
2222
v-toolbar(flat, color='primary', dark, dense)
2323
.subheading Search Engine
2424
v-card-text
@@ -34,7 +34,7 @@
3434
)
3535

3636
v-flex(lg9, xs12)
37-
v-card.wiki-form
37+
v-card.wiki-form.animated.fadeInUp.wait-p2s
3838
v-toolbar(color='primary', dense, flat, dark)
3939
.subheading {{engine.title}}
4040
v-card-text

‎client/components/admin/admin-system.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
v-layout(row, wrap)
44
v-flex(xs12)
55
.admin-header
6-
img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
6+
img.animated.fadeInUp(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
77
.admin-header-title
8-
.headline.primary--text {{ $t('admin:system.title') }}
9-
.subheading.grey--text {{ $t('admin:system.subtitle') }}
8+
.headline.primary--text.animated.fadeInLeft {{ $t('admin:system.title') }}
9+
.subheading.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:system.subtitle') }}
1010
v-layout.mt-3(row wrap)
1111
v-flex(lg6 xs12)
12-
v-card
13-
v-btn(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh
12+
v-card.animated.fadeInUp
13+
v-btn.animated.fadeInLeft.wait-p2s(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh
1414
v-list(two-line, dense)
1515
v-subheader Wiki.js
1616
v-list-tile(avatar)
@@ -70,7 +70,7 @@
7070
v-list-tile-sub-title {{ info.configFile }}
7171

7272
v-flex(lg6 xs12)
73-
v-card.pb-3
73+
v-card.pb-3.animated.fadeInUp.wait-p4s
7474
v-list(dense)
7575
v-subheader Node.js
7676
v-list-tile(avatar)

‎client/components/admin/admin-theme.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
v-layout(row wrap)
44
v-flex(xs12)
55
.admin-header
6-
img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
6+
img.animated.fadeInUp(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
77
.admin-header-title
8-
.headline.primary--text Theme
9-
.subheading.grey--text Modify the look &amp; feel of your wiki
8+
.headline.primary--text.animated.fadeInLeft Theme
9+
.subheading.grey--text.animated.fadeInLeft.wait-p2s Modify the look &amp; feel of your wiki
1010
v-spacer
11-
v-btn(color='success', depressed, @click='save', large, :loading='loading')
11+
v-btn.animated.fadeInRight(color='success', depressed, @click='save', large, :loading='loading')
1212
v-icon(left) check
1313
span {{$t('common:actions.apply')}}
1414
v-form.pt-3
1515
v-layout(row wrap)
1616
v-flex(lg6 xs12)
17-
v-card.wiki-form
17+
v-card.wiki-form.animated.fadeInUp
1818
v-toolbar(color='primary', dark, dense, flat)
1919
v-toolbar-title
2020
.subheading Theme
@@ -43,7 +43,7 @@
4343
persistent-hint
4444
hint='Not recommended for accessibility. May not be supported by all themes.'
4545
)
46-
v-card.wiki-form.mt-3
46+
v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s
4747
v-toolbar(color='primary', dark, dense, flat)
4848
v-toolbar-title
4949
.subheading Code Injection
@@ -79,7 +79,7 @@
7979
auto-grow
8080
)
8181
v-flex(lg6 xs12)
82-
v-card
82+
v-card.animated.fadeInUp.wait-p2s
8383
v-toolbar(color='teal', dark, dense, flat)
8484
v-toolbar-title
8585
.subheading Download Themes

‎client/components/common/nav-header.vue

+4-2
Original file line numberDiff line numberDiff line change
@@ -100,15 +100,17 @@
100100
v-toolbar(flat, color='grey darken-4', dense)
101101
v-icon.mr-2 search
102102
v-subheader.pl-0 Advanced Search
103+
v-spacer
104+
v-chip(label, small, color='primary') Coming soon
103105
v-card-text.pa-4
104106
v-checkbox.mt-0(
105-
label='Restrict to Current Language'
107+
label='Restrict to current language'
106108
color='white'
107109
v-model='searchRestrictLocale'
108110
hide-details
109111
)
110112
v-checkbox(
111-
label='Restrict to Below Current Path'
113+
label='Search below current path only'
112114
color='white'
113115
v-model='searchRestrictPath'
114116
hide-details

‎client/components/editor/editor-markdown.vue

+12-12
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@
6060
.editor-markdown-preview-title(@click='previewShown = false') Preview
6161
.editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML')
6262

63-
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')
64-
v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
65-
v-icon add_circle
66-
v-icon close
67-
v-btn(color='teal', fab, dark): v-icon image
68-
v-btn(color='pink', fab, dark): v-icon insert_drive_file
69-
v-btn(color='red', fab, dark): v-icon play_circle_outline
70-
v-btn(color='purple', fab, dark): v-icon multiline_chart
71-
v-btn(color='indigo', fab, dark): v-icon functions
63+
//- 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')
64+
//- v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
65+
//- v-icon add_circle
66+
//- v-icon close
67+
//- v-btn(color='teal', fab, dark): v-icon image
68+
//- v-btn(color='pink', fab, dark): v-icon insert_drive_file
69+
//- v-btn(color='red', fab, dark): v-icon play_circle_outline
70+
//- v-btn(color='purple', fab, dark): v-icon multiline_chart
71+
//- v-btn(color='indigo', fab, dark): v-icon functions
7272
</template>
7373

7474
<script>
@@ -229,10 +229,10 @@ export default {
229229
* Update toolbar state
230230
*/
231231
toolbarSync(cm) {
232-
const pos = cm.getCursor('start')
233-
const token = cm.getTokenAt(pos)
232+
// const pos = cm.getCursor('start')
233+
// const token = cm.getTokenAt(pos)
234234
235-
if (!token.type) { return }
235+
// if (!token.type) { return }
236236
237237
// console.info(token)
238238
},

‎client/scss/app.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22

33
@import "base/base";
44
@import "base/icons";
5+
@import "base/animation";
56

6-
@import "../libs/animate/animate";
7-
@import '~vue2-animate/src/sass/vue2-animate';
7+
// @import "../libs/animate/animate";
8+
// @import '~vue2-animate/src/sass/vue2-animate';
89
@import '~vuescroll/dist/vuescroll.css';
910
@import '~diff2html/dist/diff2html.min.css';
1011

‎client/scss/base/animation.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
$use-fade: true;
2+
$use-zoom: true;
3+
$use-bounce: true;
4+
5+
@import "~animate-sass/animate";
6+
7+
8+
@for $i from 1 to 9 {
9+
.wait-p#{$i}s {
10+
animation-delay: $i * .1s !important;
11+
}
12+
}

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@
137137
"pem-jwk": "2.0.0",
138138
"pg": "7.8.0",
139139
"pg-hstore": "2.3.2",
140-
"pg-tsquery": "8.0.3",
141140
"pg-query-stream": "2.0.0",
141+
"pg-tsquery": "8.0.3",
142142
"pm2": "3.2.9",
143143
"pug": "2.0.3",
144144
"qr-image": "3.2.0",
@@ -178,6 +178,7 @@
178178
"@babel/polyfill": "^7.2.5",
179179
"@babel/preset-env": "^7.3.1",
180180
"@panter/vue-i18next": "0.15.0",
181+
"animate-sass": "0.8.2",
181182
"animated-number-vue": "0.1.4",
182183
"apollo-cache-inmemory": "1.4.2",
183184
"apollo-client": "2.4.12",

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -1514,6 +1514,11 @@ [email protected], amp@~0.3.1:
15141514
resolved "https://registry.yarnpkg.com/amp/-/amp-0.3.1.tgz#6adf8d58a74f361e82c1fa8d389c079e139fc47d"
15151515
integrity sha1-at+NWKdPNh6CwfqNOJwHnhOfxH0=
15161516

1517+
[email protected]:
1518+
version "0.8.2"
1519+
resolved "https://registry.yarnpkg.com/animate-sass/-/animate-sass-0.8.2.tgz#fbfa76e049177d217a50b0f99c8ee77af490b7d9"
1520+
integrity sha512-6sZ34dusqb1HdZLNpJUNaZc0CuuLgFI8SqlyaxbSSKE9zqfoNtOeO3IpVUCqvaSm/oMNH1VlEAsJlppjg+idKQ==
1521+
15171522
[email protected]:
15181523
version "0.1.4"
15191524
resolved "https://registry.yarnpkg.com/animated-number-vue/-/animated-number-vue-0.1.4.tgz#d60447582e5375ac006137f41c40fdddac76171e"

0 commit comments

Comments
 (0)