optimize ui
This commit is contained in:
MaysWind
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-sheet :class="{ 'list-item-selection-huge-sheet': hugeListItemRows }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-toolbar>
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
@@ -14,6 +14,7 @@
|
||||
:value="valueType === 'index' ? index : (valueField ? item[valueField] : item)"
|
||||
:title="titleField ? item[titleField] : item"
|
||||
@click="onItemClicked(item, index)">
|
||||
<f7-icon slot="media" :icon="item[iconField] | icon(iconType)" :style="{ color: '#' + (colorField ? item[colorField] : '000000') }" 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>
|
||||
</f7-list>
|
||||
@@ -26,9 +27,12 @@ export default {
|
||||
props: [
|
||||
'value',
|
||||
'valueType', // item or index
|
||||
'keyField', // for value type = item
|
||||
'valueField',
|
||||
'keyField', // for value type == item
|
||||
'valueField', // for value type == item
|
||||
'titleField',
|
||||
'iconField',
|
||||
'iconType',
|
||||
'colorField',
|
||||
'items',
|
||||
'show'
|
||||
],
|
||||
@@ -39,12 +43,21 @@ export default {
|
||||
currentValue: self.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hugeListItemRows() {
|
||||
return this.items.length > 10;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClicked(item, index) {
|
||||
if (this.valueType === 'index') {
|
||||
this.currentValue = index;
|
||||
} else {
|
||||
this.currentValue = item;
|
||||
if (this.valueField) {
|
||||
this.currentValue = item[this.valueField];
|
||||
} else {
|
||||
this.currentValue = item;
|
||||
}
|
||||
}
|
||||
|
||||
this.$emit('input', this.currentValue);
|
||||
@@ -60,9 +73,21 @@ export default {
|
||||
if (this.valueType === 'index') {
|
||||
return this.currentValue === index;
|
||||
} else {
|
||||
return this.currentValue === item;
|
||||
if (this.valueField) {
|
||||
return this.currentValue === item[this.valueField];
|
||||
} else {
|
||||
return this.currentValue === item;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (min-height: 630px) {
|
||||
.list-item-selection-huge-sheet {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import accountIcon from "./accountIcon.js";
|
||||
import categoryIcon from "./categoryIcon.js";
|
||||
|
||||
export default function (iconId, iconType) {
|
||||
if (iconType === 'account') {
|
||||
return accountIcon(iconId);
|
||||
} else if (iconType === 'category') {
|
||||
return categoryIcon(iconId);
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
@@ -32,6 +32,7 @@ import exchangeRates from './lib/exchangeRates.js';
|
||||
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 accountIconFilter from './filters/accountIcon.js';
|
||||
import categoryIconFilter from './filters/categoryIcon.js';
|
||||
import tokenDeviceFilter from './filters/tokenDevice.js';
|
||||
@@ -201,6 +202,7 @@ Vue.prototype.$exchangeRates = exchangeRates;
|
||||
Vue.prototype.$user = userstate;
|
||||
|
||||
Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
|
||||
Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
|
||||
Vue.filter('accountIcon', (value) => accountIconFilter(value));
|
||||
Vue.filter('categoryIcon', (value) => categoryIconFilter(value));
|
||||
Vue.filter('tokenDevice', (value) => tokenDeviceFilter(value));
|
||||
|
||||
@@ -21,10 +21,11 @@
|
||||
<f7-list>
|
||||
<f7-list-item
|
||||
class="transaction-edit-amount padding-top-half padding-bottom-half"
|
||||
style="font-size: 40px;"
|
||||
header="Expense Amount" title="0.00">
|
||||
</f7-list-item>
|
||||
<f7-list-item header="Category" placeholder="Category"></f7-list-item>
|
||||
<f7-list-input label="Account" placeholder="Account Name"></f7-list-input>
|
||||
<f7-list-item class="transaction-edit-category" header="Category" link="#"></f7-list-item>
|
||||
<f7-list-item class="transaction-edit-account" header="Account" title="Account Name" link="#"></f7-list-item>
|
||||
<f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input>
|
||||
<f7-list-item header="Tags" link="#"></f7-list-item>
|
||||
<f7-list-input type="textarea" label="Description" placeholder="Your transaction description (optional)"></f7-list-input>
|
||||
@@ -66,34 +67,46 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="transaction-edit-category"
|
||||
link="#"
|
||||
:header="$t('Category')"
|
||||
>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
type="select"
|
||||
<f7-list-item
|
||||
class="transaction-edit-account"
|
||||
link="#"
|
||||
:class="{ 'disabled': !plainAllAccounts.length }"
|
||||
:label="$t(sourceAccountName)"
|
||||
:value="transaction.sourceAccountId"
|
||||
@input="transaction.sourceAccountId = $event.target.value"
|
||||
:header="$t(sourceAccountName)"
|
||||
:title="transaction.sourceAccountId | accountName(plainAllAccounts)"
|
||||
@click="transaction.showSourceAccountSheet = true"
|
||||
>
|
||||
<option v-for="account in plainAllAccounts"
|
||||
:key="account.id"
|
||||
:value="account.id">{{ account.name }}</option>
|
||||
</f7-list-input>
|
||||
<ListItemSelectionSheet value-type="item"
|
||||
key-field="id" value-field="id" title-field="name"
|
||||
icon-field="icon" icon-type="account" color-field="color"
|
||||
:items="plainAllAccounts"
|
||||
:show.sync="transaction.showSourceAccountSheet"
|
||||
v-model="transaction.sourceAccountId">
|
||||
</ListItemSelectionSheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
type="select"
|
||||
<f7-list-item
|
||||
class="transaction-edit-account"
|
||||
link="#"
|
||||
:class="{ 'disabled': !plainAllAccounts.length }"
|
||||
:label="$t('Destination Account')"
|
||||
:value="transaction.destinationAccountId"
|
||||
:header="$t('Destination Account')"
|
||||
:title="transaction.destinationAccountId | accountName(plainAllAccounts)"
|
||||
v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
|
||||
@input="transaction.destinationAccountId = $event.target.value"
|
||||
@click="transaction.showDestinationAccountSheet = true"
|
||||
>
|
||||
<option v-for="account in plainAllAccounts"
|
||||
:key="account.id"
|
||||
:value="account.id">{{ account.name }}</option>
|
||||
</f7-list-input>
|
||||
<ListItemSelectionSheet value-type="item"
|
||||
key-field="id" value-field="id" title-field="name"
|
||||
icon-field="icon" icon-type="account" color-field="color"
|
||||
:items="plainAllAccounts"
|
||||
:show.sync="transaction.showDestinationAccountSheet"
|
||||
v-model="transaction.destinationAccountId">
|
||||
</ListItemSelectionSheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
:label="$t('Transaction Time')"
|
||||
@@ -153,7 +166,9 @@ export default {
|
||||
tagIds: [],
|
||||
comment: '',
|
||||
showSourceAmountSheet: false,
|
||||
showDestinationAmountSheet: false
|
||||
showDestinationAmountSheet: false,
|
||||
showSourceAccountSheet: false,
|
||||
showDestinationAccountSheet: false
|
||||
},
|
||||
allAccounts: [],
|
||||
allCategories: {},
|
||||
@@ -381,6 +396,15 @@ export default {
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
accountName(accountId, allAccounts) {
|
||||
for (let i = 0; i < allAccounts.length; i++) {
|
||||
if (allAccounts[i].id === accountId) {
|
||||
return allAccounts[i].name;
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
tagName(tagId, allTags) {
|
||||
for (let i = 0; i < allTags.length; i++) {
|
||||
if (allTags[i].id === tagId) {
|
||||
@@ -404,6 +428,10 @@ export default {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.transaction-edit-account .item-header {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.transaction-edit-time input[type="datetime-local"] {
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user