From a487b464468c299440ad57ac4f7e9cbc8ab792ae Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sat, 14 Nov 2020 22:02:32 +0800 Subject: [PATCH] support account icon --- src/Mobile.vue | 13 ++++ src/consts/account.js | 21 ++++-- src/consts/icon.js | 75 +++++++++++++++++++ src/filters/accountIcon.js | 14 ++++ src/locales/en.js | 1 + src/locales/zh_Hans.js | 1 + src/mobile-main.js | 6 +- src/views/mobile/accounts/AccountAdd.vue | 90 ++++++++++++++++++++++- src/views/mobile/accounts/AccountList.vue | 1 + 9 files changed, 210 insertions(+), 12 deletions(-) create mode 100644 src/consts/icon.js create mode 100644 src/filters/accountIcon.js diff --git a/src/Mobile.vue b/src/Mobile.vue index f986b8bf..626a288f 100644 --- a/src/Mobile.vue +++ b/src/Mobile.vue @@ -65,6 +65,19 @@ body { margin-left: 6px; } +.badge.right-bottom-icon { + margin-left: -12px; + margin-top: 15px; + width: 16px; + height: 16px; +} + +.badge.right-bottom-icon > .icon { + font-size: 14px; + width: 14px; + height: 14px; +} + .lab-list-item-error-info div.item-footer { color: var(--f7-input-error-text-color) } diff --git a/src/consts/account.js b/src/consts/account.js index 26bb7bd0..3d4b255f 100644 --- a/src/consts/account.js +++ b/src/consts/account.js @@ -1,31 +1,38 @@ const allAccountCategories = [ { id: 1, - name: 'Cash' + name: 'Cash', + defaultAccountIconId: '1' }, { id: 2, - name: 'Debit Card' + name: 'Debit Card', + defaultAccountIconId: '2' }, { id: 3, - name: 'Credit Card' + name: 'Credit Card', + defaultAccountIconId: '2' }, { id: 4, - name: 'Virtual Account' + name: 'Virtual Account', + defaultAccountIconId: '3' }, { id: 5, - name: 'Debt Account' + name: 'Debt Account', + defaultAccountIconId: '4' }, { id: 6, - name: 'Receivables' + name: 'Receivables', + defaultAccountIconId: '5' }, { id: 7, - name: 'Investment Account' + name: 'Investment Account', + defaultAccountIconId: '6' } ]; diff --git a/src/consts/icon.js b/src/consts/icon.js new file mode 100644 index 00000000..a9857cbc --- /dev/null +++ b/src/consts/icon.js @@ -0,0 +1,75 @@ +const totalAccountIconCount = 22; +const defaultAccountIcon = { + f7Icon: 'bag' +}; +const allAccountIcons = { + '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' + }, + '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' + }, + '20': { + f7Icon: 'money_yen' + }, + '21': { + f7Icon: 'bitcoin' + } +}; + +export default { + allAccountIcons: allAccountIcons, + defaultAccountIcon: defaultAccountIcon, + totalAccountIconCount: totalAccountIconCount, +}; diff --git a/src/filters/accountIcon.js b/src/filters/accountIcon.js new file mode 100644 index 00000000..e6986369 --- /dev/null +++ b/src/filters/accountIcon.js @@ -0,0 +1,14 @@ +import icons from "../consts/icon.js"; +import utils from "../lib/utils.js"; + +export default function (iconId) { + if (utils.isNumber(iconId)) { + iconId = iconId.toString(); + } + + if (iconId <= icons.totalAccountIconCount) { + return icons.allAccountIcons[iconId].f7Icon; + } + + return icons.defaultAccountIcon.f7Icon; +} diff --git a/src/locales/en.js b/src/locales/en.js index c47d09ca..795e9bbe 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -315,6 +315,7 @@ export default { 'Account Type': 'Account Type', 'Account Name': 'Account Name', 'Your account name': 'Your account name', + 'Account Icon': 'Account Icon', 'Currency': 'Currency', 'Description': 'Description', 'Your account description (optional)': 'Your account description (optional)', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index 3e71eebc..e511209f 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -315,6 +315,7 @@ export default { 'Account Type': '账户类型', 'Account Name': '账户名称', 'Your account name': '你的账户名称', + 'Account Icon': '账户图标', 'Currency': '货币', 'Description': '描述', 'Your account description (optional)': '你的账户描述 (可选)', diff --git a/src/mobile-main.js b/src/mobile-main.js index c6f7d052..f616035e 100644 --- a/src/mobile-main.js +++ b/src/mobile-main.js @@ -14,6 +14,7 @@ import 'framework7-icons'; import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js'; import currency from './consts/currency.js'; +import icons from './consts/icon.js'; import account from './consts/account.js'; import version from './lib/version.js'; import settings from './lib/settings.js'; @@ -21,6 +22,7 @@ import services from './lib/services.js'; import userstate from './lib/userstate.js'; import utils from './lib/utils.js'; import currencyFilter from './filters/currency.js'; +import accountIconFilter from './filters/accountIcon.js'; import App from './Mobile.vue'; Vue.use(VueI18n); @@ -33,7 +35,8 @@ const i18n = new VueI18n(getI18nOptions()); Vue.prototype.$version = version.getVersion; Vue.prototype.$constants = { - account: account + icons: icons, + account: account, }; Vue.prototype.$utilities = utils; Vue.prototype.$settings = settings; @@ -142,6 +145,7 @@ Vue.prototype.$services = services; Vue.prototype.$user = userstate; Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode)); +Vue.filter('accountIcon', (value) => accountIconFilter(value)); Vue.prototype.$setLanguage(settings.getLanguage() || getDefaultLanguage()); diff --git a/src/views/mobile/accounts/AccountAdd.vue b/src/views/mobile/accounts/AccountAdd.vue index 30c889c7..13d60b4b 100644 --- a/src/views/mobile/accounts/AccountAdd.vue +++ b/src/views/mobile/accounts/AccountAdd.vue @@ -15,7 +15,7 @@ type="select" :label="$t('Account Category')" :value="account.category" - @input="account.category = $event.target.value" + @input="chooseSuitableIcon(account.category, $event.target.value); account.category = $event.target.value" > + + + + + + + + + + + + + + +
+
+ +
+ + + + + + + + + + + + + + + @@ -75,20 +109,49 @@ export default { return { account: { - category: 1, - type: 1, + category: '1', + type: '1', name: '', icon: "1", currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'), comment: '' }, - submitting: false + submitting: false, + showIconSelection: false }; }, computed: { allAccountCategories() { return this.$constants.account.allCategories; }, + allAccountIconRows() { + const allAccountIcons = this.$constants.icons.allAccountIcons; + const iconPerRow = 7; + const ret = []; + let rowCount = 0; + + for (let accountIconId in allAccountIcons) { + if (!Object.prototype.hasOwnProperty.call(allAccountIcons, accountIconId)) { + continue; + } + + const accountIcon = allAccountIcons[accountIconId]; + + if (!ret[rowCount]) { + ret[rowCount] = []; + } else if (ret[rowCount] && ret[rowCount].length >= iconPerRow) { + rowCount++; + ret[rowCount] = []; + } + + ret[rowCount].push({ + id: accountIconId, + f7Icon: accountIcon.f7Icon + }); + } + + return ret; + }, allCurrencies() { return this.$getAllCurrencies(); }, @@ -159,6 +222,25 @@ export default { self.$alert('Unable to add account'); } }); + }, + chooseSuitableIcon(oldCategory, newCategory) { + const allCategories = this.$constants.account.allCategories; + + for (let i = 0; i < allCategories.length; i++) { + if (allCategories[i].id.toString() === oldCategory) { + if (this.account.icon !== allCategories[i].defaultAccountIconId) { + return; + } else { + break; + } + } + } + + for (let i = 0; i < allCategories.length; i++) { + if (allCategories[i].id.toString() === newCategory) { + this.account.icon = allCategories[i].defaultAccountIconId; + } + } } } } diff --git a/src/views/mobile/accounts/AccountList.vue b/src/views/mobile/accounts/AccountList.vue index a10a418e..17f151d5 100644 --- a/src/views/mobile/accounts/AccountList.vue +++ b/src/views/mobile/accounts/AccountList.vue @@ -55,6 +55,7 @@ :title="account.name" :after="accountBalance(account) | currency(account.currency)" link="#" swipeout @taphold.native="setSortable()" > +