mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +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
package-lock.json
Generated
+5
View File
@@ -6955,6 +6955,11 @@
"type-check": "~0.3.2"
}
},
"line-awesome": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/line-awesome/-/line-awesome-1.3.0.tgz",
"integrity": "sha512-Y0YHksL37ixDsHz+ihCwOtF5jwJgCDxQ3q+zOVgaSW8VugHGTsZZXMacPYZB1/JULBi6BAuTCTek+4ZY/UIwcw=="
},
"lines-and-columns": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
package.json
+1
View File
@@ -16,6 +16,7 @@
"framework7-icons": "^3.0.1",
"framework7-vue": "^5.7.14",
"js-cookie": "^2.2.1",
"line-awesome": "^1.3.0",
"moment": "^2.29.1",
"ua-parser-js": "^0.7.22",
"vue": "^2.6.12",
src/Mobile.vue
+4
View File
@@ -53,6 +53,10 @@ body {
--f7-theme-color-tint: #d09467;
}
i.icon.la, i.icon.las, i.icon.lab {
font-size: 28px;
}
.navbar .navbar-compact-icons.right a + a {
margin-left: 0;
}
src/consts/account.js
+6 -6
View File
@@ -9,37 +9,37 @@ const allAccountCategories = [
id: 2,
name: 'Debit Card',
isAsset: true,
defaultAccountIconId: '2'
defaultAccountIconId: '100'
},
{
id: 3,
name: 'Credit Card',
isLiability: true,
defaultAccountIconId: '2'
defaultAccountIconId: '100'
},
{
id: 4,
name: 'Virtual Account',
isAsset: true,
defaultAccountIconId: '3'
defaultAccountIconId: '500'
},
{
id: 5,
name: 'Debt Account',
isLiability: true,
defaultAccountIconId: '4'
defaultAccountIconId: '600'
},
{
id: 6,
name: 'Receivables',
isAsset: true,
defaultAccountIconId: '5'
defaultAccountIconId: '700'
},
{
id: 7,
name: 'Investment Account',
isAsset: true,
defaultAccountIconId: '6'
defaultAccountIconId: '800'
}
];
const allAccountTypes = {
src/consts/icon.js
+149 -58
View File
@@ -1,68 +1,160 @@
const totalAccountIconCount = 22;
const defaultAccountIconId = '1';
const allAccountIcons = {
// 1 - 99 : cash symbols
'1': {
f7Icon: 'bag'
},
'2': {
f7Icon: 'creditcard'
},
'3': {
f7Icon: 'rectangle_dock'
},
'4': {
f7Icon: 'bag_badge_minus'
},
'5': {
f7Icon: 'tray_arrow_down'
},
'6': {
f7Icon: 'graph_square'
},
'7': {
f7Icon: 'cube_box'
},
'8': {
f7Icon: 'tickets'
},
'9': {
f7Icon: 'lock_shield'
icon: 'las la-wallet'
},
'10': {
f7Icon: 'infinite'
},
'11': {
f7Icon: 'logo_apple'
},
'12': {
f7Icon: 'person'
},
'13': {
f7Icon: 'person_2'
},
'14': {
f7Icon: 'person_3'
},
'15': {
f7Icon: 'globe'
},
'16': {
f7Icon: 'money_dollar'
},
'17': {
f7Icon: 'money_euro'
},
'18': {
f7Icon: 'money_pound'
},
'19': {
f7Icon: 'money_rubl'
icon: 'las la-coins'
},
'20': {
f7Icon: 'money_yen'
icon: 'las la-money-bill-alt'
},
'21': {
f7Icon: 'bitcoin'
'30': {
icon: 'las la-piggy-bank'
},
// 100 - 199 : bank service symbols
'100': {
icon: 'las la-credit-card'
},
'110': {
icon: 'las la-money-check-alt'
},
// 500 - 999 : other symbols
'500': {
icon: 'las la-digital-tachograph'
},
'510': {
icon: 'las la-ticket-alt'
},
'520': {
icon: 'las la-envelope'
},
'530': {
icon: 'las la-box'
},
'540': {
icon: 'las la-donate'
},
'560': {
icon: 'las la-shield-alt'
},
'600': {
icon: 'las la-calendar-minus'
},
'601': {
icon: 'las la-calendar-plus'
},
'700': {
icon: 'las la-file-invoice-dollar'
},
'701': {
icon: 'las la-receipt'
},
'800': {
icon: 'las la-chart-area'
},
'801': {
icon: 'las la-chart-line'
},
'900': {
icon: 'las la-user-friends'
},
'901': {
icon: 'las la-users'
},
'910': {
icon: 'las la-home'
},
'911': {
icon: 'las la-building'
},
'912': {
icon: 'las la-industry'
},
'990': {
icon: 'las la-globe'
},
// 1000 - 1999 : currency symbols
'1000': {
icon: 'las la-dollar-sign'
},
'1001': {
icon: 'las la-euro-sign'
},
'1002': {
icon: 'las la-pound-sign'
},
'1003': {
icon: 'las la-yen-sign'
},
'1004': {
icon: 'las la-ruble-sign'
},
'1005': {
icon: 'las la-rupee-sign'
},
'1006': {
icon: 'las la-won-sign'
},
'1007': {
icon: 'las la-shekel-sign'
},
'1008': {
icon: 'las la-hryvnia'
},
'1009': {
icon: 'las la-tenge'
},
'1500': {
icon: 'lab la-bitcoin'
},
'1501': {
icon: 'lab la-ethereum'
},
// 5000 - 5999 : credit card brand symbols
'5000': {
icon: 'lab la-cc-visa'
},
'5001': {
icon: 'lab la-cc-mastercard'
},
'5002': {
icon: 'lab la-cc-amex'
},
'5100': {
icon: 'lab la-cc-discover'
},
'5200': {
icon: 'lab la-cc-jcb'
},
'5300': {
icon: 'lab la-cc-diners-club'
},
// 8000 - 8999 : e-pay brand symbols
'8000': {
icon: 'lab la-paypal'
},
'8100': {
icon: 'lab la-apple-pay'
},
'8101': {
icon: 'lab la-google-wallet'
},
'8200': {
icon: 'lab la-amazon-pay'
},
'8201': {
icon: 'lab la-stripe'
},
'8300': {
icon: 'lab la-alipay'
},
'8301': {
icon: 'lab la-qq'
},
'8302': {
icon: 'lab la-weixin'
}
};
const deviceIcons = {
@@ -87,6 +179,5 @@ export default {
allAccountIcons: allAccountIcons,
defaultAccountIconId: defaultAccountIconId,
defaultAccountIcon: allAccountIcons[defaultAccountIconId],
totalAccountIconCount: totalAccountIconCount,
deviceIcons: deviceIcons,
};
src/filters/accountIcon.js
+3 -3
View File
@@ -6,9 +6,9 @@ export default function (iconId) {
iconId = iconId.toString();
}
if (iconId <= icons.totalAccountIconCount) {
return icons.allAccountIcons[iconId].f7Icon;
if (!icons.allAccountIcons[iconId]) {
return icons.defaultAccountIcon.icon;
}
return icons.defaultAccountIcon.f7Icon;
return icons.allAccountIcons[iconId].icon;
}
src/mobile-main.js
+2
View File
@@ -13,6 +13,8 @@ import 'moment/min/locales';
import 'framework7/css/framework7.bundle.css';
import 'framework7-icons';
import 'line-awesome/dist/line-awesome/css/line-awesome.css';
import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
import currency from './consts/currency.js';
import colors from './consts/color.js';
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>