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/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>;