mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 23:47:33 +08:00
modify language select style
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user