Просмотр исходного кода

refactor: improved EditPlaylist/ManageStation Musare song search item adding to playlist/queue action(s)

Kristian Vos 3 лет назад
Родитель
Сommit
3ee841a759

+ 2 - 1
frontend/src/App.vue

@@ -1036,7 +1036,8 @@ h4.section-title {
 
 		.edit-icon,
 		.view-icon,
-		.add-to-playlist-icon {
+		.add-to-playlist-icon,
+		.add-to-queue-icon {
 			color: var(--primary-color);
 		}
 

+ 4 - 0
frontend/src/components/AddToPlaylistDropdown.vue

@@ -190,4 +190,8 @@ export default {
 		color: #fff;
 	}
 }
+
+.addToPlaylistDropdown {
+	display: flex;
+}
 </style>

+ 1 - 1
frontend/src/components/Queue.vue

@@ -34,7 +34,7 @@
 					>
 						<template
 							v-if="isAdminOnly() || isOwnerOnly()"
-							#actions
+							#tippyActions
 						>
 							<confirm
 								v-if="isOwnerOnly() || isAdminOnly()"

+ 4 - 1
frontend/src/components/SongItem.vue

@@ -139,7 +139,7 @@
 							>
 								edit
 							</i>
-							<slot name="actions" />
+							<slot name="tippyActions" />
 						</div>
 					</template>
 				</tippy>
@@ -155,6 +155,9 @@
 					<div class="youtube-icon"></div>
 				</a>
 			</div>
+			<div class="universal-item-actions" v-if="$slots.actions">
+				<slot name="actions" />
+			</div>
 		</div>
 	</div>
 </template>

+ 18 - 1
frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -27,7 +27,24 @@
 					v-for="song in musareSearch.results"
 					:key="song._id"
 					:song="song"
-				/>
+					disabled-actions="addToPlaylist"
+				>
+					<template #actions>
+						<add-to-playlist-dropdown
+							:song="{ youtubeId: song.songId }"
+							placement="top-end"
+						>
+							<template #button>
+								<i
+									class="material-icons add-to-playlist-icon"
+									content="Add Song to Playlist"
+									v-tippy
+									>playlist_add</i
+								>
+							</template>
+						</add-to-playlist-dropdown>
+					</template>
+				</song-item>
 
 				<button
 					v-if="resultsLeftCount > 0"

+ 1 - 1
frontend/src/components/modals/EditPlaylist/index.vue

@@ -114,7 +114,7 @@
 											}"
 											:ref="`song-item-${index}`"
 										>
-											<template #actions>
+											<template #tippyActions>
 												<i
 													class="
 														material-icons