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
+36 -19
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,8 +71,9 @@
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">
<div class="d-flex align-center" v-if="editingTag.id !== element.id"> <div class="d-flex align-center" v-if="editingTag.id !== element.id">
<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"
@@ -75,13 +81,11 @@
<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"/>
{{ element.name }} <span>{{ element.name }}</span>
</div> </div>
<v-text-field
type="text" <v-text-field class="w-100 mr-2" type="text"
clearable clearable density="compact" variant="underlined"
density="compact"
variant="underlined"
:disabled="loading || updating" :disabled="loading || updating"
:placeholder="$t('Tag Title')" :placeholder="$t('Tag Title')"
v-model="editingTag.name" v-model="editingTag.name"
@@ -97,9 +101,10 @@
<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> </template>
</v-text-field> </v-text-field>
</td>
<td class="text-uppercase text-right"> <v-spacer/>
<v-btn class="px-2" color="default"
<v-btn class="hover-display px-2" color="default"
density="comfortable" variant="text" density="comfortable" variant="text"
:prepend-icon="icons.edit" :prepend-icon="icons.edit"
:loading="tagUpdating[element.id]" :loading="tagUpdating[element.id]"
@@ -108,7 +113,7 @@
@click="edit(element)"> @click="edit(element)">
{{ $t('Edit') }} {{ $t('Edit') }}
</v-btn> </v-btn>
<v-btn class="px-2 ml-2" color="default" <v-btn class="hover-display px-2 ml-2" color="default"
density="comfortable" variant="text" density="comfortable" variant="text"
:prepend-icon="element.hidden ? icons.show : icons.hide" :prepend-icon="element.hidden ? icons.show : icons.hide"
:loading="tagHiding[element.id]" :loading="tagHiding[element.id]"
@@ -117,7 +122,7 @@
@click="hide(element, !element.hidden)"> @click="hide(element, !element.hidden)">
{{ element.hidden ? $t('Show') : $t('Hide') }} {{ element.hidden ? $t('Show') : $t('Hide') }}
</v-btn> </v-btn>
<v-btn class="px-2 ml-2" color="default" <v-btn class="hover-display px-2 ml-2" color="default"
density="comfortable" variant="text" density="comfortable" variant="text"
:prepend-icon="icons.remove" :prepend-icon="icons.remove"
:loading="tagRemoving[element.id]" :loading="tagRemoving[element.id]"
@@ -146,6 +151,7 @@
:icon="icons.drag"/> :icon="icons.drag"/>
<v-tooltip activator="parent" v-if="availableTagCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip> <v-tooltip activator="parent" v-if="availableTagCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
</span> </span>
</div>
</td> </td>
</tr> </tr>
</template> </template>
@@ -154,7 +160,8 @@
<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">
<v-text-field class="w-100 mr-2" type="text" color="primary" clearable
density="compact" variant="underlined" density="compact" variant="underlined"
:disabled="loading || updating" :placeholder="$t('Tag Title')" :disabled="loading || updating" :placeholder="$t('Tag Title')"
v-model="newTag.name" @keyup.enter="save(newTag)"> v-model="newTag.name" @keyup.enter="save(newTag)">
@@ -162,8 +169,9 @@
<v-icon size="20" start :icon="icons.tag"/> <v-icon size="20" start :icon="icons.tag"/>
</template> </template>
</v-text-field> </v-text-field>
</td>
<td class="text-uppercase text-right"> <v-spacer/>
<v-btn class="px-2" density="comfortable" variant="text" <v-btn class="px-2" density="comfortable" variant="text"
:prepend-icon="icons.confirm" :prepend-icon="icons.confirm"
:loading="tagUpdating[null]" :loading="tagUpdating[null]"
@@ -181,6 +189,7 @@
<span> <span>
<v-icon class="disabled" :icon="icons.drag"/> <v-icon class="disabled" :icon="icons.drag"/>
</span> </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') }}