feat: add localization to admin nav + locale sections

This commit is contained in:
NGPixel
2018-06-17 17:29:19 -04:00
parent 4b0428212d
commit 99d7078c2c
12 changed files with 136 additions and 63 deletions

View File

@@ -5,78 +5,78 @@
v-list(dense)
v-list-tile.pt-2(to='/dashboard')
v-list-tile-avatar: v-icon dashboard
v-list-tile-title Dashboard
v-list-tile-title {{ $t('admin:dashboard.title') }}
v-divider.my-2
v-subheader.pl-4 Site
v-subheader.pl-4 {{ $t('admin:nav.site') }}
v-list-tile(to='/general')
v-list-tile-avatar: v-icon widgets
v-list-tile-title General
v-list-tile-title {{ $t('admin:general.title') }}
v-list-tile(to='/locale')
v-list-tile-avatar: v-icon language
v-list-tile-title Locale
v-list-tile-title {{ $t('admin:locale.title') }}
v-list-tile(to='/stats')
v-list-tile-avatar: v-icon show_chart
v-list-tile-title Statistics
v-list-tile-title {{ $t('admin:stats.title') }}
v-list-tile(to='/theme')
v-list-tile-avatar: v-icon palette
v-list-tile-title Theme
v-list-tile-title {{ $t('admin:theme.title') }}
v-divider.my-2
v-subheader.pl-4 Users
v-subheader.pl-4 {{ $t('admin:nav.users') }}
v-list-tile(to='/groups')
v-list-tile-avatar: v-icon people
v-list-tile-title Groups
v-list-tile-title {{ $t('admin:groups.title') }}
v-list-tile(to='/users')
v-list-tile-avatar: v-icon perm_identity
v-list-tile-title Users
v-list-tile-title {{ $t('admin:users.title') }}
v-list-tile-action
.justify-end
v-chip(small, disabled, color='grey lighten-4')
.caption.grey--text 1
v-divider.my-2
v-subheader.pl-4 Modules
v-subheader.pl-4 {{ $t('admin:nav.modules') }}
v-list-tile(to='/auth')
v-list-tile-avatar: v-icon lock_outline
v-list-tile-title Authentication
v-list-tile-title {{ $t('admin:auth.title') }}
v-list-tile(to='/editor')
v-list-tile-avatar: v-icon transform
v-list-tile-title Editor
v-list-tile-title {{ $t('admin:editor.title') }}
v-list-tile(to='/logging')
v-list-tile-avatar: v-icon graphic_eq
v-list-tile-title Logging
v-list-tile-title {{ $t('admin:logging.title') }}
v-list-tile(to='/rendering')
v-list-tile-avatar: v-icon system_update_alt
v-list-tile-title Rendering
v-list-tile-title {{ $t('admin:rendering.title') }}
v-list-tile(to='/search')
v-list-tile-avatar: v-icon search
v-list-tile-title Search Engine
v-list-tile-title {{ $t('admin:search.title') }}
v-list-tile(to='/storage')
v-list-tile-avatar: v-icon storage
v-list-tile-title Storage
v-list-tile-title {{ $t('admin:storage.title') }}
v-divider.my-2
v-subheader.pl-4 System
v-subheader.pl-4 {{ $t('admin:nav.system') }}
v-list-tile(to='/api')
v-list-tile-avatar: v-icon call_split
v-list-tile-title API Access
v-list-tile-title {{ $t('admin:api.title') }}
v-list-tile(to='/system')
v-list-tile-avatar: v-icon tune
v-list-tile-title System Info
v-list-tile-title {{ $t('admin:system.title') }}
v-list-tile(to='/utilities')
v-list-tile-avatar: v-icon build
v-list-tile-title Utilities
v-list-tile-title {{ $t('admin:utilities.title') }}
v-list-tile(to='/dev')
v-list-tile-avatar: v-icon weekend
v-list-tile-title Developer Tools
v-list-tile-title {{ $t('admin:dev.title') }}
v-divider.my-2
v-list-tile(to='/contribute')
v-list-tile-avatar: v-icon favorite
v-list-tile-title Contribute to Wiki.js
v-list-tile-title {{ $t('admin:contribute.title') }}
v-content
transition(name='admin-router')
router-view
v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
.caption.grey--text.text--darken-1 Powered by Wiki.js
.caption.grey--text.text--darken-1 {{ $t('common:footer.poweredBy') }} Wiki.js
v-snackbar(
:color='notification.style'
@@ -128,6 +128,7 @@ const router = new VueRouter({
})
export default {
i18nOptions: { namespaces: 'admin' },
data() {
return {
adminDrawerShown: true

View File

@@ -2,8 +2,8 @@
v-container(fluid, fill-height)
v-layout(row wrap)
v-flex(xs12)
.headline.primary--text Dashboard
.subheading.grey--text Wiki.js v2 ALPHA Build - NOT FOR PRODUCTION USE
.headline.primary--text {{ $t('admin:dashboard.title') }}
.subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
</template>
<script>

View File

@@ -2,8 +2,8 @@
v-container(fluid, fill-height, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.headline.primary--text General
.subheading.grey--text Main settings of your wiki
.headline.primary--text {{ $t('admin:general.title') }}
.subheading.grey--text {{ $t('admin:general.subtitle') }}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
@@ -11,7 +11,7 @@
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Site Info
.subheading {{ $t('admin:general.siteInfo') }}
v-subheader General
.px-3
v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
@@ -30,10 +30,40 @@
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Site Branding
.subheading {{ $t('admin:general.siteBranding') }}
v-card-text
v-text-field(label='Logo', prepend-icon='image')
v-layout.pa-3(row, align-center)
v-avatar(size='120', color='grey lighten-3', :tile='useSquareLogo')
.ml-4
v-layout(row, align-center)
v-btn(color='teal', depressed, dark)
v-icon(left) cloud_upload
span Upload Logo
v-btn(color='teal', depressed, disabled)
v-icon(left) clear
span Clear
.caption.grey--text An image of 120x120 pixels is recommended for best results.
.caption.grey--text SVG, PNG or JPG files only.
v-switch(
v-model='useSquareLogo'
label='Use Square Logo Frame'
color='primary'
persistent-hint
hint='Check this option if a round logo frame doesn\'t work with your logo.'
)
v-divider
v-switch(
v-model='displayMascot'
label='Display Wiki.js Mascot'
color='primary'
persistent-hint
hint='Uncheck this box if you don\'t want Henry, Wiki.js mascot, to be displayed on client-facing pages.'
)
v-card-chin
v-spacer
v-btn(color='primary')
v-icon(left) chevron_right
span Save
</template>
@@ -44,7 +74,9 @@ export default {
return {
siteTitle: 'Wiki.js',
metaRobotsSelection: ['Index', 'Follow'],
metaRobots: ['Index', 'Follow', 'No Index', 'No Follow']
metaRobots: ['Index', 'Follow', 'No Index', 'No Follow'],
useSquareLogo: false,
displayMascot: true
}
}
}

View File

@@ -2,25 +2,25 @@
v-container(fluid, fill-height, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.headline.primary--text Locale
.subheading.grey--text Set localization options for your wiki
.headline.primary--text {{ $t('admin:locale.title') }}
.subheading.grey--text {{ $t('admin:locale.subtitle') }}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Locale Settings
.subheading {{ $t('admin:locale.settings') }}
v-card-text
v-select(
:items='installedLocales'
prepend-icon='language'
v-model='selectedLocale'
item-value='code'
item-text='name'
:label='namespacing ? "Base Locale" : "Site Locale"'
item-text='nativeName'
:label='namespacing ? $t("admin:locale.base.labelWithNS") : $t("admin:locale.base.label")'
persistent-hint
hint='All UI text elements will be displayed in selected language.'
:hint='$t("admin:locale.base.hint")'
)
template(slot='item', slot-scope='data')
template(v-if='typeof data.item !== "object"')
@@ -34,28 +34,28 @@
v-divider
v-switch(
v-model='autoUpdate'
label='Update Automatically'
:label='$t("admin:locale.autoUpdate.label")'
color='primary'
persistent-hint
:hint='namespacing ? "Automatically download updates to all namespaced locales enabled below." : "Automatically download updates to this locale as they become available."'
:hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
)
v-card-chin
v-spacer
v-btn(color='primary', :loading='loading', @click='save')
v-icon(left) chevron_right
span Save
span {{ $t('common:actions.save') }}
v-card.mt-3
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Multilingual Namespacing
.subheading {{ $t('admin:locale.namespacing') }}
v-card-text
v-switch(
v-model='namespacing'
label='Multilingual Namespaces'
:label='$t("admin:locale.namespaces.label")'
color='primary'
persistent-hint
hint='Enables multiple language versions of the same page.'
:hint='$t("admin:locale.namespaces.hint")'
)
v-alert.mt-3(
outline
@@ -63,8 +63,8 @@
:value='true'
icon='warning'
)
span The locale code will be prefixed to all paths. (e.g. /{{ selectedLocale }}/page-name)
.caption.grey--text Paths without a locale code will be automatically redirected to the base locale defined above.
span {{ $t('admin:locale.namespacingPrefixWarning.title', { langCode: selectedLocale }) }}
.caption.grey--text {{ $t('admin:locale.namespacingPrefixWarning.subtitle') }}
v-divider
v-select(
:disabled='!namespacing'
@@ -76,9 +76,9 @@
v-model='namespaces'
item-value='code'
item-text='name'
label='Active Namespaces'
:label='$t("admin:locale.activeNamespaces.label")'
persistent-hint
hint='List of locales enabled for multilingual namespacing. The base locale defined above will always be included regardless of this selection.'
:hint='$t("admin:locale.activeNamespaces.hint")'
)
template(slot='item', slot-scope='data')
template(v-if='typeof data.item !== "object"')
@@ -95,12 +95,12 @@
v-spacer
v-btn(color='primary', :loading='loading', @click='save')
v-icon(left) chevron_right
span Save
span {{ $t('common:actions.save') }}
v-flex(lg6 xs12)
v-card
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading Download Locale
.subheading {{ $t('admin:locale.download') }}
v-list(two-line, dense)
template(v-for='(lc, idx) in locales')
v-list-tile(:key='lc.code')
@@ -126,6 +126,8 @@
<script>
import _ from 'lodash'
/* global WIKI */
import localesQuery from 'gql/admin-locale-query-list.gql'
import localesDownloadMutation from 'gql/admin-locale-mutation-download.gql'
import localesSaveMutation from 'gql/admin-locale-mutation-save.gql'
@@ -186,6 +188,7 @@ export default {
})
const resp = _.get(respRaw, 'data.localization.updateLocale.responseResult', {})
if (resp.succeeded) {
WIKI.$i18n.i18next.changeLanguage(this.selectedLocale)
this.$store.commit('showNotification', {
message: 'Locale settings updated successfully.',
style: 'success',

View File

@@ -61,6 +61,7 @@ import loginMutation from 'gql/login-mutation-login.gql'
import tfaMutation from 'gql/login-mutation-tfa.gql'
export default {
i18nOptions: { namespaces: 'auth' },
data () {
return {
error: false,