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

support account color

Browse Source
This commit is contained in:
MaysWind
2020-11-17 01:54:26 +08:00
parent 391588fdf6
commit b4bd83e7a0
13 changed files with 153 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/consts/color.js
+22
View File
@@ -0,0 +1,22 @@
const defaultAccountColor = '000000';
const allAccountColors = [
'000000', // black
'8e8e93', // gray
'ff3b30', // red
'ff2d55', // pink
'ff6b22', // deep orange
'ff9500', // orange
'ffcc00', // yellow
'cddc39', // lime
'009688', // teal
'4cd964', // green
'5ac8fa', // light blue
'2196f3', // blue
'673ab7', // deep purple
'9c27b0', // purple
];
export default {
allAccountColors: allAccountColors,
defaultAccountColor: defaultAccountColor,
};
src/lib/services.js
+4 -2
View File
@@ -169,23 +169,25 @@ export default {
getAccount: ({ id }) => {
return axios.get('v1/accounts/get.json?id=' + id);
},
addAccount: ({ category, type, name, icon, currency, comment, subAccounts }) => {
addAccount: ({ category, type, name, icon, color, currency, comment, subAccounts }) => {
return axios.post('v1/accounts/add.json', {
category,
type,
name,
icon,
color,
currency,
comment,
subAccounts
});
},
modifyAccount: ({ id, category, name, icon, comment, hidden, subAccounts }) => {
modifyAccount: ({ id, category, name, icon, color, comment, hidden, subAccounts }) => {
return axios.post('v1/accounts/modify.json', {
id,
category,
name,
icon,
color,
comment,
hidden,
subAccounts
src/locales/en.js
+3
View File
@@ -224,6 +224,7 @@ export default {
'nickname': 'Nickname',
'oldPassword': 'Current Password',
'defaultCurrency': 'Default Currency',
'color': 'Color',
},
'parameterizedError': {
'parameter invalid': '{parameter} is invalid',
@@ -328,6 +329,8 @@ export default {
'Your sub account name': 'Your sub account name',
'Account Icon': 'Account Icon',
'Sub Account Icon': 'Sub Account Icon',
'Account Color': 'Account Color',
'Sub Account Color': 'Sub Account Color',
'Currency': 'Currency',
'Description': 'Description',
'Your account description (optional)': 'Your account description (optional)',
src/locales/zh_Hans.js
+3
View File
@@ -224,6 +224,7 @@ export default {
'nickname': '昵称',
'oldPassword': '当前密码',
'defaultCurrency': '默认货币',
'color': '颜色',
},
'parameterizedError': {
'parameter invalid': '{parameter}无效',
@@ -328,6 +329,8 @@ export default {
'Your sub account name': '你的子账户名称',
'Account Icon': '账户图标',
'Sub Account Icon': '子账户图标',
'Account Color': '账户颜色',
'Sub Account Color': '子账户颜色',
'Currency': '货币',
'Description': '描述',
'Your account description (optional)': '你的账户描述 (可选)',
src/mobile-main.js
+2
View File
@@ -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 colors from './consts/color.js';
import icons from './consts/icon.js';
import account from './consts/account.js';
import version from './lib/version.js';
@@ -36,6 +37,7 @@ const i18n = new VueI18n(getI18nOptions());
Vue.prototype.$version = version.getVersion;
Vue.prototype.$constants = {
currency: currency,
colors: colors,
icons: icons,
account: account,
};
src/views/mobile/accounts/AccountEdit.vue
+85 -4
View File
@@ -50,6 +50,7 @@
<f7-list>
<f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
<f7-list-item header="Account Icon" after="Icon"></f7-list-item>
<f7-list-item header="Account Color" after="Color"></f7-list-item>
<f7-list-input label="Currency" placeholder="Currency"></f7-list-input>
<f7-list-input type="textarea" label="Description" placeholder="Your account description (optional)"></f7-list-input>
</f7-list>
@@ -70,7 +71,12 @@
<f7-list-item :header="$t('Account Icon')" key="singleTypeAccountIconSelection" link="#"
@click="showIconSelectionSheet(account)">
<f7-icon slot="after" :f7="account.icon | accountIcon"></f7-icon>
<f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item>
<f7-list-item :header="$t('Account Color')" key="singleTypeAccountColorSelection" link="#"
@click="showColorSelectionSheet(account)">
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item>
<f7-list-input
@@ -114,7 +120,12 @@
<f7-list-item :header="$t('Account Icon')" key="multiTypeAccountIconSelection" link="#"
@click="showIconSelectionSheet(account)">
<f7-icon slot="after" :f7="account.icon | accountIcon"></f7-icon>
<f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item>
<f7-list-item :header="$t('Account Color')" key="multiTypeAccountColorSelection" link="#"
@click="showColorSelectionSheet(account)">
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item>
<f7-list-input
@@ -151,7 +162,12 @@
<f7-list-item :header="$t('Sub Account Icon')" key="subAccountIconSelection" link="#"
@click="showIconSelectionSheet(subAccount)">
<f7-icon slot="after" :f7="subAccount.icon | accountIcon"></f7-icon>
<f7-icon slot="after" :f7="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
</f7-list-item>
<f7-list-item :header="$t('Sub Account Color')" key="subAccountColorSelection" link="#"
@click="showColorSelectionSheet(subAccount)">
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
</f7-list-item>
<f7-list-input
@@ -207,6 +223,28 @@
</f7-block>
</f7-page-content>
</f7-sheet>
<f7-sheet :opened="showColorSelection" @sheet:closed="hideColorSelectionSheet">
<f7-toolbar>
<div class="left"></div>
<div class="right">
<f7-link sheet-close :text="$t('Done')"></f7-link>
</div>
</f7-toolbar>
<f7-page-content>
<f7-block>
<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)">
<f7-badge color="default" class="right-bottom-icon" v-if="accountChoosingColor && accountChoosingColor.color === accountColor.color">
<f7-icon f7="checkmark_alt"></f7-icon>
</f7-badge>
</f7-icon>
</f7-col>
</f7-row>
</f7-block>
</f7-page-content>
</f7-sheet>
</f7-page>
</template>
@@ -223,14 +261,17 @@ export default {
type: self.$constants.account.allAccountTypes.SingleAccount.toString(),
name: '',
icon: self.$constants.icons.defaultAccountIconId,
color: self.$constants.colors.defaultAccountColor,
currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
comment: '',
visible: true
},
subAccounts: [],
accountChoosingIcon: null,
accountChoosingColor: null,
submitting: false,
showIconSelection: false
showIconSelection: false,
showColorSelection: false
};
},
computed: {
@@ -279,6 +320,24 @@ export default {
return ret;
},
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) {
ret[++rowCount] = [];
}
ret[rowCount].push({
color: allAccountColors[i]
});
}
return ret;
},
allCurrencies() {
return this.$getAllCurrencies();
}
@@ -310,6 +369,7 @@ export default {
self.account.type = account.type.toString();
self.account.name = account.name;
self.account.icon = account.icon;
self.account.color = account.color;
self.account.currency = account.currency;
self.account.comment = account.comment;
self.account.visible = !account.hidden;
@@ -324,6 +384,7 @@ export default {
type: subAccount.type.toString(),
name: subAccount.name,
icon: subAccount.icon,
color: subAccount.color,
currency: subAccount.currency,
comment: subAccount.comment,
visible: !subAccount.hidden
@@ -360,6 +421,7 @@ export default {
type: null,
name: '',
icon: this.account.icon,
color: this.account.color,
currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
comment: ''
});
@@ -388,6 +450,23 @@ export default {
this.accountChoosingIcon = null;
this.showIconSelection = false;
},
showColorSelectionSheet(account) {
this.accountChoosingColor = account;
this.showColorSelection = true;
},
setSelectedColor(color) {
if (!this.accountChoosingColor) {
return;
}
this.accountChoosingColor.color = color;
this.accountChoosingColor = null;
this.showColorSelection = false;
},
hideColorSelectionSheet() {
this.accountChoosingColor = null;
this.showColorSelection = false;
},
save() {
const self = this;
const router = self.$f7router;
@@ -412,6 +491,7 @@ export default {
type: self.$constants.account.allAccountTypes.SingleAccount,
name: subAccount.name,
icon: subAccount.icon,
color: subAccount.color,
currency: subAccount.currency,
comment: subAccount.comment
};
@@ -430,6 +510,7 @@ export default {
type: parseInt(self.account.type),
name: self.account.name,
icon: self.account.icon,
color: self.account.color,
currency: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? self.account.currency : self.$constants.currency.parentAccountCurrencyPlacehodler,
comment: self.account.comment,
subAccounts: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? null : subAccounts,
src/views/mobile/accounts/AccountList.vue
+2 -2
View File
@@ -82,7 +82,7 @@
>
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" :f7="account.icon | accountIcon">
<f7-icon slot="media" :f7="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>
@@ -96,7 +96,7 @@
:title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
link="#"
>
<f7-icon slot="media" :f7="subAccount.icon | accountIcon">
<f7-icon slot="media" :f7="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>