From 1e4e7f86222c85509b0ec7c010db235ca7d33346 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Fri, 2 Aug 2019 20:12:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=A0=91=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TreeNode.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/TreeNode.vue b/frontend/src/components/TreeNode.vue
index 5af041cb..f0a44550 100644
--- a/frontend/src/components/TreeNode.vue
+++ b/frontend/src/components/TreeNode.vue
@@ -13,13 +13,12 @@
     </details>
     <div
       v-else
-      class="name"
+      :class="{name: true, 'file-name': true, selected}"
       :title="item.name + '\n\n' + fileTitle"
       @click="select(item)"
       @dblclick.ctrl.exact="revealInExplorer()"
       @contextmenu.ctrl.prevent="renameFile"
-      @contextmenu.shift.prevent="deleteFile"
-      :style="{background: selected ? '#5d5d5d' : 'none'}"> {{ item.name }} </div>
+      @contextmenu.shift.prevent="deleteFile"> {{ item.name }} </div>
   </div>
 </template>
 
@@ -199,7 +198,23 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+}
+
+.file-name {
   padding-left: 0.2em;
+  transition: 50ms ease;
+}
+
+.file-name.selected {
+  background: #5d5d5d;
+}
+
+.file-name:hover {
+  background: #5d5d5d;
+}
+
+.file-name:active {
+  padding-left: 0.3em;
 }
 
 .dir-label .count {