Selaa lähdekoodia

refactor(SongItem): massively improve SongItem performance by not activating Tippy until you hover over the icon

Kristian Vos 3 vuotta sitten
vanhempi
commit
46792f777f
1 muutettua tiedostoa jossa 13 lisäystä ja 3 poistoa
  1. 13 3
      frontend/src/components/SongItem.vue

+ 13 - 3
frontend/src/components/SongItem.vue

@@ -63,7 +63,7 @@
 				v-if="disabledActions.indexOf('all') === -1"
 			>
 				<tippy
-					v-if="loggedIn"
+					v-if="loggedIn && hoveredTippy"
 					:touch="true"
 					:interactive="true"
 					placement="left"
@@ -135,8 +135,14 @@
 						</div>
 					</template>
 				</tippy>
+				<i
+					class="material-icons action-dropdown-icon"
+					v-else-if="loggedIn && !hoveredTippy"
+					@mouseenter="hoverTippy()"
+					>more_horiz</i
+				>
 				<a
-					v-if="
+					v-else-if="
 						!loggedIn && disabledActions.indexOf('youtube') === -1
 					"
 					target="_blank"
@@ -191,7 +197,8 @@ export default {
 		return {
 			utils,
 			formatedRequestedAt: null,
-			formatRequestedAtInterval: null
+			formatRequestedAtInterval: null,
+			hoveredTippy: false
 		};
 	},
 	computed: {
@@ -248,6 +255,9 @@ export default {
 				500
 			);
 		},
+		hoverTippy() {
+			this.hoveredTippy = true;
+		},
 		report(song) {
 			this.hideTippyElements();
 			this.reportSong(song);