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

feat: add localization to admin nav + locale sections

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/components/admin.vue
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

4
client/components/admin/admin-dashboard.vue
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>

44
client/components/admin/admin-general.vue
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
}
}
}

39
client/components/admin/admin-locale.vue
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',

1
client/components/login.vue
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,

6
client/graph/common-locale-query.gql Normal file
View File

@ -0,0 +1,6 @@
query($locale: String!, $namespace: String!) {
translations(locale:$locale, namespace:$namespace) {
key
value
}
}

12
client/modules/localization.js
View File

@ -3,10 +3,11 @@ import i18nextXHR from 'i18next-xhr-backend'
import i18nextCache from 'i18next-localstorage-cache'
import VueI18Next from '@panter/vue-i18next'
import _ from 'lodash'
import gql from 'graphql-tag'
/* global siteConfig, graphQL */
import localeQuery from 'gql/common-locale-query.gql'
module.exports = {
VueI18Next,
init() {
@ -20,14 +21,7 @@ module.exports = {
ajax: (url, opts, cb, data) => {
let langParams = url.split('/')
graphQL.query({
query: gql`
query($locale: String!, $namespace: String!) {
translations(locale:$locale, namespace:$namespace) {
key
value
}
}
`,
query: localeQuery,
variables: {
locale: langParams[0],
namespace: langParams[1]

2
package.json
View File

@ -163,6 +163,7 @@
"babel-preset-stage-2": "6.24.1",
"brace": "0.11.1",
"cache-loader": "1.2.2",
"chart.js": "2.7.2",
"clean-webpack-plugin": "0.1.19",
"colors": "1.3.0",
"copy-webpack-plugin": "4.5.1",
@ -220,6 +221,7 @@
"velocity-animate": "1.5.1",
"vue": "2.5.16",
"vue-apollo": "3.0.0-beta.16",
"vue-chartjs": "3.3.1",
"vue-clipboards": "1.2.4",
"vue-codemirror": "4.0.5",
"vue-hot-reload-api": "2.3.0",

1
server/app/data.yml
View File

@ -54,6 +54,7 @@ configNamespaces:
- theme
- uploads
localeNamespaces:
- admin
- auth
- common
jobs:

14
server/core/localization.js
View File

@ -30,8 +30,8 @@ module.exports = {
})
}
// Load current language
this.loadLocale(WIKI.config.lang.code, { silent: true })
// Load current language + namespaces
this.refreshNamespaces(true)
return this
},
@ -64,8 +64,16 @@ module.exports = {
throw new Error('No such locale in local store.')
}
},
async refreshNamespaces (silent = false) {
await this.loadLocale(WIKI.config.lang.code, { silent })
if (WIKI.config.lang.namespacing) {
for (let ns of WIKI.config.lang.namespaces) {
await this.loadLocale(ns, { silent })
}
}
},
async setCurrentLocale(locale) {
return Promise.fromCallback(cb => {
await Promise.fromCallback(cb => {
return this.engine.changeLanguage(locale, cb)
})
}

1
server/graph/resolvers/localization.js
View File

@ -58,6 +58,7 @@ module.exports = {
await WIKI.configSvc.saveToDb(['lang'])
await WIKI.lang.setCurrentLocale(args.locale)
await WIKI.lang.refreshNamespaces()
return {
responseResult: graphHelper.generateSuccess('Locale config updated')

28
yarn.lock
View File

@ -2433,6 +2433,26 @@ charm@~0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/charm/-/charm-0.1.2.tgz#06c21eed1a1b06aeb67553cdc53e23274bac2296"
chart.js@2.7.2:
version "2.7.2"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.2.tgz#3c9fde4dc5b95608211bdefeda7e5d33dffa5714"
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
dependencies:
chartjs-color-string "^0.5.0"
color-convert "^0.5.3"
check-types@^7.3.0:
version "7.3.0"
resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.3.0.tgz#468f571a4435c24248f5fd0cb0e8d87c3c341e7d"
@ -2659,7 +2679,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^0.5.0:
color-convert@^0.5.0, color-convert@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
@ -7514,7 +7534,7 @@ moment-timezone@0.5.17, moment-timezone@^0.5.0, moment-timezone@^0.5.x:
dependencies:
moment ">= 2.9.0"
moment@2.22.2, "moment@>= 2.9.0", moment@^2.10.6, moment@^2.11.1, moment@^2.19, moment@^2.22.1:
moment@2.22.2, "moment@>= 2.9.0", moment@^2.10.2, moment@^2.10.6, moment@^2.11.1, moment@^2.19, moment@^2.22.1:
version "2.22.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
@ -12044,6 +12064,10 @@ vue-apollo@3.0.0-beta.16:
dependencies:
throttle-debounce "^1.0.1"
vue-chartjs@3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.3.1.tgz#fb08dc244da316e385910401daf16874f52ac1fc"
vue-cli-plugin-apollo@^0.13.0:
version "0.13.4"
resolved "https://registry.yarnpkg.com/vue-cli-plugin-apollo/-/vue-cli-plugin-apollo-0.13.4.tgz#1477b8e2eaa711fe13e4905410351cfd3978bedb"