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

misc: admin vuetify 2.0 UI + arabic display improvements

Browse Source
This commit is contained in:
Nick
2019-08-10 12:18:14 -04:00
parent c4629419d3
commit 577a061033
52 changed files with 239 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -198,7 +198,7 @@
i18next(path='admin:auth.siteUrlNotSetup', tag='span')
strong(place='siteUrl') {{$t('admin:general.siteUrl')}}
strong(place='general') {{$t('admin:general.title')}}
.pa-3.mt-3.radius-7.grey(v-else, :class='$vuetify.dark ? `darken-3-d5` : `lighten-3`')
.pa-3.mt-3.radius-7.grey(v-else, :class='$vuetify.theme.dark ? `darken-3-d5` : `lighten-3`')
.body-2: strong {{$t('admin:auth.allowedWebOrigins')}}
.body-2 {{host}}
v-divider.my-3

1
client/components/admin/admin-contribute.vue
View File

@@ -252,6 +252,7 @@ export default {
margin-bottom: 12px;
border-radius: 7px;
background-color: mc('grey', '100');
color: mc('grey', '700');
padding: 12px;
strong {

4
client/components/admin/admin-dashboard.vue
View File

@@ -45,7 +45,7 @@
:class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
dark
)
v-btn.btn-animate-wrench(fab, absolute, right, top, small, light, to='system', v-if='hasPermission(`manage:system`)')
v-btn.btn-animate-wrench(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, to='system', v-if='hasPermission(`manage:system`)')
v-icon(:color='isLatestVersion ? `teal` : `red darken-4`', small) mdi-wrench
v-card-text
v-icon.dashboard-icon mdi-blur
@@ -95,7 +95,7 @@
.subtitle-1 {{$t('admin:contribute.title')}}
.body-2.mt-3: strong {{$t('admin:dashboard.contributeSubtitle')}}
.body-2 {{$t('admin:dashboard.contributeHelp')}}
v-btn.mx-0.mt-4(:color='$vuetify.dark ? `indigo lighten-3` : `indigo`', outlined, small, to='/contribute')
v-btn.mx-0.mt-4(:color='$vuetify.theme.dark ? `indigo lighten-3` : `indigo`', outlined, small, to='/contribute')
.caption: strong {{$t('admin:dashboard.contributeLearnMore')}}
</template>

2
client/components/admin/admin-general.vue
View File

@@ -44,7 +44,7 @@
.overline.grey--text.pa-4 {{$t('admin:general.logo')}} #[v-chip.ml-2(label, color='grey', small, outlined) coming soon]
v-card-text.pb-4.pl-5
v-layout.px-3(row, align-center)
v-avatar(size='100', :color='$vuetify.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare')
v-avatar(size='100', :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare')
.ml-4
v-btn.mr-3(color='teal', depressed, disabled)
v-icon(left) mdi-cloud-upload

4
client/components/admin/admin-groups-edit-permissions.vue
View File

@@ -12,7 +12,7 @@
v-alert.radius-7(
v-if='group.isSystem'
color='orange darken-2'
:class='$vuetify.dark ? "grey darken-4" : "orange lighten-5"'
:class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"'
outline
:value='true'
icon='lock_outline'
@@ -20,7 +20,7 @@
v-container.px-3.pb-3.pt-0(fluid, grid-list-md)
v-layout(row, wrap)
v-flex(xs12, md6, lg4, v-for='pmGroup in permissions', :key='pmGroup.category')
v-card.md2(flat, :class='$vuetify.dark ? "grey darken-3-d5" : "white"')
v-card.md2(flat, :class='$vuetify.theme.dark ? "grey darken-3-d5" : "white"')
v-subheader {{pmGroup.category}}
v-card-text.pt-0
template(v-for='(pm, idx) in pmGroup.items')

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

@@ -2,16 +2,16 @@
v-card.wiki-form
v-card-text(v-if='group.id === 1')
v-alert.radius-7(
:class='$vuetify.dark ? "grey darken-4" : "orange lighten-5"'
:class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"'
color='orange darken-2'
outline
:value='true'
icon='lock_outline'
) This group has access to everything.
template(v-else)
v-card-title(:class='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-5`')
v-card-title(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-5`')
v-alert.radius-7(
:class='$vuetify.dark ? `grey darken-3-d3` : `white`'
:class='$vuetify.theme.dark ? `grey darken-3-d3` : `white`'
:value='true'
color='grey'
outline
@@ -48,10 +48,10 @@
v-list-item-avatar
v-icon cloud_download
v-list-item-title Export Rules
v-card-text(:class='$vuetify.dark ? `grey darken-4-l5` : `white`')
v-card-text(:class='$vuetify.theme.dark ? `grey darken-4-l5` : `white`')
.rules
.caption(v-if='group.pageRules.length === 0')
em(:class='$vuetify.dark ? `grey--text` : `blue-grey--text`') This group has no page rules yet.
em(:class='$vuetify.theme.dark ? `grey--text` : `blue-grey--text`') This group has no page rules yet.
.rule(v-for='rule of group.pageRules', :key='rule.id')
v-btn.ma-0.rule-deny-btn(
solo
@@ -90,7 +90,7 @@
v-icon.mr-2(:color='rule.deny ? `red` : `green`') {{props.item.icon}}
v-list-item-content
v-list-item-title.body-2 {{props.item.text}}
v-chip.mr-2.grey--text(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value}}
v-chip.mr-2.grey--text(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value}}
//- Match
v-select.ml-1.mr-1(
@@ -111,7 +111,7 @@
v-list-item-title(v-html='data.item.text')
//- Locales
v-select.mr-1(
:background-color='$vuetify.dark ? `grey darken-3-d5` : `blue-grey lighten-5`'
:background-color='$vuetify.theme.dark ? `grey darken-3-d5` : `blue-grey lighten-5`'
solo
:items='locales'
v-model='rule.locales'
@@ -147,7 +147,7 @@
v-icon.mr-2(:color='rule.deny ? `red` : `green`') language
v-list-item-content
v-list-item-title.body-2 {{props.item.text}}
v-chip.mr-2.grey--text(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value.toUpperCase()}}
v-chip.mr-2.grey--text(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value.toUpperCase()}}
//- Path
v-text-field(
@@ -158,11 +158,11 @@
:placeholder='rule.match === `REGEX` ? `Regular Expression` : `Path`'
:suffix='rule.match === `REGEX` ? `/` : null'
hide-details
:color='$vuetify.dark ? `grey` : `blue-grey`'
:color='$vuetify.theme.dark ? `grey` : `blue-grey`'
)
v-btn(icon, @click='removeRule(rule.id)')
v-icon(:color='$vuetify.dark ? `grey` : `blue-grey`') clear
v-icon(:color='$vuetify.theme.dark ? `grey` : `blue-grey`') clear
v-divider.mt-3
v-subheader.pl-0 Rules Order

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

@@ -1,6 +1,6 @@
<template lang="pug">
v-card.wiki-form
v-card-title(:class='$vuetify.dark ? `grey darken-3-d3` : `grey lighten-5`')
v-card-title(:class='$vuetify.theme.dark ? `grey darken-3-d3` : `grey lighten-5`')
v-text-field(
outline
flat

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

@@ -26,7 +26,7 @@
v-icon(left) check
span Update Group
v-card.mt-3
v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
v-tabs(v-model='tab', :color='$vuetify.theme.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
v-tab(key='permissions') Permissions
v-tab(key='rules') Page Rules
v-tab(key='users') Users

6
client/components/admin/admin-locale.vue
View File

@@ -37,7 +37,7 @@
v-avatar.blue.white--text(tile, size='40', v-html='data.item.code.toUpperCase()')
v-list-item-content
v-list-item-title(v-html='data.item.name')
v-list-item-sub-title(v-html='data.item.nativeName')
v-list-item-subtitle(v-html='data.item.nativeName')
v-divider.mt-3
v-switch(
v-model='autoUpdate'
@@ -254,6 +254,10 @@ export default {
style: 'success',
icon: 'check'
})
_.delay(() => {
window.location.reload(true)
}, 1500)
} else {
this.$store.commit('showNotification', {
message: `Error: ${resp.message}`,

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

@@ -23,15 +23,16 @@
status-indicator.mr-3.ml-4(active, pulse)
.caption.blue--text {{$t('common:page.global')}}
v-spacer
v-btn.animated.fadeInRight.wait-p4s(color='grey', large, outline, to='/pages')
v-icon arrow_back
v-divider.animated.fadeInRight.wait-p3s.mx-3(vertical)
v-btn.mx-1.animated.fadeInRight.wait-p4s(color='grey', large, outlined, to='/pages')
v-icon mdi-arrow-left
v-divider.mx-1.animated.fadeInRight.wait-p3s.mx-1(vertical)
v-dialog(v-model='deletePageDialog', max-width='500')
v-btn.animated.fadeInDown.wait-p1s(color='red', large, outline, slot='activator')
v-icon(color='red') delete
template(v-slot:activator='{ on }')
v-btn.mx-1.animated.fadeInDown.wait-p1s(color='red', large, outlined, v-on='on')
v-icon(color='red') mdi-trash-can-outline
v-card.wiki-form
.dialog-header.is-short.is-red
v-icon.mr-2(color='white') highlight_off
v-icon.mr-2(color='white') mdi-file-document-box-remove-outline
span {{$t('common:page.delete')}}
v-card-text
i18next.body-2(path='common:page.deleteTitle', tag='div')
@@ -45,67 +46,67 @@
v-spacer
v-btn(flat, @click='deletePageDialog = false', :disabled='loading') {{$t('common:actions.cancel')}}
v-btn(color='red darken-2', @click='deletePage', :loading='loading').white--text {{$t('common:actions.delete')}}
v-btn.animated.fadeInDown(color='teal', large, outline, @click='rerenderPage')
v-icon(left) system_update_alt
v-btn.ml-1.animated.fadeInDown(color='teal', large, outlined, @click='rerenderPage')
v-icon(left) mdi-cube-scan
span Re-render
v-flex(xs12, lg6)
v-card.animated.fadeInUp
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 subject
v-icon.mr-2 mdi-text-subject
span Properties
v-list.py-0(two-line, dense)
v-list-item
v-list-item-content
v-list-item-title.caption.grey--text Title
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.title }}
v-list-item-title: .overline.grey--text Title
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.title }}
v-divider
v-list-item
v-list-item-content
v-list-item-title.caption.grey--text Description
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.description || '-' }}
v-list-item-title: .overline.grey--text Description
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.description || '-' }}
v-divider
v-list-item
v-list-item-content
v-list-item-title.caption.grey--text Locale
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.locale }}
v-list-item-title: .overline.grey--text Locale
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.locale }}
v-list-item-action
v-btn(icon)
v-icon(color='grey') edit
v-btn(icon, x-small)
v-icon(color='grey') mdi-pencil
v-divider
v-list-item
v-list-item-content
v-list-item-title.caption.grey--text Path
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.path }}
v-list-item-title: .overline.grey--text Path
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.path }}
v-list-item-action
v-btn(icon)
v-icon(color='grey') edit
v-btn(icon, x-small)
v-icon(color='grey') mdi-pencil
v-divider
v-list-item
v-list-item-content
v-list-item-title.caption.grey--text Editor
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.editor || '?' }}
v-list-item-title: .overline.grey--text Editor
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.editor || '?' }}
v-divider
v-list-item
v-list-item-content
v-list-item-title.caption.grey--text Content Type
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }}
v-list-item-title: .overline.grey--text Content Type
v-list-item-subtitle.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }}
v-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(color='white', dense)
v-spacer
v-btn(color='primary', flat, :href='`/` + page.locale + `/` + page.path')
v-icon(left) subject
v-btn(color='primary', text, :href='`/` + page.locale + `/` + page.path')
v-icon(left) mdi-text-subject
span View
v-divider(vertical)
v-btn(color='primary', flat, :href='`/e/` + page.locale + `/` + page.path')
v-icon(left) edit
v-divider.mx-2(vertical)
v-btn(color='primary', text, :href='`/e/` + page.locale + `/` + page.path')
v-icon(left) mdi-pencil
span Edit
v-divider(vertical)
v-btn(color='primary', flat, :href='`/s/` + page.locale + `/` + page.path')
v-icon(left) code
v-divider.mx-2(vertical)
v-btn(color='primary', text, :href='`/s/` + page.locale + `/` + page.path')
v-icon(left) mdi-code-tags
span Source
v-divider(vertical)
v-btn(color='primary', flat, :href='`/h/` + page.locale + `/` + page.path')
v-icon(left) history
v-divider.mx-2(vertical)
v-btn(color='primary', text, :href='`/h/` + page.locale + `/` + page.path')
v-icon(left) mdi-history
span History
v-spacer
@@ -114,47 +115,47 @@
v-flex(xs12, lg6)
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 people
v-icon.mr-2 mdi-account-multiple
span Users
v-list.py-0(two-line, dense)
v-list-item
v-list-item-avatar
v-list-item-avatar(size='24')
v-btn(icon, :to='`/users/` + page.creatorId')
v-icon(color='grey') person
v-icon(color='grey') mdi-account
v-list-item-content
v-list-item-title.caption.grey--text Creator
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})]
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-action
v-list-item-action-text {{ page.createdAt | moment('calendar') }}
v-divider
v-list-item
v-list-item-avatar
v-list-item-avatar(size='24')
v-btn(icon, :to='`/users/` + page.authorId')
v-icon(color='grey') person
v-icon(color='grey') mdi-account
v-list-item-content
v-list-item-title.caption.grey--text Last Editor
v-list-item-sub-title.body-2.grey--text.text--darken-3 {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
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-action
v-list-item-action-text {{ page.updatedAt | moment('calendar') }}
v-card.mt-3.animated.fadeInUp.wait-p4s
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 history
v-icon.mr-2 mdi-history
span Recent History
v-spacer
v-chip(label, color='white', small).primary--text coming soon
v-timeline.mx-3(dense, clipped)
v-timeline-item(color='teal', small, v-if='page.createdAt !== page.updatedAt')
v-layout(justify-space-between)
v-flex(xs7) Page Modified by #[strong {{ page.authorName }}] #[em.caption ({{ page.authorEmail }})]
v-flex.text-xs-right(xs5).caption.grey--text.text-darken-2 {{ page.updatedAt | moment('calendar') }}
v-flex(xs7).body-2 Page Modified by #[strong {{ page.authorName }}] #[em.caption ({{ page.authorEmail }})]
v-flex.text-right(xs5).caption.grey--text.text-darken-2 {{ page.updatedAt | moment('calendar') }}
v-timeline-item(hide-dot, small)
.body-1 ...
v-btn.mx-0(outline, color='grey', :href='`/h/` + page.locale + `/` + page.path') View Full History
.body-1 ...
.body-2 ...
v-btn.mx-0.mt-1(outlined, color='grey', :href='`/h/` + page.locale + `/` + page.path') View Full History
.body-2 ...
v-timeline-item(color='pink', small)
v-layout(justify-space-between)
v-flex(xs7) Page created by #[strong {{ page.creatorName }}] #[em.caption ({{ page.creatorEmail }})]
v-flex.text-xs-right(xs5).caption.grey--text.text-darken-2 {{ page.createdAt | moment('calendar') }}
v-flex(xs7).body-2 Page created by #[strong {{ page.creatorName }}] #[em.caption ({{ page.creatorEmail }})]
v-flex.text-right(xs5).caption.grey--text.text-darken-2 {{ page.createdAt | moment('calendar') }}
v-layout(row, align-center, v-else)
v-progress-circular(indeterminate, width='2', color='grey')

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

@@ -17,7 +17,7 @@
v-icon(left) mdi-plus
span New Page
v-card.wiki-form.mt-3.animated.fadeInUp
v-toolbar(flat, :color='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80')
v-toolbar(flat, :color='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80')
v-spacer
v-text-field(
outlined
@@ -46,27 +46,27 @@
:items='filteredPages'
:headers='headers'
:search='search'
:pagination.sync='pagination'
:rows-per-page-items='[15]'
:page.sync='pagination'
:items-per-page='15'
:loading='loading'
must-sort,
hide-actions
hide-default-footer
)
template(slot='items', slot-scope='props')
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
td.text-xs-right {{ props.item.id }}
td
.body-2 {{ props.item.title }}
.caption {{ props.item.description }}
td.admin-pages-path
v-chip(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.dark ? `text--lighten-1` : `text--darken-2`') {{ props.item.path }}
v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') {{ props.item.path }}
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
template(slot='no-data')
v-alert.ma-3(icon='warning', :value='true', outline) No pages to display.
.text-xs-center.py-2.animated.fadeInDown(v-if='this.pageTotal > 1')
v-pagination(v-model='pagination.page', :length='pageTotal')
v-pagination(v-model='pagination', :length='pageTotal')
</template>
<script>
@@ -77,7 +77,7 @@ export default {
data() {
return {
selectedPage: {},
pagination: {},
pagination: 1,
pages: [],
headers: [
{ text: 'ID', value: 'id', width: 50, align: 'right' },
@@ -99,11 +99,7 @@ export default {
},
computed: {
pageTotal () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
return 0
}
return Math.ceil(this.filteredPages.length / this.pagination.rowsPerPage)
return Math.ceil(this.filteredPages.length / 15)
},
filteredPages () {
return _.filter(this.pages, pg => {

6
client/components/admin/admin-storage.vue
View File

@@ -33,7 +33,7 @@
v-divider(v-if='idx < targets.length - 1')
v-card.mt-3.animated.fadeInUp.wait-p2s
v-toolbar(flat, :color='$vuetify.dark ? `grey darken-3-l5` : `grey darken-3`', dark, dense)
v-toolbar(flat, :color='$vuetify.theme.dark ? `grey darken-3-l5` : `grey darken-3`', dark, dense)
.subtitle-1 {{$t('admin:storage.status')}}
v-spacer
looping-rhombuses-spinner(
@@ -182,14 +182,14 @@
v-container.pt-0(grid-list-xl, fluid)
v-layout(row, wrap, fill-height)
v-flex(xs12, lg6, xl4, v-for='act of target.actions', :key='act.handler')
v-card.radius-7.grey(flat, :class='$vuetify.dark ? `darken-3-d5` : `lighten-3`', height='100%')
v-card.radius-7.grey(flat, :class='$vuetify.theme.dark ? `darken-3-d5` : `lighten-3`', height='100%')
v-card-text
.subtitle-1(v-html='act.label')
.body-2.mt-4(v-html='act.hint')
v-btn.mx-0.mt-5(
@click='executeAction(target.key, act.handler)'
outlined
:color='$vuetify.dark ? `blue` : `primary`'
:color='$vuetify.theme.dark ? `blue` : `primary`'
:disabled='runningAction'
:loading='runningActionHandler === act.handler'
) {{$t('admin:storage.actionRun')}}

2
client/components/admin/admin-system.vue
View File

@@ -10,7 +10,7 @@
v-layout.mt-3(row wrap)
v-flex(lg6 xs12)
v-card.animated.fadeInUp
v-btn.animated.fadeInLeft.wait-p2s.btn-animate-rotate(fab, absolute, right, top, small, light, @click='refresh'): v-icon(color='grey') mdi-refresh
v-btn.animated.fadeInLeft.wait-p2s.btn-animate-rotate(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, @click='refresh'): v-icon(color='grey') mdi-refresh
v-subheader Wiki.js
v-list(two-line, dense)
v-list-item(avatar)

2
client/components/admin/admin-theme.vue
View File

@@ -29,7 +29,7 @@
)
template(slot='item', slot-scope='data')
v-list-item-avatar
v-icon.blue--text(dark) filter_frames
v-icon.blue--text(dark) mdi-image-filter-frames
v-list-item-content
v-list-item-title(v-html='data.item.text')
v-list-item-sub-title(v-html='data.item.author')

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

@@ -14,7 +14,7 @@
v-icon(left) mdi-plus
span New User
v-card.wiki-form.mt-3.animated.fadeInUp
v-toolbar(flat, :color='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80')
v-toolbar(flat, :color='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-5`', height='80')
v-spacer
v-text-field(
outlined