diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue | 107 |
1 files changed, 35 insertions, 72 deletions
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue index b405d7fced4..73300756472 100644 --- a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue +++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue @@ -1,47 +1,22 @@ <!-- - - @copyright 2022 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <div class="locale"> - <select :id="inputId" @change="onLocaleChange"> - <option v-for="currentLocale in localesForLanguage" - :key="currentLocale.code" - :selected="locale.code === currentLocale.code" - :value="currentLocale.code"> - {{ currentLocale.name }} - </option> - <option disabled> - ────────── - </option> - <option v-for="currentLocale in otherLocales" - :key="currentLocale.code" - :selected="locale.code === currentLocale.code" - :value="currentLocale.code"> - {{ currentLocale.name }} - </option> - </select> + <NcSelect :aria-label-listbox="t('settings', 'Locales')" + class="locale__select" + :clearable="false" + :input-id="inputId" + label="name" + label-outside + :options="allLocales" + :value="locale" + @option:selected="updateLocale" /> <div class="example"> - <Web :size="20" /> + <MapClock :size="20" /> <div class="example__text"> <p> <span>{{ example.date }}</span> @@ -57,18 +32,19 @@ <script> import moment from '@nextcloud/moment' -import Web from 'vue-material-design-icons/Web.vue' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import MapClock from 'vue-material-design-icons/MapClock.vue' import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js' import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' -import { validateLocale } from '../../../utils/validate.js' -import { handleError } from '../../../utils/handlers.js' +import { handleError } from '../../../utils/handlers.ts' export default { name: 'Locale', components: { - Web, + MapClock, + NcSelect, }, props: { @@ -93,6 +69,7 @@ export default { data() { return { initialLocale: this.locale, + intervalId: 0, example: { date: moment().format('L'), time: moment().format('LTS'), @@ -102,28 +79,25 @@ export default { }, computed: { + /** + * All available locale, sorted like: current, common, other + */ allLocales() { - return Object.freeze( - [...this.localesForLanguage, ...this.otherLocales] - .reduce((acc, { code, name }) => ({ ...acc, [code]: name }), {}), - ) + const common = this.localesForLanguage.filter(l => l.code !== this.locale.code) + const other = this.otherLocales.filter(l => l.code !== this.locale.code) + return [this.locale, ...common, ...other] }, }, - created() { - setInterval(this.refreshExample, 1000) + mounted() { + this.intervalId = window.setInterval(this.refreshExample, 1000) }, - methods: { - async onLocaleChange(e) { - const locale = this.constructLocale(e.target.value) - this.$emit('update:locale', locale) - - if (validateLocale(locale)) { - await this.updateLocale(locale) - } - }, + beforeDestroy() { + window.clearInterval(this.intervalId) + }, + methods: { async updateLocale(locale) { try { const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, locale.code) @@ -131,7 +105,7 @@ export default { locale, status: responseData.ocs?.meta?.status, }) - this.reloadPage() + window.location.reload() } catch (e) { this.handleResponse({ errorMessage: t('settings', 'Unable to update locale'), @@ -140,13 +114,6 @@ export default { } }, - constructLocale(localeCode) { - return { - code: localeCode, - name: this.allLocales[localeCode], - } - }, - handleResponse({ locale, status, errorMessage, error }) { if (status === 'ok') { this.initialLocale = locale @@ -163,10 +130,6 @@ export default { firstDayOfWeek: window.dayNames[window.firstDay], } }, - - reloadPage() { - location.reload() - }, }, } </script> @@ -175,8 +138,8 @@ export default { .locale { display: grid; - select { - width: 100%; + #{&}__select { + margin-top: 6px; // align with other inputs } } @@ -184,9 +147,9 @@ export default { margin: 10px 0; display: flex; gap: 0 10px; - color: var(--color-text-lighter); + color: var(--color-text-maxcontrast); - &::v-deep .material-design-icon { + &:deep(.material-design-icon) { align-self: flex-start; margin-top: 2px; } |