mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-20 01:34:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

update transaction tag icon style

Browse Source
This commit is contained in:
MaysWind
2025-01-21 00:27:45 +08:00
parent 852c7899b5
commit 568abb6e03
14 changed files with 32 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/TransactionTagSelectionSheet.vue
+2 -2
View File
@@ -29,7 +29,7 @@
<template #title> <template #title>
<f7-block class="no-padding no-margin"> <f7-block class="no-padding no-margin">
<div class="display-flex"> <div class="display-flex">
<f7-icon f7="number"></f7-icon> <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
<div class="tag-selection-list-item list-item-valign-middle padding-left-half"> <div class="tag-selection-list-item list-item-valign-middle padding-left-half">
{{ tag.name }} {{ tag.name }}
</div> </div>
@@ -44,7 +44,7 @@
</f7-list-item> </f7-list-item>
<f7-list-item checkbox indeterminate disabled v-if="allowAddNewTag && newTag"> <f7-list-item checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
<template #media> <template #media>
<f7-icon f7="number"></f7-icon> <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
</template> </template>
<template #title> <template #title>
<div class="display-flex"> <div class="display-flex">
src/styles/mobile/font-size-default.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 12px; --ebk-transaction-day-of-week-font-size: 12px;
--ebk-transaction-account-arrow-font-size: 12px; --ebk-transaction-account-arrow-font-size: 12px;
--ebk-transaction-account-arrow-margin-top: -1px; --ebk-transaction-account-arrow-margin-top: -1px;
--ebk-transaction-tag-icon-font-size: 22px;
--ebk-transaction-tag-chip-font-size: 13px; --ebk-transaction-tag-chip-font-size: 13px;
--ebk-transaction-tag-chip-media-size: 19px; --ebk-transaction-tag-chip-media-size: 19px;
--ebk-transaction-tag-chip-height: 19px; --ebk-transaction-tag-chip-height: 19px;
src/styles/mobile/font-size-large.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 13px; --ebk-transaction-day-of-week-font-size: 13px;
--ebk-transaction-account-arrow-font-size: 13px; --ebk-transaction-account-arrow-font-size: 13px;
--ebk-transaction-account-arrow-margin-top: -2px; --ebk-transaction-account-arrow-margin-top: -2px;
--ebk-transaction-tag-icon-font-size: 24px;
--ebk-transaction-tag-chip-font-size: 13px; --ebk-transaction-tag-chip-font-size: 13px;
--ebk-transaction-tag-chip-media-size: 20px; --ebk-transaction-tag-chip-media-size: 20px;
--ebk-transaction-tag-chip-height: 20px; --ebk-transaction-tag-chip-height: 20px;
src/styles/mobile/font-size-small.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 12px; --ebk-transaction-day-of-week-font-size: 12px;
--ebk-transaction-account-arrow-font-size: 12px; --ebk-transaction-account-arrow-font-size: 12px;
--ebk-transaction-account-arrow-margin-top: -1px; --ebk-transaction-account-arrow-margin-top: -1px;
--ebk-transaction-tag-icon-font-size: 20px;
--ebk-transaction-tag-chip-font-size: 13px; --ebk-transaction-tag-chip-font-size: 13px;
--ebk-transaction-tag-chip-media-size: 18px; --ebk-transaction-tag-chip-media-size: 18px;
--ebk-transaction-tag-chip-height: 18px; --ebk-transaction-tag-chip-height: 18px;
src/styles/mobile/font-size-x-large.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 14px; --ebk-transaction-day-of-week-font-size: 14px;
--ebk-transaction-account-arrow-font-size: 14px; --ebk-transaction-account-arrow-font-size: 14px;
--ebk-transaction-account-arrow-margin-top: -2px; --ebk-transaction-account-arrow-margin-top: -2px;
--ebk-transaction-tag-icon-font-size: 26px;
--ebk-transaction-tag-chip-font-size: 14px; --ebk-transaction-tag-chip-font-size: 14px;
--ebk-transaction-tag-chip-media-size: 22px; --ebk-transaction-tag-chip-media-size: 22px;
--ebk-transaction-tag-chip-height: 22px; --ebk-transaction-tag-chip-height: 22px;
src/styles/mobile/font-size-xx-large.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 15px; --ebk-transaction-day-of-week-font-size: 15px;
--ebk-transaction-account-arrow-font-size: 15px; --ebk-transaction-account-arrow-font-size: 15px;
--ebk-transaction-account-arrow-margin-top: -3px; --ebk-transaction-account-arrow-margin-top: -3px;
--ebk-transaction-tag-icon-font-size: 28px;
--ebk-transaction-tag-chip-font-size: 15px; --ebk-transaction-tag-chip-font-size: 15px;
--ebk-transaction-tag-chip-media-size: 22px; --ebk-transaction-tag-chip-media-size: 22px;
--ebk-transaction-tag-chip-height: 22px; --ebk-transaction-tag-chip-height: 22px;
src/styles/mobile/font-size-xxx-large.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 17px; --ebk-transaction-day-of-week-font-size: 17px;
--ebk-transaction-account-arrow-font-size: 17px; --ebk-transaction-account-arrow-font-size: 17px;
--ebk-transaction-account-arrow-margin-top: -4px; --ebk-transaction-account-arrow-margin-top: -4px;
--ebk-transaction-tag-icon-font-size: 30px;
--ebk-transaction-tag-chip-font-size: 16px; --ebk-transaction-tag-chip-font-size: 16px;
--ebk-transaction-tag-chip-media-size: 24px; --ebk-transaction-tag-chip-media-size: 24px;
--ebk-transaction-tag-chip-height: 24px; --ebk-transaction-tag-chip-height: 24px;
src/styles/mobile/font-size-xxxx-large.css
+1
View File
@@ -77,6 +77,7 @@
--ebk-transaction-day-of-week-font-size: 19px; --ebk-transaction-day-of-week-font-size: 19px;
--ebk-transaction-account-arrow-font-size: 19px; --ebk-transaction-account-arrow-font-size: 19px;
--ebk-transaction-account-arrow-margin-top: -4px; --ebk-transaction-account-arrow-margin-top: -4px;
--ebk-transaction-tag-icon-font-size: 32px;
--ebk-transaction-tag-chip-font-size: 18px; --ebk-transaction-tag-chip-font-size: 18px;
--ebk-transaction-tag-chip-media-size: 26px; --ebk-transaction-tag-chip-media-size: 26px;
--ebk-transaction-tag-chip-height: 26px; --ebk-transaction-tag-chip-height: 26px;
src/styles/mobile/global.css
+5
View File
@@ -138,6 +138,11 @@ i.icon.la, i.icon.las, i.icon.lab {
font-size: var(--ebk-hide-icon-font-size); font-size: var(--ebk-hide-icon-font-size);
} }
.transaction-tag-icon {
font-size: var(--ebk-transaction-tag-icon-font-size);
align-self: center;
}
.login-page-logo { .login-page-logo {
width: 80px; width: 80px;
height: 80px; height: 80px;
src/views/mobile/settings/TextSizeSettingsPage.vue
+2 -1
View File
@@ -64,7 +64,8 @@
</div> </div>
<div class="item-footer"> <div class="item-footer">
<div class="transaction-tags"> <div class="transaction-tags">
<f7-chip media-bg-color="black" class="transaction-tag" :text="tt('Tag Title')"> <f7-chip media-text-color="var(--f7-chip-text-color)"
class="transaction-tag" :text="tt('Tag Title')">
<template #media> <template #media>
<f7-icon f7="number"></f7-icon> <f7-icon f7="number"></f7-icon>
</template> </template>
src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+1 -1
View File
@@ -81,7 +81,7 @@
v-show="showHidden || !transactionTag.hidden" v-show="showHidden || !transactionTag.hidden"
@change="selectTransactionTag"> @change="selectTransactionTag">
<template #media> <template #media>
<f7-icon f7="number"> <f7-icon class="transaction-tag-icon" f7="number">
<f7-badge color="gray" class="right-bottom-icon" v-if="transactionTag.hidden"> <f7-badge color="gray" class="right-bottom-icon" v-if="transactionTag.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon> <f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge> </f7-badge>
src/views/mobile/tags/ListPage.vue
+3 -3
View File
@@ -13,7 +13,7 @@
<f7-list strong inset dividers class="tag-item-list margin-top skeleton-text" v-if="loading"> <f7-list strong inset dividers class="tag-item-list margin-top skeleton-text" v-if="loading">
<f7-list-item :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"> <f7-list-item :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
<template #media> <template #media>
<f7-icon f7="number"></f7-icon> <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
</template> </template>
<template #title> <template #title>
<div class="display-flex"> <div class="display-flex">
@@ -38,7 +38,7 @@
v-show="showHidden || !tag.hidden" v-show="showHidden || !tag.hidden"
@taphold="setSortable()"> @taphold="setSortable()">
<template #media> <template #media>
<f7-icon f7="number"> <f7-icon class="transaction-tag-icon" f7="number">
<f7-badge color="gray" class="right-bottom-icon" v-if="tag.hidden"> <f7-badge color="gray" class="right-bottom-icon" v-if="tag.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon> <f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge> </f7-badge>
@@ -91,7 +91,7 @@
<f7-list-item v-if="newTag"> <f7-list-item v-if="newTag">
<template #media> <template #media>
<f7-icon f7="number"></f7-icon> <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
</template> </template>
<template #title> <template #title>
<div class="display-flex"> <div class="display-flex">
src/views/mobile/transactions/EditPage.vue
+8 -3
View File
@@ -320,7 +320,7 @@
<template #footer> <template #footer>
<f7-block class="margin-top-half no-padding no-margin" v-if="transaction.tagIds && transaction.tagIds.length"> <f7-block class="margin-top-half no-padding no-margin" v-if="transaction.tagIds && transaction.tagIds.length">
<f7-chip media-bg-color="black" class="transaction-edit-tag" <f7-chip media-text-color="var(--f7-chip-text-color)" class="transaction-edit-tag"
:text="getTagName(tagId)" :text="getTagName(tagId)"
:key="tagId" :key="tagId"
v-for="tagId in transaction.tagIds"> v-for="tagId in transaction.tagIds">
@@ -1431,8 +1431,13 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.transaction-edit-tag > .chip-media { .chip.transaction-edit-tag .chip-media+.chip-label {
opacity: 0.6; margin-left: 0;
}
.chip.transaction-edit-tag .chip-media i.icon {
font-size: calc(var(--f7-chip-media-size) - 12px);
height: calc(var(--f7-chip-media-size) - 12px);
} }
.transaction-pictures { .transaction-pictures {
src/views/mobile/transactions/ListPage.vue
+4 -4
View File
@@ -212,7 +212,7 @@
</div> </div>
<div class="item-footer"> <div class="item-footer">
<div class="transaction-tags" v-if="showTagInTransactionListPage && transaction.tagIds && transaction.tagIds.length"> <div class="transaction-tags" v-if="showTagInTransactionListPage && transaction.tagIds && transaction.tagIds.length">
<f7-chip media-bg-color="black" class="transaction-tag" <f7-chip media-text-color="var(--f7-chip-text-color)" class="transaction-tag"
:text="allTransactionTags[tagId].name" :text="allTransactionTags[tagId].name"
:key="tagId" :key="tagId"
v-for="tagId in transaction.tagIds"> v-for="tagId in transaction.tagIds">
@@ -495,7 +495,7 @@
@click="changeTagFilter(transactionTag.id)" @click="changeTagFilter(transactionTag.id)"
> >
<template #before-title> <template #before-title>
<f7-icon f7="number" class="transaction-tag-name"></f7-icon> <f7-icon class="transaction-tag-name transaction-tag-icon" f7="number"></f7-icon>
</template> </template>
<template #after> <template #after>
<f7-icon class="list-item-checked-icon" <f7-icon class="list-item-checked-icon"
@@ -1283,8 +1283,8 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.list.transaction-info-list li.transaction-info .chip.transaction-tag > .chip-media { .list.transaction-info-list li.transaction-info .chip.transaction-tag .chip-media+.chip-label {
opacity: 0.6; margin-left: 0;
} }
.list.transaction-info-list li.transaction-info .transaction-footer { .list.transaction-info-list li.transaction-info .transaction-footer {