fix incorrect toggle styling when the title is too long

This commit is contained in:
MaysWind
2026-05-22 00:01:06 +08:00
parent d1525ad017
commit a9f60ab9d4
4 changed files with 31 additions and 10 deletions
+12 -4
View File
@@ -8,12 +8,20 @@
<f7-list strong inset dividers class="margin-top"> <f7-list strong inset dividers class="margin-top">
<f7-list-item :title="tt('Status')" :after="tt(isEnableApplicationLock ? 'Enabled' : 'Disabled')"></f7-list-item> <f7-list-item :title="tt('Status')" :after="tt(isEnableApplicationLock ? 'Enabled' : 'Disabled')"></f7-list-item>
<f7-list-item v-if="isEnableApplicationLock"> <f7-list-item v-if="isEnableApplicationLock">
<span>{{ tt('Unlock with PIN Code') }}</span> <template #after-title>
<f7-toggle checked disabled></f7-toggle> {{ tt('Unlock with PIN Code') }}
</template>
<template #after>
<f7-toggle checked disabled></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
<f7-list-item v-if="isEnableApplicationLock && isSupportedWebAuthn"> <f7-list-item v-if="isEnableApplicationLock && isSupportedWebAuthn">
<span>{{ tt('Unlock with WebAuthn') }}</span> <template #after-title>
<f7-toggle :checked="isEnableApplicationLockWebAuthn" @toggle:change="isEnableApplicationLockWebAuthn = $event"></f7-toggle> {{ tt('Unlock with WebAuthn') }}
</template>
<template #after>
<f7-toggle :checked="isEnableApplicationLockWebAuthn" @toggle:change="isEnableApplicationLockWebAuthn = $event"></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
<f7-list-button v-if="isEnableApplicationLock" @click="disable(null)">{{ tt('Disable') }}</f7-list-button> <f7-list-button v-if="isEnableApplicationLock" @click="disable(null)">{{ tt('Disable') }}</f7-list-button>
<f7-list-button v-if="!isEnableApplicationLock" @click="enable(null)">{{ tt('Enable') }}</f7-list-button> <f7-list-button v-if="!isEnableApplicationLock" @click="enable(null)">{{ tt('Enable') }}</f7-list-button>
+7 -2
View File
@@ -129,8 +129,13 @@
</f7-list> </f7-list>
<f7-list strong inset dividers class="margin-vertical"> <f7-list strong inset dividers class="margin-vertical">
<f7-list-item :title="tt('Use preset transaction categories')" link="#" @click="showPresetCategories = true"> <f7-list-item link="#" @click="showPresetCategories = true">
<f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle> <template #after-title>
{{ tt('Use preset transaction categories') }}
</template>
<template #after>
<f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
</f7-list> </f7-list>
+9 -3
View File
@@ -267,7 +267,9 @@
</f7-list-item> </f7-list-item>
<f7-list-item :title="tt('Visible')" v-if="editAccountId"> <f7-list-item :title="tt('Visible')" v-if="editAccountId">
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle> <template #after>
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
<f7-list-input <f7-list-input
@@ -361,7 +363,9 @@
</f7-list-item> </f7-list-item>
<f7-list-item :title="tt('Visible')" v-if="editAccountId"> <f7-list-item :title="tt('Visible')" v-if="editAccountId">
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle> <template #after>
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
<f7-list-input <f7-list-input
@@ -537,7 +541,9 @@
</f7-list-item> </f7-list-item>
<f7-list-item :title="tt('Visible')" v-if="editAccountId && !isNewAccount(subAccount)"> <f7-list-item :title="tt('Visible')" v-if="editAccountId && !isNewAccount(subAccount)">
<f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle> <template #after>
<f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
<f7-list-input <f7-list-input
+3 -1
View File
@@ -130,7 +130,9 @@
</f7-list-item> </f7-list-item>
<f7-list-item :title="tt('Visible')" v-if="editCategoryId"> <f7-list-item :title="tt('Visible')" v-if="editCategoryId">
<f7-toggle :checked="category.visible" @toggle:change="category.visible = $event"></f7-toggle> <template #after>
<f7-toggle :checked="category.visible" @toggle:change="category.visible = $event"></f7-toggle>
</template>
</f7-list-item> </f7-list-item>
<f7-list-input <f7-list-input