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

code refactor

Browse Source
This commit is contained in:
MaysWind
2020-12-09 01:03:46 +08:00
parent 55cc644aa3
commit 1e2a89a971
5 changed files with 178 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/ColorSelectionSheet.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<f7-sheet :opened="show" @sheet:closed="onSheetClosed">
<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 class="margin-vertical">
<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 }" @click.native="onColorClicked(colorInfo)">
<f7-badge color="default" class="right-bottom-icon" v-if="color && color === colorInfo.color">
<f7-icon f7="checkmark_alt"></f7-icon>
</f7-badge>
</f7-icon>
</f7-col>
<f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
</f7-row>
</f7-block>
</f7-page-content>
</f7-sheet>
</template>
<script>
export default {
props: [
'color',
'columnCount',
'show',
'allColorInfos'
],
computed: {
allColorRows() {
const ret = [];
let rowCount = -1;
for (let i = 0; i < this.allColorInfos.length; i++) {
if (i % this.columnCount === 0) {
ret[++rowCount] = [];
}
ret[rowCount].push({
color: this.allColorInfos[i]
});
}
return ret;
}
},
methods: {
onColorClicked(colorInfo) {
this.$emit('color:change', colorInfo.color);
},
onSheetClosed() {
this.$emit('color:closed');
}
}
}
</script>
src/components/mobile/IconSelectionSheet.vue
+72
View File
@@ -0,0 +1,72 @@
<template>
<f7-sheet :opened="show" @sheet:closed="onSheetClosed">
<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 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 || '000000') }" @click.native="onIconClicked(iconInfo)">
<f7-badge color="default" class="right-bottom-icon" v-if="icon && icon === iconInfo.id">
<f7-icon f7="checkmark_alt"></f7-icon>
</f7-badge>
</f7-icon>
</f7-col>
<f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
</f7-row>
</f7-block>
</f7-page-content>
</f7-sheet>
</template>
<script>
export default {
props: [
'icon',
'color',
'columnCount',
'show',
'allIconInfos'
],
computed: {
allIconRows() {
const ret = [];
let rowCount = 0;
for (let iconInfoId in this.allIconInfos) {
if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
continue;
}
const iconInfo = this.allIconInfos[iconInfoId];
if (!ret[rowCount]) {
ret[rowCount] = [];
} else if (ret[rowCount] && ret[rowCount].length >= this.columnCount) {
rowCount++;
ret[rowCount] = [];
}
ret[rowCount].push({
id: iconInfoId,
icon: iconInfo.icon
});
}
return ret;
}
},
methods: {
onIconClicked(iconInfo) {
this.$emit('icon:change', iconInfo.id);
},
onSheetClosed() {
this.$emit('icon:closed');
}
}
}
</script>