From 0f2c9354f0dc51c3545f3222d9c9670c609ad762 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 23 Jul 2023 12:01:59 +0800
Subject: [PATCH] modify style and hide operation buttons when cursor not
 hovered on

---
 src/views/desktop/AccountsPage.vue            |  23 +-
 src/views/desktop/TransactionTagsPage.vue     | 225 ++++++++++--------
 .../desktop/statistics/TransactionPage.vue    |   6 +-
 .../user/settings/UserSecuritySettingTab.vue  |  14 +-
 4 files changed, 147 insertions(+), 121 deletions(-)

diff --git a/src/views/desktop/AccountsPage.vue b/src/views/desktop/AccountsPage.vue
index 282d1e2d..de3d64aa 100644
--- a/src/views/desktop/AccountsPage.vue
+++ b/src/views/desktop/AccountsPage.vue
@@ -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));
diff --git a/src/views/desktop/TransactionTagsPage.vue b/src/views/desktop/TransactionTagsPage.vue
index b8d0cc39..0715a91e 100644
--- a/src/views/desktop/TransactionTagsPage.vue
+++ b/src/views/desktop/TransactionTagsPage.vue
@@ -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));
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 20f3b60f..07c6c172 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -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;
 }
diff --git a/src/views/desktop/user/settings/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/UserSecuritySettingTab.vue
index 045a4fc2..edbca178 100644
--- a/src/views/desktop/user/settings/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/UserSecuritySettingTab.vue
@@ -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') }}