refactor: Allow to change icon on the context menu

Voxelum · Nov 17, 2024 · 3b90d1f · 3b90d1f
1 parent f0ed969
commit 3b90d1f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/xmcl-keystone-ui/src/components/AppChangeInstanceIconCard.vue b/xmcl-keystone-ui/src/components/AppChangeInstanceIconCard.vue
@@ -4,6 +4,7 @@ import { useVModel } from '@vueuse/core'
 const { t } = useI18n()
 const props = defineProps<{
   icon: string
+  color?: string
 }>()
 
 const emit = defineEmits<{
@@ -33,8 +34,11 @@ function pickIconFile() {
 </script>
 
 <template>
-  <v-card>
-    <v-list>
+  <v-card
+    :color="color"
+    class="transition-colors"
+  >
+    <v-list color="transparent">
       <v-list-item>
         <v-list-item-content>
           <v-list-item-title>
@@ -58,7 +62,7 @@ function pickIconFile() {
 
     <v-divider />
 
-    <v-list>
+    <v-list color="transparent">
       <v-list-item>
         <v-text-field
           v-model="iconModel"

diff --git a/xmcl-keystone-ui/src/composables/instanceContextMenu.ts b/xmcl-keystone-ui/src/composables/instanceContextMenu.ts
@@ -3,12 +3,16 @@ import { Ref } from 'vue'
 import { ContextMenuItem } from './contextMenu'
 import { useDialog } from './dialog'
 import { useService } from './service'
+import { injection } from '@/util/inject'
+import { kInstance } from './instance'
 
 export function useInstanceContextMenuItems(instance: Ref<Instance | undefined>) {
   const { show: showDeleteDialog } = useDialog('delete-instance')
   const { duplicateInstance } = useService(InstanceServiceKey)
   const { showItemInDirectory } = useService(BaseServiceKey)
   const { t } = useI18n()
+  const { path } = injection(kInstance)
+  const { currentRoute, push } = useRouter()
 
   return () => {
     const inst = instance.value
@@ -36,6 +40,18 @@ export function useInstanceContextMenuItems(instance: Ref<Instance | undefined>)
           duplicateInstance(inst.path)
         },
       },
+      {
+        text: t('instance.changeIcon'),
+        icon: 'image',
+        onClick() {
+          if (path.value !== inst.path) {
+            path.value = inst.path
+          }
+          if (currentRoute.fullPath !== '/base-setting') {
+            push('/base-setting?changeIcon=true')
+          }
+        },
+      },
     ]
     return result
   }

diff --git a/xmcl-keystone-ui/src/views/BaseSettingGeneral.vue b/xmcl-keystone-ui/src/views/BaseSettingGeneral.vue
@@ -33,8 +33,10 @@
               </v-icon>
             </v-avatar>
           </template>
-
-          <AppChangeInstanceIconCard :icon.sync="data.icon" />
+          <AppChangeInstanceIconCard
+            :color="highlighted ? 'info' : ''"
+            :icon.sync="data.icon"
+          />
         </v-menu>
       </v-list-item-action>
       <v-list-item-content>
@@ -181,6 +183,10 @@ import SettingItemCheckbox from '@/components/SettingItemCheckbox.vue'
 import { kUserContext } from '@/composables/user'
 import { AUTHORITY_MICROSOFT } from '@xmcl/runtime-api'
 import AppChangeInstanceIconCard from '@/components/AppChangeInstanceIconCard.vue'
+import { useQuery } from '@/composables/query'
+import { useTimeout } from '@vueuse/core'
+
+const changeIcon = useQuery('changeIcon')
 
 const {
   data,
@@ -221,6 +227,18 @@ const { t } = useI18n()
 
 const changeIconModel = ref(false)
 
+onMounted(() => {
+  if (changeIcon.value) {
+    nextTick().then(() => {
+      changeIconModel.value = true
+      start()
+    })
+  }
+})
+
+const { ready, start } = useTimeout(500, { controls: true })
+const highlighted = computed(() => !ready.value && changeIconModel.value)
+
 </script>
 
 <style scoped=true>

diff --git a/xmcl-keystone-ui/src/views/InstancesCard.vue b/xmcl-keystone-ui/src/views/InstancesCard.vue
@@ -12,7 +12,7 @@
     hover
     @click="emit('click', $event)"
   >
-    <div
+    <!-- <div
       class="absolute flex size-full items-center justify-center"
     >
       <v-progress-circular
@@ -21,7 +21,7 @@
         :width="4"
         indeterminate
       />
-    </div>
+    </div> -->
     <v-img
       class="white--text favicon grey en-2 min-h-34 max-h-34 flex items-center"
       :src="image"