✨ #157

src/components/ActionLabelThumbnailPreview.vue

@@ -0,0 +1,108 @@
+<template>
+  <q-page-sticky
+      class="z-top"
+      v-if="configurationStore.currentThumbnailActionLabelId !== null"
+      :offset="offset"
+  >
+    <div class="relative-position">
+      <img
+          class="block shadow-1 rounded-borders"
+          :style="{'max-width': imgMaxWidth + 'px'}"
+          style="transition: max-width 0.1s;"
+          :src="thumbnailSrc"
+          alt="thumbnail"
+          draggable="false"
+          v-touch-pan.prevent.mouse="handleMove"
+          @wheel.prevent="handleResize"
+      />
+      <q-btn
+          class="absolute-left text-black"
+          style="bottom: 36px;"
+          flat
+          icon="arrow_back"
+          @click="handlePrevThumbnail"
+      >
+        <q-tooltip>Previous thumbnail preview</q-tooltip>
+      </q-btn>
+      <q-btn
+          class="absolute-right text-black"
+          style="bottom: 36px;"
+          flat
+          icon="arrow_forward"
+          @click="handleNextThumbnail"
+      >
+        <q-tooltip>Next thumbnail preview</q-tooltip>
+      </q-btn>
+      <q-btn-group
+          flat
+          class="absolute-bottom"
+          spread
+      >
+        <q-btn
+            class="text-black"
+            flat
+            icon="cancel"
+            @click="configurationStore.currentThumbnailActionLabelId = null"
+        >
+          <q-tooltip>Close thumbnail preview</q-tooltip>
+        </q-btn>
+      </q-btn-group>
+    </div>
+  </q-page-sticky>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useAnnotationStore } from '~/store/annotation.js'
+import { useConfigurationStore } from '~/store/configuration.js'
+import { useMainStore } from '~/store/index.js'
+
+const mainStore = useMainStore()
+const annotationStore = useAnnotationStore()
+const configurationStore = useConfigurationStore()
+
+// thumbnail src
+const thumbnailSrc = computed(() => {
+  return configurationStore.actionLabelData.find(
+      label => label.id === configurationStore.currentThumbnailActionLabelId).thumbnail
+})
+
+// draggable
+const offset = ref([16, 16])
+const handleMove = event => {
+  offset.value = [
+    offset.value[0] - event.delta.x,
+    offset.value[1] - event.delta.y
+  ]
+}
+// resizable
+const imgMaxWidth = ref(400)
+const imgMinWidth = 400
+const handleResize = event => {
+  const delta = event.deltaY / -5
+  if (imgMaxWidth.value + delta >= imgMinWidth) {
+    imgMaxWidth.value += delta
+  }
+}
+// buttons
+const handlePrevThumbnail = () => {
+  const currentIndex = configurationStore.actionLabelData.findIndex(
+      label => label.id === configurationStore.currentThumbnailActionLabelId)
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    if (configurationStore.actionLabelData[i].thumbnail) {
+      configurationStore.currentThumbnailActionLabelId = configurationStore.actionLabelData[i].id
+      return
+    }
+  }
+}
+const handleNextThumbnail = () => {
+  const currentIndex = configurationStore.actionLabelData.findIndex(
+      label => label.id === configurationStore.currentThumbnailActionLabelId)
+  for (let i = currentIndex + 1; i < configurationStore.actionLabelData.length; i++) {
+    if (configurationStore.actionLabelData[i].thumbnail) {
+      configurationStore.currentThumbnailActionLabelId = configurationStore.actionLabelData[i].id
+      return
+    }
+  }
+}
+</script>

src/components/Layout.vue

@@ -80,6 +80,7 @@
           <VideoLoaderV1 v-else/>
           <ActionThumbnailPreview v-if="preferenceStore.actions"/>
         </template>
+        <ActionLabelThumbnailPreview v-if="preferenceStore.actions"/>
         <router-view></router-view>
       </q-page>
     </q-page-container>
@@ -106,6 +107,7 @@
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import ActionThumbnailPreview from '~/components/ActionThumbnailPreview.vue'
+import ActionLabelThumbnailPreview from '~/components/ActionLabelThumbnailPreview.vue'
 import VideoLoaderV1 from '~/components/VideoLoaderV1.vue'
 import VideoLoaderV2 from '~/components/VideoLoaderV2.vue'
 import { useAnnotationStore } from '~/store/annotation.js'

src/pages/configuration/ActionLabelTable.vue

@@ -104,6 +104,8 @@ const handleDelete = (props) => {
   utils.confirm(
       'Are you sure to delete label ' + props.row.name + '?'
   ).onOk(() => {
+    if (props.row.id === configurationStore.currentThumbnailActionLabelId)
+      configurationStore.currentThumbnailActionLabelId = null
     tableData.value.splice(tableData.value.findIndex(type => type.id === props.row.id), 1)
   })
 }

src/pages/configuration/components/TableBase.vue

@@ -47,7 +47,7 @@
       </q-tr>
     </template>
     <template v-slot:body="props">
-      <q-tr>
+      <q-tr :class="{'bg-green-2': configurationStore.currentThumbnailActionLabelId === props.row.id && title === 'Action Labels'}">
         <q-td
             v-if="expand"
             auto-width
@@ -68,10 +68,11 @@
           <q-td v-if="col.type === 'input'">
             <img
                 v-if="props.row.thumbnail"
-                class="vertical-middle float-left rounded-borders float-left q-mr-md"
+                class="vertical-middle float-left cursor-pointer rounded-borders float-left q-mr-md"
                 style="height: 40px;"
                 :src="props.row.thumbnail"
                 alt="thumbnail"
+                @click="handleThumbnailPreview(props.row)"
             />
             <q-input
                 input-class="text-center"
@@ -166,11 +167,16 @@ defineEmits(['add', 'delete'])
 const configurationStore = useConfigurationStore()
 const mainStore = useMainStore()
 const { [props.storeKey]: tableData } = storeToRefs(configurationStore)
-// TODO: adapt ActionThumbnailPreview
+const handleThumbnailPreview = (row) => {
+  configurationStore.currentThumbnailActionLabelId = configurationStore.currentThumbnailActionLabelId === row.id
+      ? null
+      : row.id
+}
 
 // Edit
 const showEdit = ref(false)
 const toggleShowEdit = () => {
+  configurationStore.currentThumbnailActionLabelId = null
   showEdit.value = !showEdit.value
 }
 const jsonData = computed({

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { useAnnotationStore } from '~/store/annotation.js'
+import { useConfigurationStore } from '~/store/configuration.js'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -39,6 +40,7 @@ const router = createRouter({
 
 router.beforeEach((to, from) => {
   useAnnotationStore().currentThumbnailActionId = null
+  useConfigurationStore().currentThumbnailActionLabelId = null
   if (to.path === from.path || Object.keys(to.query).length || !Object.keys(from.query).length) return true
   return { ...to, query: from.query }
 })

src/store/configuration.js

@@ -335,7 +335,9 @@ const DEFAULT_CONFIGURATION = {
         }
       ]
     }
-  ]
+  ],
+
+  currentThumbnailActionLabelId: null
 }
 
 export const useConfigurationStore = defineStore('configuration', () => {