✨ zoom image

src/components/ZoomImage.vue

@@ -1,7 +1,29 @@
 <template>
-  ZoomImage
+  <div v-if="src">
+    <img
+        class="cursor-pointer fit"
+        :src="src"
+        alt="thumbnail"
+    />
+    <q-popup-proxy v-model="showPopup">
+      <q-card>
+        <img
+            class="cursor-pointer"
+            style="max-width: 300px"
+            :src="src"
+            alt="thumbnail"
+            @click="showPopup = false"
+        />
+      </q-card>
+    </q-popup-proxy>
+  </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 
+defineProps({
+  src: String | null | undefined
+})
+const showPopup = ref(false)
 </script>

src/pages/annotation/components/ActionTable.vue

@@ -107,13 +107,12 @@
           {{ utils.toFixed2(props.row.end - props.row.start) }}
         </q-td>
         <q-td>
-          <!--          <ZoomImage-->
-          <!--              style="height: 100%; vertical-align: middle;"-->
-          <!--              v-if="actionLabelData[props.row.action].thumbnail"-->
-          <!--              :src="actionLabelData[props.row.action].thumbnail"-->
-          <!--          />-->
+          <ZoomImage
+              class="vertical-middle float-left q-pr-md"
+              style="height: 40px;"
+              :src="configurationStore.actionLabelData[props.row.action].thumbnail"
+          />
           <q-select
-              class="inline-block"
               v-model="props.row.action"
               :options="actionOptionList"
               dense
@@ -191,6 +190,7 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ZoomImage from '~/components/ZoomImage.vue'
 import { ActionAnnotation } from '~/libs/annotationlib.js'
 import utils from '~/libs/utils.js'
 import { useAnnotationStore } from '~/store/annotation.js'
@@ -206,38 +206,38 @@ const columnList = [
     label: 'start',
     field: 'start',
     sortable: true,
-    sort: (a, b, rowA, rowB) => a !== b ? a - b : rowA.end - rowB.end,
+    sort: (a, b, rowA, rowB) => a !== b ? a - b : rowA.end - rowB.end
   },
   {
     name: 'end',
     align: 'center',
     label: 'end',
     field: 'end',
     sortable: true,
-    sort: (a, b, rowA, rowB) => a !== b ? a - b : rowA.start - rowB.start,
+    sort: (a, b, rowA, rowB) => a !== b ? a - b : rowA.start - rowB.start
   },
   {
     name: 'duration',
     align: 'center',
-    label: 'duration',
+    label: 'duration'
   },
   {
     name: 'action',
     align: 'center',
     label: 'action',
-    field: 'action',
+    field: 'action'
   },
   {
     name: 'object',
     align: 'center',
     label: 'object',
-    field: 'object',
+    field: 'object'
   },
   {
     name: 'color',
     align: 'center',
     label: 'color',
-    field: 'color',
+    field: 'color'
   },
   {
     name: 'description',
@@ -249,7 +249,7 @@ const columnList = [
     name: 'operation',
     align: 'center',
     label: 'operation',
-    field: 'operation',
+    field: 'operation'
   }
 ]
 

src/pages/configuration/components/TableBase.vue

@@ -66,6 +66,11 @@
             :key="props.row.field"
         >
           <q-td v-if="col.type === 'input'">
+            <ZoomImage
+                class="vertical-middle float-left"
+                style="height: 40px;"
+                :src="props.row.thumbnail"
+            />
             <q-input
                 input-class="text-center"
                 v-model="props.row[col.field]"
@@ -113,7 +118,10 @@
         </template>
       </q-tr>
       <q-tr v-if="props.expand">
-        <slot name="expand" :props="props"></slot>
+        <slot
+            name="expand"
+            :props="props"
+        ></slot>
       </q-tr>
     </template>
   </q-table>
@@ -122,6 +130,7 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
+import ZoomImage from '~/components/ZoomImage.vue'
 import TableEditor from '~/pages/configuration/components/TableEditor.vue'
 import { useConfigurationStore } from '~/store/configuration.js'