feat: add cancel ui

Former-commit-id: 28aa597
Voxelum · Jul 15, 2019 · 002ae81 · 002ae81
1 parent 353fd4a
commit 002ae81
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/src/renderer/windows/main/components/TaskDialog.vue b/src/renderer/windows/main/components/TaskDialog.vue
@@ -13,19 +13,22 @@
         <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 }">
-            <v-icon v-if="item.status !== 'running'" :color="item.status === 'successed'?'green':item.status === 'cancelled'?'white':'red'">
+            <v-icon style="margin-right: 5px" v-if="item.status !== 'running'" :color="item.status === 'successed'?'green':item.status === 'cancelled'?'white':'red'">
               {{ item.status === 'successed' ? 'check' : item.status === 'cancelled' ? 'stop' :
                 'error_outline' }}
             </v-icon>
-            <v-progress-circular v-if="item.status === 'running'" small :size="20" :value="item.progress / item.total * 100"
-                                 :width="3" :indeterminate="item.total === -1" color="white" class="mb-0" />
+            <v-progress-circular style="margin-right: 5px" v-else-if="!hovered[item._internalId]" small :size="20" :value="item.progress / item.total * 100"
+                                 :width="3" :indeterminate="item.total === -1" color="white" class="mb-0" @mouseenter="setHoverState(item._internalId, true)"/>
+            <v-icon v-else color="red" v-ripple style="cursor: pointer; border-radius: 25px; margin-right: 5px; padding: 1px;" @click="cancelTask" @mouseleave="setHoverState(item._internalId, false)" >
+              close 
+            </v-icon>
           </template>
 
           <template v-slot:label="{ item, open }">
-            <div style="padding: 5px 0px;">
+            <div style="padding: 5px 0px;" @click="onTaskClick($event, item)" @contextmenu="showTaskContext($event, item)">
               <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;" @click="$copy(item.message)">
+              <div style="color: grey; font-size: 12px; font-style: italic; max-width: 300px;">
                 {{ item.message }}
               </div>
             </div>
@@ -37,7 +40,7 @@
 </template>
 
 <script>
-
+import Vue from 'vue';
 
 export default {
   props: {
@@ -50,11 +53,25 @@ export default {
     tree: [],
     opened: [],
     active: 0,
+    hovered: {},
   }),
   computed: {
     all() { return this.$repo.state.task.tasks; },
   },
   methods: {
+    showTaskContext(event, item) {
+      this.$menu([{ title: 'hello', onClick() { } }], event.clientX, event.clientY);
+    },
+    onTaskClick(event, item) {
+      this.$electron.clipboard.writeText(item.message)
+    },
+    setHoverState(id, state) {
+      Vue.set(this.hovered, id, state);
+    },
+    cancelTask(event, id) {
+      event.stopPropagation();
+      this.$repo.dispatch('cancelTask', id);
+    },
   },
 
 };