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

modify style

Browse Source
This commit is contained in:
MaysWind
2023-08-20 22:15:00 +08:00
parent 0de65042b0
commit 579322578b
2 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/TwoColumnSelect.vue
+23 -7
View File
@@ -12,6 +12,10 @@
<div class="d-flex align-center text-truncate cursor-pointer"> <div class="d-flex align-center text-truncate cursor-pointer">
<span class="text-truncate" v-if="showPrimaryName">{{ primaryItemDisplayName }}</span> <span class="text-truncate" v-if="showPrimaryName">{{ primaryItemDisplayName }}</span>
<v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName" /> <v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName" />
<ItemIcon class="mr-2" icon-type="account" size="21.5px"
:icon-id="selectedSecondaryItem ? selectedSecondaryItem[secondaryIconField] : null"
:color="selectedSecondaryItem ? selectedSecondaryItem[secondaryColorField] : null"
v-if="selectedSecondaryItem && showSecondaryIcon" />
<span class="text-truncate">{{ secondaryItemDisplayName }}</span> <span class="text-truncate">{{ secondaryItemDisplayName }}</span>
</div> </div>
</template> </template>
@@ -33,7 +37,7 @@
</v-list> </v-list>
</div> </div>
<div class="secondary-list-container"> <div class="secondary-list-container">
<v-list> <v-list v-if="selectedPrimaryItem && primarySubItemsField && selectedPrimaryItem[primarySubItemsField]">
<v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }" <v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
:title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)" :title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)"
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem" :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
@@ -71,6 +75,7 @@ export default {
'readonly', 'readonly',
'label', 'label',
'showPrimaryName', 'showPrimaryName',
'showSecondaryIcon',
'primaryKeyField', 'primaryKeyField',
'primaryValueField', 'primaryValueField',
'primaryTitleField', 'primaryTitleField',
@@ -90,6 +95,7 @@ export default {
'secondaryIconField', 'secondaryIconField',
'secondaryIconType', 'secondaryIconType',
'secondaryColorField', 'secondaryColorField',
'noItemText',
'items' 'items'
], ],
emits: [ emits: [
@@ -133,12 +139,22 @@ export default {
return this.currentPrimaryValue; return this.currentPrimaryValue;
} }
}, },
selectedSecondaryItem() {
if (this.currentSecondaryValue && this.selectedPrimaryItem && this.selectedPrimaryItem[this.primarySubItemsField]) {
return getItemByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField);
} else {
return null;
}
},
noItemDisplayName() {
return this.noItemText ? this.noItemText : this.$t('None');
},
primaryItemDisplayName() { primaryItemDisplayName() {
if (this.primaryValueField && this.primaryTitleField) { if (this.primaryValueField && this.primaryTitleField) {
if (this.currentPrimaryValue) { if (this.currentPrimaryValue) {
return getNameByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField, this.primaryTitleField); return getNameByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField, this.primaryTitleField, this.noItemDisplayName);
} else { } else {
return this.$t('None'); return this.noItemDisplayName;
} }
} else { } else {
return this.currentPrimaryValue; return this.currentPrimaryValue;
@@ -146,10 +162,10 @@ export default {
}, },
secondaryItemDisplayName() { secondaryItemDisplayName() {
if (this.secondaryValueField && this.secondaryTitleField) { if (this.secondaryValueField && this.secondaryTitleField) {
if (this.currentSecondaryValue) { if (this.currentSecondaryValue && this.selectedPrimaryItem && this.selectedPrimaryItem[this.primarySubItemsField]) {
return getNameByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField, this.secondaryTitleField); return getNameByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField, this.secondaryTitleField, this.noItemDisplayName);
} else { } else {
return this.$t('None'); return this.noItemDisplayName;
} }
} else { } else {
return this.currentSecondaryValue; return this.currentSecondaryValue;
@@ -215,7 +231,7 @@ export default {
.two-column-select-menu .primary-list-container, .two-column-select-menu .primary-list-container,
.two-column-select-menu .secondary-list-container { .two-column-select-menu .secondary-list-container {
width: 100%; width: 100%;
height: 310px; max-height: 310px;
overflow-y: scroll; overflow-y: scroll;
} }
</style> </style>
src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+20 -37
View File
@@ -62,43 +62,22 @@
</v-col> </v-col>
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-select <two-column-select primary-key-field="id" primary-value-field="category"
item-title="name" primary-title-field="name"
item-value="id" primary-icon-field="icon" primary-icon-type="account"
persistent-placeholder primary-sub-items-field="accounts"
:disabled="loading || saving || !allVisibleAccounts.length" :primary-title-i18n="true"
:label="$t('Default Account')" secondary-key-field="id" secondary-value-field="id"
:placeholder="$t('Default Account')" secondary-title-field="name"
:items="allVisibleAccounts" secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
:no-data-text="$t('No results')" :disabled="loading || saving || !allVisibleAccounts.length"
v-model="newProfile.defaultAccountId" :show-secondary-icon="true"
> :label="$t('Default Account')"
<template #selection="{ item }"> :placeholder="$t('Default Account')"
<v-label class="cursor-pointer" v-if="item && item.value !== 0 && item.value !== '0'"> :items="allCategorizedAccounts"
<ItemIcon class="mr-2" icon-type="account" size="23px" :no-item-text="$t('Not Specified')"
:icon-id="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'icon')" v-model="newProfile.defaultAccountId">
:color="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'color')" </two-column-select>
v-if="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'icon')" />
<span>{{ getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'name', $t('Not Specified')) }}</span>
</v-label>
<v-label v-if="!item || item.value === 0 || item.value === '0'">{{ $t('Not Specified') }}</v-label>
</template>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<ItemIcon icon-type="account"
:icon-id="item.raw.icon" :color="item.raw.color"
v-if="item.raw" />
<span class="ml-2">{{ item.title }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</v-col> </v-col>
<v-col cols="12" md="6"> <v-col cols="12" md="6">
@@ -249,6 +228,7 @@ import { getNameByKeyValue } from '@/lib/common.js';
import { import {
mdiAccount mdiAccount
} from '@mdi/js'; } from '@mdi/js';
import {getCategorizedAccounts} from "@/lib/account";
export default { export default {
data() { data() {
@@ -304,6 +284,9 @@ export default {
allVisibleAccounts() { allVisibleAccounts() {
return this.accountsStore.allVisiblePlainAccounts; return this.accountsStore.allVisiblePlainAccounts;
}, },
allCategorizedAccounts() {
return getCategorizedAccounts(this.allVisibleAccounts);
},
allWeekDays() { allWeekDays() {
return this.$locale.getAllWeekDays(); return this.$locale.getAllWeekDays();
}, },