zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions 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/components/base/LanguageSelectButtonBase.ts
+72
View File
@@ -0,0 +1,72 @@
import { computed } from 'vue';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useSettingsStore } from '@/stores/setting.ts';
export interface LanguageSelectButtonBaseProps {
disabled?: boolean;
useModelValue?: boolean;
modelValue?: string;
}
export interface LanguageSelectButtonBaseEmits {
(e: 'update:modelValue', value: string): void;
}
export function useLanguageSelectButtonBase(props: LanguageSelectButtonBaseProps, emit: LanguageSelectButtonBaseEmits) {
const { getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions, getLanguageInfo, setLanguage } = useI18n();
const settingsStore = useSettingsStore();
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const currentLocale = computed<string>({
get: () => getCurrentLanguageTag(),
set: (value: string) => {
const localeDefaultSettings = setLanguage(value);
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
}
});
const currentLanguageName = computed<string>(() => {
if (props.useModelValue && props.modelValue) {
const languageInfo = getLanguageInfo(props.modelValue);
if (!languageInfo) {
return '';
}
return languageInfo.displayName;
} else {
return getCurrentLanguageDisplayName()
}
});
function updateLanguage(languageTag: string): void {
if (props.useModelValue) {
emit('update:modelValue', languageTag);
} else {
currentLocale.value = languageTag;
}
}
function isLanguageSelected(languageTag: string): boolean {
if (props.useModelValue) {
return props.modelValue === languageTag;
} else {
return currentLocale.value === languageTag;
}
}
return {
// computed states
allLanguages,
currentLocale,
currentLanguageName,
// functions
updateLanguage,
isLanguageSelected
}
}
src/components/desktop/LanguageSelectButton.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<v-menu location="bottom" max-height="500">
<template #activator="{ props }">
<v-btn variant="text" :disabled="disabled" 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="updateLanguage(lang.languageTag)">
<div class="d-flex align-center">
<span>{{ lang.nativeDisplayName }}</span>
<v-spacer style="min-width: 40px" />
<v-icon :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
<span class="text-field-append-text" v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
</div>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script setup lang="ts">
import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
import {
mdiCheck
} from '@mdi/js';
const props = defineProps<LanguageSelectButtonBaseProps>();
const emit = defineEmits<LanguageSelectButtonBaseEmits>();
const {
allLanguages,
currentLanguageName,
updateLanguage,
isLanguageSelected
} = useLanguageSelectButtonBase(props, emit);
</script>
src/components/mobile/LanguageSelectButton.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<f7-button small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
<f7-popover class="lang-popover-menu">
<f7-list dividers>
<f7-list-item link="#" no-chevron popover-close
:key="lang.languageTag"
:title="lang.nativeDisplayName"
v-for="lang in allLanguages"
@click="updateLanguage(lang.languageTag)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="isLanguageSelected(lang.languageTag)"></f7-icon>
<span v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
</template>
</f7-list-item>
</f7-list>
</f7-popover>
</template>
<script setup lang="ts">
import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
const props = defineProps<LanguageSelectButtonBaseProps>();
const emit = defineEmits<LanguageSelectButtonBaseEmits>();
const {
allLanguages,
currentLanguageName,
updateLanguage,
isLanguageSelected
} = useLanguageSelectButtonBase(props, emit);
</script>
src/components/mobile/ListItemSelectionSheet.vue
+3
View File
@@ -14,6 +14,7 @@
<f7-list-item link="#" no-chevron
:title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
:value="getItemValue(item, index, valueField, valueType)"
:after="ti((afterField ? (item as Record<string, unknown>)[afterField] : item) as string, !!afterI18n)"
:class="{ 'list-item-selected': isSelected(item, index) }"
:key="getItemValue(item, index, keyField, valueType)"
v-for="(item, index) in items"
@@ -45,6 +46,8 @@ const props = defineProps<{
valueField?: string; // for value type == item
titleField: string;
titleI18n?: boolean;
afterField: string;
afterI18n?: boolean;
iconField?: string;
iconType?: string;
colorField?: string;
src/desktop-main.ts
+2
View File
@@ -78,6 +78,7 @@ import MapView from '@/components/common/MapView.vue';
import ItemIcon from '@/components/desktop/ItemIcon.vue';
import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
import AmountInput from '@/components/desktop/AmountInput.vue';
import LanguageSelectButton from '@/components/desktop/LanguageSelectButton.vue';
import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
import DateSelect from '@/components/desktop/DateSelect.vue';
import ColorSelect from '@/components/desktop/ColorSelect.vue';
@@ -450,6 +451,7 @@ app.component('MapView', MapView);
app.component('ItemIcon', ItemIcon);
app.component('BtnVerticalGroup', BtnVerticalGroup);
app.component('AmountInput', AmountInput);
app.component('LanguageSelectButton', LanguageSelectButton);
app.component('DateTimeSelect', DateTimeSelect);
app.component('DateSelect', DateSelect);
app.component('ColorSelect', ColorSelect);
src/locales/helpers.ts
+5 -7
View File
@@ -612,16 +612,13 @@ export function useI18n() {
}
const languageInfo = ALL_LANGUAGES[languageTag];
let displayName = languageInfo.displayName;
const displayName = languageInfo.displayName;
const languageNameInCurrentLanguage = getLanguageDisplayName(languageInfo.name);
if (languageNameInCurrentLanguage && languageNameInCurrentLanguage !== displayName) {
displayName = `${languageNameInCurrentLanguage} (${displayName})`;
}
ret.push({
languageTag: languageTag,
displayName: displayName
displayName: languageNameInCurrentLanguage,
nativeDisplayName: displayName
});
}
@@ -632,7 +629,8 @@ export function useI18n() {
if (includeSystemDefault) {
ret.splice(0, 0, {
languageTag: '',
displayName: t('System Default')
displayName: '',
nativeDisplayName: t('System Default')
});
}
src/locales/index.ts
+1
View File
@@ -17,6 +17,7 @@ export interface LanguageInfo {
export interface LanguageOption {
readonly languageTag: string;
readonly displayName: string;
readonly nativeDisplayName: string;
}
export const DEFAULT_LANGUAGE: string = 'en';
src/mobile-main.ts
+2
View File
@@ -86,6 +86,7 @@ import PinCodeInput from '@/components/common/PinCodeInput.vue';
import MapView from '@/components/common/MapView.vue';
import ItemIcon from '@/components/mobile/ItemIcon.vue';
import LanguageSelectButton from '@/components/mobile/LanguageSelectButton.vue';
import PieChart from '@/components/mobile/PieChart.vue';
import TrendsBarChart from '@/components/mobile/TrendsBarChart.vue';
import PinCodeInputSheet from '@/components/mobile/PinCodeInputSheet.vue';
@@ -170,6 +171,7 @@ app.component('PinCodeInput', PinCodeInput);
app.component('MapView', MapView);
app.component('ItemIcon', ItemIcon);
app.component('LanguageSelectButton', LanguageSelectButton);
app.component('PieChart', PieChart);
app.component('TrendsBarChart', TrendsBarChart);
app.component('PinCodeInputSheet', PinCodeInputSheet);
src/styles/mobile/global.css
+14
View File
@@ -166,6 +166,20 @@ i.icon.la, i.icon.las, i.icon.lab {
overflow-y: auto;
}
.lang-popover-menu .popover-inner .item-title {
display: flex;
flex-shrink: 0;
overflow: inherit;
text-overflow: inherit;
}
.lang-popover-menu .popover-inner .item-after {
display: block;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.login-page-fixed-bottom {
background-color: inherit !important;
}
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;
}
}