fix(SongItem/PlaylistItem): fixed spacing between icons in 'song actions' tooltips

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -542,12 +542,6 @@ a {
 		width: 146px;
 	}
 
-	.icons-group,
-	.addToPlaylistDropdown,
-	.icons-group > div {
-		display: inline-block;
-	}
-
 	.addToPlaylistDropdown .tippy-popper {
 		max-width: unset;
 	}
@@ -968,7 +962,8 @@ h4.section-title {
 			width: 146px;
 		}
 
-		i {
+		i,
+		span {
 			cursor: pointer;
 			color: var(--dark-grey);
 
@@ -977,7 +972,7 @@ h4.section-title {
 				filter: brightness(90%);
 			}
 
-			&:not(:first-of-type) {
+			&:not(:first-child) {
 				margin-left: 5px;
 			}
 		}

frontend/src/components/PlaylistItem.vue

@@ -31,7 +31,9 @@
 			</p>
 		</div>
 		<div class="universal-item-actions">
-			<slot name="actions" />
+			<div class="icons-group">
+				<slot name="actions" />
+			</div>
 		</div>
 	</div>
 </template>

frontend/src/components/Queue.vue

@@ -35,38 +35,34 @@
 							v-if="isAdminOnly() || isOwnerOnly()"
 							#actions
 						>
-							<div class="icons-group">
-								<confirm
-									v-if="isOwnerOnly() || isAdminOnly()"
-									placement="left"
-									@confirm="
-										removeFromQueue(element.youtubeId)
-									"
-								>
-									<i
-										class="material-icons delete-icon"
-										content="Remove Song from Queue"
-										v-tippy
-										>delete_forever</i
-									>
-								</confirm>
-								<i
-									class="material-icons"
-									v-if="index > 0"
-									@click="moveSongToTop(element, index)"
-									content="Move to top of Queue"
-									v-tippy
-									>vertical_align_top</i
-								>
+							<confirm
+								v-if="isOwnerOnly() || isAdminOnly()"
+								placement="left"
+								@confirm="removeFromQueue(element.youtubeId)"
+							>
 								<i
-									v-if="queue.length - 1 !== index"
-									@click="moveSongToBottom(element, index)"
-									class="material-icons"
-									content="Move to bottom of Queue"
+									class="material-icons delete-icon"
+									content="Remove Song from Queue"
 									v-tippy
-									>vertical_align_bottom</i
+									>delete_forever</i
 								>
-							</div>
+							</confirm>
+							<i
+								class="material-icons"
+								v-if="index > 0"
+								@click="moveSongToTop(element, index)"
+								content="Move to top of Queue"
+								v-tippy
+								>vertical_align_top</i
+							>
+							<i
+								v-if="queue.length - 1 !== index"
+								@click="moveSongToBottom(element, index)"
+								class="material-icons"
+								content="Move to bottom of Queue"
+								v-tippy
+								>vertical_align_bottom</i
+							>
 						</template>
 					</song-item>
 				</template>

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -122,126 +122,114 @@
 						</template>
 
 						<template #actions>
-							<div class="icons-group">
+							<i
+								v-if="isExcluded(playlist._id)"
+								class="material-icons stop-icon"
+								content="This playlist is blacklisted in this station"
+								v-tippy="{ theme: 'info' }"
+								>play_disabled</i
+							>
+							<confirm
+								v-if="isPartyMode() && isSelected(playlist._id)"
+								@confirm="deselectPartyPlaylist(playlist._id)"
+							>
 								<i
-									v-if="isExcluded(playlist._id)"
 									class="material-icons stop-icon"
-									content="This playlist is blacklisted in this station"
-									v-tippy="{ theme: 'info' }"
-									>play_disabled</i
-								>
-								<confirm
-									v-if="
-										isPartyMode() &&
-											isSelected(playlist._id)
-									"
-									@confirm="
-										deselectPartyPlaylist(playlist._id)
-									"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Stop playing songs from this playlist"
-										v-tippy
-									>
-										stop
-									</i>
-								</confirm>
-								<confirm
-									v-if="
-										isOwnerOrAdmin() &&
-											isPlaylistMode() &&
-											isIncluded(playlist._id)
-									"
-									@confirm="
-										removeIncludedPlaylist(playlist._id)
-									"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Stop playing songs from this playlist"
-										v-tippy
-									>
-										stop
-									</i>
-								</confirm>
-								<i
-									v-if="
-										isPartyMode() &&
-											!isSelected(playlist._id) &&
-											!isExcluded(playlist._id)
-									"
-									@click="selectPartyPlaylist(playlist)"
-									class="material-icons play-icon"
-									content="Request songs from this playlist"
+									content="Stop playing songs from this playlist"
 									v-tippy
-									>play_arrow</i
 								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+										isPlaylistMode() &&
+										isIncluded(playlist._id)
+								"
+								@confirm="removeIncludedPlaylist(playlist._id)"
+							>
 								<i
-									v-if="
-										isOwnerOrAdmin() &&
-											isPlaylistMode() &&
-											!isIncluded(playlist._id) &&
-											!isExcluded(playlist._id)
-									"
-									@click="includePlaylist(playlist)"
-									class="material-icons play-icon"
-									:content="'Play songs from this playlist'"
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
 									v-tippy
-									>play_arrow</i
-								>
-								<confirm
-									v-if="
-										isOwnerOrAdmin() &&
-											!isExcluded(playlist._id)
-									"
-									@confirm="blacklistPlaylist(playlist._id)"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Blacklist Playlist"
-										v-tippy
-										>block</i
-									>
-								</confirm>
-								<confirm
-									v-if="
-										isOwnerOrAdmin() &&
-											isExcluded(playlist._id)
-									"
-									@confirm="
-										removeExcludedPlaylist(playlist._id)
-									"
 								>
-									<i
-										class="material-icons stop-icon"
-										content="Stop blacklisting songs from this playlist"
-										v-tippy
-									>
-										stop
-									</i>
-								</confirm>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="
+									isPartyMode() &&
+										!isSelected(playlist._id) &&
+										!isExcluded(playlist._id)
+								"
+								@click="selectPartyPlaylist(playlist)"
+								class="material-icons play-icon"
+								content="Request songs from this playlist"
+								v-tippy
+								>play_arrow</i
+							>
+							<i
+								v-if="
+									isOwnerOrAdmin() &&
+										isPlaylistMode() &&
+										!isIncluded(playlist._id) &&
+										!isExcluded(playlist._id)
+								"
+								@click="includePlaylist(playlist)"
+								class="material-icons play-icon"
+								:content="'Play songs from this playlist'"
+								v-tippy
+								>play_arrow</i
+							>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+										!isExcluded(playlist._id)
+								"
+								@confirm="blacklistPlaylist(playlist._id)"
+							>
 								<i
-									v-if="playlist.createdBy === myUserId"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="Edit Playlist"
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
 									v-tippy
-									>edit</i
+									>block</i
 								>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() && isExcluded(playlist._id)
+								"
+								@confirm="removeExcludedPlaylist(playlist._id)"
+							>
 								<i
-									v-if="
-										playlist.createdBy !== myUserId &&
-											(playlist.privacy === 'public' ||
-												isAdmin())
-									"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="View Playlist"
+									class="material-icons stop-icon"
+									content="Stop blacklisting songs from this playlist"
 									v-tippy
-									>visibility</i
 								>
-							</div>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
 						</template>
 					</playlist-item>
 					<button
@@ -468,53 +456,49 @@
 						</template>
 
 						<template #actions>
-							<div class="icons-group">
-								<confirm
-									v-if="isOwnerOrAdmin()"
-									@confirm="
-										deselectPartyPlaylist(playlist._id)
-									"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Stop playing songs from this playlist"
-										v-tippy
-									>
-										stop
-									</i>
-								</confirm>
-								<confirm
-									v-if="isOwnerOrAdmin()"
-									@confirm="blacklistPlaylist(playlist._id)"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Blacklist Playlist"
-										v-tippy
-										>block</i
-									>
-								</confirm>
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="deselectPartyPlaylist(playlist._id)"
+							>
 								<i
-									v-if="playlist.createdBy === myUserId"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="Edit Playlist"
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
 									v-tippy
-									>edit</i
 								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="blacklistPlaylist(playlist._id)"
+							>
 								<i
-									v-if="
-										playlist.createdBy !== myUserId &&
-											(playlist.privacy === 'public' ||
-												isAdmin())
-									"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="View Playlist"
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
 									v-tippy
-									>visibility</i
+									>block</i
 								>
-							</div>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
 						</template>
 					</playlist-item>
 				</div>
@@ -545,53 +529,49 @@
 						</template>
 
 						<template #actions>
-							<div class="icons-group">
-								<confirm
-									v-if="isOwnerOrAdmin()"
-									@confirm="
-										removeIncludedPlaylist(playlist._id)
-									"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Stop playing songs from this playlist"
-										v-tippy
-									>
-										stop
-									</i>
-								</confirm>
-								<confirm
-									v-if="isOwnerOrAdmin()"
-									@confirm="blacklistPlaylist(playlist._id)"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Blacklist Playlist"
-										v-tippy
-										>block</i
-									>
-								</confirm>
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="removeIncludedPlaylist(playlist._id)"
+							>
 								<i
-									v-if="playlist.createdBy === myUserId"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="Edit Playlist"
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
 									v-tippy
-									>edit</i
 								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="blacklistPlaylist(playlist._id)"
+							>
 								<i
-									v-if="
-										playlist.createdBy !== myUserId &&
-											(playlist.privacy === 'public' ||
-												isAdmin())
-									"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="View Playlist"
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
 									v-tippy
-									>visibility</i
+									>block</i
 								>
-							</div>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
 						</template>
 					</playlist-item>
 				</div>
@@ -621,37 +601,33 @@
 						</template>
 
 						<template #actions>
-							<div class="icons-group">
-								<confirm
-									@confirm="
-										removeExcludedPlaylist(playlist._id)
-									"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Stop blacklisting songs from this playlist
-							"
-										v-tippy
-										>stop</i
-									>
-								</confirm>
-								<i
-									v-if="playlist.createdBy === userId"
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="Edit Playlist"
-									v-tippy
-									>edit</i
-								>
+							<confirm
+								@confirm="removeExcludedPlaylist(playlist._id)"
+							>
 								<i
-									v-else
-									@click="showPlaylist(playlist._id)"
-									class="material-icons edit-icon"
-									content="View Playlist"
+									class="material-icons stop-icon"
+									content="Stop blacklisting songs from this playlist
+							"
 									v-tippy
-									>visibility</i
+									>stop</i
 								>
-							</div>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === userId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-else
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
 						</template>
 					</playlist-item>
 				</div>

frontend/src/components/modals/ManageStation/Tabs/Songs.vue

@@ -65,18 +65,14 @@
 							:song="song"
 						>
 							<template #actions>
-								<div class="icons-group">
-									<i
-										class="material-icons add-to-queue-icon"
-										v-if="
-											station.partyMode && !station.locked
-										"
-										@click="addSongToQueue(song.youtubeId)"
-										content="Add Song to Queue"
-										v-tippy
-										>queue</i
-									>
-								</div>
+								<i
+									class="material-icons add-to-queue-icon"
+									v-if="station.partyMode && !station.locked"
+									@click="addSongToQueue(song.youtubeId)"
+									content="Add Song to Queue"
+									v-tippy
+									>queue</i
+								>
 							</template>
 						</song-item>
 						<button

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -16,74 +16,71 @@
 				<template #item="{element}">
 					<playlist-item :playlist="element" class="item-draggable">
 						<template #actions>
-							<div class="icons-group">
+							<i
+								v-if="isExcluded(element._id)"
+								class="material-icons stop-icon"
+								content="This playlist is blacklisted in this station"
+								v-tippy="{ theme: 'info' }"
+								>play_disabled</i
+							>
+							<i
+								v-if="
+									station.type === 'community' &&
+										(isOwnerOrAdmin() ||
+											station.partyMode) &&
+										!isSelected(element._id) &&
+										!isExcluded(element._id)
+								"
+								@click="selectPlaylist(element)"
+								class="material-icons play-icon"
+								:content="
+									station.partyMode
+										? 'Request songs from this playlist'
+										: 'Play songs from this playlist'
+								"
+								v-tippy
+								>play_arrow</i
+							>
+							<confirm
+								v-if="
+									station.type === 'community' &&
+										(isOwnerOrAdmin() ||
+											station.partyMode) &&
+										isSelected(element._id)
+								"
+								@confirm="deselectPlaylist(element._id)"
+							>
 								<i
-									v-if="isExcluded(element._id)"
 									class="material-icons stop-icon"
-									content="This playlist is blacklisted in this station"
-									v-tippy="{ theme: 'info' }"
-									>play_disabled</i
-								>
-								<i
-									v-if="
-										station.type === 'community' &&
-											(isOwnerOrAdmin() ||
-												station.partyMode) &&
-											!isSelected(element._id) &&
-											!isExcluded(element._id)
-									"
-									@click="selectPlaylist(element)"
-									class="material-icons play-icon"
 									:content="
 										station.partyMode
-											? 'Request songs from this playlist'
-											: 'Play songs from this playlist'
+											? 'Stop requesting songs from this playlist'
+											: 'Stop playing songs from this playlist'
 									"
 									v-tippy
-									>play_arrow</i
-								>
-								<confirm
-									v-if="
-										station.type === 'community' &&
-											(isOwnerOrAdmin() ||
-												station.partyMode) &&
-											isSelected(element._id)
-									"
-									@confirm="deselectPlaylist(element._id)"
+									>stop</i
 								>
-									<i
-										class="material-icons stop-icon"
-										:content="
-											station.partyMode
-												? 'Stop requesting songs from this playlist'
-												: 'Stop playing songs from this playlist'
-										"
-										v-tippy
-										>stop</i
-									>
-								</confirm>
-								<confirm
-									v-if="
-										isOwnerOrAdmin() &&
-											!isExcluded(element._id)
-									"
-									@confirm="blacklistPlaylist(element._id)"
-								>
-									<i
-										class="material-icons stop-icon"
-										content="Blacklist Playlist"
-										v-tippy
-										>block</i
-									>
-								</confirm>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() && !isExcluded(element._id)
+								"
+								@confirm="blacklistPlaylist(element._id)"
+							>
 								<i
-									@click="edit(element._id)"
-									class="material-icons edit-icon"
-									content="Edit Playlist"
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
 									v-tippy
-									>edit</i
+									>block</i
 								>
-							</div>
+							</confirm>
+							<i
+								@click="edit(element._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
 						</template>
 					</playlist-item>
 				</template>
@@ -343,9 +340,6 @@ export default {
 }
 
 .icons-group {
-	display: flex;
-	align-items: center;
-
 	.edit-icon {
 		color: var(--primary-color);
 	}