Merge branch 'polishing' of github.com:Musare/MusareNode into polishing

backend/logic/actions/users.js

@@ -1794,14 +1794,14 @@ export default {
 	}),
 
 	/**
-	 * Updates the type of a user's avatar
+	 * Updates a user's avatar
 	 *
 	 * @param {object} session - the session object automatically added by the websocket
 	 * @param {string} updatingUserId - the updating user's id
-	 * @param {string} newType - the new type
+	 * @param {string} newAvatar - the new avatar object
 	 * @param {Function} cb - gets called with the result
 	 */
-	updateAvatarType: isLoginRequired(async function updateAvatarType(session, updatingUserId, newAvatar, cb) {
+	updateAvatar: isLoginRequired(async function updateAvatarType(session, updatingUserId, newAvatar, cb) {
 		const userModel = await DBModule.runJob("GET_MODEL", { modelName: "user" }, this);
 
 		async.waterfall(
@@ -1831,8 +1831,8 @@ export default {
 					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
 					this.log(
 						"ERROR",
-						"UPDATE_AVATAR_TYPE",
-						`Couldn't update avatar type for user "${updatingUserId}" to type "${newAvatar.type}". "${err}"`
+						"UPDATE_AVATAR",
+						`Couldn't update avatar for user "${updatingUserId}" to type "${newAvatar.type}" and color "${newAvatar.color}". "${err}"`
 					);
 					return cb({ status: "error", message: err });
 				}
@@ -1840,18 +1840,18 @@ export default {
 				ActivitiesModule.runJob("ADD_ACTIVITY", {
 					userId: updatingUserId,
 					type: "user__edit_avatar",
-					payload: { message: `Changed avatar to use ${newAvatar.type}` }
+					payload: { message: `Changed avatar to use ${newAvatar.type} and ${newAvatar.color}` }
 				});
 
 				this.log(
 					"SUCCESS",
-					"UPDATE_AVATAR_TYPE",
-					`Updated avatar type for user "${updatingUserId}" to type "${newAvatar.type}".`
+					"UPDATE_AVATAR",
+					`Updated avatar for user "${updatingUserId}" to type "${newAvatar.type} and color ${newAvatar.color}".`
 				);
 
 				return cb({
 					status: "success",
-					message: "Avatar type updated successfully"
+					message: "Avatar updated successfully"
 				});
 			}
 		);

frontend/dist/index.css

@@ -134,6 +134,10 @@ body {
 	position: relative;
 }
 
+#root {
+	height: 100%;
+}
+
 .content-wrapper {
 	/* padding: 60px 0 calc(230px + 60px) 0; */
 	padding-top: 60px;

frontend/src/components/layout/MainFooter.vue

@@ -85,6 +85,7 @@ export default {
 		margin-right: auto;
 		width: 160px;
 		order: 1;
+		user-select: none;
 	}
 
 	#footer-links {

frontend/src/components/layout/MainHeader.vue

@@ -222,6 +222,7 @@ export default {
 		img {
 			max-height: 38px;
 			color: var(--primary-color);
+			user-select: none;
 		}
 	}
 

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -290,6 +290,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.api-section,
+	.api-result {
+		background-color: var(--dark-grey-3) !important;
+	}
+
+	.api-result .tracks .track:hover,
+	.api-result .tracks .track:focus,
+	.selected-discogs-info {
+		background-color: var(--dark-grey-2) !important;
+	}
+
+	.label,
+	p,
+	strong {
+		color: var(--light-grey-2);
+	}
+}
+
 .discogs-tab {
 	// width: 376px;
 	// background-color: var(--light-grey);

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -340,6 +340,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.report-items .report-item {
+		background-color: var(--dark-grey-3) !important;
+	}
+
+	.report-items .report-item .report-item-header {
+		background-color: var(--dark-grey-2) !important;
+	}
+
+	.label,
+	p,
+	strong {
+		color: var(--light-grey-2);
+	}
+}
+
 .tabs-container {
 	.tab-selection {
 		display: flex;

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

@@ -1463,22 +1463,10 @@ export default {
 <style lang="scss" scoped>
 .night-mode {
 	.edit-section,
-	.api-section,
-	.api-result,
-	.player-footer {
+	.player-footer,
+	#tabs-container {
 		background-color: var(--dark-grey-3) !important;
 	}
-
-	.api-result .tracks .track:hover,
-	.selected-discogs-info {
-		background-color: var(--dark-grey-2) !important;
-	}
-
-	.label,
-	p,
-	strong {
-		color: var(--light-grey-2);
-	}
 }
 
 .modal-card-body > div {

frontend/src/components/modals/ImportAlbum.vue

@@ -573,6 +573,29 @@ export default {
 </script>
 
 <style lang="scss">
+.night-mode {
+	.search-discogs-album, .discogs-album, .import-youtube-playlist, .track-boxes {
+		background-color: var(--dark-grey-3) !important;
+	}
+
+	.api-result {
+		background-color: var(--dark-grey-3) !important;
+	}
+
+	.api-result .tracks .track:hover,
+	.api-result .tracks .track:focus,
+	.discogs-album .tracks .track:hover,
+	.discogs-album .tracks .track:focus  {
+		background-color: var(--dark-grey-2) !important;
+	}
+
+	.label,
+	p,
+	strong {
+		color: var(--light-grey-2);
+	}
+}
+
 .import-album-modal {
 	.modal-card-title {
 		text-align: center;

frontend/src/components/modals/ViewReport.vue

@@ -237,6 +237,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.report-item {
+		background-color: var(--dark-grey-2) !important;
+	}
+
+	.report-item-header {
+		background-color: var(--dark-grey-3) !important;
+	}
+}
+
 .report-item {
 	background-color: var(--white);
 	border: 0.5px solid var(--primary-color);

frontend/src/main.js

@@ -9,7 +9,7 @@ import store from "./store";
 
 import AppComponent from "./App.vue";
 
-const REQUIRED_CONFIG_VERSION = 5;
+const REQUIRED_CONFIG_VERSION = 6;
 
 const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;

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

@@ -27,6 +27,7 @@
 			>
 				Keyboard shortcuts helper
 			</button>
+			<button class="button is-primary" @click="openModal('requestSong')">Request song</button>
 			<br />
 			<br />
 			<table class="table is-striped">
@@ -109,6 +110,7 @@
 		</div>
 		<import-album v-if="modals.importAlbum" />
 		<edit-song v-if="modals.editSong" />
+		<request-song v-if="modals.requestSong" />
 		<floating-box
 			id="keyboardShortcutsHelper"
 			ref="keyboardShortcutsHelper"
@@ -192,6 +194,9 @@ export default {
 		ImportAlbum: defineAsyncComponent(() =>
 			import("@/components/modals/ImportAlbum.vue")
 		),
+		RequestSong: defineAsyncComponent(() =>
+			import("@/components/modals/RequestSong.vue")
+		),
 		UserIdToUsername,
 		FloatingBox
 	},

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

@@ -245,6 +245,10 @@ export default {
 			color: var(--light-grey-2);
 		}
 	}
+
+	.report-item-header {
+		background-color: var(--dark-grey-4) !important;
+	}
 }
 
 #options-column {

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

@@ -27,6 +27,7 @@
 			>
 				Keyboard shortcuts helper
 			</button>
+			<button class="button is-primary" @click="openModal('requestSong')">Request song</button>
 			<br />
 			<br />
 			<table class="table is-striped">
@@ -118,6 +119,7 @@
 		</div>
 		<import-album v-if="modals.importAlbum" />
 		<edit-song v-if="modals.editSong" />
+		<request-song v-if="modals.requestSong" />
 		<floating-box
 			id="keyboardShortcutsHelper"
 			ref="keyboardShortcutsHelper"
@@ -204,6 +206,9 @@ export default {
 		ImportAlbum: defineAsyncComponent(() =>
 			import("@/components/modals/ImportAlbum.vue")
 		),
+		RequestSong: defineAsyncComponent(() =>
+			import("@/components/modals/RequestSong.vue")
+		),
 		UserIdToUsername,
 		FloatingBox,
 		Confirm

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

@@ -27,6 +27,7 @@
 			>
 				Keyboard shortcuts helper
 			</button>
+			<button class="button is-primary" @click="openModal('requestSong')">Request song</button>
 			<button class="button is-primary" @click="openModal('importAlbum')">
 				Import album
 			</button>
@@ -154,6 +155,7 @@
 		</div>
 		<import-album v-if="modals.importAlbum" />
 		<edit-song v-if="modals.editSong" song-type="songs" />
+		<request-song v-if="modals.requestSong" />
 		<floating-box
 			id="keyboardShortcutsHelper"
 			ref="keyboardShortcutsHelper"
@@ -266,6 +268,9 @@ export default {
 		ImportAlbum: defineAsyncComponent(() =>
 			import("@/components/modals/ImportAlbum.vue")
 		),
+		RequestSong: defineAsyncComponent(() =>
+			import("@/components/modals/RequestSong.vue")
+		),
 		UserIdToUsername,
 		FloatingBox,
 		Confirm

frontend/src/pages/Home.vue

@@ -858,6 +858,7 @@ html {
 		filter: blur(1px);
 		border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 		overflow: hidden;
+		user-select: none;
 	}
 	.overlay {
 		background: linear-gradient(
@@ -894,6 +895,7 @@ html {
 				font-size: 40px;
 				color: var(--white);
 				font-family: Pacifico, cursive;
+				user-select: none;
 			}
 			.buttons {
 				display: flex;

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -27,6 +27,15 @@
 						<option value="initials">Based on initials</option>
 					</select>
 				</div>
+				<div class="select" v-if="modifiedUser.avatar.type === 'initials'">
+					<select v-model="modifiedUser.avatar.color">
+						<option value="blue">Blue</option>
+						<option value="orange">Orange</option>
+						<option value="green">Green</option>
+						<option value="purple">Purple</option>
+						<option value="teal">Teal</option>
+					</select>
+				</div>
 			</div>
 		</div>
 		<p class="control is-expanded margin-top-zero">
@@ -96,21 +105,6 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	watch: {
-		"modifiedUser.avatar.type": function watchAvatarType(newType, oldType) {
-			if (
-				oldType &&
-				this.modifiedUser.avatar.type !==
-					this.originalUser.avatar.type &&
-				newType === "initials"
-			) {
-				const colors = ["blue", "orange", "green", "purple", "teal"];
-				const color = colors[Math.floor(Math.random() * colors.length)];
-
-				this.modifiedUser.avatar.color = color;
-			}
-		}
-	},
 	methods: {
 		saveChanges() {
 			const nameChanged =
@@ -119,12 +113,12 @@ export default {
 				this.modifiedUser.location !== this.originalUser.location;
 			const bioChanged = this.modifiedUser.bio !== this.originalUser.bio;
 			const avatarChanged =
-				this.modifiedUser.avatar.type !== this.originalUser.avatar.type;
+				this.modifiedUser.avatar.type !== this.originalUser.avatar.type || this.modifiedUser.avatar.color !== this.originalUser.avatar.color;
 
 			if (nameChanged) this.changeName();
 			if (locationChanged) this.changeLocation();
 			if (bioChanged) this.changeBio();
-			if (avatarChanged) this.changeAvatarType();
+			if (avatarChanged) this.changeAvatar();
 
 			if (
 				!avatarChanged &&
@@ -238,13 +232,13 @@ export default {
 				}
 			);
 		},
-		changeAvatarType() {
+		changeAvatar() {
 			const { avatar } = this.modifiedUser;
 
 			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.dispatch(
-				"users.updateAvatarType",
+				"users.updateAvatar",
 				this.userId,
 				avatar,
 				res => {
@@ -252,7 +246,7 @@ export default {
 						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast("Successfully updated avatar type");
+						new Toast("Successfully updated avatar");
 
 						this.updateOriginalUser({
 							property: "avatar",
@@ -292,6 +286,14 @@ export default {
 		align-items: center;
 		margin-top: 5px;
 
+		.select {
+			margin-right: 8px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
 		.profile-picture {
 			margin-right: 10px;
 			width: 50px;