Added keyboard shortcuts helper floating box to queuesongs and songs admin pages

frontend/src/components/ui/FloatingBox.vue

@@ -2,6 +2,8 @@
 	<div
 		ref="box"
 		class="box"
+		:id="id"
+		v-if="shown"
 		:style="{
 			width: width + 'px',
 			height: height + 'px',

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

@@ -20,6 +20,13 @@
 			>
 				Load all
 			</button>
+			<button
+				class="button is-primary"
+				@click="toggleKeyboardShortcutsHelper"
+				@dblclick="resetKeyboardShortcutsHelper"
+			>
+				Keyboard shortcuts helper
+			</button>
 			<br />
 			<br />
 			<table class="table is-striped">
@@ -103,6 +110,65 @@
 			</table>
 		</div>
 		<edit-song v-if="modals.editSong" />
+		<floating-box
+			id="keyboardShortcutsHelper"
+			ref="keyboardShortcutsHelper"
+		>
+			<template #body>
+				<div>
+					<div>
+						<span class="biggest"><b>Queue songs page</b></span>
+						<span
+							><b>Arrow keys up/down</b> - Moves between
+							songs</span
+						>
+						<span><b>E</b> - Edit selected song</span>
+						<span><b>A</b> - Add selected song</span>
+						<span><b>X</b> - Delete selected song</span>
+					</div>
+					<hr />
+					<div>
+						<span class="biggest"><b>Edit song modal</b></span>
+						<span class="bigger"><b>Navigation</b></span>
+						<span><b>Home</b> - Edit</span>
+						<span><b>End</b> - Edit</span>
+						<hr />
+						<span class="bigger"><b>Player controls</b></span>
+						<span><b>Numpad up/down</b> - Volume up/down 10%</span>
+						<span
+							><b>Ctrl + Numpad up/down</b> - Volume up/down
+							1%</span
+						>
+						<span><b>Numpad center</b> - Pause/resume</span>
+						<span><b>Ctrl + Numpad center</b> - Stop</span>
+						<span
+							><b>Numpad Right</b> - Skip to last 10 seconds</span
+						>
+						<hr />
+						<span class="bigger"><b>Form control</b></span>
+						<span
+							><b>Ctrl + D</b> - Executes purple button in that
+							input</span
+						>
+						<span
+							><b>Ctrl + Alt + D</b> - Fill in all Discogs
+							fields</span
+						>
+						<span
+							><b>Ctrl + R</b> - Executes red button in that
+							input</span
+						>
+						<span
+							><b>Ctrl + Alt + R</b> - Reset duration field</span
+						>
+						<hr />
+						<span class="bigger"><b>Modal control</b></span>
+						<span><b>Ctrl + S</b> - Save</span>
+						<span><b>Ctrl + X</b> - Exit</span>
+					</div>
+				</div>
+			</template>
+		</floating-box>
 	</div>
 </template>
 
@@ -115,12 +181,14 @@ import Toast from "toasters";
 import EditSong from "../../../components/modals/EditSong.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
