code refactor

This commit is contained in:
MaysWind
2020-12-21 23:45:00 +08:00
parent 154589c368
commit fb1f0bc54e
16 changed files with 81 additions and 20 deletions
@@ -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>
+3 -1
View File
@@ -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>
+1
View File
@@ -17,6 +17,7 @@ const allAvailableColors = [
];
export default {
defaultColor: defaultColor,
allAccountColors: allAvailableColors,
defaultAccountColor: defaultColor,
allCategoryColors: allAvailableColors,
+13
View File
@@ -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
};
}
+13
View File
@@ -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
};
}
+13
View File
@@ -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
};
}
+13
View File
@@ -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);
}
}
+6
View File
@@ -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));
+6 -6
View File
@@ -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"
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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"
+1 -1
View File
@@ -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>