Skip to content

Commit 99d7078

Browse files
committed
feat: add localization to admin nav + locale sections
1 parent 4b04282 commit 99d7078

File tree

12 files changed

+136
-63
lines changed

12 files changed

+136
-63
lines changed

client/components/admin.vue

+24-23
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,78 @@
55
v-list(dense)
66
v-list-tile.pt-2(to='/dashboard')
77
v-list-tile-avatar: v-icon dashboard
8-
v-list-tile-title Dashboard
8+
v-list-tile-title {{ $t('admin:dashboard.title') }}
99
v-divider.my-2
10-
v-subheader.pl-4 Site
10+
v-subheader.pl-4 {{ $t('admin:nav.site') }}
1111
v-list-tile(to='/general')
1212
v-list-tile-avatar: v-icon widgets
13-
v-list-tile-title General
13+
v-list-tile-title {{ $t('admin:general.title') }}
1414
v-list-tile(to='/locale')
1515
v-list-tile-avatar: v-icon language
16-
v-list-tile-title Locale
16+
v-list-tile-title {{ $t('admin:locale.title') }}
1717
v-list-tile(to='/stats')
1818
v-list-tile-avatar: v-icon show_chart
19-
v-list-tile-title Statistics
19+
v-list-tile-title {{ $t('admin:stats.title') }}
2020
v-list-tile(to='/theme')
2121
v-list-tile-avatar: v-icon palette
22-
v-list-tile-title Theme
22+
v-list-tile-title {{ $t('admin:theme.title') }}
2323
v-divider.my-2
24-
v-subheader.pl-4 Users
24+
v-subheader.pl-4 {{ $t('admin:nav.users') }}
2525
v-list-tile(to='/groups')
2626
v-list-tile-avatar: v-icon people
27-
v-list-tile-title Groups
27+
v-list-tile-title {{ $t('admin:groups.title') }}
2828
v-list-tile(to='/users')
2929
v-list-tile-avatar: v-icon perm_identity
30-
v-list-tile-title Users
30+
v-list-tile-title {{ $t('admin:users.title') }}
3131
v-list-tile-action
3232
.justify-end
3333
v-chip(small, disabled, color='grey lighten-4')
3434
.caption.grey--text 1
3535
v-divider.my-2
36-
v-subheader.pl-4 Modules
36+
v-subheader.pl-4 {{ $t('admin:nav.modules') }}
3737
v-list-tile(to='/auth')
3838
v-list-tile-avatar: v-icon lock_outline
39-
v-list-tile-title Authentication
39+
v-list-tile-title {{ $t('admin:auth.title') }}
4040
v-list-tile(to='/editor')
4141
v-list-tile-avatar: v-icon transform
42-
v-list-tile-title Editor
42+
v-list-tile-title {{ $t('admin:editor.title') }}
4343
v-list-tile(to='/logging')
4444
v-list-tile-avatar: v-icon graphic_eq
45-
v-list-tile-title Logging
45+
v-list-tile-title {{ $t('admin:logging.title') }}
4646
v-list-tile(to='/rendering')
4747
v-list-tile-avatar: v-icon system_update_alt
48-
v-list-tile-title Rendering
48+
v-list-tile-title {{ $t('admin:rendering.title') }}
4949
v-list-tile(to='/search')
5050
v-list-tile-avatar: v-icon search
51-
v-list-tile-title Search Engine
51+
v-list-tile-title {{ $t('admin:search.title') }}
5252
v-list-tile(to='/storage')
5353
v-list-tile-avatar: v-icon storage
54-
v-list-tile-title Storage
54+
v-list-tile-title {{ $t('admin:storage.title') }}
5555
v-divider.my-2
56-
v-subheader.pl-4 System
56+
v-subheader.pl-4 {{ $t('admin:nav.system') }}
5757
v-list-tile(to='/api')
5858
v-list-tile-avatar: v-icon call_split
59-
v-list-tile-title API Access
59+
v-list-tile-title {{ $t('admin:api.title') }}
6060
v-list-tile(to='/system')
6161
v-list-tile-avatar: v-icon tune
62-
v-list-tile-title System Info
62+
v-list-tile-title {{ $t('admin:system.title') }}
6363
v-list-tile(to='/utilities')
6464
v-list-tile-avatar: v-icon build
65-
v-list-tile-title Utilities
65+
v-list-tile-title {{ $t('admin:utilities.title') }}
6666
v-list-tile(to='/dev')
6767
v-list-tile-avatar: v-icon weekend
68-
v-list-tile-title Developer Tools
68+
v-list-tile-title {{ $t('admin:dev.title') }}
6969
v-divider.my-2
7070
v-list-tile(to='/contribute')
7171
v-list-tile-avatar: v-icon favorite
72-
v-list-tile-title Contribute to Wiki.js
72+
v-list-tile-title {{ $t('admin:contribute.title') }}
7373

