liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: UI fixes + search crash (#1086)

Browse Source
This commit is contained in:
NGPixel
2019-11-02 16:04:43 -04:00
parent 57f79c19b2
commit d69dde1df5
9 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/admin.vue
View File

@@ -104,7 +104,7 @@
v-list-item(to='/dev-flags')
v-list-item-title {{ $t('admin:dev.flags.title') }}
v-list-item(href='/graphql')
v-list-item-title {{ $t('admin:dev.graphiql.title') }}
v-list-item-title GraphQL
//- v-list-item(to='/dev-graphiql')
//- v-list-item-title {{ $t('admin:dev.graphiql.title') }}
//- v-list-item(to='/dev-voyager')

24
client/components/admin/admin-auth.vue
View File

@@ -148,16 +148,6 @@
persistent-hint
inset
)
v-switch.ml-3(
v-if='strategy.key === `local`'
:disabled='!strategy.selfRegistration || true'
v-model='strategy.recaptcha'
label='Use reCAPTCHA by Google'
color='primary'
hint='Protects against spam robots and malicious registrations.'
persistent-hint
inset
)
v-combobox.ml-3.mt-3(
:label='$t(`admin:auth.domainsWhitelist`)'
v-model='strategy.domainWhitelist'
@@ -191,7 +181,19 @@
)
template(v-if='strategy.useForm')
v-divider.mt-3
.overline.my-5 {{$t('admin:auth.security')}}
.d-flex.my-5.align-center
.overline {{$t('admin:auth.security')}}
v-chip.ml-3.grey--text(outlined, small, label) Coming soon
v-switch.ml-3(
v-if='strategy.key === `local`'
:disabled='!strategy.selfRegistration || true'
v-model='strategy.recaptcha'
label='Use reCAPTCHA by Google'
color='primary'
hint='Protects against spam robots and malicious registrations.'
persistent-hint
inset
)
v-switch.ml-3(
v-model='strategy.recaptcha'
:disabled='true'

2
client/components/admin/admin-dev-flags.vue
View File

@@ -12,7 +12,7 @@
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-card.mt-3.white.grey--text.text--darken-3
v-card.mt-3(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `white grey--text text--darken-3`')
v-alert(color='red', :value='true', icon='mdi-alert', dark, prominent)
span Do NOT enable these flags unless you know what you're doing!
.caption Doing so may result in data loss or broken installation!

6
client/components/admin/admin-groups-edit-rules.vue
View File

@@ -72,6 +72,7 @@
chips
deletable-chips
small-chips
height='48px'
style='flex: 0 1 440px;'
:menu-props='{ "maxHeight": 500 }'
clearable
@@ -99,6 +100,7 @@
v-model='rule.match'
placeholder='Match...'
hide-details
height='48px'
style='flex: 0 1 250px;'
dense
)
@@ -118,6 +120,7 @@
placeholder='Any Locale'
multiple
hide-details
height='48px'
dense
:menu-props='{ "minWidth": 250 }'
style='flex: 0 1 150px;'
@@ -161,7 +164,7 @@
:color='$vuetify.theme.dark ? `grey` : `blue-grey`'
)
v-btn.ml-2.mt-1(icon, @click='removeRule(rule.id)', small)
v-btn.ml-2(icon, @click='removeRule(rule.id)', small)
v-icon(:color='$vuetify.theme.dark ? `grey` : `blue-grey`') mdi-close
v-divider.mt-3
@@ -277,6 +280,7 @@ export default {
background-color: mc('blue-grey', '100');
border-radius: 4px;
padding: .5rem;
align-items: center;
&-enter-active, &-leave-active {
transition: all .5s ease;

2
client/components/admin/admin-groups-edit-users.vue
View File

@@ -39,7 +39,7 @@
v-list-item-content
v-list-item-title Unassign
template(slot='no-data')
v-alert.ma-3(icon='warning', outlined) No users to display.
v-alert.ma-3(icon='mdi-alert', outlined) No users to display.
.text-center.py-2(v-if='group.users.length > 15')
v-pagination(v-model='pagination', :length='pageCount')

18
client/components/admin/admin-pages-edit.vue
View File

@@ -58,17 +58,17 @@
v-list-item
v-list-item-content
v-list-item-title: .overline.grey--text Title
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.title }}
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.title }}
v-divider
v-list-item
v-list-item-content
v-list-item-title: .overline.grey--text Description
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.description || '-' }}
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.description || '-' }}
v-divider
v-list-item
v-list-item-content
v-list-item-title: .overline.grey--text Locale
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.locale }}
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.locale }}
v-list-item-action
v-btn(icon, x-small)
v-icon(color='grey') mdi-pencil
@@ -76,7 +76,7 @@
v-list-item
v-list-item-content
v-list-item-title: .overline.grey--text Path
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.path }}
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.path }}
v-list-item-action
v-btn(icon, x-small)
v-icon(color='grey') mdi-pencil
@@ -84,14 +84,14 @@
v-list-item
v-list-item-content
v-list-item-title: .overline.grey--text Editor
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.editor || '?' }}
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.editor || '?' }}
v-divider
v-list-item
v-list-item-content
v-list-item-title: .overline.grey--text Content Type
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }}
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.contentType || '?' }}
v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(color='white', dense)
v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(:color='$vuetify.theme.dark ? `grey darken-3-d5` : `white`', dense)
v-spacer
v-btn(color='primary', text, :href='`/` + page.locale + `/` + page.path')
v-icon(left) mdi-text-subject
@@ -124,7 +124,7 @@
v-icon(color='grey') mdi-account
v-list-item-content
v-list-item-title: .overline.grey--text Creator
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})]
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})]
v-list-item-action
v-list-item-action-text {{ page.createdAt | moment('calendar') }}
v-divider
@@ -134,7 +134,7 @@
v-icon(color='grey') mdi-account
v-list-item-content
v-list-item-title: .overline.grey--text Last Editor
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
v-list-item-action
v-list-item-action-text {{ page.updatedAt | moment('calendar') }}
v-card.mt-3.animated.fadeInUp.wait-p4s

