refactor: update context menu style

src/components/ContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="context-menu">
+  <div class="context-menu" ref="contextMenu">
     <div
       class="menu"
       tabindex="-1"
@@ -37,6 +37,7 @@ export default {
 
     closeMenu() {
       this.showMenu = false;
+      this.$parent.closeMenu();
     },
 
     openMenu(e) {
@@ -62,10 +63,11 @@ export default {
 .menu {
   position: fixed;
   min-width: 136px;
+  max-width: 240px;
   list-style: none;
   background: rgba(255, 255, 255, 0.88);
   box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
   backdrop-filter: blur(12px);
   border-radius: 8px;
   box-sizing: border-box;
@@ -77,15 +79,65 @@ export default {
   }
 }
 
+[data-theme="dark"] {
+  .menu {
+    background: rgba(46, 46, 46, 0.68);
+    backdrop-filter: blur(16px) contrast(120%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+}
+
 .menu .item {
   font-weight: 600;
   font-size: 14px;
   padding: 10px 14px;
   border-radius: 7px;
   cursor: default;
+  color: var(--color-text);
   &:hover {
-    background: #eaeffd;
+    background: var(--color-primary-bg);
-    color: #335eea;
+    color: var(--color-primary);
+  }
+}
+
+hr {
+  margin: 4px 10px;
+  background: rgba(128, 128, 128, 0.18);
+  height: 1px;
+  box-shadow: none;
+  border: none;
+}
+
+.item-info {
+  padding: 10px 10px;
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+  cursor: default;
+  img {
+    height: 38px;
+    border-radius: 4px;
+  }
+  .info {
+    margin-left: 8px;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    word-break: break-all;
+  }
+  .subtitle {
+    font-size: 12px;
+    opacity: 0.68;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    word-break: break-all;
   }
 }
 </style>

src/components/TrackList.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="track-list" :style="listStyles">
     <ContextMenu ref="menu">
+      <div class="item-info">
+        <img :src="rightClickedTrack.al.picUrl | resizeImage(512)" />
+        <div class="info">
+          <div class="title">{{ rightClickedTrack.name }}</div>
+          <div class="subtitle">{{ rightClickedTrack.ar[0].name }}</div>
+        </div>
+      </div>
+      <hr />
       <div class="item" @click="play">Play</div>
       <div class="item" @click="playNext">Play Next</div>
       <div
@@ -63,7 +71,12 @@ export default {
   },
   data() {
     return {
-      rightClickedTrack: null,
+      rightClickedTrack: {
+        id: 0,
+        name: "",
+        ar: [{ name: "" }],
+        al: { picUrl: "" },
+      },
       listStyles: {},
     };
   },
@@ -90,6 +103,14 @@ export default {
       this.rightClickedTrack = track;
       this.$refs.menu.openMenu(e);
     },
+    closeMenu() {
+      this.rightClickedTrack = {
+        id: 0,
+        name: "",
+        ar: [{ name: "" }],
+        al: { picUrl: "" },
+      };
+    },
     playThisList(trackID) {
       if (this.dbclickTrackFunc === "default") {
         this.playThisListDefault(trackID);

src/components/TrackListItem.vue

@@ -4,8 +4,8 @@
     :class="trackClass"
     :style="trackStyle"
     :title="track.reason"
-    @mouseover="focus = true"
+    @mouseover="hover = true"
-    @mouseleave="focus = false"
+    @mouseleave="hover = false"
   >
     <img
       :src="imgUrl | resizeImage(224)"
@@ -90,7 +90,7 @@ export default {
     track: Object,
   },
   data() {
-    return { focus: false, trackStyle: {} };
+    return { hover: false, trackStyle: {} };
   },
   computed: {
     imgUrl() {
@@ -125,11 +125,21 @@ export default {
       let trackClass = [this.type];
       if (!this.track.playable) trackClass.push("disable");
       if (this.isPlaying) trackClass.push("playing");
+      if (this.focus) trackClass.push("focus");
       return trackClass;
     },
     accountLogin() {
       return isAccountLoggedIn();
     },
+    isMenuOpened() {
+      return this.$parent.rightClickedTrack.id === this.track.id ? true : false;
+    },
+    focus() {
+      return (
+        (this.hover && this.$parent.rightClickedTrack.id === 0) ||
+        this.isMenuOpened
+      );
+    },
   },
   methods: {
     goToAlbum() {
@@ -285,11 +295,13 @@ button {
     opacity: 0.88;
     color: var(--color-text);
   }
-  &:hover {
+}
+
+.track.focus {
   transition: all 0.3s;
   background: var(--color-secondary-bg);
 }
-}
+
 .track.disable {
   img {
     filter: grayscale(1) opacity(0.6);