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

misc: migrate to vuetify 2.0 (wip)

Browse Source
This commit is contained in:
NGPixel
2019-07-29 04:50:03 +00:00
parent e77037e161
commit eccf1a1b19
102 changed files with 1321 additions and 1201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/components/admin/admin-analytics.vue
View File

@@ -8,10 +8,10 @@
.headline.primary--text.animated.fadeInLeft {{ $t('admin:analytics.title') }}
.subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:analytics.subtitle') }}
v-spacer
v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
v-icon refresh
v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) check
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-flex(lg3, xs12)
@@ -20,21 +20,21 @@
.subheading {{$t('admin:analytics.providers')}}
v-list(two-line, dense).py-0
template(v-for='(str, idx) in providers')
v-list-tile(:key='str.key', @click='selectedProvider = str.key', :disabled='!str.isAvailable')
v-list-tile-avatar
v-icon(color='grey', v-if='!str.isAvailable') indeterminate_check_box
v-icon(color='primary', v-else-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') check_box
v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') check_box_outline_blank
v-list-tile-content
v-list-tile-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedProvider === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-tile-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-tile-avatar(v-if='selectedProvider === str.key')
v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
v-list-item(:key='str.key', @click='selectedProvider = str.key', :disabled='!str.isAvailable')
v-list-item-avatar(size='24')
v-icon(color='grey', v-if='!str.isAvailable') mdi-minus-box-outline
v-icon(color='primary', v-else-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') mdi-checkbox-marked-outline
v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') mdi-checkbox-blank-outline
v-list-item-content
v-list-item-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedProvider === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-item-subtitle: .caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-item-avatar(v-if='selectedProvider === str.key', size='24')
v-icon.animated.fadeInLeft(color='primary', large) mdi-chevron-right
v-divider(v-if='idx < providers.length - 1')
v-flex(xs12, lg9)
v-card.wiki-form.animated.fadeInUp.wait-p2s
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dense, flat, dark)
.subheading {{provider.title}}
v-card-text
@@ -44,18 +44,17 @@
.caption.pt-3 {{provider.description}}
.caption.pb-3: a(:href='provider.website') {{provider.website}}
v-divider.mt-3
v-subheader.pl-0 {{$t('admin:analytics.providerConfiguration')}}
.overline.py-4 {{$t('admin:analytics.providerConfiguration')}}
.body-1.ml-3(v-if='!provider.config || provider.config.length < 1'): em {{$t('admin:analytics.providerNoConfiguration')}}
template(v-else, v-for='cfg in provider.config')
v-select(
v-if='cfg.value.type === "string" && cfg.value.enum'
outline
background-color='grey lighten-2'
outlined
:items='cfg.value.enum'
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
prepend-icon='settings_applications'
prepend-icon='mdi-settings-box'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'
@@ -66,30 +65,28 @@
:label='cfg.value.title'
v-model='cfg.value.value'
color='primary'
prepend-icon='settings_applications'
prepend-icon='mdi-settings-box'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
)
v-textarea(
v-else-if='cfg.value.type === "string" && cfg.value.multiline'
outline
background-color='grey lighten-2'
outlined
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
prepend-icon='settings_applications'
prepend-icon='mdi-settings-box'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'
)
v-text-field(
v-else
outline
background-color='grey lighten-2'
outlined
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
prepend-icon='settings_applications'
prepend-icon='mdi-settings-box'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'

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

@@ -8,7 +8,7 @@
.headline.primary--text.animated.fadeInLeft {{ $t('admin:auth.title') }}
.subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:auth.subtitle') }}
v-spacer
v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
v-icon refresh
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) check
@@ -20,16 +20,16 @@
.subheading {{$t('admin:auth.strategies')}}
v-list(two-line, dense).py-0
template(v-for='(str, idx) in strategies')
v-list-tile(:key='str.key', @click='selectedStrategy = str.key', :disabled='!str.isAvailable')
v-list-tile-avatar
v-list-item(:key='str.key', @click='selectedStrategy = str.key', :disabled='!str.isAvailable')
v-list-item-avatar
v-icon(color='grey', v-if='!str.isAvailable') indeterminate_check_box
v-icon(color='primary', v-else-if='str.isEnabled && str.key !== `local`', v-ripple, @click='str.isEnabled = false') check_box
v-icon(color='primary', v-else-if='str.isEnabled && str.key === `local`') check_box
v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') check_box_outline_blank
v-list-tile-content
v-list-tile-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedStrategy === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-tile-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedStrategy === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-tile-avatar(v-if='selectedStrategy === str.key')
v-list-item-content
v-list-item-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedStrategy === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-item-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedStrategy === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-item-avatar(v-if='selectedStrategy === str.key')
v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
v-divider(v-if='idx < strategies.length - 1')
@@ -39,7 +39,7 @@
v-card-text
v-text-field.md2(
v-model='jwtAudience'
outline
outlined
prepend-icon='account_balance'
:label='$t(`admin:auth.jwtAudience`)'
:hint='$t(`admin:auth.jwtAudienceHint`)'
@@ -47,7 +47,7 @@
)
v-text-field.mt-3.md2(
v-model='jwtExpiration'
outline
outlined
prepend-icon='schedule'
:label='$t(`admin:auth.tokenExpiration`)'
:hint='$t(`admin:auth.tokenExpirationHint`)'
@@ -55,7 +55,7 @@
)
v-text-field.mt-3.md2(
v-model='jwtRenewablePeriod'
outline
outlined
prepend-icon='update'
:label='$t(`admin:auth.tokenRenewalPeriod`)'
:hint='$t(`admin:auth.tokenRenewalPeriodHint`)'
@@ -85,8 +85,7 @@
template(v-else, v-for='cfg in strategy.config')
v-select(
v-if='cfg.value.type === "string" && cfg.value.enum'
outline
background-color='grey lighten-2'
outlined
:items='cfg.value.enum'
:key='cfg.key'
:label='cfg.value.title'
@@ -108,8 +107,7 @@
)
v-textarea(
v-else-if='cfg.value.type === "string" && cfg.value.multiline'
outline
background-color='grey lighten-2'
outlined
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
@@ -120,8 +118,7 @@
)
v-text-field(
v-else
outline
background-color='grey lighten-2'
outlined
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
@@ -153,7 +150,7 @@
:label='$t(`admin:auth.domainsWhitelist`)'
v-model='strategy.domainWhitelist'
prepend-icon='mail_outline'
outline
outlined
:disabled='!strategy.selfRegistration'
:hint='$t(`admin:auth.domainsWhitelistHint`)'
persistent-hint
@@ -164,7 +161,7 @@
chips
)
v-autocomplete.mt-3.ml-3(
outline
outlined
:disabled='!strategy.selfRegistration'
:items='groups'
item-text='name'

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

@@ -91,18 +91,18 @@
v-btn(outline, small, href='https://opencollective.com/wikijs/order/1273') Become a Sponsor
v-list(two-line)
template(v-for='(sponsor, idx) in sponsors')
v-list-tile(:key='sponsor.id')
v-list-tile-avatar
v-list-item(:key='sponsor.id')
v-list-item-avatar
img(v-if='sponsor.image', :src='sponsor.image')
v-avatar(v-else, color='teal', size='40')
span.white--text.subheading {{sponsor.name[0].toUpperCase()}}
v-list-tile-content
v-list-tile-title {{sponsor.name}}
v-list-tile-sub-title {{sponsor.description}}
v-list-tile-action(v-if='sponsor.twitter')
v-list-item-content
v-list-item-title {{sponsor.name}}
v-list-item-sub-title {{sponsor.description}}
v-list-item-action(v-if='sponsor.twitter')
v-btn(icon, :href='sponsor.twitter', target='_blank')
icon-twitter(fillColor='#9e9e9e')
v-list-tile-action(v-if='sponsor.website')
v-list-item-action(v-if='sponsor.website')
v-btn(icon, :href='sponsor.website', target='_blank')
v-icon(color='grey') public
v-divider(v-if='idx < sponsors.length - 1')
@@ -112,91 +112,91 @@
v-btn(outline, small, href='https://opencollective.com/wikijs/order/1272') Become a Backer
v-list(two-line, dense)
template(v-for='(backer, idx) in backers')
v-list-tile(:key='backer.id')
v-list-tile-avatar
v-list-item(:key='backer.id')
v-list-item-avatar
img(v-if='backer.image', :src='backer.image')
v-avatar(v-else, color='blue-grey', size='40')
span.white--text.subheading {{backer.name[0].toUpperCase()}}
v-list-tile-content
v-list-tile-title {{backer.name}}
v-list-tile-sub-title {{backer.description}}
v-list-tile-action(v-if='backer.twitter')
v-list-item-content
v-list-item-title {{backer.name}}
v-list-item-sub-title {{backer.description}}
v-list-item-action(v-if='backer.twitter')
v-btn(icon, :href='backer.twitter', target='_blank')
icon-twitter(fillColor='#9e9e9e')
v-list-tile-action(v-if='backer.website')
v-list-item-action(v-if='backer.website')
v-btn(icon, :href='backer.website', target='_blank')
v-icon(color='grey') public
v-divider(v-if='idx < backers.length - 1')
v-toolbar(color='primary', dense, dark)
.subheading Special Thanks
v-list(two-line)
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
img(src='https://static.requarks.io/logo/algolia.svg', alt='Algolia')
v-list-tile-content
v-list-tile-title Algolia
v-list-tile-sub-title Algolia is a powerful search-as-a-service solution, made easy to use with API clients, UI libraries, and pre-built integrations.
v-list-tile-action
v-list-item-content
v-list-item-title Algolia
v-list-item-sub-title Algolia is a powerful search-as-a-service solution, made easy to use with API clients, UI libraries, and pre-built integrations.
v-list-item-action
v-btn(icon, href='https://www.algolia.com/', target='_blank')
v-icon(color='grey') public
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
img(src='https://static.requarks.io/logo/browserstack.svg', alt='Browserstack')
v-list-tile-content
v-list-tile-title BrowserStack
v-list-tile-sub-title BrowserStack is a cloud web and mobile testing platform that enables developers to test their websites and mobile applications.
v-list-tile-action
v-list-item-content
v-list-item-title BrowserStack
v-list-item-sub-title BrowserStack is a cloud web and mobile testing platform that enables developers to test their websites and mobile applications.
v-list-item-action
v-btn(icon, href='https://www.browserstack.com/', target='_blank')
v-icon(color='grey') public
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
img(src='https://static.requarks.io/logo/cloudflare.svg', alt='Cloudflare')
v-list-tile-content
v-list-tile-title Cloudflare
v-list-tile-sub-title Providing content delivery network services, DDoS mitigation, Internet security and distributed domain name server services.
v-list-tile-action
v-list-item-content
v-list-item-title Cloudflare
v-list-item-sub-title Providing content delivery network services, DDoS mitigation, Internet security and distributed domain name server services.
v-list-item-action
v-btn(icon, href='https://www.cloudflare.com/', target='_blank')
v-icon(color='grey') public
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
img(src='https://static.requarks.io/logo/digitalocean.svg', alt='DigitalOcean')
v-list-tile-content
v-list-tile-title DigitalOcean
v-list-tile-sub-title Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers (Droplets), object storage (Spaces), and more.
v-list-tile-action
v-list-item-content
v-list-item-title DigitalOcean
v-list-item-sub-title Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers (Droplets), object storage (Spaces), and more.
v-list-item-action
v-btn(icon, href='https://m.do.co/c/5f7445bfa4d0', target='_blank')
v-icon(color='grey') public
v-divider
v-list-tile
v-list-tile-avatar(tile)
v-list-item
v-list-item-avatar(tile)
img(src='/svg/logo-icons8.svg', alt='Icons8')
v-list-tile-content
v-list-tile-title Icons8
v-list-tile-sub-title All the Icons You Need. Guaranteed.
v-list-tile-action
v-list-item-content
v-list-item-title Icons8
v-list-item-sub-title All the Icons You Need. Guaranteed.
v-list-item-action
v-btn(icon, href='https://icons8.com', target='_blank')
v-icon(color='grey') public
v-divider
v-list-tile
v-list-tile-avatar(tile)
v-list-item
v-list-item-avatar(tile)
img(src='https://static.requarks.io/logo/lokalise.png', alt='Lokalise')
v-list-tile-content
v-list-tile-title Lokalise
v-list-tile-sub-title Lokalise is a translation management system built for agile teams who want to automate their localization process.
v-list-tile-action
v-list-item-content
v-list-item-title Lokalise
v-list-item-sub-title Lokalise is a translation management system built for agile teams who want to automate their localization process.
v-list-item-action
v-btn(icon, href='https://lokalise.co', target='_blank')
v-icon(color='grey') public
v-divider
v-list-tile
v-list-tile-avatar(tile)
v-list-item
v-list-item-avatar(tile)
img(src='https://static.requarks.io/logo/netlify.svg', alt='Netlify')
v-list-tile-content
v-list-tile-title Netlify
v-list-tile-sub-title Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need.
v-list-tile-action
v-list-item-content
v-list-item-title Netlify
v-list-item-sub-title Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need.
v-list-item-action
v-btn(icon, href='https://wwwnetlify.com', target='_blank')
v-icon(color='grey') public

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

@@ -10,8 +10,8 @@
v-flex(xs12 md6 lg4 xl3 d-flex)
v-card.primary.dashboard-card.animated.fadeInUp(dark)
v-card-text
v-icon.dashboard-icon insert_drive_file
.subheading {{$t('admin:dashboard.pages')}}
v-icon.dashboard-icon mdi-file-document-outline
.overline {{$t('admin:dashboard.pages')}}
animated-number.display-1(
:value='info.pagesTotal'
:duration='2000'
@@ -21,8 +21,8 @@
v-flex(xs12 md6 lg4 xl3 d-flex)
v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark)
v-card-text
v-icon.dashboard-icon person
.subheading {{$t('admin:dashboard.users')}}
v-icon.dashboard-icon mdi-account
.overline {{$t('admin:dashboard.users')}}
animated-number.display-1(
:value='info.usersTotal'
:duration='2000'
@@ -32,8 +32,8 @@
v-flex(xs12 md6 lg4 xl3 d-flex)
v-card.indigo.lighten-2.dashboard-card.animated.fadeInUp.wait-p4s(dark)
v-card-text
v-icon.dashboard-icon people
.subheading {{$t('admin:dashboard.groups')}}
v-icon.dashboard-icon mdi-account-group
.overline {{$t('admin:dashboard.groups')}}
animated-number.display-1(
:value='info.groupsTotal'
:duration='2000'
@@ -46,19 +46,19 @@
dark
)
v-btn.btn-animate-wrench(fab, absolute, right, top, small, light, to='system', v-if='hasPermission(`manage:system`)')
v-icon(:color='isLatestVersion ? `teal` : `red darken-4`') build
v-icon(:color='isLatestVersion ? `teal` : `red darken-4`', small) mdi-wrench
v-card-text
v-icon.dashboard-icon blur_on
v-icon.dashboard-icon mdi-blur
.subheading Wiki.js {{info.currentVersion}}
.body-2(v-if='isLatestVersion') {{$t('admin:dashboard.versionLatest')}}
.body-2(v-else) {{$t('admin:dashboard.versionNew', { version: info.latestVersion })}}
v-flex(xs12, xl6)
v-card.radius-7.animated.fadeInUp.wait-p2s
v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
v-card-title.subtitle-1(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
v-data-table.pb-2(
:items='recentPages'
hide-actions
hide-headers
hide-default-footer
hide-default-header
)
template(slot='items' slot-scope='props')
td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
@@ -71,11 +71,11 @@
.caption Created {{ props.item.createdAt | moment('calendar') }}
v-flex(xs12, xl6)
v-card.radius-7.animated.fadeInUp.wait-p4s
v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
v-card-title.subtitle-1(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
v-data-table.pb-2(
:items='popularPages'
hide-actions
hide-headers
hide-default-footer
hide-default-header
)
template(slot='items' slot-scope='props')
td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
@@ -91,11 +91,12 @@
v-card.dashboard-contribute.animated.fadeInUp.wait-p4s
v-card-text
img(src='/svg/icon-heart-health.svg', alt='Contribute', style='height: 80px;')
.pl-3
.subheading {{$t('admin:contribute.title')}}
.body-2.pt-2 {{$t('admin:dashboard.contributeSubtitle')}}
.body-1 {{$t('admin:dashboard.contributeHelp')}}
v-btn.mx-0.mt-2(:color='$vuetify.dark ? `indigo lighten-3` : `indigo`', outline, small, to='/contribute') {{$t('admin:dashboard.contributeLearnMore')}}
.pl-5
.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')
.caption: strong {{$t('admin:dashboard.contributeLearnMore')}}
</template>
@@ -140,6 +141,7 @@ export default {
.dashboard-card {
display: flex;
width: 100%;
border-radius: 7px;
.v-card__text {
@@ -161,10 +163,10 @@ export default {
.v-card__text {
display: flex;
align-items: center;
color: mc('indigo', '500');
color: mc('indigo', '500') !important;
@at-root .theme--dark & {
color: mc('grey', '300');
color: mc('grey', '300') !important;
}
}
}
@@ -173,7 +175,7 @@ export default {
position: absolute;
right: 0;
top: 12px;
font-size: 120px;
font-size: 120px !important;
opacity: .25;
}

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

@@ -9,61 +9,60 @@
.subheading.grey--text.animated.fadeInLeft {{ $t('admin:general.subtitle') }}
v-spacer
v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
v-icon(left) check
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-form
v-card.wiki-form.animated.fadeInUp
v-card.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:general.siteInfo') }}
v-toolbar-title.subtitle-1 {{ $t('admin:general.siteInfo') }}
v-subheader {{$t('admin:general.general')}}
.px-3.pb-3
v-text-field(
outline
outlined
:label='$t(`admin:general.siteUrl`)'
required
:counter='255'
v-model='config.host'
prepend-icon='label_important'
prepend-icon='mdi-label-variant-outline'
:hint='$t(`admin:general.siteUrlHint`)'
persistent-hint
)
v-text-field.mt-2(
outline
v-text-field.mt-3(
outlined
:label='$t(`admin:general.siteTitle`)'
required
:counter='50'
v-model='config.title'
prepend-icon='public'
prepend-icon='mdi-earth'
:hint='$t(`admin:general.siteTitleHint`)'
persistent-hint
)
v-divider
v-subheader {{$t('admin:general.logo')}} #[v-chip.ml-2(label, color='grey', small, outline) coming soon]
v-subheader {{$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')
.ml-4
v-btn.mx-0(color='teal', depressed, disabled)
v-icon(left) cloud_upload
v-btn.mr-3(color='teal', depressed, disabled)
v-icon(left) mdi-cloud-upload
span {{$t('admin:general.uploadLogo')}}
v-btn(color='teal', depressed, disabled)
v-icon(left) clear
v-icon(left) mdi-close
span {{$t('admin:general.uploadClear')}}
.caption.grey--text {{$t('admin:general.uploadSizeHint', { size: '120x120' })}}
.caption.mt-3.grey--text {{$t('admin:general.uploadSizeHint', { size: '120x120' })}}
.caption.grey--text {{$t('admin:general.uploadTypesHint', { typeList: 'SVG, PNG', lastType: 'JPG' })}}.
v-divider
v-subheader {{$t('admin:general.footerCopyright')}}
.px-3.pb-3
v-text-field(
outline
outlined
:label='$t(`admin:general.companyName`)'
v-model='config.company'
:counter='255'
prepend-icon='business'
prepend-icon='mdi-domain'
persistent-hint
:hint='$t(`admin:general.companyNameHint`)'
)
@@ -71,31 +70,30 @@
v-subheader SEO
.px-3.pb-3
v-text-field(
outline
outlined
:label='$t(`admin:general.siteDescription`)'
:counter='255'
v-model='config.description'
prepend-icon='explore'
prepend-icon='mdi-compass'
:hint='$t(`admin:general.siteDescriptionHint`)'
persistent-hint
)
v-select.mt-2(
outline
v-select.mt-3(
outlined
:label='$t(`admin:general.metaRobots`)'
multiple
:items='metaRobots'
v-model='config.robots'
prepend-icon='explore'
prepend-icon='mdi-compass'
:return-object='false'
:hint='$t(`admin:general.metaRobotsHint`)'
persistent-hint
)
v-flex(lg6 xs12)
v-card.wiki-form.animated.fadeInUp.wait-p4s
v-card.animated.fadeInUp.wait-p4s
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Features
v-toolbar-title.subtitle-1 Features
v-spacer
v-chip(label, color='white', small).primary--text coming soon
v-card-text
@@ -108,11 +106,11 @@
disabled
)
v-text-field.mt-3(
outline
outlined
label='TinyPNG API Key'
:counter='255'
v-model='config.description'
prepend-icon='subdirectory_arrow_right'
prepend-icon='mdi-subdirectory-arrow-right'
hint='Get your API key at https://tinypng.com/developers'
persistent-hint
disabled

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

@@ -29,25 +29,25 @@
v-btn.is-icon(slot='activator', flat, outline, color='primary')
v-icon more_horiz
v-list(dense)
v-list-tile(@click='comingSoon')
v-list-tile-avatar
v-list-item(@click='comingSoon')
v-list-item-avatar
v-icon keyboard_capslock
v-list-tile-title Load Preset
v-list-item-title Load Preset
v-divider
v-list-tile(@click='comingSoon')
v-list-tile-avatar
v-list-item(@click='comingSoon')
v-list-item-avatar
v-icon publish
v-list-tile-title Save As Preset
v-list-item-title Save As Preset
v-divider
v-list-tile(@click='comingSoon')
v-list-tile-avatar
v-list-item(@click='comingSoon')
v-list-item-avatar
v-icon cloud_upload
v-list-tile-title Import Rules
v-list-item-title Import Rules
v-divider
v-list-tile(@click='comingSoon')
v-list-tile-avatar
v-list-item(@click='comingSoon')
v-list-item-avatar
v-icon cloud_download
v-list-tile-title Export Rules
v-list-item-title Export Rules
v-card-text(:class='$vuetify.dark ? `grey darken-4-l5` : `white`')
.rules
.caption(v-if='group.pageRules.length === 0')
@@ -81,15 +81,15 @@
v-chip.white--text.ml-0(v-if='index <= 1', small, label, :color='rule.deny ? `red` : `green`').caption {{ item.value }}
v-chip.white--text.ml-0(v-if='index === 2', small, label, :color='rule.deny ? `red lighten-2` : `green lighten-2`').caption + {{ rule.roles.length - 2 }} more
template(slot='item', slot-scope='props')
v-list-tile-action(style='min-width: 30px;')
v-list-item-action(style='min-width: 30px;')
v-checkbox(
v-model='props.tile.props.value'
hide-details
color='primary'
)
v-icon.mr-2(:color='rule.deny ? `red` : `green`') {{props.item.icon}}
v-list-tile-content
v-list-tile-title.body-2 {{props.item.text}}
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}}
//- Match
@@ -105,10 +105,10 @@
template(slot='selection', slot-scope='{ item, index }')
.body-1 {{item.text}}
template(slot='item', slot-scope='data')
v-list-tile-avatar
v-list-item-avatar
v-avatar.white--text.radius-4(color='blue', size='30', tile) {{ data.item.icon }}
v-list-tile-content
v-list-tile-title(v-html='data.item.text')
v-list-item-content
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`'
@@ -125,8 +125,8 @@
template(slot='selection', slot-scope='{ item, index }')
v-chip.white--text.ml-0(v-if='rule.locales.length === 1', small, label, :color='rule.deny ? `red` : `green`').caption {{ item.value.toUpperCase() }}
v-chip.white--text.ml-0(v-else-if='index === 0', small, label, :color='rule.deny ? `red` : `green`').caption {{ rule.locales.length }} locales
v-list-tile(slot='prepend-item', @click='rule.locales = []')
v-list-tile-action(style='min-width: 30px;')
v-list-item(slot='prepend-item', @click='rule.locales = []')
v-list-item-action(style='min-width: 30px;')
v-checkbox(
:input-value='rule.locales.length === 0'
hide-details
@@ -134,19 +134,19 @@
readonly
)
v-icon.mr-2(:color='rule.deny ? `red` : `green`') public
v-list-tile-content
v-list-tile-title.body-2 Any Locale
v-list-item-content
v-list-item-title.body-2 Any Locale
v-divider(slot='prepend-item')
template(slot='item', slot-scope='props')
v-list-tile-action(style='min-width: 30px;')
v-list-item-action(style='min-width: 30px;')
v-checkbox(
v-model='props.tile.props.value'
hide-details
color='primary'
)
v-icon.mr-2(:color='rule.deny ? `red` : `green`') language
v-list-tile-content
v-list-tile-title.body-2 {{props.item.text}}
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()}}
//- Path

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

@@ -30,16 +30,16 @@
v-menu(bottom, right, min-width='200')
v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
v-list
v-list-tile(:to='`/users/` + props.item.id')
v-list-tile-action: v-icon(color='primary') person
v-list-tile-content
v-list-tile-title View User Profile
v-list-item(:to='`/users/` + props.item.id')
v-list-item-action: v-icon(color='primary') person
v-list-item-content
v-list-item-title View User Profile
template(v-if='props.item.id !== 2')
v-divider
v-list-tile(@click='unassignUser(props.item.id)')
v-list-tile-action: v-icon(color='orange') highlight_off
v-list-tile-content
v-list-tile-title Unassign
v-list-item(@click='unassignUser(props.item.id)')
v-list-item-action: v-icon(color='orange') highlight_off
v-list-item-content
v-list-item-title Unassign
template(slot='no-data')
v-alert.ma-3(icon='warning', :value='true', outline) No users to display.
.text-xs-center.py-2(v-if='group.users.length > 15')

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

@@ -8,19 +8,19 @@
.headline.blue--text.text--darken-2.animated.fadeInLeft Groups
.subheading.grey--text.animated.fadeInLeft.wait-p4s Manage groups and their permissions
v-spacer
v-btn.animated.fadeInDown.wait-p2s(color='grey', outline, @click='refresh', large)
v-icon refresh
v-btn.animated.fadeInDown.wait-p2s.mr-3(color='grey', outlined, @click='refresh', large)
v-icon mdi-refresh
v-dialog(v-model='newGroupDialog', max-width='500')
v-btn.animated.fadeInDown(color='primary', depressed, slot='activator', large)
v-icon(left) add
span New Group
v-card.wiki-form
template(v-slot:activator='{ on }')
v-btn.animated.fadeInDown(color='primary', depressed, v-on='on', large)
v-icon(left) mdi-plus
span New Group
v-card
.dialog-header.is-short New Group
v-card-text
v-text-field.md2(
outline
background-color='grey lighten-3'
prepend-icon='people'
outlined
prepend-icon='mdi-account-group'
v-model='newGroupName'
label='Group Name'
counter='255'
@@ -30,7 +30,7 @@
)
v-card-chin
v-spacer
v-btn(flat, @click='newGroupDialog = false') Cancel
v-btn(text, @click='newGroupDialog = false') Cancel
v-btn(color='primary', @click='createGroup') Create
v-card.mt-3.animated.fadeInUp
v-data-table(

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

@@ -9,20 +9,19 @@
.subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:locale.subtitle') }}
v-spacer
v-btn.animated.fadeInDown(color='success', depressed, @click='save', large, :loading='loading')
v-icon(left) check
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-card.wiki-form.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:locale.settings') }}
v-toolbar-title.subtitle-1 {{ $t('admin:locale.settings') }}
v-card-text
v-select(
outline
outlined
:items='installedLocales'
prepend-icon='language'
prepend-icon='mdi-web'
v-model='selectedLocale'
item-value='code'
item-text='nativeName'
@@ -32,13 +31,13 @@
)
template(slot='item', slot-scope='data')
template(v-if='typeof data.item !== "object"')
v-list-tile-content(v-text='data.item')
v-list-item-content(v-text='data.item')
template(v-else)
v-list-tile-avatar
v-list-item-avatar
v-avatar.blue.white--text(tile, size='40', v-html='data.item.code.toUpperCase()')
v-list-tile-content
v-list-tile-title(v-html='data.item.name')
v-list-tile-sub-title(v-html='data.item.nativeName')
v-list-item-content
v-list-item-title(v-html='data.item.name')
v-list-item-sub-title(v-html='data.item.nativeName')
v-divider.mt-3
v-switch(
v-model='autoUpdate'
@@ -50,8 +49,7 @@
v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:locale.namespacing') }}
v-toolbar-title.subtitle-1 {{ $t('admin:locale.namespacing') }}
v-card-text
v-switch(
v-model='namespacing'
@@ -61,19 +59,19 @@
:hint='$t("admin:locale.namespaces.hint")'
)
v-alert.mt-3(
outline
outlined
color='orange'
:value='true'
icon='warning'
icon='mdi-alert'
)
span {{ $t('admin:locale.namespacingPrefixWarning.title', { langCode: selectedLocale }) }}
.caption.grey--text {{ $t('admin:locale.namespacingPrefixWarning.subtitle') }}
v-divider.mt-3.mb-4
v-select(
outline
outlined
:disabled='!namespacing'
:items='installedLocales'
prepend-icon='language'
prepend-icon='mdi-web'
multiple
chips
deletable-chips
@@ -87,52 +85,47 @@
)
template(slot='item', slot-scope='data')
template(v-if='typeof data.item !== "object"')
v-list-tile-content(v-text='data.item')
v-list-item-content(v-text='data.item')
template(v-else)
v-list-tile-avatar
v-list-item-avatar
v-avatar.blue.white--text(tile, size='40', v-html='data.item.code.toUpperCase()')
v-list-tile-content
v-list-tile-title(v-html='data.item.name')
v-list-tile-sub-title(v-html='data.item.nativeName')
v-list-tile-action
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-action
v-checkbox(:input-value='data.tile.props.value', color='primary', value)
v-flex(lg6 xs12)
v-card.animated.fadeInUp.wait-p4s
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:locale.downloadTitle') }}
v-toolbar-title.subtitle-1 {{ $t('admin:locale.downloadTitle') }}
v-data-table(
:headers='headers',
:items='locales',
hide-actions,
hide-default-footer,
item-key='code',
:rows-per-page-items='[-1]'
)
template(v-slot:items='lc')
td
v-chip.white--text(label, color='teal', small) {{lc.item.code}}
td
strong {{lc.item.name}}
td
span {{ lc.item.nativeName }}
td.text-xs-center
v-icon(v-if='lc.item.isRTL') check
td
.d-flex.align-center.pl-4
.caption.mr-2(:class='lc.item.availability <= 33 ? `red--text` : (lc.item.availability <= 66) ? `orange--text` : `green--text`') {{lc.item.availability}}%
v-progress-circular(:value='lc.item.availability', width='2', size='20', :color='lc.item.availability <= 33 ? `red` : (lc.item.availability <= 66) ? `orange` : `green`')
td.text-xs-center
v-progress-circular(v-if='lc.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
v-btn(v-else-if='lc.item.isInstalled && lc.item.installDate < lc.item.updatedAt', icon, @click='download(lc.item)')
v-icon.blue--text cached
v-btn(v-else-if='lc.item.isInstalled', icon, @click='download(lc.item)')
v-icon.green--text check
v-btn(v-else, icon, @click='download(lc.item)')
v-icon.grey--text cloud_download
:items-per-page='1000'
)
template(v-slot:item.code='{ item }')
v-chip.white--text(label, color='teal', small) {{item.code}}
template(v-slot:item.name='{ item }')
strong {{item.name}}
template(v-slot:item.isRTL='{ item }')
v-icon(v-if='item.isRTL') mdi-check
template(v-slot:item.availability='{ item }')
.d-flex.align-center.pl-4
v-progress-circular(:value='item.availability', width='2', size='20', :color='item.availability <= 33 ? `red` : (item.availability <= 66) ? `orange` : `green`')
.caption.ml-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}%
template(v-slot:item.isInstalled='{ item }')
v-progress-circular(v-if='item.isDownloading', indeterminate, color='blue', size='20', :width='2')
v-btn(v-else-if='item.isInstalled && item.installDate < item.updatedAt', icon, @click='download(item)')
v-icon.blue--text mdi-cached
v-btn(v-else-if='item.isInstalled', icon, @click='download(item)')
v-icon.green--text mdi-check
v-btn(v-else, icon, small, @click='download(item)')
v-icon.grey--text mdi-cloud-download
v-card.wiki-form.mt-3.animated.fadeInUp.wait-p5s
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:locale.sideload') }}
v-toolbar-title.subtitle-1 {{ $t('admin:locale.sideload') }}
v-spacer
v-chip(label, color='white', small).teal--text coming soon
v-card-text
@@ -170,7 +163,7 @@ export default {
text: this.$t('admin:locale.code'),
align: 'left',
value: 'code',
width: 10
width: 90
},
{
text: this.$t('admin:locale.name'),
@@ -193,12 +186,13 @@ export default {
text: this.$t('admin:locale.availability'),
align: 'center',
value: 'availability',
sortable: false,
width: 100
},
{
text: this.$t('admin:locale.download'),
align: 'center',
value: 'code',
value: 'isInstalled',
sortable: false,
width: 100
}

20
client/components/admin/admin-mail.vue
View File

@@ -22,7 +22,7 @@
v-subheader {{ $t('admin:mail.sender') }}
.px-3.pb-3
v-text-field(
outline
outlined
v-model='config.senderName'
:label='$t(`admin:mail.senderName`)'
required
@@ -30,7 +30,7 @@
prepend-icon='person'
)
v-text-field(
outline
outlined
v-model='config.senderEmail'
:label='$t(`admin:mail.senderEmail`)'
required
@@ -41,7 +41,7 @@
v-subheader {{ $t('admin:mail.smtp') }}
.px-3.pb-3
v-text-field(
outline
outlined
v-model='config.host'
:label='$t(`admin:mail.smtpHost`)'
required
@@ -49,7 +49,7 @@
prepend-icon='memory'
)
v-text-field(
outline
outlined
v-model='config.port'
:label='$t(`admin:mail.smtpPort`)'
required
@@ -67,7 +67,7 @@
prepend-icon='vpn_lock'
)
v-text-field.mt-3(
outline
outlined
v-model='config.user'
:label='$t(`admin:mail.smtpUser`)'
required
@@ -75,7 +75,7 @@
prepend-icon='lock_outline'
)
v-text-field(
outline
outlined
v-model='config.pass'
:label='$t(`admin:mail.smtpPwd`)'
required
@@ -98,7 +98,7 @@
prepend-icon='vpn_key'
)
v-text-field(
outline
outlined
v-model='config.dkimDomainName'
:label='$t(`admin:mail.dkimDomainName`)'
:counter='255'
@@ -106,7 +106,7 @@
:disabled='!config.useDKIM'
)
v-text-field(
outline
outlined
v-model='config.dkimKeySelector'
:label='$t(`admin:mail.dkimKeySelector`)'
:counter='255'
@@ -114,7 +114,7 @@
:disabled='!config.useDKIM'
)
v-text-field(
outline
outlined
v-model='config.dkimPrivateKey'
:label='$t(`admin:mail.dkimPrivateKey`)'
prepend-icon='vpn_key'
@@ -131,7 +131,7 @@
.pa-3
.body-2.grey--text.text--darken-2 {{ $t('admin:mail.testHint') }}
v-text-field.mt-3(
outline
outlined
v-model='testEmail'
:label='$t(`admin:mail.testRecipient`)'
:counter='255'

95
client/components/admin/admin-navigation.vue
View File

@@ -8,30 +8,30 @@
.headline.primary--text.animated.fadeInLeft {{$t('navigation.title')}}
.subheading.grey--text.animated.fadeInLeft.wait-p4s {{$t('navigation.subtitle')}}
v-spacer
v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
v-icon refresh
v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
v-icon(left) check
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-container.pa-0.mt-3(fluid, grid-list-lg)
v-layout(row)
v-flex(style='flex: 0 0 350px;')
v-card.animated.fadeInUp
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-avatar: v-icon(color='grey') explore_off
v-list-tile-content
v-list.py-2(dense, nav, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"')
v-list-item(v-if='navTree.length < 1')
v-list-item-avatar(size='24'): v-icon(color='grey') explore_off
v-list-item-content
.caption.grey--text {{$t('navigation.emptyList')}}
draggable(v-model='navTree')
template(v-for='navItem in navTree')
v-list-tile(
v-list-item(
v-if='navItem.kind === "link"'
:key='navItem.id'
:class='(navItem === current) ? "blue" : ""'
@click='selectItem(navItem)'
)
v-list-tile-avatar: v-icon {{navItem.icon}}
v-list-tile-title {{navItem.label}}
v-list-item-avatar(size='24'): v-icon {{navItem.icon}}
v-list-item-title {{navItem.label}}
.py-2.clickable(
v-else-if='navItem.kind === "divider"'
:key='navItem.id'
@@ -47,58 +47,56 @@
) {{navItem.label}}
v-card-chin
v-menu(offset-y, bottom, min-width='200px', style='flex: 1 1;')
v-btn(slot='activator', color='primary', depressed, block)
v-icon(left) add
span {{$t('common:actions.add')}}
template(v-slot:activator='{ on }')
v-btn(v-on='on', color='primary', depressed, block)
v-icon(left) mdi-plus
span {{$t('common:actions.add')}}
v-list
v-list-tile(@click='addItem("link")')
v-list-tile-avatar: v-icon link
v-list-tile-title {{$t('navigation.link')}}
v-list-tile(@click='addItem("header")')
v-list-tile-avatar: v-icon title
v-list-tile-title {{$t('navigation.header')}}
v-list-tile(@click='addItem("divider")')
v-list-tile-avatar: v-icon power_input
v-list-tile-title {{$t('navigation.divider')}}
v-list-item(@click='addItem("link")')
v-list-item-avatar(size='24'): v-icon mdi-link
v-list-item-title {{$t('navigation.link')}}
v-list-item(@click='addItem("header")')
v-list-item-avatar(size='24'): v-icon mdi-format-title
v-list-item-title {{$t('navigation.header')}}
v-list-item(@click='addItem("divider")')
v-list-item-avatar(size='24'): v-icon mdi-minus
v-list-item-title {{$t('navigation.divider')}}
v-flex.animated.fadeInUp.wait-p2s
v-card.wiki-form(v-if='current.kind === "link"')
v-toolbar(dense, color='blue', flat, dark)
.subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}}
v-toolbar(dense, color='blue', flat, dark).subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.link') })}}
v-card-text
v-text-field(
outline
outlined
:label='$t("navigation.label")'
prepend-icon='title'
prepend-icon='mdi-format-title'
v-model='current.label'
)
v-text-field(
outline
outlined
:label='$t("navigation.icon")'
prepend-icon='casino'
prepend-icon='mdi-dice-5'
v-model='current.icon'
hide-details
)
.caption.pt-3.pl-5 The default icon set is #[strong Material Icons]. In order to use another icon set, you must first select it in the Theme administration section.
.caption.pt-3.pl-5 #[strong Material Icons] #[em (default)]
.caption.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Icons Reference] for the list of all possible values.
.caption.pt-3.pl-5 The default icon set is #[strong Material Design Icons]. In order to use another icon set, you must first select it in the Theme administration section.
.caption.pt-3.pl-5: strong Material Design Icons
.caption.pl-5 Refer to the #[a(href='https://cdn.materialdesignicons.com/3.7.95/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home]
.caption.pl-5 Refer to the #[a(href='https://materialdesignicons.com/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home]
.caption.pt-3.pl-5: strong Font Awesome 5
.caption.pl-5 Refer to the #[a(href='https://fontawesome.com/icons?d=gallery&m=free', target='_blank') Font Awesome 5 Reference] for the list of all possible values. You must prefix all values with #[code fas fa-], e.g. #[code fas fa-home]
.caption.pt-3.pl-5: strong Font Awesome 4
.caption.pl-5 Refer to the #[a(href='https://fontawesome.com/v4.7.0/icons/', target='_blank') Font Awesome 4 Reference] for the list of all possible values. You must prefix all values with #[code fa fa-], e.g. #[code fa fa-home]
v-select.mt-4(
outline
outlined
:label='$t("navigation.targetType")'
prepend-icon='near_me'
prepend-icon='mdi-near-me'
:items='navTypes'
v-model='current.targetType'
)
v-text-field(
v-if='current.targetType === `external`'
outline
outlined
:label='$t("navigation.target")'
prepend-icon='near_me'
prepend-icon='mdi-near-me'
v-model='current.target'
)
v-btn(
@@ -108,11 +106,11 @@
disabled
@click='selectPage'
)
v-icon(left) search
v-icon(left) mdi-search
span Select Page...
v-text-field(
v-else-if='current.targetType === `search`'
outline
outlined
:label='$t("navigation.navType.searchQuery")'
prepend-icon='search'
v-model='current.target'
@@ -120,28 +118,27 @@
v-card-chin
v-spacer
v-btn(color='red', outline, @click='deleteItem(current)')
v-icon(left) delete
v-btn.px-5(color='red', outlined, @click='deleteItem(current)')
v-icon(left) mdi-delete
span {{$t('navigation.delete', { kind: $t('navigation.link') })}}
v-card(v-else-if='current.kind === "header"')
v-toolbar(dense, color='blue', flat, dark)
.subheading {{$t('navigation.edit', { kind: $t('navigation.header') })}}
v-card-text
v-text-field(
outline
background-color='grey lighten-2'
outlined
:label='$t("navigation.label")'
prepend-icon='title'
prepend-icon='mdi-format-title'
v-model='current.label'
)
v-card-chin
v-spacer
v-btn(color='red', outline, @click='deleteItem(current)')
v-icon(left) delete
v-btn.px-5(color='red', outlined, @click='deleteItem(current)')
v-icon(left) mdi-delete
span {{$t('navigation.delete', { kind: $t('navigation.header') })}}
div(v-else-if='current.kind === "divider"')
v-btn.mt-0(color='red', outline, @click='deleteItem(current)')
v-icon(left) delete
v-btn.mt-0.px-5(color='red', outlined, @click='deleteItem(current)')
v-icon(left) mdi-delete
span {{$t('navigation.delete', { kind: $t('navigation.divider') })}}
v-card(v-else)
v-card-text.grey--text(v-if='navTree.length > 0') {{$t('navigation.noSelectionText')}}
@@ -172,7 +169,7 @@ export default {
return [
// { text: this.$t('navigation.navType.external'), value: 'external' },
{ text: this.$t('navigation.navType.home'), value: 'home' },
{ text: 'Internal Path / External Link', value: 'external' },
{ text: 'Internal Path / External Link', value: 'external' }
// { text: this.$t('navigation.navType.page'), value: 'page' }
// { text: this.$t('navigation.navType.searchQuery'), value: 'search' }
]
@@ -189,7 +186,7 @@ export default {
newItem = {
...newItem,
label: this.$t('navigation.untitled', { kind: this.$t(`navigation.link`) }),
icon: 'chevron_right',
icon: 'mdi-chevron-right',
targetType: 'home',
target: '/'
}

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

@@ -54,41 +54,41 @@
v-icon.mr-2 subject
span Properties
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-content
v-list-tile-title.caption.grey--text Title
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.title }}
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-divider
v-list-tile
v-list-tile-content
v-list-tile-title.caption.grey--text Description
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.description || '-' }}
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-divider
v-list-tile
v-list-tile-content
v-list-tile-title.caption.grey--text Locale
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.locale }}
v-list-tile-action
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-action
v-btn(icon)
v-icon(color='grey') edit
v-divider
v-list-tile
v-list-tile-content
v-list-tile-title.caption.grey--text Path
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.path }}
v-list-tile-action
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-action
v-btn(icon)
v-icon(color='grey') edit
v-divider
v-list-tile
v-list-tile-content
v-list-tile-title.caption.grey--text Editor
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.editor || '?' }}
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-divider
v-list-tile
v-list-tile-content
v-list-tile-title.caption.grey--text Content Type
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.contentType || '?' }}
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-toolbar.elevation-2.mt-3.animated.fadeInUp.wait-p4s(color='white', dense)
v-spacer
@@ -117,25 +117,25 @@
v-icon.mr-2 people
span Users
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-btn(icon, :to='`/users/` + page.creatorId')
v-icon(color='grey') person
v-list-tile-content
v-list-tile-title.caption.grey--text Creator
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})]
v-list-tile-action
v-list-tile-action-text {{ page.createdAt | moment('calendar') }}
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-action
v-list-item-action-text {{ page.createdAt | moment('calendar') }}
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-btn(icon, :to='`/users/` + page.authorId')
v-icon(color='grey') person
v-list-tile-content
v-list-tile-title.caption.grey--text Last Editor
v-list-tile-sub-title.body-2.grey--text.text--darken-3 {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
v-list-tile-action
v-list-tile-action-text {{ page.updatedAt | moment('calendar') }}
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-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

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

@@ -8,37 +8,34 @@
.headline.blue--text.text--darken-2.animated.fadeInLeft Pages
.subheading.grey--text.animated.fadeInLeft.wait-p2s Manage pages
v-spacer
v-btn.animated.fadeInDown.wait-p1s(color='grey', outline, @click='refresh', large)
v-icon.grey--text refresh
v-btn.animated.fadeInDown(color='primary', outline, large, @click='recyclebin', disabled)
v-icon(left) delete_outline
v-btn.animated.fadeInDown.wait-p1s(color='grey', outlined, @click='refresh', large)
v-icon.grey--text mdi-refresh
v-btn.animated.fadeInDown.mx-3(color='primary', outlined, large, @click='recyclebin', disabled)
v-icon(left) mdi-delete-outline
span Recycle Bin
v-btn.animated.fadeInDown(color='primary', depressed, large, @click='newpage', disabled)
v-icon(left) add
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-spacer
v-text-field(
outline
outlined
v-model='search'
append-icon='search'
prepend-inner-icon='mdi-file-search-outline'
label='Search Pages...'
single-line
hide-details
)
v-select.ml-2(
outline
outlined
hide-details
single-line
label='Locale'
:items='langs'
v-model='selectedLang'
)
v-select.ml-2(
outline
outlined
hide-details
single-line
label='Publish State'
:items='states'
v-model='selectedState'

12
client/components/admin/admin-rendering.vue
View File

@@ -43,18 +43,18 @@
v-spacer
v-list.py-0(two-line, dense)
template(v-for='(rdr, n) in core.children')
v-list-tile(
v-list-item(
avatar
:key='rdr.key'
@click='selectRenderer(rdr.key)'
:class='currentRenderer.key === rdr.key ? (darkMode ? `grey darken-4-l4` : `blue lighten-5`) : ``'
)
v-list-tile-avatar
v-list-item-avatar
v-icon(:color='currentRenderer.key === rdr.key ? "primary" : "grey"') {{rdr.icon}}
v-list-tile-content
v-list-tile-title {{rdr.title}}
v-list-tile-sub-title {{rdr.description}}
v-list-tile-avatar
v-list-item-content
v-list-item-title {{rdr.title}}
v-list-item-sub-title {{rdr.description}}
v-list-item-avatar
status-indicator(v-if='rdr.isEnabled', positive, pulse)
status-indicator(v-else, negative, pulse)
v-divider.my-0(v-if='n < core.children.length - 1')

12
client/components/admin/admin-search.vue
View File

@@ -23,15 +23,15 @@
.subheading {{$t('admin:search.searchEngine')}}
v-list.py-0(two-line, dense)
template(v-for='(eng, idx) in engines')
v-list-tile(:key='eng.key', @click='selectedEngine = eng.key', :disabled='!eng.isAvailable')
v-list-tile-avatar
v-list-item(:key='eng.key', @click='selectedEngine = eng.key', :disabled='!eng.isAvailable')
v-list-item-avatar
v-icon(color='grey', v-if='!eng.isAvailable') cancel
v-icon(color='primary', v-else-if='eng.key === selectedEngine') radio_button_checked
v-icon(color='grey', v-else) radio_button_unchecked
v-list-tile-content
v-list-tile-title.body-2(:class='!eng.isAvailable ? `grey--text` : (selectedEngine === eng.key ? `primary--text` : ``)') {{ eng.title }}
v-list-tile-sub-title.caption(:class='!eng.isAvailable ? `grey--text text--lighten-1` : (selectedEngine === eng.key ? `blue--text ` : ``)') {{ eng.description }}
v-list-tile-avatar(v-if='selectedEngine === eng.key')
v-list-item-content
v-list-item-title.body-2(:class='!eng.isAvailable ? `grey--text` : (selectedEngine === eng.key ? `primary--text` : ``)') {{ eng.title }}
v-list-item-sub-title.caption(:class='!eng.isAvailable ? `grey--text text--lighten-1` : (selectedEngine === eng.key ? `blue--text ` : ``)') {{ eng.description }}
v-list-item-avatar(v-if='selectedEngine === eng.key')
v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
v-divider(v-if='idx < engines.length - 1')

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

@@ -20,15 +20,15 @@
.subheading {{$t('admin:storage.targets')}}
v-list(two-line, dense).py-0
template(v-for='(tgt, idx) in targets')
v-list-tile(:key='tgt.key', @click='selectedTarget = tgt.key', :disabled='!tgt.isAvailable')
v-list-tile-avatar
v-list-item(:key='tgt.key', @click='selectedTarget = tgt.key', :disabled='!tgt.isAvailable')
v-list-item-avatar
v-icon(color='grey', v-if='!tgt.isAvailable') indeterminate_check_box
v-icon(color='primary', v-else-if='tgt.isEnabled', v-ripple, @click='tgt.key !== `local` && (tgt.isEnabled = false)') check_box
v-icon(color='grey', v-else, v-ripple, @click='tgt.isEnabled = true') check_box_outline_blank
v-list-tile-content
v-list-tile-title.body-2(:class='!tgt.isAvailable ? `grey--text` : (selectedTarget === tgt.key ? `primary--text` : ``)') {{ tgt.title }}
v-list-tile-sub-title.caption(:class='!tgt.isAvailable ? `grey--text text--lighten-1` : (selectedTarget === tgt.key ? `blue--text ` : ``)') {{ tgt.description }}
v-list-tile-avatar(v-if='selectedTarget === tgt.key')
v-list-item-content
v-list-item-title.body-2(:class='!tgt.isAvailable ? `grey--text` : (selectedTarget === tgt.key ? `primary--text` : ``)') {{ tgt.title }}
v-list-item-sub-title.caption(:class='!tgt.isAvailable ? `grey--text text--lighten-1` : (selectedTarget === tgt.key ? `blue--text ` : ``)') {{ tgt.description }}
v-list-item-avatar(v-if='selectedTarget === tgt.key')
v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
v-divider(v-if='idx < targets.length - 1')
@@ -43,28 +43,28 @@
)
v-list.py-0(two-line, dense)
template(v-for='(tgt, n) in status')
v-list-tile(:key='tgt.key')
v-list-item(:key='tgt.key')
template(v-if='tgt.status === `pending`')
v-list-tile-avatar(color='purple')
v-list-item-avatar(color='purple')
v-icon(color='white') schedule
v-list-tile-content
v-list-tile-title.body-2 {{tgt.title}}
v-list-tile-sub-title.purple--text.caption {{tgt.status}}
v-list-tile-action
v-list-item-content
v-list-item-title.body-2 {{tgt.title}}
v-list-item-sub-title.purple--text.caption {{tgt.status}}
v-list-item-action
v-progress-circular(indeterminate, :size='20', :width='2', color='purple')
template(v-else-if='tgt.status === `operational`')
v-list-tile-avatar(color='green')
v-list-item-avatar(color='green')
v-icon(color='white') check_circle
v-list-tile-content
v-list-tile-title.body-2 {{tgt.title}}
v-list-tile-sub-title.green--text.caption {{$t('admin:storage.lastSync', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}}
v-list-item-content
v-list-item-title.body-2 {{tgt.title}}
v-list-item-sub-title.green--text.caption {{$t('admin:storage.lastSync', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}}
template(v-else)
v-list-tile-avatar(color='red')
v-list-item-avatar(color='red')
v-icon(color='white') highlight_off
v-list-tile-content
v-list-tile-title.body-2 {{tgt.title}}
v-list-tile-sub-title.red--text.caption {{$t('admin:storage.lastSyncAttempt', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}}
v-list-tile-action
v-list-item-content
v-list-item-title.body-2 {{tgt.title}}
v-list-item-sub-title.red--text.caption {{$t('admin:storage.lastSyncAttempt', { time: $options.filters.moment(tgt.lastAttempt, 'from') })}}
v-list-item-action
v-menu
v-btn(slot='activator', icon)
v-icon(color='red') info
@@ -73,7 +73,7 @@
v-card-text {{tgt.message}}
v-divider(v-if='n < status.length - 1')
v-list-tile(v-if='status.length < 1')
v-list-item(v-if='status.length < 1')
em {{$t('admin:storage.noTarget')}}
v-flex(xs12, lg9)

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

@@ -13,83 +13,83 @@
v-btn.animated.fadeInLeft.wait-p2s.btn-animate-rotate(fab, absolute, right, top, small, light, @click='refresh'): v-icon refresh
v-list(two-line, dense)
v-subheader Wiki.js
v-list-tile(avatar)
v-list-tile-avatar
v-list-item(avatar)
v-list-item-avatar
v-icon.blue.white--text system_update_alt
v-list-tile-content
v-list-tile-title {{ $t('admin:system.currentVersion') }}
v-list-tile-sub-title {{ info.currentVersion }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item-content
v-list-item-title {{ $t('admin:system.currentVersion') }}
v-list-item-sub-title {{ info.currentVersion }}
v-list-item(avatar)
v-list-item-avatar
v-icon.blue.white--text open_in_browser
v-list-tile-content
v-list-tile-title {{ $t('admin:system.latestVersion') }}
v-list-tile-sub-title {{ info.latestVersion }}
v-list-tile-action
v-list-tile-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }}
v-list-item-content
v-list-item-title {{ $t('admin:system.latestVersion') }}
v-list-item-sub-title {{ info.latestVersion }}
v-list-item-action
v-list-item-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }}
v-divider.mt-3
v-subheader {{ $t('admin:system.hostInfo') }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item(avatar)
v-list-item-avatar
v-avatar.blue-grey(size='40')
img(:src='`/svg/icon-` + platformLogo + `-logo.svg`', alt='Platform', style='width: 24px;')
v-list-tile-content
v-list-tile-title {{ $t('admin:system.os') }}
v-list-tile-sub-title {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item-content
v-list-item-title {{ $t('admin:system.os') }}
v-list-item-sub-title {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }}
v-list-item(avatar)
v-list-item-avatar
v-icon.blue-grey.white--text computer
v-list-tile-content
v-list-tile-title {{ $t('admin:system.hostname') }}
v-list-tile-sub-title {{ info.hostname }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item-content
v-list-item-title {{ $t('admin:system.hostname') }}
v-list-item-sub-title {{ info.hostname }}
v-list-item(avatar)
v-list-item-avatar
v-icon.blue-grey.white--text nfc
v-list-tile-content
v-list-tile-title {{ $t('admin:system.cpuCores') }}
v-list-tile-sub-title {{ info.cpuCores }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item-content
v-list-item-title {{ $t('admin:system.cpuCores') }}
v-list-item-sub-title {{ info.cpuCores }}
v-list-item(avatar)
v-list-item-avatar
v-icon.blue-grey.white--text memory
v-list-tile-content
v-list-tile-title {{ $t('admin:system.totalRAM') }}
v-list-tile-sub-title {{ info.ramTotal }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item-content
v-list-item-title {{ $t('admin:system.totalRAM') }}
v-list-item-sub-title {{ info.ramTotal }}
v-list-item(avatar)
v-list-item-avatar
v-icon.blue-grey.white--text last_page
v-list-tile-content
v-list-tile-title {{ $t('admin:system.workingDirectory') }}
v-list-tile-sub-title {{ info.workingDirectory }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item-content
v-list-item-title {{ $t('admin:system.workingDirectory') }}
v-list-item-sub-title {{ info.workingDirectory }}
v-list-item(avatar)
v-list-item-avatar
v-icon.blue-grey.white--text settings
v-list-tile-content
v-list-tile-title {{ $t('admin:system.configFile') }}
v-list-tile-sub-title {{ info.configFile }}
v-list-item-content
v-list-item-title {{ $t('admin:system.configFile') }}
v-list-item-sub-title {{ info.configFile }}
v-flex(lg6 xs12)
v-card.pb-3.animated.fadeInUp.wait-p4s
v-list(dense)
v-subheader Node.js
v-list-tile(avatar)
v-list-tile-avatar
v-list-item(avatar)
v-list-item-avatar
v-avatar.light-green(size='40')
icon-node-js(fillColor='#FFFFFF')
v-list-tile-content
v-list-tile-title {{ info.nodeVersion }}
v-list-item-content
v-list-item-title {{ info.nodeVersion }}
v-divider.mt-3
v-subheader {{ info.dbType }}
v-list-tile(avatar)
v-list-tile-avatar
v-list-item(avatar)
v-list-item-avatar
v-avatar.indigo.darken-1(size='40')
icon-database(fillColor='#FFFFFF')
v-list-tile-content
v-list-tile-title(v-html='dbVersion')
v-list-tile-sub-title {{ info.dbHost }}
v-list-item-content
v-list-item-title(v-html='dbVersion')
v-list-item-sub-title {{ info.dbHost }}
v-alert.mt-3(:value='isDbLimited', color='deep-orange', icon='warning') {{ $t('admin:system.dbPartialSupport') }}
</template>

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

@@ -9,37 +9,34 @@
.subheading.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:theme.subtitle')}}
v-spacer
v-btn.animated.fadeInRight(color='success', depressed, @click='save', large, :loading='loading')
v-icon(left) check
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-card.wiki-form.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading {{$t('admin:theme.title')}}
v-toolbar-title.subtitle-1 {{$t('admin:theme.title')}}
v-card-text
v-select(
:items='themes'
outline
background-color='grey lighten-2'
prepend-icon='palette'
outlined
prepend-icon='mdi-palette'
v-model='config.theme'
:label='$t(`admin:theme.siteTheme`)'
persistent-hint
:hint='$t(`admin:theme.siteThemeHint`)'
)
template(slot='item', slot-scope='data')
v-list-tile-avatar
v-list-item-avatar
v-icon.blue--text(dark) filter_frames
v-list-tile-content
v-list-tile-title(v-html='data.item.text')
v-list-tile-sub-title(v-html='data.item.author')
v-list-item-content
v-list-item-title(v-html='data.item.text')
v-list-item-sub-title(v-html='data.item.author')
v-select.mt-3(
:items='iconsets'
outline
background-color='grey lighten-2'
prepend-icon='pets'
outlined
prepend-icon='mdi-paw'
v-model='config.iconset'
:label='$t(`admin:theme.iconset`)'
persistent-hint
@@ -56,14 +53,12 @@
v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading {{$t(`admin:theme.codeInjection`)}}
v-toolbar-title.subtitle-1 {{$t(`admin:theme.codeInjection`)}}
v-card-text
v-textarea(
v-model='config.injectCSS'
:label='$t(`admin:theme.cssOverride`)'
outline
background-color='grey lighten-1'
outlined
color='primary'
persistent-hint
:hint='$t(`admin:theme.cssOverrideHint`)'
@@ -75,8 +70,7 @@
v-textarea.mt-3(
v-model='config.injectHead'
:label='$t(`admin:theme.headHtmlInjection`)'
outline
background-color='grey lighten-1'
outlined
color='primary'
persistent-hint
:hint='$t(`admin:theme.headHtmlInjectionHint`)'
@@ -85,8 +79,7 @@
v-textarea.mt-2(
v-model='config.injectBody'
:label='$t(`admin:theme.bodyHtmlInjection`)'
outline
background-color='grey lighten-1'
outlined
color='primary'
persistent-hint
:hint='$t(`admin:theme.bodyHtmlInjectionHint`)'
@@ -95,16 +88,15 @@
v-flex(lg6 xs12)
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading {{$t('admin:theme.downloadThemes')}}
v-toolbar-title.subtitle-1 {{$t('admin:theme.downloadThemes')}}
v-spacer
v-chip(label, color='white', small).teal--text coming soon
v-data-table(
:headers='headers',
:items='themes',
hide-actions,
hide-default-footer,
item-key='value',
:rows-per-page-items='[-1]'
:items-per-page='1000'
)
template(v-slot:items='thm')
td
@@ -114,11 +106,11 @@
td.text-xs-center
v-progress-circular(v-if='thm.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
v-btn(v-else-if='thm.item.isInstalled && thm.item.installDate < thm.item.updatedAt', icon)
v-icon.blue--text cached
v-icon.blue--text mdi-cached
v-btn(v-else-if='thm.item.isInstalled', icon)
v-icon.green--text check
v-icon.green--text mdi-check
v-btn(v-else, icon)
v-icon.grey--text cloud_download
v-icon.grey--text mdi-cloud-download
</template>
<script>
@@ -136,10 +128,9 @@ export default {
{ text: 'Default', author: 'requarks.io', value: 'default', isInstalled: true, installDate: '', updatedAt: '' }
],
iconsets: [
{ text: 'Material Icons (default)', value: 'md' },
{ text: 'Material Design Icons', value: 'mdi' },
{ text: 'Material Design Icons (default)', value: 'mdi' },
{ text: 'Font Awesome 5', value: 'fa' },
{ text: 'Font Awesome 4', value: 'fa4' },
{ text: 'Font Awesome 4', value: 'fa4' }
],
config: {
theme: 'default',

114
client/components/admin/admin-users-create.vue
View File

@@ -2,46 +2,72 @@
v-dialog(v-model='isShown', max-width='650', persistent)
v-card.wiki-form
.dialog-header.is-short
v-icon.mr-3(color='white') mdi-plus
span New User
v-spacer
v-btn.mx-0(color='white', outlined, disabled, dark)
v-icon(left) mdi-database-import
span Bulk Import
v-card-text
v-select(
:items='providers'
item-text='title'
item-value='key'
outline
prepend-icon='business'
outlined
prepend-icon='mdi-domain'
v-model='provider'
label='Provider'
)
v-text-field(
outline
prepend-icon='email'
outlined
prepend-icon='mdi-at'
v-model='email'
label='Email Address'
v-validate='{ required: true, email: true, min: 2, max: 255 }',
data-vv-name='email',
data-vv-as='Email Address',
data-vv-scope='newUser',
:error-messages='errors.collect(`newUser.email`)'
key='newUserEmail'
persistent-hint
ref='emailInput'
)
v-text-field(
v-if='provider === `local`'
outline
prepend-icon='lock'
append-icon='casino'
outlined
prepend-icon='mdi-lock-outline'
append-icon='mdi-dice-5'
v-model='password'
:label='mustChangePwd ? `Temporary Password` : `Password`'
counter='255'
@click:append='generatePwd'
v-validate='{ required: true, min: 6, max: 255 }',
data-vv-name='password',
data-vv-as='Password',
data-vv-scope='newUser',
:error-messages='errors.collect(`newUser.password`)'
key='newUserPassword'
persistent-hint
)
v-text-field(
outline
prepend-icon='person'
outlined
prepend-icon='mdi-account-outline'
v-model='name'
label='Name'
v-validate='{ required: true, min: 2, max: 255 }',
data-vv-name='name',
data-vv-as='Name',
data-vv-scope='newUser',
:error-messages='errors.collect(`newUser.name`)'
key='newUserName'
persistent-hint
)
v-select(
:items='groups'
item-text='name'
item-value='key'
outline
prepend-icon='people'
outlined
prepend-icon='mdi-account-group'
v-model='group'
label='Assign to Group(s)...'
clearable
@@ -63,14 +89,15 @@
)
v-card-chin
v-spacer
v-btn(flat, @click='isShown = false') Cancel
v-btn(color='primary', @click='newUser(true)') Create
v-btn(color='primary', @click='newUser(false)') Create and Close
v-btn(text, @click='isShown = false') Cancel
v-btn(depressed, color='primary', @click='newUser(false)', :disabled='errors.any(`newUser`)') Create
v-btn(depressed, color='primary', @click='newUser(true)', :disabled='errors.any(`newUser`)') Create and Close
</template>
<script>
import uuidv4 from 'uuid/v4'
import _ from 'lodash'
import createUserMutation from 'gql/admin/users/users-mutation-create.gql'
import providersQuery from 'gql/admin/users/users-query-strategies.gql'
import groupsQuery from 'gql/admin/auth/auth-query-groups.gql'
@@ -103,18 +130,69 @@ export default {
watch: {
value(newValue, oldValue) {
if (newValue) {
this.$validator.reset()
this.$nextTick(() => {
this.$refs.emailInput.focus()
})
}
},
provider(newValue, oldValue) {
this.$validator.reset()
}
},
methods: {
async newUser() {
this.isShown = false
async newUser(close = false) {
const validationSuccess = await this.$validator.validateAll('newUser')
if (!validationSuccess) {
return
}
try {
const resp = await this.$apollo.mutate({
mutation: createUserMutation,
variables: {
providerKey: this.provider,
email: this.email,
passwordRaw: this.password,
name: this.name,
groups: this.groups,
mustChangePassword: this.mustChangePwd,
sendWelcomeEmail: this.sendWelcomeEmail
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-create')
}
})
if (_.get(resp, 'data.users.create.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
style: 'success',
message: 'New user created successfully.',
icon: 'check'
})
this.email = ''
this.password = ''
this.name = ''
if (close) {
this.isShown = false
} else {
this.$refs.emailInput.focus()
}
} else {
this.$store.commit('showNotification', {
style: 'red',
message: _.get(resp, 'data.users.create.responseResult.message', 'An unexpected error occured.'),
icon: 'warning'
})
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
},
generatePwd() {
this.password = uuidv4().slice(-12)
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
this.password = _.sampleSize(pwdChars, 12).join('')
}
},
apollo: {

118
client/components/admin/admin-users-edit.vue
View File

@@ -31,23 +31,23 @@
v-icon.mr-2 directions_run
span Basic Info
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon alternate_email
v-list-tile-content
v-list-tile-title Email
v-list-tile-sub-title {{ user.email }}
v-list-tile-action(v-if='!user.isSystem')
v-list-item-content
v-list-item-title Email
v-list-item-sub-title {{ user.email }}
v-list-item-action(v-if='!user.isSystem')
v-btn(icon, color='grey', flat)
v-icon edit
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon person
v-list-tile-content
v-list-tile-title Display Name
v-list-tile-sub-title {{ user.name }}
v-list-tile-action
v-list-item-content
v-list-item-title Display Name
v-list-item-sub-title {{ user.name }}
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon edit
v-card.mt-3.animated.fadeInUp.wait-p2s(v-if='!user.isSystem')
@@ -55,58 +55,58 @@
v-icon.mr-2 lock_outline
span Authentication
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon business
v-list-tile-content
v-list-tile-title Provider
v-list-tile-sub-title {{ user.providerKey }}
v-list-tile-action
v-list-item-content
v-list-item-title Provider
v-list-item-sub-title {{ user.providerKey }}
v-list-item-action
v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='')
template(v-if='user.providerKey === `local`')
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon security
v-list-tile-content
v-list-tile-title Password
v-list-tile-sub-title ********
v-list-tile-action
v-list-item-content
v-list-item-title Password
v-list-item-sub-title ********
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon cached
v-list-tile-action
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon email
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon screen_lock_portrait
v-list-tile-content
v-list-tile-title Two Factor Authentication (2FA)
v-list-tile-sub-title.red--text Inactive
v-list-tile-action
v-list-item-content
v-list-item-title Two Factor Authentication (2FA)
v-list-item-sub-title.red--text Inactive
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon power_settings_new
template(v-if='user.providerId')
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon person
v-list-tile-content
v-list-tile-title Provider Id
v-list-tile-sub-title {{ user.providerId }}
v-list-item-content
v-list-item-title Provider Id
v-list-item-sub-title {{ user.providerId }}
v-card.mt-3.animated.fadeInUp.wait-p4s
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 people
span User Groups
v-list(dense)
template(v-for='(group, idx) in user.groups')
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon people_outline
v-list-tile-content
v-list-tile-title {{group.name}}
v-list-tile-action
v-list-item-content
v-list-item-title {{group.name}}
v-list-item-action
v-btn(icon, color='red', flat)
v-icon clear
v-divider(v-if='idx < user.groups.length - 1')
@@ -121,33 +121,33 @@
v-icon.mr-2 directions_walk
span Extended Metadata
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon public
v-list-tile-content
v-list-tile-title Location
v-list-tile-sub-title {{ user.location }}
v-list-tile-action
v-list-item-content
v-list-item-title Location
v-list-item-sub-title {{ user.location }}
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon edit
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon local_library
v-list-tile-content
v-list-tile-title Job Title
v-list-tile-sub-title {{ user.jobTitle }}
v-list-tile-action
v-list-item-content
v-list-item-title Job Title
v-list-item-sub-title {{ user.jobTitle }}
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon edit
v-divider
v-list-tile
v-list-tile-avatar
v-list-item
v-list-item-avatar
v-icon map
v-list-tile-content
v-list-tile-title Timezone
v-list-tile-sub-title {{ user.timezone }}
v-list-tile-action
v-list-item-content
v-list-item-title Timezone
v-list-item-sub-title {{ user.timezone }}
v-list-item-action
v-btn(icon, color='grey', flat)
v-icon edit
v-card.mt-3.animated.fadeInUp.wait-p4s

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

@@ -6,25 +6,25 @@
img.animated.fadeInUp(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2.animated.fadeInLeft Users
.subheading.grey--text.animated.fadeInLeft.wait-p2s Manage users #[v-chip(label, color='primary', small).white--text coming soon]
.subheading.grey--text.animated.fadeInLeft.wait-p2s Manage users
v-spacer
v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', large, @click='refresh')
v-icon refresh
v-btn.animated.fadeInDown(color='primary', large, depressed, @click='createUser', disabled)
v-icon(left) add
v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', large, @click='refresh')
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='primary', large, depressed, @click='createUser')
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-spacer
v-text-field(
outline
outlined
v-model='search'
prepend-inner-icon='search'
prepend-inner-icon='mdi-account-search-outline'
label='Search Users...'
hide-details
)
v-select.ml-2(
outline
outlined
hide-details
label='Identity Provider'
:items='strategies'

4
client/components/admin/admin-utilities-content.vue
View File

@@ -9,7 +9,7 @@
v-toolbar.radius-7.mt-3.wiki-form(flat, color='grey lighten-4', height='80')
v-select(
label='Source Locale'
outline
outlined
hide-details
:items='locales'
item-text='name'
@@ -19,7 +19,7 @@
v-icon.mx-3(large) arrow_forward
v-select(
label='Target Locale'
outline
outlined
hide-details
:items='locales'
item-text='name'

58
client/components/admin/admin-utilities-telemetry.vue
View File

@@ -11,40 +11,40 @@
v-subheader What is collected?
.body-1.pl-3 When telemetry is enabled, only the following data is transmitted:
v-list
v-list-tile
v-list-tile-avatar: v-icon info_outline
v-list-tile-content
v-list-tile-title.body-1 Version of Wiki.js installed
v-list-tile-sub-title.caption: em e.g. v2.0.123
v-list-tile
v-list-tile-avatar: v-icon info_outline
v-list-tile-content
v-list-tile-title.body-1 Basic OS information
v-list-tile-sub-title.caption: em Platform (Linux, macOS or Windows), Total CPU cores and DB type (PostgreSQL, MySQL, MariaDB, SQLite or SQL Server)
v-list-tile
v-list-tile-avatar: v-icon info_outline
v-list-tile-content
v-list-tile-title.body-1 Crash debug data
v-list-tile-sub-title.caption: em Stack trace of the error
v-list-tile
v-list-tile-avatar: v-icon info_outline
v-list-tile-content
v-list-tile-title.body-1 Setup analytics
v-list-tile-sub-title.caption: em Installation checkpoint reached
v-list-item
v-list-item-avatar: v-icon info_outline
v-list-item-content
v-list-item-title.body-1 Version of Wiki.js installed
v-list-item-sub-title.caption: em e.g. v2.0.123
v-list-item
v-list-item-avatar: v-icon info_outline
v-list-item-content
v-list-item-title.body-1 Basic OS information
v-list-item-sub-title.caption: em Platform (Linux, macOS or Windows), Total CPU cores and DB type (PostgreSQL, MySQL, MariaDB, SQLite or SQL Server)
v-list-item
v-list-item-avatar: v-icon info_outline
v-list-item-content
v-list-item-title.body-1 Crash debug data
v-list-item-sub-title.caption: em Stack trace of the error
v-list-item
v-list-item-avatar: v-icon info_outline
v-list-item-content
v-list-item-title.body-1 Setup analytics
v-list-item-sub-title.caption: em Installation checkpoint reached
.body-1.pl-3 Note that crash debug data is stored for a maximum of 30 days while analytics are stored for a maximum of 16 months, after which it is permanently deleted.
v-divider.my-3
v-subheader What is it used for?
.body-1.pl-3 Telemetry is used by developers to improve Wiki.js, mostly for the following reasons:
v-list(dense)
v-list-tile
v-list-tile-avatar: v-icon chevron_right
v-list-tile-content: v-list-tile-title.body-1 Identify critical bugs more easily and fix them in a timely manner.
v-list-tile
v-list-tile-avatar: v-icon chevron_right
v-list-tile-content: v-list-tile-title.body-1 Understand the upgrade rate of current installations.
v-list-tile
v-list-tile-avatar: v-icon chevron_right
v-list-tile-content: v-list-tile-title.body-1 Optimize performance and testing scenarios based on most popular environments.
v-list-item
v-list-item-avatar: v-icon chevron_right
v-list-item-content: v-list-item-title.body-1 Identify critical bugs more easily and fix them in a timely manner.
v-list-item
v-list-item-avatar: v-icon chevron_right
v-list-item-content: v-list-item-title.body-1 Understand the upgrade rate of current installations.
v-list-item
v-list-item-avatar: v-icon chevron_right
v-list-item-content: v-list-item-title.body-1 Optimize performance and testing scenarios based on most popular environments.
.body-1.pl-3 Only authorized developers have access to the data. It is not shared to any 3rd party nor is it used for any other application than improving Wiki.js.
v-divider.my-3
v-subheader Settings

12
client/components/admin/admin-utilities.vue
View File

@@ -14,13 +14,13 @@
.subheading {{$t('admin:utilities.tools')}}
v-list(two-line, dense).py-0
template(v-for='(tool, idx) in tools')
v-list-tile(:key='tool.key', @click='selectedTool = tool.key', :disabled='!tool.isAvailable')
v-list-tile-avatar
v-list-item(:key='tool.key', @click='selectedTool = tool.key', :disabled='!tool.isAvailable')
v-list-item-avatar
v-icon(:color='!tool.isAvailable ? `grey lighten-1` : (selectedTool === tool.key ? `blue ` : `grey darken-1`)') {{ tool.icon }}
v-list-tile-content
v-list-tile-title.body-2(:class='!tool.isAvailable ? `grey--text` : (selectedTool === tool.key ? `primary--text` : ``)') {{ $t('admin:utilities.' + tool.i18nKey + 'Title') }}
v-list-tile-sub-title.caption(:class='!tool.isAvailable ? `grey--text text--lighten-1` : (selectedTool === tool.key ? `blue--text ` : ``)') {{ $t('admin:utilities.' + tool.i18nKey + 'Subtitle') }}
v-list-tile-avatar(v-if='selectedTool === tool.key')
v-list-item-content
v-list-item-title.body-2(:class='!tool.isAvailable ? `grey--text` : (selectedTool === tool.key ? `primary--text` : ``)') {{ $t('admin:utilities.' + tool.i18nKey + 'Title') }}
v-list-item-sub-title.caption(:class='!tool.isAvailable ? `grey--text text--lighten-1` : (selectedTool === tool.key ? `blue--text ` : ``)') {{ $t('admin:utilities.' + tool.i18nKey + 'Subtitle') }}
v-list-item-avatar(v-if='selectedTool === tool.key')
v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
v-divider(v-if='idx < tools.length - 1')

12
client/components/admin/admin-webhooks.vue
View File

@@ -22,14 +22,14 @@
span New
v-list(two-line, dense).py-0
template(v-for='(str, idx) in hooks')
v-list-tile(:key='str.key', @click='selectedHook = str.key')
v-list-tile-avatar
v-list-item(:key='str.key', @click='selectedHook = str.key')
v-list-item-avatar
v-icon(color='primary', v-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') check_box
v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') check_box_outline_blank
v-list-tile-content
v-list-tile-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedHook === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-tile-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedHook === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-tile-avatar(v-if='selectedHook === str.key')
v-list-item-content
v-list-item-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedHook === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-item-sub-title.caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedHook === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-item-avatar(v-if='selectedHook === str.key')
v-icon.animated.fadeInLeft(color='primary') arrow_forward_ios
v-divider(v-if='idx < hooks.length - 1')