Merge remote-tracking branch 'origin/polishing' into owen

frontend/src/App.vue

@@ -5,7 +5,7 @@
 			<router-view
 				:key="$route.fullPath"
 				class="main-container"
-				:class="{ 'main-container-modal-active': aModalIsOpen }"
+				:class="{ 'main-container-modal-active': aModalIsOpen2 }"
 			/>
 			<what-is-new v-show="modals.whatIsNew" />
 			<login-modal v-if="modals.login" />
@@ -45,7 +45,9 @@ export default {
 		return {
 			apiDomain: "",
 			socketConnected: true,
-			keyIsDown: false
+			keyIsDown: false,
+			scrollPosition: { y: 0, x: 0 },
+			aModalIsOpen2: false
 		};
 	},
 	computed: {
@@ -79,6 +81,23 @@ export default {
 		activityWatch(activityWatch) {
 			if (activityWatch) aw.enable();
 			else aw.disable();
+		},
+		aModalIsOpen(aModalIsOpen) {
+			if (aModalIsOpen) {
+				this.scrollPosition = {
+					x: window.scrollX,
+					y: window.scrollY
+				};
+				this.aModalIsOpen2 = true;
+			} else {
+				this.aModalIsOpen2 = false;
+				setTimeout(() => {
+					window.scrollTo(
+						this.scrollPosition.x,
+						this.scrollPosition.y
+					);
+				}, 10);
+			}
 		}
 	},
 	async mounted() {
@@ -419,7 +438,7 @@ textarea {
 
 .main-container.main-container-modal-active {
 	height: 100% !important;
-	overflow: hidden;
+	overflow: hidden !important;
 }
 
 a {

frontend/src/components/modals/EditSong/index.vue

@@ -278,7 +278,7 @@
 									<span
 										class="autosuggest-item"
 										tabindex="0"
-										@click="selectArtistAutosuggest(item)"
+										@click="addTag('artists', item)"
 										v-for="item in artistAutosuggestItems"
 										:key="item"
 										>{{ item }}</span
@@ -359,7 +359,7 @@
 								>
 									<span
 										class="autosuggest-item"
-										@click="selectGenreAutosuggest(item)"
+										@click="addTag('genres', item)"
 										v-for="item in genreAutosuggestItems"
 										:key="item"
 										>{{ item }}</span
@@ -1298,9 +1298,6 @@ export default {
 				// Do things here to query the artist
 			}, 1000);
 		},
-		selectArtistAutosuggest(value) {
-			this.artistInputValue = value;
-		},
 		blurGenreInput() {
 			this.genreInputFocussed = false;
 		},
@@ -1325,9 +1322,6 @@ export default {
 				} else this.genreAutosuggestItems = [];
 			}, 1000);
 		},
-		selectGenreAutosuggest(value) {
-			this.genreInputValue = value;
-		},
 		settings(type) {
 			switch (type) {
 				default:
@@ -1388,9 +1382,9 @@ export default {
 			this.video.player.setVolume(volume);
 			localStorage.setItem("volume", volume);
 		},
-		addTag(type) {
+		addTag(type, value) {
 			if (type === "genres") {
-				const genre = this.genreInputValue.trim();
+				const genre = value || this.genreInputValue.trim();
 
 				if (
 					this.song.genres
@@ -1401,18 +1395,20 @@ export default {
 				if (genre) {
 					this.song.genres.push(genre);
 					this.genreInputValue = "";
+					this.genreAutosuggestItems = [];
 					return false;
 				}
 
 				return new Toast("Genre cannot be empty");
 			}
 			if (type === "artists") {
-				const artist = this.artistInputValue;
+				const artist = value || this.artistInputValue;
 				if (this.song.artists.indexOf(artist) !== -1)
 					return new Toast("Artist already exists");
 				if (artist !== "") {
 					this.song.artists.push(artist);
 					this.artistInputValue = "";
+					this.artistAutosuggestItems = [];
 					return false;
 				}
 				return new Toast("Artist cannot be empty");
@@ -1586,6 +1582,21 @@ export default {
 		}
 	}
 
+	.autosuggest-container {
+		background-color: unset !important;
+	}
+
+	.autosuggest-item {
+		background-color: var(--dark-grey) !important;
+		color: white !important;
+		border-color: var(--dark-grey) !important;
+	}
+
+	.autosuggest-item:hover,
+	.autosuggest-item:focus {
+		background-color: var(--dark-grey-2) !important;
+	}
+
 	#tabs-container #tab-selection .button {
 		background: var(--dark-grey) !important;
 		color: var(--white) !important;