modify language select style

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
+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';
+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,
+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();
+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">
+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;
}
}