mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 06:57:35 +08:00
modify style and hide operation buttons when cursor not hovered on
This commit is contained in:
MaysWind
@@ -94,13 +94,13 @@
|
||||
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
|
||||
</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">
|
||||
{{ $t('No available account') }}
|
||||
</v-col>
|
||||
</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">
|
||||
<draggable-list
|
||||
class="list-group"
|
||||
@@ -109,6 +109,7 @@
|
||||
ghost-class="dragging-item"
|
||||
:disabled="activeAccountCategoryVisibleAccountCount <= 1"
|
||||
:list="categorizedAccounts[activeAccountCategory.id].accounts"
|
||||
v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length"
|
||||
@change="onMove"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
@@ -168,30 +169,30 @@
|
||||
:to="`/transactions?accountId=${accountOrSubAccountId(element)}`">
|
||||
{{ $t('Transaction List') }}
|
||||
</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"
|
||||
@click="edit(element)">
|
||||
{{ $t('Edit') }}
|
||||
</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"
|
||||
v-if="!element.hidden"
|
||||
@click="hide(element, true)">
|
||||
{{ $t('Hide') }}
|
||||
</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"
|
||||
v-if="element.hidden"
|
||||
@click="hide(element, false)">
|
||||
{{ $t('Show') }}
|
||||
</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"
|
||||
@click="remove(element)">
|
||||
{{ $t('Delete') }}
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<span class="account-balance">{{ accountBalance(element) }}</span>
|
||||
<span class="account-balance ml-2">{{ accountBalance(element) }}</span>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -550,6 +551,14 @@ export default {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.account-card .account-toolbar .hover-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-card .account-toolbar:hover .hover-display {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.account-card .account-balance {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
|
||||
@@ -38,14 +38,19 @@
|
||||
<v-table class="transaction-tags-table table-striped" :hover="!loading">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase" style="width: 50%">{{ $t('Tag Title') }}</th>
|
||||
<th class="text-uppercase text-right">{{ $t('Operation') }}</th>
|
||||
<th class="text-uppercase">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Tag Title') }}</span>
|
||||
<v-spacer/>
|
||||
<span>{{ $t('Operation') }}</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody v-if="loading && noAvailableTag && !newTag">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -53,7 +58,7 @@
|
||||
|
||||
<tbody v-if="!loading && noAvailableTag && !newTag">
|
||||
<tr>
|
||||
<td colspan="2">{{ $t('No available tag') }}</td>
|
||||
<td>{{ $t('No available tag') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -66,86 +71,87 @@
|
||||
v-model="tags"
|
||||
@change="onMove">
|
||||
<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>
|
||||
<div class="d-flex align-center" v-if="editingTag.id !== element.id">
|
||||
<v-badge class="right-bottom-icon" color="secondary"
|
||||
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>
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex align-center" v-if="editingTag.id !== element.id">
|
||||
<v-badge class="right-bottom-icon" color="secondary"
|
||||
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"/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</td>
|
||||
<td class="text-uppercase text-right">
|
||||
<v-btn class="px-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.edit"
|
||||
:loading="tagUpdating[element.id]"
|
||||
:disabled="loading || updating"
|
||||
v-if="editingTag.id !== element.id"
|
||||
@click="edit(element)">
|
||||
{{ $t('Edit') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="element.hidden ? icons.show : icons.hide"
|
||||
:loading="tagHiding[element.id]"
|
||||
:disabled="loading || updating"
|
||||
v-if="editingTag.id !== element.id"
|
||||
@click="hide(element, !element.hidden)">
|
||||
{{ element.hidden ? $t('Show') : $t('Hide') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.remove"
|
||||
:loading="tagRemoving[element.id]"
|
||||
:disabled="loading || updating"
|
||||
v-if="editingTag.id !== element.id"
|
||||
@click="remove(element)">
|
||||
{{ $t('Delete') }}
|
||||
</v-btn>
|
||||
<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>
|
||||
<span>{{ element.name }}</span>
|
||||
</div>
|
||||
|
||||
<v-text-field class="w-100 mr-2" 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"
|
||||
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"/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<v-spacer/>
|
||||
|
||||
<v-btn class="hover-display px-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.edit"
|
||||
:loading="tagUpdating[element.id]"
|
||||
:disabled="loading || updating"
|
||||
v-if="editingTag.id !== element.id"
|
||||
@click="edit(element)">
|
||||
{{ $t('Edit') }}
|
||||
</v-btn>
|
||||
<v-btn class="hover-display px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="element.hidden ? icons.show : icons.hide"
|
||||
:loading="tagHiding[element.id]"
|
||||
:disabled="loading || updating"
|
||||
v-if="editingTag.id !== element.id"
|
||||
@click="hide(element, !element.hidden)">
|
||||
{{ element.hidden ? $t('Show') : $t('Hide') }}
|
||||
</v-btn>
|
||||
<v-btn class="hover-display px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.remove"
|
||||
:loading="tagRemoving[element.id]"
|
||||
:disabled="loading || updating"
|
||||
v-if="editingTag.id !== element.id"
|
||||
@click="remove(element)">
|
||||
{{ $t('Delete') }}
|
||||
</v-btn>
|
||||
<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>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -154,33 +160,36 @@
|
||||
<tbody v-if="newTag">
|
||||
<tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
|
||||
<td>
|
||||
<v-text-field type="text" color="primary" clearable
|
||||
density="compact" variant="underlined"
|
||||
:disabled="loading || updating" :placeholder="$t('Tag Title')"
|
||||
v-model="newTag.name" @keyup.enter="save(newTag)">
|
||||
<template #prepend>
|
||||
<v-icon size="20" start :icon="icons.tag"/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</td>
|
||||
<td class="text-uppercase text-right">
|
||||
<v-btn class="px-2" density="comfortable" variant="text"
|
||||
:prepend-icon="icons.confirm"
|
||||
:loading="tagUpdating[null]"
|
||||
:disabled="loading || updating || !isTagModified(newTag)"
|
||||
@click="save(newTag)">
|
||||
{{ $t('Save') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.cancel"
|
||||
:disabled="loading || updating"
|
||||
@click="cancelSave(newTag)">
|
||||
{{ $t('Cancel') }}
|
||||
</v-btn>
|
||||
<span>
|
||||
<v-icon class="disabled" :icon="icons.drag"/>
|
||||
</span>
|
||||
<div class="d-flex align-center">
|
||||
<v-text-field class="w-100 mr-2" type="text" color="primary" clearable
|
||||
density="compact" variant="underlined"
|
||||
:disabled="loading || updating" :placeholder="$t('Tag Title')"
|
||||
v-model="newTag.name" @keyup.enter="save(newTag)">
|
||||
<template #prepend>
|
||||
<v-icon size="20" start :icon="icons.tag"/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<v-spacer/>
|
||||
|
||||
<v-btn class="px-2" density="comfortable" variant="text"
|
||||
:prepend-icon="icons.confirm"
|
||||
:loading="tagUpdating[null]"
|
||||
:disabled="loading || updating || !isTagModified(newTag)"
|
||||
@click="save(newTag)">
|
||||
{{ $t('Save') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-2" color="default"
|
||||
density="comfortable" variant="text"
|
||||
:prepend-icon="icons.cancel"
|
||||
:disabled="loading || updating"
|
||||
@click="cancelSave(newTag)">
|
||||
{{ $t('Cancel') }}
|
||||
</v-btn>
|
||||
<span>
|
||||
<v-icon class="disabled" :icon="icons.drag"/>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -453,6 +462,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
margin-right: 0;
|
||||
color: rgba(var(--v-theme-on-surface));
|
||||
|
||||
@@ -35,9 +35,9 @@
|
||||
<v-window-item value="statisticsPage">
|
||||
<v-card variant="flat">
|
||||
<template #title>
|
||||
<div class="d-flex align-center">
|
||||
<div class="statistics-title d-flex align-center">
|
||||
<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 :icon="icons.left"
|
||||
:disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
|
||||
@@ -537,7 +537,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.statistics-toolbar {
|
||||
.statistics-title {
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -93,8 +93,8 @@
|
||||
<th class="text-uppercase">{{ $t('Type') }}</th>
|
||||
<th class="text-uppercase">{{ $t('Device Info') }}</th>
|
||||
<th class="text-uppercase">{{ $t('Last Activity Time') }}</th>
|
||||
<th class="text-uppercase text-center">
|
||||
<v-btn density="comfortable"
|
||||
<th class="text-uppercase text-right">
|
||||
<v-btn density="comfortable" color="error" variant="tonal"
|
||||
:disabled="sessions.length < 2 || loadingSession"
|
||||
@click="revokeAllSessions">
|
||||
{{ $t('Logout All') }}
|
||||
@@ -112,14 +112,14 @@
|
||||
|
||||
<tr :key="session.tokenId"
|
||||
v-for="session in sessions">
|
||||
<td>
|
||||
<td class="text-sm">
|
||||
<v-icon start :icon="session.icon"/>
|
||||
{{ session.deviceType }}
|
||||
</td>
|
||||
<td>{{ session.deviceInfo }}</td>
|
||||
<td>{{ session.createdAt }}</td>
|
||||
<td class="text-center">
|
||||
<v-btn density="comfortable"
|
||||
<td class="text-sm">{{ session.deviceInfo }}</td>
|
||||
<td class="text-sm">{{ session.createdAt }}</td>
|
||||
<td class="text-sm text-right">
|
||||
<v-btn density="comfortable" color="error" variant="tonal"
|
||||
:disabled="session.isCurrent || loadingSession"
|
||||
@click="revokeSession(session)">
|
||||
{{ $t('Log Out') }}
|
||||
|
||||
Reference in New Issue
Block a user