mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 07:57:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

add new icon lib

Browse Source
This commit is contained in:
MaysWind
2020-11-29 01:35:50 +08:00
parent dd11f26792
commit b18951ce2a
9 changed files with 184 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/accounts/AccountEdit.vue
+12 -11
View File
@@ -71,7 +71,7 @@
<f7-list-item :header="$t('Account Icon')" key="singleTypeAccountIconSelection" link="#"
@click="showIconSelectionSheet(account)">
<f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
<f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item>
<f7-list-item :header="$t('Account Color')" key="singleTypeAccountColorSelection" link="#"
@@ -120,7 +120,7 @@
<f7-list-item :header="$t('Account Icon')" key="multiTypeAccountIconSelection" link="#"
@click="showIconSelectionSheet(account)">
<f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
<f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item>
<f7-list-item :header="$t('Account Color')" key="multiTypeAccountColorSelection" link="#"
@@ -162,7 +162,7 @@
<f7-list-item :header="$t('Sub Account Icon')" key="subAccountIconSelection" link="#"
@click="showIconSelectionSheet(subAccount)">
<f7-icon slot="after" :f7="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
<f7-icon slot="after" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
</f7-list-item>
<f7-list-item :header="$t('Sub Account Color')" key="subAccountColorSelection" link="#"
@@ -210,15 +210,16 @@
</div>
</f7-toolbar>
<f7-page-content>
<f7-block>
<f7-block class="margin-vertical">
<f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allAccountIconRows" :key="idx">
<f7-col v-for="accountIcon in row" :key="accountIcon.id">
<f7-icon :f7="accountIcon.f7Icon" :style="{ color: '#' + (accountChoosingIcon ? accountChoosingIcon.color : '000000') }" @click.native="setSelectedIcon(accountIcon)">
<f7-icon :icon="accountIcon.icon" :style="{ color: '#' + (accountChoosingIcon ? accountChoosingIcon.color : '000000') }" @click.native="setSelectedIcon(accountIcon)">
<f7-badge color="default" class="right-bottom-icon" v-if="accountChoosingIcon && accountChoosingIcon.icon === accountIcon.id">
<f7-icon f7="checkmark_alt"></f7-icon>
</f7-badge>
</f7-icon>
</f7-col>
<f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
</f7-row>
</f7-block>
</f7-page-content>
@@ -232,7 +233,7 @@
</div>
</f7-toolbar>
<f7-page-content>
<f7-block>
<f7-block class="margin-vertical">
<f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allAccountColorRows" :key="idx">
<f7-col v-for="accountColor in row" :key="accountColor.color">
<f7-icon f7="app_fill" :style="{ color: '#' + accountColor.color }" @click.native="setSelectedColor(accountColor.color)">
@@ -241,6 +242,7 @@
</f7-badge>
</f7-icon>
</f7-col>
<f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
</f7-row>
</f7-block>
</f7-page-content>
@@ -267,6 +269,7 @@ export default {
visible: true
},
subAccounts: [],
iconCountPerRow: 7,
accountChoosingIcon: null,
accountChoosingColor: null,
submitting: false,
@@ -294,7 +297,6 @@ export default {
},
allAccountIconRows() {
const allAccountIcons = this.$constants.icons.allAccountIcons;
const iconPerRow = 7;
const ret = [];
let rowCount = 0;
@@ -307,14 +309,14 @@ export default {
if (!ret[rowCount]) {
ret[rowCount] = [];
} else if (ret[rowCount] && ret[rowCount].length >= iconPerRow) {
} else if (ret[rowCount] && ret[rowCount].length >= this.iconCountPerRow) {
rowCount++;
ret[rowCount] = [];
}
ret[rowCount].push({
id: accountIconId,
f7Icon: accountIcon.f7Icon
icon: accountIcon.icon
});
}
@@ -322,12 +324,11 @@ export default {
},
allAccountColorRows() {
const allAccountColors = this.$constants.colors.allAccountColors;
const colorPerRow = 7;
const ret = [];
let rowCount = -1;
for (let i = 0; i < allAccountColors.length; i++) {
if (i % colorPerRow === 0) {
if (i % this.iconCountPerRow === 0) {
ret[++rowCount] = [];
}
src/views/mobile/accounts/AccountList.vue
+2 -2
View File
@@ -87,7 +87,7 @@
>
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }">
<f7-icon slot="media" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }">
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
@@ -101,7 +101,7 @@
:title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
link="#"
>
<f7-icon slot="media" :f7="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }">
<f7-icon slot="media" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }">
<f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>