diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/LanguageSection')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue | 110 | ||||
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue | 59 |
2 files changed, 59 insertions, 110 deletions
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue index 2f11f493207..8f42b2771c0 100644 --- a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue +++ b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue @@ -1,46 +1,19 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - 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: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <div class="language"> - <select id="language" - :placeholder="t('settings', 'Language')" - @change="onLanguageChange"> - <option v-for="commonLanguage in commonLanguages" - :key="commonLanguage.code" - :selected="language.code === commonLanguage.code" - :value="commonLanguage.code"> - {{ commonLanguage.name }} - </option> - <option disabled> - ────────── - </option> - <option v-for="otherLanguage in otherLanguages" - :key="otherLanguage.code" - :selected="language.code === otherLanguage.code" - :value="otherLanguage.code"> - {{ otherLanguage.name }} - </option> - </select> + <NcSelect :aria-label-listbox="t('settings', 'Languages')" + class="language__select" + :clearable="false" + :input-id="inputId" + label="name" + label-outside + :options="allLanguages" + :value="language" + @option:selected="onLanguageChange" /> <a href="https://www.transifex.com/nextcloud/nextcloud/" target="_blank" @@ -51,16 +24,25 @@ </template> <script> -import { showError } from '@nextcloud/dialogs' +import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js' +import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' +import { validateLanguage } from '../../../utils/validate.js' +import { handleError } from '../../../utils/handlers.ts' -import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants' -import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService' -import { validateLanguage } from '../../../utils/validate' +import NcSelect from '@nextcloud/vue/components/NcSelect' export default { name: 'Language', + components: { + NcSelect, + }, + props: { + inputId: { + type: String, + default: null, + }, commonLanguages: { type: Array, required: true, @@ -82,17 +64,18 @@ export default { }, computed: { + /** + * All available languages, sorted like: current, common, other + */ allLanguages() { - return Object.freeze( - [...this.commonLanguages, ...this.otherLanguages] - .reduce((acc, { code, name }) => ({ ...acc, [code]: name }), {}) - ) + const common = this.commonLanguages.filter(l => l.code !== this.language.code) + const other = this.otherLanguages.filter(l => l.code !== this.language.code) + return [this.language, ...common, ...other] }, }, methods: { - async onLanguageChange(e) { - const language = this.constructLanguage(e.target.value) + async onLanguageChange(language) { this.$emit('update:language', language) if (validateLanguage(language)) { @@ -107,7 +90,7 @@ export default { language, status: responseData.ocs?.meta?.status, }) - this.reloadPage() + window.location.reload() } catch (e) { this.handleResponse({ errorMessage: t('settings', 'Unable to update language'), @@ -116,26 +99,14 @@ export default { } }, - constructLanguage(languageCode) { - return { - code: languageCode, - name: this.allLanguages[languageCode], - } - }, - handleResponse({ language, status, errorMessage, error }) { if (status === 'ok') { // Ensure that local state reflects server state this.initialLanguage = language } else { - showError(errorMessage) - this.logger.error(errorMessage, error) + handleError(error, errorMessage) } }, - - reloadPage() { - location.reload() - }, }, } </script> @@ -144,22 +115,11 @@ export default { .language { display: grid; - select { - width: 100%; - height: 34px; - margin: 3px 3px 3px 0; - padding: 6px 16px; - color: var(--color-main-text); - border: 1px solid var(--color-border-dark); - border-radius: var(--border-radius); - background: var(--icon-triangle-s-000) no-repeat right 4px center; - font-family: var(--font-face); - appearance: none; - cursor: pointer; + #{&}__select { + margin-top: 6px; // align with other inputs } a { - color: var(--color-main-text); text-decoration: none; width: max-content; } diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue index 90882b23869..4e92436fd63 100644 --- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue +++ b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue @@ -1,35 +1,18 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - 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: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <section> - <HeaderBar :account-property="accountProperty" - label-for="language" /> + <HeaderBar :input-id="inputId" + :readable="propertyReadable" /> - <template v-if="isEditable"> - <Language :common-languages="commonLanguages" - :other-languages="otherLanguages" - :language.sync="language" /> - </template> + <Language v-if="isEditable" + :input-id="inputId" + :common-languages="commonLanguages" + :other-languages="otherLanguages" + :language.sync="language" /> <span v-else> {{ t('settings', 'No language set') }} @@ -40,10 +23,10 @@ <script> import { loadState } from '@nextcloud/initial-state' -import Language from './Language' -import HeaderBar from '../shared/HeaderBar' +import Language from './Language.vue' +import HeaderBar from '../shared/HeaderBar.vue' -import { ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_SETTING_PROPERTY_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState('settings', 'personalInfoParameters', {}) @@ -55,16 +38,26 @@ export default { HeaderBar, }, - data() { + setup() { + // Non reactive instance properties return { - accountProperty: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LANGUAGE, commonLanguages, otherLanguages, + propertyReadable: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LANGUAGE, + } + }, + + data() { + return { language: activeLanguage, } }, computed: { + inputId() { + return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}` + }, + isEditable() { return Boolean(this.language) }, @@ -75,9 +68,5 @@ export default { <style lang="scss" scoped> section { padding: 10px 10px; - - &::v-deep button:disabled { - cursor: default; - } } </style> |