21
client/components/common/search-results.vue
View File

@@ -1,20 +1,20 @@
<template lang="pug">
.search-results(v-if='searchIsFocused || search.length > 1')
.search-results(v-if='searchIsFocused || (search && search.length > 1)')
.search-results-container
.search-results-help(v-if='search.length < 2')
.search-results-help(v-if='search && search.length < 2')
img(src='/svg/icon-search-alt.svg')
.mt-4 {{$t('common:header.searchHint')}}
.search-results-loader(v-else-if='searchIsLoading && results.length < 1')
.search-results-loader(v-else-if='searchIsLoading && (!results || results.length < 1)')
orbit-spinner(
:animation-duration='1000'
:size='100'
color='#FFF'
)
.headline.mt-5 {{$t('common:header.searchLoading')}}
.search-results-none(v-else-if='!searchIsLoading && results.length < 1')
.search-results-none(v-else-if='!searchIsLoading && (!results || results.length < 1)')
img(src='/svg/icon-no-results.svg', alt='No Results')
.subheading {{$t('common:header.searchNoResult')}}
template(v-if='results.length > 0')
template(v-if='results && results.length > 0')
v-subheader.white--text {{$t('common:header.searchResultsCount', { total: response.totalHits })}}
v-list.search-results-items.radius-7.py-0(two-line)
template(v-for='(item, idx) of results')
@@ -34,7 +34,7 @@
v-model='pagination'
:length='paginationLength'
)
template(v-if='suggestions.length > 0')
template(v-if='suggestions && suggestions.length > 0')
v-subheader.white--text.mt-3 {{$t('common:header.searchDidYouMean')}}
v-list.search-results-suggestions.radius-7(dense, dark)
template(v-for='(term, idx) of suggestions')
@@ -44,7 +44,7 @@
v-list-item-content
v-list-item-title(v-html='term')
v-divider(v-if='idx < suggestions.length - 1')
.text-xs-center.pt-5(v-if='search.length > 1')
.text-xs-center.pt-5(v-if='search && search.length > 1')
//- v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0')
//- v-icon(left) mdi-content-save
//- span {{$t('common:header.searchCopyLink')}}
@@ -97,7 +97,7 @@ export default {
watch: {
search(newValue, oldValue) {
this.cursor = 0
if (newValue.length < 2) {
if (newValue && newValue.length < 2) {
this.response.results = []
this.response.suggestions = []
} else {
@@ -107,6 +107,7 @@ export default {
},
mounted() {
this.$root.$on('searchMove', (dir) => {
console.info()
this.cursor += ((dir === 'up') ? -1 : 1)
if (this.cursor < -1) {
this.cursor = -1
@@ -115,6 +116,10 @@ export default {
}
})
this.$root.$on('searchEnter', () => {
if (!this.results) {
return
}
if (this.cursor >= 0 && this.cursor < this.results.length) {
this.goToPage(_.nth(this.results, this.cursor))
} else if (this.cursor >= 0) {

12
client/themes/default/components/page.vue
View File

@@ -73,21 +73,21 @@
v-card.mb-5(v-if='tags.length > 0')
.pa-5
.overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') Tags
v-chip.mr-1(
v-chip.mr-1.mb-1(
label
color='teal lighten-5'
:color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
v-for='(tag, idx) in tags'
:href='`/t/` + tag.tag'
:key='`tag-` + tag.tag'
)
v-icon(color='teal', left, small) mdi-tag
span.teal--text.text--darken-2 {{tag.title}}
v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', left, small) mdi-tag
span(:class='$vuetify.theme.dark ? `teal--text text--lighten-5` : `teal--text text--darken-2`') {{tag.title}}
v-chip.mr-1(
label
color='teal lighten-5'
:color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
:href='`/t/` + tags.map(t => t.tag).join(`/`)'
)
v-icon(color='teal', size='20') mdi-tag-multiple
v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', size='20') mdi-tag-multiple
v-card.mb-5
.pa-5