From 2b174dd0a067da089e48a3503b90941b41f74f4f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 7 Oct 2024 01:58:15 +0800
Subject: [PATCH] feat: add icon for video context menu

---
 .../VideoCardContextMenu.vue                  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
index ba2abc61..e2c3cd7e 100644
--- a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
+++ b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
@@ -69,7 +69,7 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
           style="backdrop-filter: var(--bew-filter-glass-1);"
           :style="contextMenuStyles"
           p-2 bg="$bew-elevated" rounded="$bew-radius"
-          w-150px m="t-4 l-[calc(-150px+1rem)]"
+          min-w-150px m="t-4 l-[calc(-150px+1rem)]"
           shadow="$bew-shadow-1" z-10
         >
           <ul flex="~ col gap-1">
@@ -77,9 +77,10 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
               <template v-for="option in video.threePointV2" :key="option.type">
                 <li
                   v-if="option.type !== ThreePointV2Type.WatchLater && option.type !== ThreePointV2Type.Feedback"
-                  bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+                  class="context-menu-item"
                   @click="handleAppMoreCommand(option.type)"
                 >
+                  <i class="item-icon" i-solar:confounded-circle-bold-duotone />
                   <span v-if="option.type === ThreePointV2Type.Dislike">{{ $t('home.not_interested') }}</span>
                   <span v-else>{{ option.title }}</span>
                 </li>
@@ -88,9 +89,10 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
             <template v-else>
               <li
                 v-for="option in videoOptions" :key="option.id"
-                bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+                class="context-menu-item"
                 @click="handleMoreCommand(option.id)"
               >
+                <i class="item-icon" i-solar:confounded-circle-bold-duotone />
                 {{ option.name }}
               </li>
             </template>
@@ -114,3 +116,14 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
     />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.context-menu-item {
+  --uno: "hover:bg-$bew-fill-2 px-4 py-2 rounded-$bew-radius-half cursor-pointer";
+  --uno: "flex items-center";
+}
+
+.item-icon {
+  --uno: "mr-2 inline-block";
+}
+</style>