fix: make percentage progress show on hover node

Voxelum · Jul 14, 2019 · 2d59059 · 2d59059
1 parent 0c5e3c3
commit 2d59059
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/renderer/windows/main/components/TaskDialog.vue b/src/renderer/windows/main/components/TaskDialog.vue
@@ -13,11 +13,11 @@
         <v-treeview v-model="tree" hoverable transition :open="opened" :items="all" activatable
                     item-key="_internalId" open-on-click item-children="tasks" item-text="localText">
           <template v-slot:append="{ item, open }">
-            <task-node-status :status="item.status" :total="item.total" :progress="item.progress" />
+            <task-node-status :status="item.status" :total="item.total" :progress="item.progress" :hovered="hovered[item._internalId]" />
           </template>
 
           <template v-slot:label="{ item, open }">
-            <div style="padding: 5px 0px;" @click="onTaskClick($event, item)" @contextmenu="showTaskContext($event, item)">
+            <div style="padding: 5px 0px;" @click="onTaskClick($event, item)" @contextmenu="showTaskContext($event, item)" @mouseenter="hovered[item._internalId] = true" @mouseleave="hovered[item._internalId] = false">
               <span style="white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; max-width: 250px;">{{ $t(item.path, item.arguments || {}) }}</span>
               <span style="color: grey; font-size: 12px; font-style: italic; ">{{ item.time }}</span>
               <div style="color: grey; font-size: 12px; font-style: italic; max-width: 300px;">
@@ -45,6 +45,7 @@ export default {
     tree: [],
     opened: [],
     active: 0,
+    hovered: {},
   }),
   computed: {
     all() { return this.$repo.state.task.tasks; },

diff --git a/src/renderer/windows/main/components/TaskNodeStatus.vue b/src/renderer/windows/main/components/TaskNodeStatus.vue
@@ -27,9 +27,15 @@ export default {
       type: Number,
       default: -1,
     },
+    hovered: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
-    return { hovered: false };
+    return {
+      // hovered: false
+    };
   },
   computed: {
     percentage() {
@@ -38,10 +44,10 @@ export default {
   },
   methods: {
     enter() {
-      this.hovered = true;
+      // this.hovered = true;
     },
     leave() {
-      this.hovered = false;
+      // this.hovered = false;
     },
   },
 };