feat(AdvancedTable): Minor improvements

frontend/src/components/AdvancedTable.vue

@@ -522,7 +522,7 @@
 						? `${selectedRows.length} row selected`
 						: `${selectedRows.length} rows selected`
 				"
-				v-tippy
+				v-tippy="{ theme: 'info' }"
 			>
 				{{ selectedRows.length }}
 			</button>
@@ -763,7 +763,7 @@ export default {
 		},
 		toggleColumnVisibility(column) {
 			if (this.shownColumns.indexOf(column.name) !== -1) {
-				if (this.shownColumns.length <= 2)
+				if (this.shownColumns.length <= 3)
 					return new Toast(
 						`Unable to hide column ${column.displayName}, there must be at least 1 visibile column`
 					);
@@ -979,7 +979,7 @@ export default {
 						noWidthCount += 1;
 					}
 			});
-			calculatedWidth = Math.round(
+			calculatedWidth = Math.floor(
 				(Math.min(1880, document.body.clientWidth) - calculatedWidth) /
 					(noWidthCount - 1)
 			);
@@ -1021,21 +1021,34 @@ export default {
 			}
 
 			tr {
+				th,
+				td {
+					border-color: var(--dark-grey) !important;
+
+					&:first-child {
+						background-color: var(--dark-grey-3) !important;
+					}
+				}
+
 				&:nth-child(even) {
-					background-color: var(--dark-grey-2);
+					&,
+					td:first-child {
+						background-color: var(--dark-grey-2) !important;
+					}
 				}
 
 				&:hover,
 				&:focus,
 				&.highlighted {
-					background-color: var(--dark-grey-4);
+					th,
+					td {
+						&,
+						&:first-child {
+							background-color: var(--dark-grey-4) !important;
+						}
+					}
 				}
 			}
-
-			th,
-			td {
-				border-color: var(--dark-grey) !important;
-			}
 		}
 
 		.table-header,
@@ -1135,21 +1148,47 @@ export default {
 			}
 		}
 
-		table thead tr th,
-		table tbody tr td {
-			position: relative;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
+		table thead tr,
+		table tbody tr {
+			th,
+			td {
+				position: relative;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+
+				&:first-child {
+					position: sticky;
+					left: 0;
+					background-color: var(--white);
+					z-index: 2;
+				}
+
+				.resizer {
+					height: 100%;
+					width: 5px;
+					background-color: transparent;
+					cursor: col-resize;
+					position: absolute;
+					right: 0;
+					top: 0;
+				}
+			}
+
+			&:nth-child(even) td:first-child {
+				background-color: #fafafa;
+			}
 
-			.resizer {
-				height: 100%;
-				width: 5px;
-				background-color: transparent;
-				cursor: col-resize;
-				position: absolute;
-				right: 0;
-				top: 0;
+			&:hover,
+			&:focus,
+			&.highlighted {
+				th,
+				td {
+					&,
+					&:first-child {
+						background-color: var(--light-grey);
+					}
+				}
 			}
 		}
 	}

frontend/src/pages/Admin/tabs/Test.vue

@@ -63,7 +63,7 @@
 						<i
 							class="material-icons edit-songs-icon"
 							@click.prevent="editMany(slotProps.item)"
-							content="Edit Selected Songs"
+							content="Edit Songs"
 							v-tippy
 						>
 							edit
@@ -71,7 +71,7 @@
 						<i
 							class="material-icons verify-songs-icon"
 							@click.prevent="verifyMany(slotProps.item)"
-							content="Verify Selected Songs"
+							content="Verify Songs"
 							v-tippy
 						>
 							check_circle
@@ -79,7 +79,7 @@
 						<i
 							class="material-icons unverify-songs-icon"
 							@click.prevent="unverifyMany(slotProps.item)"
-							content="Unverify Selected Songs"
+							content="Unverify Songs"
 							v-tippy
 						>
 							cancel
@@ -87,7 +87,7 @@
 						<i
 							class="material-icons tag-songs-icon"
 							@click.prevent="tagMany(slotProps.item)"
-							content="Tag Selected Songs"
+							content="Tag Songs"
 							v-tippy
 						>
 							local_offer
@@ -95,7 +95,7 @@
 						<i
 							class="material-icons artists-songs-icon"
 							@click.prevent="setArtists(slotProps.item)"
-							content="Set Artists for Selected Songs"
+							content="Set Artists"
 							v-tippy
 						>
 							group
@@ -103,7 +103,7 @@
 						<i
 							class="material-icons genres-songs-icon"
 							@click.prevent="setGenres(slotProps.item)"
-							content="Set Genres for Selected Songs"
+							content="Set Genres"
 							v-tippy
 						>
 							theater_comedy
@@ -114,7 +114,7 @@
 						>
 							<i
 								class="material-icons delete-songs-icon"
-								content="Delete Selected Songs"
+								content="Delete Songs"
 								v-tippy
 							>
 								delete_forever
@@ -169,9 +169,9 @@ export default {
 					displayName: "Thumb",
 					properties: ["thumbnail"],
 					sortable: false,
-					minWidth: 120,
-					defaultWidth: 120,
-					maxWidth: 120,
+					minWidth: 75,
+					defaultWidth: 75,
+					maxWidth: 75,
 					resizable: false
 				},
 				{
@@ -179,7 +179,8 @@ export default {
 					displayName: "Musare ID",
 					properties: ["_id"],
 					sortProperty: "_id",
-					defaultWidth: 220
+					minWidth: 215,
+					defaultWidth: 215
 				},
 				{
 					name: "youtubeId",