zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show account/category comment in account/category list page

Browse Source
This commit is contained in:
MaysWind
2021-02-06 20:07:31 +08:00
parent 84f6883e71
commit 5f322f216f
3 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+1 -4
View File
@@ -202,10 +202,6 @@ i.icon.la, i.icon.las, i.icon.lab {
padding-right: 0;
}
.nested-list-item.has-child-list-item .item-inner {
padding-bottom: 0;
}
.nested-list-item.has-child-list-item .nested-list-item-child .item-inner {
padding-bottom: var(--f7-list-item-padding-vertical);
}
@@ -213,6 +209,7 @@ i.icon.la, i.icon.las, i.icon.lab {
.nested-list-item .nested-list-item-title {
align-self: center;
margin-left: var(--f7-list-item-media-margin);
margin-right: var(--f7-list-item-media-margin);
}
.sortable-enabled .nested-list-item .nested-list-item-child .item-inner {
src/views/mobile/accounts/List.vue
+15 -4
View File
@@ -124,7 +124,7 @@
</small>
</f7-card-header>
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list sortable :sortable-enabled="sortable" @sortable:sort="onSort" v-if="categorizedAccounts[accountCategory.id]">
<f7-list class="account-list" sortable :sortable-enabled="sortable" @sortable:sort="onSort" v-if="categorizedAccounts[accountCategory.id]">
<f7-list-item v-for="account in categorizedAccounts[accountCategory.id].accounts" v-show="showHidden || !account.hidden"
:key="account.id" :id="account | accountDomId"
:class="{ 'nested-list-item': true, 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts }"
@@ -134,19 +134,22 @@
>
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" :icon="account.icon | accountIcon"
<f7-icon class="align-self-center" slot="media" :icon="account.icon | accountIcon"
:style="account.color | accountIconStyle('var(--default-icon-color)')">
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
</f7-icon>
<div class="nested-list-item-title">{{ account.name }}</div>
<div class="nested-list-item-title">
<span>{{ account.name }}</span>
<div class="item-footer" slot="footer" v-if="account.comment">{{ account.comment }}</div>
</div>
</div>
<li v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts">
<ul class="no-padding">
<f7-list-item class="no-sortable nested-list-item-child" v-for="subAccount in account.subAccounts" v-show="showHidden || !subAccount.hidden"
:key="subAccount.id" :id="subAccount | accountDomId"
:title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
:title="subAccount.name" :footer="subAccount.comment" :after="accountBalance(subAccount) | currency(subAccount.currency)"
:link="!sortable ? '/transaction/list?accountId=' + subAccount.id : null"
>
<f7-icon slot="media" :icon="subAccount.icon | accountIcon"
@@ -609,4 +612,12 @@ export default {
.account-overview-info > span:last-child {
margin-right: 0;
}
.account-list {
--f7-list-item-footer-font-size: 13px;
}
.account-list .item-footer {
padding-top: 4px;
}
</style>
src/views/mobile/categories/List.vue
+12 -1
View File
@@ -35,11 +35,12 @@
:href="'/category/preset?type=' + categoryType"></f7-list-button>
</f7-list>
<f7-list sortable :sortable-enabled="sortable" @sortable:sort="onSort">
<f7-list class="category-list" sortable :sortable-enabled="sortable" @sortable:sort="onSort">
<f7-list-item v-for="category in categories"
:key="category.id"
:id="category | categoryDomId"
:title="category.name"
:footer="category.comment"
:link="hasSubCategories ? '/category/list?type=' + categoryType + '&id=' + category.id : null"
v-show="showHidden || !category.hidden"
swipeout @taphold.native="setSortable()">
@@ -356,3 +357,13 @@ export default {
}
};
</script>
<style>
.category-list {
--f7-list-item-footer-font-size: 13px;
}
.category-list .item-footer {
padding-top: 4px;
}
</style>