+import FloatingBox from "../../../components/ui/FloatingBox.vue";
+
 import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
 
 import io from "../../../io";
 
 export default {
-	components: { EditSong, UserIdToUsername },
+	components: { EditSong, UserIdToUsername, FloatingBox },
 	mixins: [ScrollAndFetchHandler],
 	data() {
 		return {
@@ -198,6 +266,12 @@ export default {
 			if (event.srcElement.nextElementSibling)
 				event.srcElement.nextElementSibling.focus();
 		},
+		toggleKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.toggleBox();
+		},
+		resetKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.resetBox();
+		},
 		init() {
 			if (this.songs.length > 0)
 				this.position = Math.ceil(this.songs.length / 15) + 1;
@@ -291,6 +365,26 @@ td {
 	vertical-align: middle;
 }
 
+#keyboardShortcutsHelper {
+	.box-body {
+		b {
+			color: #000;
+		}
+
+		.biggest {
+			font-size: 18px;
+		}
+
+		.bigger {
+			font-size: 16px;
+		}
+
+		span {
+			display: block;
+		}
+	}
+}
+
 .is-primary:focus {
 	background-color: $primary-color !important;
 }

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

@@ -20,6 +20,13 @@
 			>
 				Load all
 			</button>
+			<button
+				class="button is-primary"
+				@click="toggleKeyboardShortcutsHelper"
+				@dblclick="resetKeyboardShortcutsHelper"
+			>
+				Keyboard shortcuts helper
+			</button>
 			<br />
 			<br />
 			<table class="table is-striped">
@@ -96,6 +103,65 @@
 			</table>
 		</div>
 		<edit-song v-if="modals.editSong" />
+		<floating-box
+			id="keyboardShortcutsHelper"
+			ref="keyboardShortcutsHelper"
+		>
+			<template #body>
+				<div>
+					<div>
+						<span class="biggest"><b>Songs page</b></span>
+						<span
+							><b>Arrow keys up/down</b> - Moves between
+							songs</span
+						>
+						<span><b>E</b> - Edit selected song</span>
+						<span><b>A</b> - Add selected song</span>
+						<span><b>X</b> - Delete selected song</span>
+					</div>
+					<hr />
+					<div>
+						<span class="biggest"><b>Edit song modal</b></span>
+						<span class="bigger"><b>Navigation</b></span>
+						<span><b>Home</b> - Edit</span>
+						<span><b>End</b> - Edit</span>
+						<hr />
+						<span class="bigger"><b>Player controls</b></span>
+						<span><b>Numpad up/down</b> - Volume up/down 10%</span>
+						<span
+							><b>Ctrl + Numpad up/down</b> - Volume up/down
+							1%</span
+						>
+						<span><b>Numpad center</b> - Pause/resume</span>
+						<span><b>Ctrl + Numpad center</b> - Stop</span>
+						<span
+							><b>Numpad Right</b> - Skip to last 10 seconds</span
+						>
+						<hr />
+						<span class="bigger"><b>Form control</b></span>
+						<span
+							><b>Ctrl + D</b> - Executes purple button in that
+							input</span
+						>
+						<span
+							><b>Ctrl + Alt + D</b> - Fill in all Discogs
+							fields</span
+						>
+						<span
+							><b>Ctrl + R</b> - Executes red button in that
+							input</span
+						>
+						<span
+							><b>Ctrl + Alt + R</b> - Reset duration field</span
+						>
+						<hr />
+						<span class="bigger"><b>Modal control</b></span>
+						<span><b>Ctrl + S</b> - Save</span>
+						<span><b>Ctrl + X</b> - Exit</span>
+					</div>
+				</div>
+			</template>
+		</floating-box>
 	</div>
 </template>
 
@@ -107,13 +173,15 @@ import Toast from "toasters";
 import EditSong from "../../../components/modals/EditSong.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
+import FloatingBox from "../../../components/ui/FloatingBox.vue";
+
 import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
 
 import io from "../../../io";
 
 export default {
 	mixins: [ScrollAndFetchHandler],
-	components: { EditSong, UserIdToUsername },
+	components: { EditSong, UserIdToUsername, FloatingBox },
 	data() {
 		return {
 			searchQuery: "",
@@ -176,6 +244,12 @@ export default {
 				this.gettingSet = false;
 			});
 		},
+		toggleKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.toggleBox();
+		},
+		resetKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.resetBox();
+		},
 		init() {
 			if (this.songs.length > 0)
 				this.position = Math.ceil(this.songs.length / 15) + 1;
@@ -303,6 +377,26 @@ td {
 	vertical-align: middle;
 }
 
+#keyboardShortcutsHelper {
+	.box-body {
+		b {
+			color: #000;
+		}
+
+		.biggest {
+			font-size: 18px;
+		}
+
+		.bigger {
+			font-size: 16px;
+		}
+
+		span {
+			display: block;
+		}
+	}
+}
+
 .is-primary:focus {
 	background-color: $primary-color !important;
 }