|
|
@@ -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;
|
|
|
}
|
Kristian Vos