mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 23:17:33 +08:00
code refactor
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
<f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
|
||||
<f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="{ color: (colorInfo.color && colorInfo.color !== '000000' ? '#' + colorInfo.color : 'var(--default-icon-color)') }"
|
||||
:style="colorInfo.color | iconStyle('default', 'var(--default-icon-color)')"
|
||||
@click.native="onColorClicked(colorInfo)">
|
||||
<f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === colorInfo.color">
|
||||
<f7-icon f7="checkmark_alt"></f7-icon>
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
<f7-block class="margin-vertical">
|
||||
<f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
|
||||
<f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
|
||||
<f7-icon :icon="iconInfo.icon" :style="{ color: (color && color !== '000000' ? '#' + color : 'var(--default-icon-color)') }" @click.native="onIconClicked(iconInfo)">
|
||||
<f7-icon :icon="iconInfo.icon"
|
||||
:style="color | iconStyle('default', 'var(--default-icon-color)')"
|
||||
@click.native="onIconClicked(iconInfo)">
|
||||
<f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === iconInfo.id">
|
||||
<f7-icon f7="checkmark_alt"></f7-icon>
|
||||
</f7-badge>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
@click="onItemClicked(item, index)">
|
||||
<f7-icon slot="media"
|
||||
:icon="item[iconField] | icon(iconType)"
|
||||
:style="{ color: (colorField && item[colorField] && item[colorField] !== '000000' ? '#' + item[colorField] : 'var(--default-icon-color)') }"
|
||||
:style="item[colorField] | iconStyle(iconType, 'var(--default-icon-color)')"
|
||||
v-if="iconField"></f7-icon>
|
||||
<f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSelected(item, index)"></f7-icon>
|
||||
</f7-list-item>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
:label="primaryTitleField ? (primaryTitleI18n ? $t(item[primaryTitleField]) : item[primaryTitleField]) : (primaryTitleI18n ? $t(item) : item)">
|
||||
<f7-icon slot="media"
|
||||
:icon="item[primaryIconField] | icon(primaryIconType)"
|
||||
:style="{ color: (primaryColorField && item[primaryColorField] && item[primaryColorField] !== '000000' ? '#' + item[primaryColorField] : 'var(--default-icon-color)') }"
|
||||
:style="item[primaryColorField] | iconStyle(primaryIconType, 'var(--default-icon-color)')"
|
||||
v-if="primaryIconField"></f7-icon>
|
||||
|
||||
<f7-treeview-item v-for="subItem in item[primarySubItemsField]"
|
||||
@@ -26,7 +26,7 @@
|
||||
@click="onSecondaryItemClicked(subItem)">
|
||||
<f7-icon slot="media"
|
||||
:icon="subItem[secondaryIconField] | icon(secondaryIconType)"
|
||||
:style="{ color: (secondaryColorField && subItem[secondaryColorField] && subItem[secondaryColorField] !== '000000' ? '#' + subItem[secondaryColorField] : 'var(--default-icon-color)') }"
|
||||
:style="subItem[secondaryColorField] | iconStyle(secondaryIconType, 'var(--default-icon-color)')"
|
||||
v-if="secondaryIconField"></f7-icon>
|
||||
</f7-treeview-item>
|
||||
</f7-treeview-item>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
@click="onPrimaryItemClicked(item)">
|
||||
<f7-icon slot="media"
|
||||
:icon="item[primaryIconField] | icon(primaryIconType)"
|
||||
:style="{ color: (primaryColorField && item[primaryColorField] && item[primaryColorField] !== '000000' ? '#' + item[primaryColorField] : 'var(--default-icon-color)') }"
|
||||
:style="item[primaryColorField] | iconStyle(primaryIconType, 'var(--default-icon-color)')"
|
||||
v-if="primaryIconField"></f7-icon>
|
||||
<f7-icon slot="after" class="list-item-showing" f7="chevron_right" v-if="item === selectedPrimaryItem"></f7-icon>
|
||||
</f7-list-item>
|
||||
@@ -37,7 +37,7 @@
|
||||
@click="onSecondaryItemClicked(subItem)">
|
||||
<f7-icon slot="media"
|
||||
:icon="subItem[secondaryIconField] | icon(secondaryIconType)"
|
||||
:style="{ color: (secondaryColorField && subItem[secondaryColorField] && subItem[secondaryColorField] !== '000000' ? '#' + subItem[secondaryColorField] : 'var(--default-icon-color)') }"
|
||||
:style="subItem[secondaryColorField] | iconStyle(secondaryIconType, 'var(--default-icon-color)')"
|
||||
v-if="secondaryIconField"></f7-icon>
|
||||
<f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSecondarySelected(subItem)"></f7-icon>
|
||||
</f7-list-item>
|
||||
|
||||
@@ -17,6 +17,7 @@ const allAvailableColors = [
|
||||
];
|
||||
|
||||
export default {
|
||||
defaultColor: defaultColor,
|
||||
allAccountColors: allAvailableColors,
|
||||
defaultAccountColor: defaultColor,
|
||||
allCategoryColors: allAvailableColors,
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import colorConstants from '../consts/color.js';
|
||||
|
||||
export default function (color, defaultColor) {
|
||||
if (color && color !== colorConstants.defaultAccountColor) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
return {
|
||||
color: color
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import colorConstants from '../consts/color.js';
|
||||
|
||||
export default function (color, defaultColor) {
|
||||
if (color && color !== colorConstants.defaultCategoryColor) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
return {
|
||||
color: color
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import colorConstants from '../consts/color.js';
|
||||
|
||||
export default function (color, defaultColor) {
|
||||
if (color && color !== colorConstants.defaultColor) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
return {
|
||||
color: color
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import defaultIconStyle from "./defaultIconStyle.js";
|
||||
import accountIconStyle from "./accountIconStyle.js";
|
||||
import categoryIconStyle from "./categoryIconStyle.js";
|
||||
|
||||
export default function (color, iconType, defaultColor) {
|
||||
if (iconType === 'account') {
|
||||
return accountIconStyle(color, defaultColor);
|
||||
} else if (iconType === 'category') {
|
||||
return categoryIconStyle(color, defaultColor);
|
||||
} else {
|
||||
return defaultIconStyle(color, defaultColor);
|
||||
}
|
||||
}
|
||||
@@ -33,8 +33,11 @@ import webauthn from './lib/webauthn.js';
|
||||
import utils from './lib/utils.js';
|
||||
import currencyFilter from './filters/currency.js';
|
||||
import iconFilter from './filters/icon.js';
|
||||
import iconStyleFilter from './filters/iconStyle.js';
|
||||
import accountIconFilter from './filters/accountIcon.js';
|
||||
import accountIconStyleFilter from './filters/accountIconStyle.js';
|
||||
import categoryIconFilter from './filters/categoryIcon.js';
|
||||
import categoryIconStyleFilter from './filters/categoryIconStyle.js';
|
||||
import tokenDeviceFilter from './filters/tokenDevice.js';
|
||||
import tokenIconFilter from './filters/tokenIcon.js';
|
||||
|
||||
@@ -207,8 +210,11 @@ Vue.prototype.$user = userstate;
|
||||
|
||||
Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
|
||||
Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
|
||||
Vue.filter('iconStyle', (value, iconType, defaultColor) => iconStyleFilter(value, iconType, defaultColor));
|
||||
Vue.filter('accountIcon', (value) => accountIconFilter(value));
|
||||
Vue.filter('accountIconStyle', (value, defaultColor) => accountIconStyleFilter(value, defaultColor));
|
||||
Vue.filter('categoryIcon', (value) => categoryIconFilter(value));
|
||||
Vue.filter('categoryIconStyle', (value, defaultColor) => categoryIconStyleFilter(value, defaultColor));
|
||||
Vue.filter('tokenDevice', (value) => tokenDeviceFilter(value));
|
||||
Vue.filter('tokenIcon', (value) => tokenIconFilter(value));
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
@click="account.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="account.icon | accountIcon"
|
||||
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="account.showIconSelectionSheet"
|
||||
:color="account.color"
|
||||
@@ -103,7 +103,7 @@
|
||||
@click="account.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
@@ -167,7 +167,7 @@
|
||||
@click="account.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="account.icon | accountIcon"
|
||||
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="account.showIconSelectionSheet"
|
||||
:color="account.color"
|
||||
@@ -179,7 +179,7 @@
|
||||
@click="account.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
@@ -225,7 +225,7 @@
|
||||
@click="subAccount.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="subAccount.icon | accountIcon"
|
||||
:style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="subAccount.showIconSelectionSheet"
|
||||
:color="subAccount.color"
|
||||
@@ -237,7 +237,7 @@
|
||||
@click="subAccount.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="subAccount.showColorSelectionSheet"
|
||||
v-model="subAccount.color"
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
<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"
|
||||
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }">
|
||||
: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>
|
||||
@@ -144,7 +144,7 @@
|
||||
link="#"
|
||||
>
|
||||
<f7-icon slot="media" :icon="subAccount.icon | accountIcon"
|
||||
:style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }">
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
:title="$t('category.' + category.name, currentLocale)">
|
||||
<f7-icon slot="media"
|
||||
:icon="category.categoryIconId | categoryIcon"
|
||||
:style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }">
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')">
|
||||
</f7-icon>
|
||||
|
||||
<f7-accordion-content v-if="category.subCategories.length" class="padding-left">
|
||||
@@ -33,7 +33,7 @@
|
||||
:title="$t('category.' + subCategory.name, currentLocale)">
|
||||
<f7-icon slot="media"
|
||||
:icon="subCategory.categoryIconId | categoryIcon"
|
||||
:style="{ color: (subCategory.color && subCategory.color !== '000000' ? '#' + subCategory.color : 'var(--default-icon-color)') }">
|
||||
:style="subCategory.color | categoryIconStyle('var(--default-icon-color)')">
|
||||
</f7-icon>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
@click="category.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="category.icon | categoryIcon"
|
||||
:style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<icon-selection-sheet :all-icon-infos="allCategoryIcons"
|
||||
:show.sync="category.showIconSelectionSheet"
|
||||
:color="category.color"
|
||||
@@ -53,7 +53,7 @@
|
||||
@click="category.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }"></f7-icon>
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<color-selection-sheet :all-color-infos="allCategoryColors"
|
||||
:show.sync="category.showColorSelectionSheet"
|
||||
v-model="category.color"
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
swipeout @taphold.native="setSortable()">
|
||||
<f7-icon slot="media"
|
||||
:icon="category.icon | categoryIcon"
|
||||
:style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }">
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="category.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
|
||||
Reference in New Issue
Block a user