modify style

This commit is contained in:
MaysWind
2023-07-17 00:35:27 +08:00
parent b06456d573
commit 0ad92a999c
2 changed files with 55 additions and 73 deletions
+3 -3
View File
@@ -67,8 +67,8 @@
<v-table> <v-table>
<thead> <thead>
<tr> <tr>
<th class="text-uppercase" style="width: 50%">{{ $t('Currency') }}</th> <th class="text-uppercase">{{ $t('Currency') }}</th>
<th class="text-uppercase">{{ $t('Amount') }}</th> <th class="text-uppercase text-right">{{ $t('Amount') }}</th>
</tr> </tr>
</thead> </thead>
@@ -89,7 +89,7 @@
<span>{{ exchangeRate.currencyDisplayName }}</span> <span>{{ exchangeRate.currencyDisplayName }}</span>
<small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small> <small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
</td> </td>
<td>{{ getDisplayConvertedAmount(exchangeRate) }}</td> <td class="text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td>
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
+52 -70
View File
@@ -40,7 +40,7 @@
<thead> <thead>
<tr> <tr>
<th class="text-uppercase" style="width: 50%">{{ $t('Tag Title') }}</th> <th class="text-uppercase" style="width: 50%">{{ $t('Tag Title') }}</th>
<th class="text-uppercase text-center">{{ $t('Operation') }}</th> <th class="text-uppercase text-right">{{ $t('Operation') }}</th>
</tr> </tr>
</thead> </thead>
@@ -88,57 +88,48 @@
</template> </template>
</v-text-field> </v-text-field>
</td> </td>
<td class="text-uppercase text-center"> <td class="text-uppercase text-right">
<v-btn color="default" <v-btn class="px-2" color="default"
density="comfortable" density="comfortable" variant="text"
variant="text" :prepend-icon="icons.edit"
:icon="true"
:loading="tagUpdating[tag.id]" :loading="tagUpdating[tag.id]"
:disabled="updating" :disabled="updating"
v-if="editingTag.id !== tag.id" v-if="editingTag.id !== tag.id"
@click="edit(tag)"> @click="edit(tag)">
<v-icon size="24" :icon="icons.edit"/> {{ $t('Edit') }}
<v-tooltip activator="parent">{{ $t('Edit') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn color="default" <v-btn class="px-2 ml-2" color="default"
density="comfortable" density="comfortable" variant="text"
variant="text" :prepend-icon="tag.hidden ? icons.show : icons.hide"
:icon="true" :loading="tagHiding[tag.id]"
:disabled="updating" :disabled="updating"
v-if="editingTag.id !== tag.id"> v-if="editingTag.id !== tag.id"
<v-icon size="24" :icon="icons.more"/> @click="hide(tag, !tag.hidden)">
<v-tooltip activator="parent">{{ $t('More') }}</v-tooltip> {{ tag.hidden ? $t('Show') : $t('Hide') }}
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="tag.hidden ? icons.show : icons.hide"
:title="tag.hidden ? $t('Show') : $t('Hide')"
@click="hide(tag, !tag.hidden)">
</v-list-item>
<v-list-item :prepend-icon="icons.remove"
:title="$t('Delete')" @click="remove(tag)">
</v-list-item>
</v-list>
</v-menu>
</v-btn> </v-btn>
<v-btn density="comfortable" <v-btn class="px-2 ml-2" color="default"
variant="text" density="comfortable" variant="text"
:icon="true" :prepend-icon="icons.remove"
:loading="tagRemoving[tag.id]"
:disabled="updating"
v-if="editingTag.id !== tag.id"
@click="remove(tag)">
{{ $t('Delete') }}
</v-btn>
<v-btn class="px-2"
density="comfortable" variant="text"
:prepend-icon="icons.confirm"
:loading="tagUpdating[tag.id]" :loading="tagUpdating[tag.id]"
:disabled="updating || !isTagModified(tag)" :disabled="updating || !isTagModified(tag)"
v-if="editingTag.id === tag.id" v-if="editingTag.id === tag.id" @click="save(editingTag)">
@click="save(editingTag)"> {{ $t('Save') }}
<v-icon size="24" :icon="icons.confirm"/>
<v-tooltip activator="parent">{{ $t('Save') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn class="ml-2" color="default" <v-btn class="px-2 ml-2" color="default"
density="comfortable" density="comfortable" variant="text"
variant="text" :prepend-icon="icons.cancel"
:icon="true"
:disabled="updating" :disabled="updating"
v-if="editingTag.id === tag.id" v-if="editingTag.id === tag.id" @click="cancelSave(editingTag)">
@click="cancelSave(editingTag)"> {{ $t('Cancel') }}
<v-icon size="24" :icon="icons.cancel"/>
<v-tooltip activator="parent">{{ $t('Cancel') }}</v-tooltip>
</v-btn> </v-btn>
</td> </td>
</tr> </tr>
@@ -146,40 +137,29 @@
<tr v-if="newTag"> <tr v-if="newTag">
<td> <td>
<v-text-field <v-text-field type="text" color="primary" clearable
type="text" density="compact" variant="underlined"
color="primary" :disabled="updating" :placeholder="$t('Tag Title')"
clearable v-model="newTag.name" @keyup.enter="save(newTag)">
density="compact"
variant="underlined"
:disabled="updating"
:placeholder="$t('Tag Title')"
v-model="newTag.name"
@keyup.enter="save(newTag)"
>
<template #prepend> <template #prepend>
<v-icon size="24" start :icon="icons.tag"/> <v-icon size="24" start :icon="icons.tag"/>
</template> </template>
</v-text-field> </v-text-field>
</td> </td>
<td class="text-uppercase text-center"> <td class="text-uppercase text-right">
<v-btn density="comfortable" <v-btn class="px-2" density="comfortable" variant="text"
variant="text" :prepend-icon="icons.confirm"
:icon="true"
:loading="tagUpdating[null]" :loading="tagUpdating[null]"
:disabled="updating || !isTagModified(newTag)" :disabled="updating || !isTagModified(newTag)"
@click="save(newTag)"> @click="save(newTag)">
<v-icon size="24" :icon="icons.confirm"/> {{ $t('Save') }}
<v-tooltip activator="parent">{{ $t('Save') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn class="ml-2" color="default" <v-btn class="px-2 ml-2" color="default"
density="comfortable" density="comfortable" variant="text"
variant="text" :prepend-icon="icons.cancel"
:icon="true"
:disabled="updating" :disabled="updating"
@click="cancelSave(newTag)"> @click="cancelSave(newTag)">
<v-icon size="24" :icon="icons.cancel"/> {{ $t('Cancel') }}
<v-tooltip activator="parent">{{ $t('Cancel') }}</v-tooltip>
</v-btn> </v-btn>
</td> </td>
</tr> </tr>
@@ -221,6 +201,8 @@ export default {
loading: true, loading: true,
updating: false, updating: false,
tagUpdating: {}, tagUpdating: {},
tagHiding: {},
tagRemoving: {},
showHidden: false, showHidden: false,
icons: { icons: {
refresh: mdiRefresh, refresh: mdiRefresh,
@@ -363,17 +345,17 @@ export default {
const self = this; const self = this;
self.updating = true; self.updating = true;
self.tagUpdating[tag.id] = true; self.tagHiding[tag.id] = true;
self.transactionTagsStore.hideTag({ self.transactionTagsStore.hideTag({
tag: tag, tag: tag,
hidden: hidden hidden: hidden
}).then(() => { }).then(() => {
self.updating = false; self.updating = false;
self.tagUpdating[tag.id] = false; self.tagHiding[tag.id] = false;
}).catch(error => { }).catch(error => {
self.updating = false; self.updating = false;
self.tagUpdating[tag.id] = false; self.tagHiding[tag.id] = false;
if (!error.processed) { if (!error.processed) {
self.$refs.snackbar.showError(error); self.$refs.snackbar.showError(error);
@@ -385,16 +367,16 @@ export default {
self.$refs.confirmDialog.open('Are you sure you want to delete this tag?').then(() => { self.$refs.confirmDialog.open('Are you sure you want to delete this tag?').then(() => {
self.updating = true; self.updating = true;
self.tagUpdating[tag.id] = true; self.tagRemoving[tag.id] = true;
self.transactionTagsStore.deleteTag({ self.transactionTagsStore.deleteTag({
tag: tag tag: tag
}).then(() => { }).then(() => {
self.updating = false; self.updating = false;
self.tagUpdating[tag.id] = false; self.tagRemoving[tag.id] = false;
}).catch(error => { }).catch(error => {
self.updating = false; self.updating = false;
self.tagUpdating[tag.id] = false; self.tagRemoving[tag.id] = false;
if (!error.processed) { if (!error.processed) {
self.$refs.snackbar.showError(error); self.$refs.snackbar.showError(error);