mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 15:37:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify language select style

Browse Source
This commit is contained in:
MaysWind
2025-03-07 01:47:27 +08:00
parent 47f70098df
commit beeeb1c059
25 changed files with 250 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/LoginPageBase.ts
+1 -6
View File
@@ -42,11 +42,6 @@ export function useLoginPageBase() {
const tips = computed<string>(() => getServerTipContent(getLoginPageTips()));
function changeLanguage(locale: string): void {
const localeDefaultSettings = setLanguage(locale);
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
}
function doAfterLogin(authResponse: AuthResponse): void {
if (authResponse.user) {
const localeDefaultSettings = setLanguage(authResponse.user.language);
@@ -76,11 +71,11 @@ export function useLoginPageBase() {
twoFAVerifyType,
logining,
verifying,
// computed states
inputIsEmpty,
twoFAInputIsEmpty,
tips,
// functions
changeLanguage,
doAfterLogin
}
}
src/views/base/SignupPageBase.ts
+11
View File
@@ -23,6 +23,16 @@ export function useSignupPageBase() {
const user = ref<User>(userStore.generateNewUserModel(getCurrentLanguageTag()));
const submitting = ref<boolean>(false);
const languageTitle = computed<string>(() => {
const languageInCurrentLanguage = tt('Language');
if (languageInCurrentLanguage !== 'Language') {
return `${languageInCurrentLanguage} / Language`;
}
return languageInCurrentLanguage;
});
const currentLocale = computed<string>({
get: () => getCurrentLanguageTag(),
set: (value: string) => {
@@ -118,6 +128,7 @@ export function useSignupPageBase() {
user,
submitting,
// computed states
languageTitle,
currentLocale,
currentLanguageName,
inputEmptyProblemMessage,
src/views/base/UnlockPageBase.ts
-6
View File
@@ -38,11 +38,6 @@ export function useUnlockPageBase() {
return !!pinCode && pinCode.length === 6;
}
function changeLanguage(locale: string): void {
const localeDefaultSettings = setLanguage(locale);
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
}
function doAfterUnlocked(): void {
transactionsStore.initTransactionDraft();
tokensStore.refreshTokenAndRevokeOldToken().then(response => {
@@ -82,7 +77,6 @@ export function useUnlockPageBase() {
isWebAuthnAvailable,
// methods
isPinCodeValid,
changeLanguage,
doAfterUnlocked,
doRelogin
};
src/views/desktop/ForgetPasswordPage.vue
+2 -31
View File
@@ -67,22 +67,7 @@
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-center">
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="requesting"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
<v-list-item-title
class="cursor-pointer"
@click="changeLanguage(lang.languageTag)">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="requesting" />
</v-col>
<v-col cols="12" class="d-flex align-center pt-0">
@@ -100,23 +85,19 @@
</v-col>
</v-row>
<confirm-dialog ref="confirmDialog"/>
<snack-bar ref="snackbar" />
</div>
</template>
<script setup lang="ts">
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import { ref, computed, useTemplateRef } from 'vue';
import { useTheme } from 'vuetify';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useRootStore } from '@/stores/index.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
import { ThemeType } from '@/core/theme.ts';
@@ -126,27 +107,22 @@ import {
mdiChevronLeft,
} from '@mdi/js';
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
type SnackBarType = InstanceType<typeof SnackBar>;
const theme = useTheme();
const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
const { tt } = useI18n();
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const version = `v${getVersion()}`;
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const email = ref<string>('');
const requesting = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
function requestResetPassword(): void {
if (!email.value) {
@@ -169,9 +145,4 @@ function requestResetPassword(): void {
}
});
}
function changeLanguage(locale: string): void {
const localeDefaultSettings = setLanguage(locale);
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
}
</script>
src/views/desktop/LoginPage.vue
+2 -21
View File
@@ -129,22 +129,7 @@
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-center">
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="logining || verifying"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
<v-list-item-title
class="cursor-pointer"
@click="changeLanguage(lang.languageTag)">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="logining || verifying" />
</v-col>
<v-col cols="12" class="d-flex align-center pt-0">
@@ -175,7 +160,6 @@ import { ref, computed, useTemplateRef, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
@@ -196,7 +180,7 @@ type SnackBarType = InstanceType<typeof SnackBar>;
const router = useRouter();
const theme = useTheme();
const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
const { tt } = useI18n();
const rootStore = useRootStore();
@@ -213,7 +197,6 @@ const {
inputIsEmpty,
twoFAInputIsEmpty,
tips,
changeLanguage,
doAfterLogin
} = useLoginPageBase();
@@ -224,9 +207,7 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
const show2faInput = ref<boolean>(false);
const showMobileQrCode = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
function login(): void {
if (!username.value) {
src/views/desktop/ResetPasswordPage.vue
+2 -27
View File
@@ -92,22 +92,7 @@
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-center">
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="updating"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
<v-list-item-title
class="cursor-pointer"
@click="changeLanguage(lang.languageTag)">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="updating" />
</v-col>
<v-col cols="12" class="d-flex align-center pt-0">
@@ -139,11 +124,9 @@ import { ref, computed, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useRootStore } from '@/stores/index.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
import { ThemeType } from '@/core/theme.ts';
@@ -163,10 +146,9 @@ const props = defineProps<{
const router = useRouter();
const theme = useTheme();
const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
const { tt } = useI18n();
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const version = `v${getVersion()}`;
@@ -181,9 +163,7 @@ const confirmPassword = ref<string>('');
const updating = ref<boolean>(false);
const passwordChanged = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
const inputProblemMessage = computed<string | null>(() => {
if (!email.value) {
@@ -201,11 +181,6 @@ const inputProblemMessage = computed<string | null>(() => {
}
});
function changeLanguage(locale: string): void {
const localeDefaultSettings = setLanguage(locale);
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
}
function onSnackbarShowStateChanged(newValue: boolean): void {
if (!newValue && passwordChanged.value) {
router.replace('/login');
src/views/desktop/SignupPage.vue
+22 -21
View File
@@ -91,14 +91,29 @@
<v-row>
<v-col cols="12" md="12">
<v-select
item-title="displayName"
item-title="nativeDisplayName"
item-value="languageTag"
:disabled="submitting || navigateToHomePage"
:label="tt('Language')"
:placeholder="tt('Language')"
:label="languageTitle"
:placeholder="languageTitle"
:items="allLanguages"
v-model="currentLocale"
/>
>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<span>{{ item.title }}</span>
<v-spacer />
<v-icon :icon="mdiCheck" v-if="currentLocale == item.raw.languageTag" />
<span class="text-field-append-text" v-if="currentLocale !== item.raw.languageTag">{{ item.raw.displayName }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</v-col>
</v-row>
@@ -146,22 +161,8 @@
v-model="usePresetCategories"/>
</v-col>
<v-col cols="12" sm="6" class="text-right-sm">
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="submitting || navigateToHomePage"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
<v-list-item-title
class="cursor-pointer"
@click="currentLocale = lang.languageTag">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="submitting || navigateToHomePage"
:use-model-value="true" v-model="currentLocale" />
</v-col>
</v-row>
@@ -273,8 +274,8 @@ const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTrans
const {
user,
submitting,
languageTitle,
currentLocale,
currentLanguageName,
inputEmptyProblemMessage,
inputInvalidProblemMessage,
getCategoryTypeName,
src/views/desktop/UnlockPage.vue
+3 -21
View File
@@ -68,22 +68,7 @@
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-center">
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="verifyingByWebAuthn"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
<v-list-item-title
class="cursor-pointer"
@click="changeLanguage(lang.languageTag)">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="verifyingByWebAuthn" />
</v-col>
<v-col cols="12" class="d-flex align-center pt-0">
@@ -114,7 +99,6 @@ import { ref, computed, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
@@ -141,8 +125,8 @@ type SnackBarType = InstanceType<typeof SnackBar>;
const router = useRouter();
const theme = useTheme();
const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
const { tt } = useI18n();
const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, doAfterUnlocked, doRelogin } = useUnlockPageBase();
const settingsStore = useSettingsStore();
const userStore = useUserStore();
@@ -152,9 +136,7 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
const verifyingByWebAuthn = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
function unlockByWebAuthn(): void {
const webAuthnCredentialId = getWebAuthnCredentialId();
src/views/desktop/VerifyEmailPage.vue
+2 -27
View File
@@ -71,22 +71,7 @@
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-center">
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="resending"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
<v-list-item-title
class="cursor-pointer"
@click="changeLanguage(lang.languageTag)">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="resending" />
</v-col>
<v-col cols="12" class="d-flex align-center pt-0">
@@ -117,11 +102,9 @@ import { ref, computed, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useRootStore } from '@/stores/index.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
import { ThemeType } from '@/core/theme.ts';
@@ -145,10 +128,9 @@ const props = defineProps<{
const router = useRouter();
const theme = useTheme();
const { tt, te, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
const { tt, te } = useI18n();
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const version = `v${getVersion()}`;
@@ -161,9 +143,7 @@ const resending = ref<boolean>(false);
const verified = ref<boolean>(false);
const errorMessage = ref<string>('');
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
function init(): void {
verified.value = false;
@@ -210,11 +190,6 @@ function resendEmail(): void {
});
}
function changeLanguage(locale: string): void {
const localeDefaultSettings = setLanguage(locale);
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
}
function onSnackbarShowStateChanged(newValue: boolean): void {
if (!newValue && verified.value && isUserLogined()) {
router.replace('/');
src/views/desktop/categories/list/dialogs/PresetDialog.vue
+3 -26
View File
@@ -11,19 +11,8 @@
<div class="d-flex align-center mb-1">
<h4>{{ getCategoryTypeName(categoryType) }}</h4>
<v-spacer/>
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text" :disabled="submitting"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
<v-list-item-title class="cursor-pointer" @click="currentLocale = lang.languageTag">
{{ lang.displayName }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<language-select-button :disabled="submitting"
:use-model-value="true" v-model="currentLocale" />
</div>
<v-expansion-panels class="border rounded mb-2" variant="accordion" multiple :disabled="submitting">
@@ -76,7 +65,6 @@ import { useI18n } from '@/locales/helpers.ts';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import type { PartialRecord } from '@/core/base.ts';
import type { LanguageOption } from '@/locales/index.ts';
import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
import { categorizedArrayToPlainArray } from '@/lib/common.ts';
@@ -93,7 +81,7 @@ const emit = defineEmits<{
(e: 'category:saved', event: { message: string }): void;
}>();
const { tt, getCurrentLanguageTag, getAllLanguageOptions, getAllTransactionDefaultCategories, getLanguageInfo } = useI18n();
const { tt, getCurrentLanguageTag, getAllTransactionDefaultCategories } = useI18n();
const transactionCategoriesStore = useTransactionCategoriesStore();
@@ -102,7 +90,6 @@ const snackbar = useTemplateRef<SnackBarType>('snackbar');
const currentLocale = ref<string>(getCurrentLanguageTag());
const submitting = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(props.categoryType, currentLocale.value));
const showState = computed<boolean>({
@@ -110,16 +97,6 @@ const showState = computed<boolean>({
set: (value) => emit('update:show', value)
});
const currentLanguageName = computed<string>(() => {
const languageInfo = getLanguageInfo(currentLocale.value);
if (!languageInfo) {
return '';
}
return languageInfo.displayName;
});
function getCategoryTypeName(categoryType: CategoryType): string {
switch (categoryType) {
case CategoryType.Income:
src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+19 -3
View File
@@ -117,7 +117,7 @@
<v-row>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-title="nativeDisplayName"
item-value="languageTag"
persistent-placeholder
:disabled="loading || saving"
@@ -125,7 +125,22 @@
:placeholder="languageTitle"
:items="allLanguages"
v-model="newProfile.language"
/>
>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<span>{{ item.title }}</span>
<v-spacer />
<v-icon :icon="mdiCheck" v-if="newProfile.language == item.raw.languageTag" />
<span class="text-field-append-text" v-if="newProfile.language !== item.raw.languageTag">{{ item.raw.displayName }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</v-col>
<v-col cols="12" md="6">
@@ -351,7 +366,8 @@ import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
import {
mdiAccount,
mdiAccountEditOutline
mdiAccountEditOutline,
mdiCheck
} from '@mdi/js';
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
src/views/mobile/LoginPage.vue
+2 -23
View File
@@ -56,7 +56,7 @@
</f7-block-footer>
</f7-list>
<f7-button small popover-open=".lang-popover-menu" :text="currentLanguageName"></f7-button>
<language-select-button />
<f7-list class="login-page-bottom">
<f7-block-footer>
@@ -76,22 +76,6 @@
</div>
</f7-toolbar>
<f7-popover class="lang-popover-menu">
<f7-list dividers>
<f7-list-item
link="#" no-chevron popover-close
:title="lang.displayName"
:key="lang.languageTag"
v-for="lang in allLanguages"
@click="changeLanguage(lang.languageTag)"
>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === lang.languageTag"></f7-icon>
</template>
</f7-list-item>
</f7-list>
</f7-popover>
<f7-sheet
style="height:auto"
:opened="show2faSheet" @sheet:closed="show2faSheet = false"
@@ -185,7 +169,6 @@
import { ref, computed } from 'vue';
import type { Router } from 'framework7/types';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
@@ -201,7 +184,7 @@ const props = defineProps<{
f7router: Router.Router;
}>();
const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
const { tt } = useI18n();
const { showAlert, showToast } = useI18nUIComponents();
const rootStore = useRootStore();
@@ -219,7 +202,6 @@ const {
inputIsEmpty,
twoFAInputIsEmpty,
tips,
changeLanguage,
doAfterLogin
} = useLoginPageBase();
@@ -233,9 +215,6 @@ const show2faSheet = ref<boolean>(false);
const showForgetPasswordSheet = ref<boolean>(false);
const showVerifyEmailSheet = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
const twoFAVerifyTypeSwitchName = computed<string>(() => {
if (twoFAVerifyType.value === 'backupcode') {
return 'Use Passcode';
src/views/mobile/SignupPage.vue
+6 -4
View File
@@ -61,14 +61,14 @@
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:key="currentLocale + '_lang'"
:header="tt('Language')"
:header="languageTitle"
:title="currentLanguageName"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Language'), popupCloseLinkText: tt('Done') }"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: languageTitle, popupCloseLinkText: tt('Done') }"
>
<select v-model="currentLocale">
<option :value="lang.languageTag"
:key="lang.languageTag"
v-for="lang in allLanguages">{{ lang.displayName }}</option>
v-for="lang in allLanguages">{{ lang.nativeDisplayName }}</option>
</select>
</f7-list-item>
@@ -165,7 +165,8 @@
<list-item-selection-sheet value-type="item"
value-field="languageTag"
title-field="displayName"
title-field="nativeDisplayName"
after-field="displayName"
:items="allLanguages"
v-model:show="showPresetCategoriesChangeLocaleSheet"
v-model="currentLocale">
@@ -202,6 +203,7 @@ const { showAlert, showToast } = useI18nUIComponents();
const {
user,
submitting,
languageTitle,
currentLocale,
currentLanguageName,
inputEmptyProblemMessage,
src/views/mobile/UnlockPage.vue
+3 -25
View File
@@ -26,7 +26,7 @@
</f7-block-footer>
</f7-list>
<f7-button small popover-open=".lang-popover-menu" :text="currentLanguageName"></f7-button>
<language-select-button />
<f7-list class="login-page-bottom">
<f7-block-footer>
@@ -45,30 +45,12 @@
<span>{{ version }}</span>
</div>
</f7-toolbar>
<f7-popover class="lang-popover-menu">
<f7-list dividers>
<f7-list-item
link="#" no-chevron popover-close
:title="lang.displayName"
:key="lang.languageTag"
v-for="lang in allLanguages"
@click="changeLanguage(lang.languageTag)"
>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="currentLanguageCode === lang.languageTag"></f7-icon>
</template>
</f7-list-item>
</f7-list>
</f7-popover>
</f7-page>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import type { Router } from 'framework7/types';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
import { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
@@ -94,17 +76,13 @@ const props = defineProps<{
f7router: Router.Router;
}>();
const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
const { tt } = useI18n();
const { showToast, showConfirm } = useI18nUIComponents();
const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, doAfterUnlocked, doRelogin } = useUnlockPageBase();
const settingsStore = useSettingsStore();
const userStore = useUserStore();
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
function unlockByWebAuthn(): void {
const router = props.f7router;
const webAuthnCredentialId = getWebAuthnCredentialId();
src/views/mobile/categories/PresetPage.vue
+2 -1
View File
@@ -47,7 +47,8 @@
<list-item-selection-sheet value-type="item"
value-field="languageTag"
title-field="displayName"
title-field="nativeDisplayName"
after-field="displayName"
:items="allLanguages"
v-model:show="showChangeLocaleSheet"
v-model="currentLocale">
src/views/mobile/users/UserProfilePage.vue
+2 -2
View File
@@ -135,7 +135,7 @@
<select v-model="newProfile.language">
<option :value="language.languageTag"
:key="language.languageTag"
v-for="language in allLanguages">{{ language.displayName }}</option>
v-for="language in allLanguages">{{ language.nativeDisplayName }}</option>
</select>
</f7-list-item>
@@ -407,7 +407,7 @@ const showMoreActionSheet = ref<boolean>(false);
const currentLanguageName = computed<string>(() => {
for (let i = 0; i < allLanguages.value.length; i++) {
if (allLanguages.value[i].languageTag === newProfile.value.language) {
return allLanguages.value[i].displayName;
return allLanguages.value[i].nativeDisplayName;
}
}