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

modify style and hide operation buttons when cursor not hovered on

Browse Source
This commit is contained in:
MaysWind
2023-07-23 12:01:59 +08:00
parent af00032ee9
commit 0f2c9354f0
4 changed files with 147 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/AccountsPage.vue
+16 -7
View File
@@ -94,13 +94,13 @@
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader> :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
</div> </div>
<v-row class="pl-4 pr-8" v-if="!loading && !hasAccount(activeAccountCategory)"> <v-row class="pl-4 pr-4 pr-md-8" v-if="!loading && !hasAccount(activeAccountCategory)">
<v-col cols="12"> <v-col cols="12">
{{ $t('No available account') }} {{ $t('No available account') }}
</v-col> </v-col>
</v-row> </v-row>
<v-row class="pl-4 pr-8" v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length"> <v-row class="pl-4 pr-4 pr-md-8">
<v-col cols="12"> <v-col cols="12">
<draggable-list <draggable-list
class="list-group" class="list-group"
@@ -109,6 +109,7 @@
ghost-class="dragging-item" ghost-class="dragging-item"
:disabled="activeAccountCategoryVisibleAccountCount <= 1" :disabled="activeAccountCategoryVisibleAccountCount <= 1"
:list="categorizedAccounts[activeAccountCategory.id].accounts" :list="categorizedAccounts[activeAccountCategory.id].accounts"
v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length"
@change="onMove" @change="onMove"
> >
<template #item="{ element }"> <template #item="{ element }">
@@ -168,30 +169,30 @@
:to="`/transactions?accountId=${accountOrSubAccountId(element)}`"> :to="`/transactions?accountId=${accountOrSubAccountId(element)}`">
{{ $t('Transaction List') }} {{ $t('Transaction List') }}
</v-btn> </v-btn>
<v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text" <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
:disabled="loading" :prepend-icon="icons.edit" :disabled="loading" :prepend-icon="icons.edit"
@click="edit(element)"> @click="edit(element)">
{{ $t('Edit') }} {{ $t('Edit') }}
</v-btn> </v-btn>
<v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text" <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
:disabled="loading" :prepend-icon="icons.hide" :disabled="loading" :prepend-icon="icons.hide"
v-if="!element.hidden" v-if="!element.hidden"
@click="hide(element, true)"> @click="hide(element, true)">
{{ $t('Hide') }} {{ $t('Hide') }}
</v-btn> </v-btn>
<v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text" <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
:disabled="loading" :prepend-icon="icons.show" :disabled="loading" :prepend-icon="icons.show"
v-if="element.hidden" v-if="element.hidden"
@click="hide(element, false)"> @click="hide(element, false)">
{{ $t('Show') }} {{ $t('Show') }}
</v-btn> </v-btn>
<v-btn class="px-2 ml-2" density="comfortable" color="default" variant="text" <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
:disabled="loading" :prepend-icon="icons.remove" :disabled="loading" :prepend-icon="icons.remove"
@click="remove(element)"> @click="remove(element)">
{{ $t('Delete') }} {{ $t('Delete') }}
</v-btn> </v-btn>
<v-spacer/> <v-spacer/>
<span class="account-balance">{{ accountBalance(element) }}</span> <span class="account-balance ml-2">{{ accountBalance(element) }}</span>
</div> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>
@@ -550,6 +551,14 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.account-card .account-toolbar .hover-display {
display: none;
}
.account-card .account-toolbar:hover .hover-display {
display: grid;
}
.account-card .account-balance { .account-card .account-balance {
font-size: 1.25rem; font-size: 1.25rem;
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
src/views/desktop/TransactionTagsPage.vue
+121 -104
View File
@@ -38,14 +38,19 @@
<v-table class="transaction-tags-table table-striped" :hover="!loading"> <v-table class="transaction-tags-table table-striped" :hover="!loading">
<thead> <thead>
<tr> <tr>
<th class="text-uppercase" style="width: 50%">{{ $t('Tag Title') }}</th> <th class="text-uppercase">
<th class="text-uppercase text-right">{{ $t('Operation') }}</th> <div class="d-flex align-center">
<span>{{ $t('Tag Title') }}</span>
<v-spacer/>
<span>{{ $t('Operation') }}</span>
</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody v-if="loading && noAvailableTag && !newTag"> <tbody v-if="loading && noAvailableTag && !newTag">
<tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"> <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
<td class="px-0" colspan="2"> <td class="px-0">
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
</td> </td>
</tr> </tr>
@@ -53,7 +58,7 @@
<tbody v-if="!loading && noAvailableTag && !newTag"> <tbody v-if="!loading && noAvailableTag && !newTag">
<tr> <tr>
<td colspan="2">{{ $t('No available tag') }}</td> <td>{{ $t('No available tag') }}</td>
</tr> </tr>
</tbody> </tbody>
@@ -66,86 +71,87 @@
v-model="tags" v-model="tags"
@change="onMove"> @change="onMove">
<template #item="{ element }"> <template #item="{ element }">
<tr class="text-sm" v-if="showHidden || !element.hidden"> <tr class="transaction-tags-table-row-tag text-sm" v-if="showHidden || !element.hidden">
<td> <td>
<div class="d-flex align-center" v-if="editingTag.id !== element.id"> <div class="d-flex align-center">
<v-badge class="right-bottom-icon" color="secondary" <div class="d-flex align-center" v-if="editingTag.id !== element.id">
location="bottom right" offset-x="8" :icon="icons.hide"
v-if="element.hidden">
<v-icon size="20" start :icon="icons.tag"/>
</v-badge>
<v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
{{ element.name }}
</div>
<v-text-field
type="text"
clearable
density="compact"
variant="underlined"
:disabled="loading || updating"
:placeholder="$t('Tag Title')"
v-model="editingTag.name"
v-else-if="editingTag.id === element.id"
@keyup.enter="save(editingTag)"
>
<template #prepend>
<v-badge class="right-bottom-icon" color="secondary" <v-badge class="right-bottom-icon" color="secondary"
location="bottom right" offset-x="8" :icon="icons.hide" location="bottom right" offset-x="8" :icon="icons.hide"
v-if="element.hidden"> v-if="element.hidden">
<v-icon size="20" start :icon="icons.tag"/> <v-icon size="20" start :icon="icons.tag"/>
</v-badge> </v-badge>
<v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/> <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
</template> <span>{{ element.name }}</span>
</v-text-field> </div>
</td>
<td class="text-uppercase text-right"> <v-text-field class="w-100 mr-2" type="text"
<v-btn class="px-2" color="default" clearable density="compact" variant="underlined"
density="comfortable" variant="text" :disabled="loading || updating"
:prepend-icon="icons.edit" :placeholder="$t('Tag Title')"
:loading="tagUpdating[element.id]" v-model="editingTag.name"
:disabled="loading || updating" v-else-if="editingTag.id === element.id"
v-if="editingTag.id !== element.id" @keyup.enter="save(editingTag)"
@click="edit(element)"> >
{{ $t('Edit') }} <template #prepend>
</v-btn> <v-badge class="right-bottom-icon" color="secondary"
<v-btn class="px-2 ml-2" color="default" location="bottom right" offset-x="8" :icon="icons.hide"
density="comfortable" variant="text" v-if="element.hidden">
:prepend-icon="element.hidden ? icons.show : icons.hide" <v-icon size="20" start :icon="icons.tag"/>
:loading="tagHiding[element.id]" </v-badge>
:disabled="loading || updating" <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
v-if="editingTag.id !== element.id" </template>
@click="hide(element, !element.hidden)"> </v-text-field>
{{ element.hidden ? $t('Show') : $t('Hide') }}
</v-btn> <v-spacer/>
<v-btn class="px-2 ml-2" color="default"
density="comfortable" variant="text" <v-btn class="hover-display px-2" color="default"
:prepend-icon="icons.remove" density="comfortable" variant="text"
:loading="tagRemoving[element.id]" :prepend-icon="icons.edit"
:disabled="loading || updating" :loading="tagUpdating[element.id]"
v-if="editingTag.id !== element.id" :disabled="loading || updating"
@click="remove(element)"> v-if="editingTag.id !== element.id"
{{ $t('Delete') }} @click="edit(element)">
</v-btn> {{ $t('Edit') }}
<v-btn class="px-2" </v-btn>
density="comfortable" variant="text" <v-btn class="hover-display px-2 ml-2" color="default"
:prepend-icon="icons.confirm" density="comfortable" variant="text"
:loading="tagUpdating[element.id]" :prepend-icon="element.hidden ? icons.show : icons.hide"
:disabled="loading || updating || !isTagModified(element)" :loading="tagHiding[element.id]"
v-if="editingTag.id === element.id" @click="save(editingTag)"> :disabled="loading || updating"
{{ $t('Save') }} v-if="editingTag.id !== element.id"
</v-btn> @click="hide(element, !element.hidden)">
<v-btn class="px-2 ml-2" color="default" {{ element.hidden ? $t('Show') : $t('Hide') }}
density="comfortable" variant="text" </v-btn>
:prepend-icon="icons.cancel" <v-btn class="hover-display px-2 ml-2" color="default"
:disabled="loading || updating" density="comfortable" variant="text"
v-if="editingTag.id === element.id" @click="cancelSave(editingTag)"> :prepend-icon="icons.remove"
{{ $t('Cancel') }} :loading="tagRemoving[element.id]"
</v-btn> :disabled="loading || updating"
<span> v-if="editingTag.id !== element.id"
<v-icon :class="availableTagCount > 1 ? 'drag-handle' : 'disabled'" @click="remove(element)">
:icon="icons.drag"/> {{ $t('Delete') }}
<v-tooltip activator="parent" v-if="availableTagCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip> </v-btn>
</span> <v-btn class="px-2"
density="comfortable" variant="text"
:prepend-icon="icons.confirm"
:loading="tagUpdating[element.id]"
:disabled="loading || updating || !isTagModified(element)"
v-if="editingTag.id === element.id" @click="save(editingTag)">
{{ $t('Save') }}
</v-btn>
<v-btn class="px-2 ml-2" color="default"
density="comfortable" variant="text"
:prepend-icon="icons.cancel"
:disabled="loading || updating"
v-if="editingTag.id === element.id" @click="cancelSave(editingTag)">
{{ $t('Cancel') }}
</v-btn>
<span>
<v-icon :class="availableTagCount > 1 ? 'drag-handle' : 'disabled'"
:icon="icons.drag"/>
<v-tooltip activator="parent" v-if="availableTagCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
</span>
</div>
</td> </td>
</tr> </tr>
</template> </template>
@@ -154,33 +160,36 @@
<tbody v-if="newTag"> <tbody v-if="newTag">
<tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}"> <tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
<td> <td>
<v-text-field type="text" color="primary" clearable <div class="d-flex align-center">
density="compact" variant="underlined" <v-text-field class="w-100 mr-2" type="text" color="primary" clearable
:disabled="loading || updating" :placeholder="$t('Tag Title')" density="compact" variant="underlined"
v-model="newTag.name" @keyup.enter="save(newTag)"> :disabled="loading || updating" :placeholder="$t('Tag Title')"
<template #prepend> v-model="newTag.name" @keyup.enter="save(newTag)">
<v-icon size="20" start :icon="icons.tag"/> <template #prepend>
</template> <v-icon size="20" start :icon="icons.tag"/>
</v-text-field> </template>
</td> </v-text-field>
<td class="text-uppercase text-right">
<v-btn class="px-2" density="comfortable" variant="text" <v-spacer/>
:prepend-icon="icons.confirm"
:loading="tagUpdating[null]" <v-btn class="px-2" density="comfortable" variant="text"
:disabled="loading || updating || !isTagModified(newTag)" :prepend-icon="icons.confirm"
@click="save(newTag)"> :loading="tagUpdating[null]"
{{ $t('Save') }} :disabled="loading || updating || !isTagModified(newTag)"
</v-btn> @click="save(newTag)">
<v-btn class="px-2 ml-2" color="default" {{ $t('Save') }}
density="comfortable" variant="text" </v-btn>
:prepend-icon="icons.cancel" <v-btn class="px-2 ml-2" color="default"
:disabled="loading || updating" density="comfortable" variant="text"
@click="cancelSave(newTag)"> :prepend-icon="icons.cancel"
{{ $t('Cancel') }} :disabled="loading || updating"
</v-btn> @click="cancelSave(newTag)">
<span> {{ $t('Cancel') }}
<v-icon class="disabled" :icon="icons.drag"/> </v-btn>
</span> <span>
<v-icon class="disabled" :icon="icons.drag"/>
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -453,6 +462,14 @@ export default {
</script> </script>
<style> <style>
.transaction-tags-table tr.transaction-tags-table-row-tag .hover-display {
display: none;
}
.transaction-tags-table tr.transaction-tags-table-row-tag:hover .hover-display {
display: grid;
}
.transaction-tags-table .v-text-field .v-input__prepend { .transaction-tags-table .v-text-field .v-input__prepend {
margin-right: 0; margin-right: 0;
color: rgba(var(--v-theme-on-surface)); color: rgba(var(--v-theme-on-surface));
src/views/desktop/statistics/TransactionPage.vue
+3 -3
View File
@@ -35,9 +35,9 @@
<v-window-item value="statisticsPage"> <v-window-item value="statisticsPage">
<v-card variant="flat"> <v-card variant="flat">
<template #title> <template #title>
<div class="d-flex align-center"> <div class="statistics-title d-flex align-center">
<span>{{ $t('Statistics Data') }}</span> <span>{{ $t('Statistics Data') }}</span>
<div class="statistics-toolbar ml-4"> <div class="ml-4">
<v-btn-group color="default" density="comfortable" variant="outlined" divided> <v-btn-group color="default" density="comfortable" variant="outlined" divided>
<v-btn :icon="icons.left" <v-btn :icon="icons.left"
:disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type" :disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
@@ -537,7 +537,7 @@ export default {
</script> </script>
<style> <style>
.statistics-toolbar { .statistics-title {
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
src/views/desktop/user/settings/UserSecuritySettingTab.vue
+7 -7
View File
@@ -93,8 +93,8 @@
<th class="text-uppercase">{{ $t('Type') }}</th> <th class="text-uppercase">{{ $t('Type') }}</th>
<th class="text-uppercase">{{ $t('Device Info') }}</th> <th class="text-uppercase">{{ $t('Device Info') }}</th>
<th class="text-uppercase">{{ $t('Last Activity Time') }}</th> <th class="text-uppercase">{{ $t('Last Activity Time') }}</th>
<th class="text-uppercase text-center"> <th class="text-uppercase text-right">
<v-btn density="comfortable" <v-btn density="comfortable" color="error" variant="tonal"
:disabled="sessions.length < 2 || loadingSession" :disabled="sessions.length < 2 || loadingSession"
@click="revokeAllSessions"> @click="revokeAllSessions">
{{ $t('Logout All') }} {{ $t('Logout All') }}
@@ -112,14 +112,14 @@
<tr :key="session.tokenId" <tr :key="session.tokenId"
v-for="session in sessions"> v-for="session in sessions">
<td> <td class="text-sm">
<v-icon start :icon="session.icon"/> <v-icon start :icon="session.icon"/>
{{ session.deviceType }} {{ session.deviceType }}
</td> </td>
<td>{{ session.deviceInfo }}</td> <td class="text-sm">{{ session.deviceInfo }}</td>
<td>{{ session.createdAt }}</td> <td class="text-sm">{{ session.createdAt }}</td>
<td class="text-center"> <td class="text-sm text-right">
<v-btn density="comfortable" <v-btn density="comfortable" color="error" variant="tonal"
:disabled="session.isCurrent || loadingSession" :disabled="session.isCurrent || loadingSession"
@click="revokeSession(session)"> @click="revokeSession(session)">
{{ $t('Log Out') }} {{ $t('Log Out') }}