From bf02e1f78b3a2121efe4571faccf61879a319f6f Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sat, 12 May 2018 18:35:31 -0400 Subject: [PATCH] feat: admin locale - multilingual namespaces UI --- client/components/admin/admin-locale.vue | 102 ++++++++++++++++++----- 1 file changed, 81 insertions(+), 21 deletions(-) diff --git a/client/components/admin/admin-locale.vue b/client/components/admin/admin-locale.vue index 9f2a8296..d0816cca 100644 --- a/client/components/admin/admin-locale.vue +++ b/client/components/admin/admin-locale.vue @@ -12,12 +12,13 @@ v-toolbar-title .subheading Locale Settings v-card-text - v-select(:items='installedLocales' - prepend-icon='public' + v-select( + :items='installedLocales' + prepend-icon='language' v-model='selectedLocale' item-value='code' item-text='name' - label='Site Locale' + :label='namespacing ? "Base Locale" : "Site Locale"' persistent-hint hint='All UI text elements will be displayed in selected language.' ) @@ -36,7 +37,7 @@ label='Update Automatically' color='primary' persistent-hint - hint='Automatically download updates to this locale as they become available.' + :hint='namespacing ? "Automatically download updates to all namespaced locales enabled below." : "Automatically download updates to this locale as they become available."' ) v-divider.my-0 v-card-actions.grey.lighten-4 @@ -44,27 +45,84 @@ v-btn(color='primary', :loading='loading', @click='save') v-icon(left) chevron_right span Save + + v-card.mt-3 + v-toolbar(color='primary', dark, dense, flat) + v-toolbar-title + .subheading Multilingual Namespacing + v-card-text + v-switch( + v-model='namespacing' + label='Multilingual Namespaces' + color='primary' + persistent-hint + hint='Enables multiple language versions of the same page.' + ) + v-alert.mt-3( + outline + color='orange' + :value='true' + icon='warning' + ) + span The locale code will be prefixed to all paths. (e.g. /en/page-name) + .caption.grey--text Paths without a locale code will be automatically redirected to the base locale defined above. + v-divider + v-select( + :disabled='!namespacing' + :items='installedLocales' + prepend-icon='language' + multiple + chips + deletable-chips + v-model='namespaces' + item-value='code' + item-text='name' + label='Active Namespaces' + persistent-hint + hint='List of locales enabled for multilingual namespacing. The base locale defined above will always be included regardless of this selection.' + ) + template(slot='item', slot-scope='data') + template(v-if='typeof data.item !== "object"') + v-list-tile-content(v-text='data.item') + template(v-else) + v-list-tile-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-checkbox(:input-value='data.tile.props.value', color='primary', value) + v-divider.my-0 + v-card-actions.grey.lighten-4 + v-spacer + v-btn(color='primary', :loading='loading', @click='save') + v-icon(left) chevron_right + span Save v-flex(lg6 xs12) v-card v-toolbar(color='teal', dark, dense, flat) v-toolbar-title .subheading Download Locale - v-list - v-list-tile(v-for='lc in locales', :key='lc.code') - v-list-tile-avatar - v-avatar.teal.white--text(tile, size='40') {{lc.code.toUpperCase()}} - v-list-tile-content - v-list-tile-title(v-html='lc.name') - v-list-tile-sub-title(v-html='lc.nativeName') - v-list-tile-action(v-if='lc.isInstalled && lc.installDate < lc.updatedAt', @click='download(lc.code)') - v-icon.blue--text cached - v-list-tile-action(v-else-if='lc.isInstalled') - v-icon.green--text check - v-list-tile-action(v-else-if='lc.isDownloading') - v-progress-circular(indeterminate, color='blue', size='20', :width='3') - v-list-tile-action(v-else) - v-btn(icon, @click='download(lc)') - v-icon.grey--text cloud_download + v-list(two-line, dense) + template(v-for='(lc, idx) in locales') + v-list-tile(:key='lc.code') + v-list-tile-avatar + v-avatar.teal.white--text(size='40') {{lc.code.toUpperCase()}} + v-list-tile-content + v-list-tile-title(v-html='lc.name') + v-list-tile-sub-title(v-html='lc.nativeName') + v-list-tile-action(v-if='lc.isRTL') + v-chip(label, small).caption.grey--text.text--darken-2 RTL + v-list-tile-action(v-if='lc.isInstalled && lc.installDate < lc.updatedAt', @click='download(lc.code)') + v-icon.blue--text cached + v-list-tile-action(v-else-if='lc.isInstalled') + v-icon.green--text check + v-list-tile-action(v-else-if='lc.isDownloading') + v-progress-circular(indeterminate, color='blue', size='20', :width='3') + v-list-tile-action(v-else) + v-btn(icon, @click='download(lc)') + v-icon.grey--text cloud_download + v-divider.my-0(inset, v-if='idx < locales.length - 1')