7474
v-content
7575
transition(name='admin-router')
7676
router-view
7777

7878
v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
79-
.caption.grey--text.text--darken-1 Powered by Wiki.js
79+
.caption.grey--text.text--darken-1 {{ $t('common:footer.poweredBy') }} Wiki.js
8080

8181
v-snackbar(
8282
:color='notification.style'
@@ -128,6 +128,7 @@ const router = new VueRouter({
128128
})
129129
130130
export default {
131+
i18nOptions: { namespaces: 'admin' },
131132
data() {
132133
return {
133134
adminDrawerShown: true

client/components/admin/admin-dashboard.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
v-container(fluid, fill-height)
33
v-layout(row wrap)
44
v-flex(xs12)
5-
.headline.primary--text Dashboard
6-
.subheading.grey--text Wiki.js v2 ALPHA Build - NOT FOR PRODUCTION USE
5+
.headline.primary--text {{ $t('admin:dashboard.title') }}
6+
.subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
77
</template>
88

99
<script>

client/components/admin/admin-general.vue

+38-6
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
v-container(fluid, fill-height, grid-list-lg)
33
v-layout(row wrap)
44
v-flex(xs12)
5-
.headline.primary--text General
6-
.subheading.grey--text Main settings of your wiki
5+
.headline.primary--text {{ $t('admin:general.title') }}
6+
.subheading.grey--text {{ $t('admin:general.subtitle') }}
77
v-form.pt-3
88
v-layout(row wrap)
99
v-flex(lg6 xs12)
1010
v-form
1111
v-card
1212
v-toolbar(color='primary', dark, dense, flat)
1313
v-toolbar-title
14-
.subheading Site Info
14+
.subheading {{ $t('admin:general.siteInfo') }}
1515
v-subheader General
1616
.px-3
1717
v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
@@ -30,10 +30,40 @@
3030
v-card
3131
v-toolbar(color='primary', dark, dense, flat)
3232
v-toolbar-title
33-
.subheading Site Branding
33+
.subheading {{ $t('admin:general.siteBranding') }}
3434
v-card-text
35-
v-text-field(label='Logo', prepend-icon='image')
35+
v-layout.pa-3(row, align-center)
36+
v-avatar(size='120', color='grey lighten-3', :tile='useSquareLogo')
37+
.ml-4
38+
v-layout(row, align-center)
39+
v-btn(color='teal', depressed, dark)
40+
v-icon(left) cloud_upload
41+
span Upload Logo
42+
v-btn(color='teal', depressed, disabled)
43+
v-icon(left) clear
44+
span Clear
45+
.caption.grey--text An image of 120x120 pixels is recommended for best results.
46+
.caption.grey--text SVG, PNG or JPG files only.
47+
v-switch(
48+
v-model='useSquareLogo'
49+
label='Use Square Logo Frame'
50+
color='primary'
51+
persistent-hint
52+
hint='Check this option if a round logo frame doesn\'t work with your logo.'
53+
)
3654
v-divider
55+
v-switch(
56+
v-model='displayMascot'
57+
label='Display Wiki.js Mascot'
58+
color='primary'
59+
persistent-hint
60+
hint='Uncheck this box if you don\'t want Henry, Wiki.js mascot, to be displayed on client-facing pages.'
61+
)
62+
v-card-chin
63+
v-spacer
64+
v-btn(color='primary')
65+
v-icon(left) chevron_right
66+
span Save
3767

3868
</template>
3969

@@ -44,7 +74,9 @@ export default {
4474
return {
4575
siteTitle: 'Wiki.js',
4676
metaRobotsSelection: ['Index', 'Follow'],
47-
metaRobots: ['Index', 'Follow', 'No Index', 'No Follow']
77+
metaRobots: ['Index', 'Follow', 'No Index', 'No Follow'],
78+
useSquareLogo: false,
79+
displayMascot: true
4880
}
4981
}
5082
}

client/components/admin/admin-locale.vue

+21-18
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22
v-container(fluid, fill-height, grid-list-lg)
33
v-layout(row wrap)
44
v-flex(xs12)
5-
.headline.primary--text Locale
6-
.subheading.grey--text Set localization options for your wiki
5+
.headline.primary--text {{ $t('admin:locale.title') }}
6+
.subheading.grey--text {{ $t('admin:locale.subtitle') }}
77
v-form.pt-3
88
v-layout(row wrap)
99
v-flex(lg6 xs12)
1010
v-card
1111
v-toolbar(color='primary', dark, dense, flat)
1212
v-toolbar-title
13-
.subheading Locale Settings
13+
.subheading {{ $t('admin:locale.settings') }}
1414
v-card-text
1515
v-select(
1616
:items='installedLocales'
1717
prepend-icon='language'
1818
v-model='selectedLocale'
1919
item-value='code'
20-
item-text='name'
21-
:label='namespacing ? "Base Locale" : "Site Locale"'
20+
item-text='nativeName'
21+
:label='namespacing ? $t("admin:locale.base.labelWithNS") : $t("admin:locale.base.label")'
2222
persistent-hint
23-
hint='All UI text elements will be displayed in selected language.'
23+
:hint='$t("admin:locale.base.hint")'
2424
)
2525
template(slot='item', slot-scope='data')
2626
template(v-if='typeof data.item !== "object"')
@@ -34,37 +34,37 @@
3434
v-divider
3535
v-switch(
3636
v-model='autoUpdate'
37-
label='Update Automatically'
37+
:label='$t("admin:locale.autoUpdate.label")'
3838
color='primary'
3939
persistent-hint
40-
:hint='namespacing ? "Automatically download updates to all namespaced locales enabled below." : "Automatically download updates to this locale as they become available."'
40+
:hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
4141
)
4242
v-card-chin
4343
v-spacer
4444
v-btn(color='primary', :loading='loading', @click='save')
4545
v-icon(left) chevron_right
46-
span Save
46+
span {{ $t('common:actions.save') }}
4747

4848
v-card.mt-3
4949
v-toolbar(color='primary', dark, dense, flat)
5050
v-toolbar-title
51-
.subheading Multilingual Namespacing
51+
.subheading {{ $t('admin:locale.namespacing') }}
5252
v-card-text
5353
v-switch(
5454
v-model='namespacing'
55-
label='Multilingual Namespaces'
55+
:label='$t("admin:locale.namespaces.label")'
5656
color='primary'
5757
persistent-hint
58-
hint='Enables multiple language versions of the same page.'
58+
:hint='$t("admin:locale.namespaces.hint")'
5959
)
6060
v-alert.mt-3(
6161
outline
6262
color='orange'
6363
:value='true'
6464
icon='warning'
6565
)
66-
span The locale code will be prefixed to all paths. (e.g. /{{ selectedLocale }}/page-name)
67-
.caption.grey--text Paths without a locale code will be automatically redirected to the base locale defined above.
66+
span {{ $t('admin:locale.namespacingPrefixWarning.title', { langCode: selectedLocale }) }}
67+
.caption.grey--text {{ $t('admin:locale.namespacingPrefixWarning.subtitle') }}
6868
v-divider
6969
v-select(
7070
:disabled='!namespacing'
@@ -76,9 +76,9 @@
7676
v-model='namespaces'
7777
item-value='code'
7878
item-text='name'
79-
label='Active Namespaces'
79+
:label='$t("admin:locale.activeNamespaces.label")'
8080
persistent-hint
81-
hint='List of locales enabled for multilingual namespacing. The base locale defined above will always be included regardless of this selection.'
81+
:hint='$t("admin:locale.activeNamespaces.hint")'
8282
)
8383
template(slot='item', slot-scope='data')
8484
template(v-if='typeof data.item !== "object"')
@@ -95,12 +95,12 @@
9595
v-spacer
9696
v-btn(color='primary', :loading='loading', @click='save')
9797
v-icon(left) chevron_right
98-
span Save
98+
span {{ $t('common:actions.save') }}
9999
v-flex(lg6 xs12)
100100
v-card
101101
v-toolbar(color='teal', dark, dense, flat)
102102
v-toolbar-title
103-
.subheading Download Locale
103+
.subheading {{ $t('admin:locale.download') }}
104104
v-list(two-line, dense)
105105
template(v-for='(lc, idx) in locales')
106106
v-list-tile(:key='lc.code')
@@ -126,6 +126,8 @@
126126
<script>
127127
import _ from 'lodash'
128128
129+
/* global WIKI */
130+
129131
import localesQuery from 'gql/admin-locale-query-list.gql'
130132
import localesDownloadMutation from 'gql/admin-locale-mutation-download.gql'
131133
import localesSaveMutation from 'gql/admin-locale-mutation-save.gql'
@@ -186,6 +188,7 @@ export default {
186188
})
187189
const resp = _.get(respRaw, 'data.localization.updateLocale.responseResult', {})
188190
if (resp.succeeded) {
191+
WIKI.$i18n.i18next.changeLanguage(this.selectedLocale)
189192
this.$store.commit('showNotification', {
190193
message: 'Locale settings updated successfully.',
191194
style: 'success',

client/components/login.vue

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import loginMutation from 'gql/login-mutation-login.gql'
6161
import tfaMutation from 'gql/login-mutation-tfa.gql'
6262
6363
export default {
64+
i18nOptions: { namespaces: 'auth' },
6465
data () {
6566
return {
6667
error: false,

client/graph/common-locale-query.gql

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
query($locale: String!, $namespace: String!) {
2+
translations(locale:$locale, namespace:$namespace) {
3+
key
4+
value
5+
}
6+
}

client/modules/localization.js

+3-9
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import i18nextXHR from 'i18next-xhr-backend'
33
import i18nextCache from 'i18next-localstorage-cache'
44
import VueI18Next from '@panter/vue-i18next'
55
import _ from 'lodash'
6-
import gql from 'graphql-tag'
76

87
/* global siteConfig, graphQL */
98

9+
import localeQuery from 'gql/common-locale-query.gql'
10+
1011
module.exports = {
1112
VueI18Next,
1213
init() {
@@ -20,14 +21,7 @@ module.exports = {
2021
ajax: (url, opts, cb, data) => {
2122
let langParams = url.split('/')
2223
graphQL.query({
23-
query: gql`
24-
query($locale: String!, $namespace: String!) {
25-
translations(locale:$locale, namespace:$namespace) {
26-
key
27-
value
28-
}
29-
}
30-
`,
24+
query: localeQuery,
3125
variables: {
3226
locale: langParams[0],
3327
namespace: langParams[1]

package.json

+2
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@
163163
"babel-preset-stage-2": "6.24.1",
164164
"brace": "0.11.1",
165165
"cache-loader": "1.2.2",
166+
"chart.js": "2.7.2",
166167
"clean-webpack-plugin": "0.1.19",
167168
"colors": "1.3.0",
168169
"copy-webpack-plugin": "4.5.1",
@@ -220,6 +221,7 @@
220221
"velocity-animate": "1.5.1",
221222
"vue": "2.5.16",
222223
"vue-apollo": "3.0.0-beta.16",
224+
"vue-chartjs": "3.3.1",
223225
"vue-clipboards": "1.2.4",
224226
"vue-codemirror": "4.0.5",
225227
"vue-hot-reload-api": "2.3.0",

server/app/data.yml

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ configNamespaces:
5454
- theme
5555
- uploads
5656
localeNamespaces:
57+
- admin
5758
- auth
5859
- common
5960
jobs:

0 commit comments

Comments
 (0)