From fcd6a8020ce0bee3c610e55a6d249ba70922d792 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 18 Dec 2020 09:02:34 +0900
Subject: [PATCH] Update all buttons in annotation screen from outlined to icon

---
 .../containers/annotation/ApproveButton.vue   |  2 +-
 .../annotation/ClearAnnotationsButton.vue     | 47 +++++++++++++------
 .../containers/annotation/FilterButton.vue    |  2 +-
 .../containers/annotation/GuidelineButton.vue |  2 +-
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/frontend/components/containers/annotation/ApproveButton.vue b/frontend/components/containers/annotation/ApproveButton.vue
index de02ac7d..2c67616f 100644
--- a/frontend/components/containers/annotation/ApproveButton.vue
+++ b/frontend/components/containers/annotation/ApproveButton.vue
@@ -6,7 +6,7 @@
         :disabled="disabled"
         class="text-capitalize ps-1 pe-1"
         min-width="36"
-        outlined
+        icon
         v-on="on"
         @shortkey="approveNextPage"
         @click="approveDocument"
diff --git a/frontend/components/containers/annotation/ClearAnnotationsButton.vue b/frontend/components/containers/annotation/ClearAnnotationsButton.vue
index 7dabb43d..e8792a12 100644
--- a/frontend/components/containers/annotation/ClearAnnotationsButton.vue
+++ b/frontend/components/containers/annotation/ClearAnnotationsButton.vue
@@ -1,22 +1,43 @@
 <template>
-  <div>
-    <v-btn
-      :disabled="false"
-      class="text-capitalize"
-      outlined
-      @click="handleClear()"
+  <v-tooltip bottom>
+    <template v-slot:activator="{ on }">
+      <v-btn
+        class="text-capitalize ps-1 pe-1"
+        color="error"
+        min-width="36"
+        icon
+        v-on="on"
+        @click="dialog=true"
+      >
+        <v-icon>
+          mdi-delete-outline
+        </v-icon>
+      </v-btn>
+    </template>
+    <span>Clear Annotations</span>
+    <v-dialog
+      v-model="dialog"
+      width="800"
     >
-      {{ "Clear Annotations" }}
-    </v-btn>
-  </div>
+      <confirm-form
+        title="Clear annotations"
+        message="Are you sure you want to delete all annotations?"
+        :button-true-text="$t('generic.yes')"
+        :button-false-text="$t('generic.cancel')"
+        @ok="handleClear();dialog=false"
+        @cancel="dialog=false"
+      />
+    </v-dialog>
+  </v-tooltip>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapActions } from 'vuex'
+import ConfirmForm from '@/components/organisms/utils/ConfirmForm'
 
 export default {
   components: {
-
+    ConfirmForm
   },
 
   data() {
@@ -25,10 +46,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapState('documents', ['selected'])
-  },
-
   methods: {
     ...mapActions('documents', ['clearAnnotations']),
 
diff --git a/frontend/components/containers/annotation/FilterButton.vue b/frontend/components/containers/annotation/FilterButton.vue
index 1409e66a..e8ab5744 100644
--- a/frontend/components/containers/annotation/FilterButton.vue
+++ b/frontend/components/containers/annotation/FilterButton.vue
@@ -6,7 +6,7 @@
           <v-btn
             class="text-capitalize ps-1 pe-1"
             min-width="36"
-            outlined
+            icon
             v-on="{ ...tooltip, ...menu }"
           >
             <v-icon>
diff --git a/frontend/components/containers/annotation/GuidelineButton.vue b/frontend/components/containers/annotation/GuidelineButton.vue
index 05321971..f0df9885 100644
--- a/frontend/components/containers/annotation/GuidelineButton.vue
+++ b/frontend/components/containers/annotation/GuidelineButton.vue
@@ -5,7 +5,7 @@
         <v-btn
           class="text-capitalize ps-1 pe-1"
           min-width="36"
-          outlined
+          icon
           v-on="on"
           @click="dialog=true"
         >