diff --git a/instance/index.js b/instance/index.js index 87c0b85ee278c7630266adf68310c3f0271de860..bc069fb7ff4fbf15d449495f7c49b5e6007af7df 100644 --- a/instance/index.js +++ b/instance/index.js @@ -146,6 +146,24 @@ window.onload = () => { /* Autofill settings */ autoFillSettings(); + + /* Right click menus */ + $('#panelRight') + .on('contextmenu', e => { + var top = e.pageY - 10; + var left = e.pageX - 90; + $('#context-menu-right') + .css({ + display: 'block', + top: top, + left: left, + }) + .addClass('show'); + return false; /* blocks default Webbrowser right click menu */ + }) + .on('click', () => $('#context-menu-right').removeClass('show').hide()); + + $('#context-menu a').on('click', () => $(this).parent().removeClass('show').hide()); }; /* Create the left panel */ diff --git a/instance/views/menu/queue.ejs b/instance/views/menu/queue.ejs new file mode 100644 index 0000000000000000000000000000000000000000..6910511df990874173ab4debc191a36c9925b076 --- /dev/null +++ b/instance/views/menu/queue.ejs @@ -0,0 +1,11 @@ +<%# vim: ts=4 syntax=html + The template for the right click menu on the queue %> +<div class="dropdown-menu dropdown-menu-sm" id="context-menu-right"> + <a class="dropdown-item" href="#">Pause playback</a> + <a class="dropdown-item" href="#">Unpause playback</a> + <div><hr class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Find kara</a> + <div><hr class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Shuffle queue</a> + <a class="dropdown-item" href="#">Clear queue</a> +</div> diff --git a/instance/views/panels.ejs b/instance/views/panels.ejs index fa8effde5f8d3067ecc27995bd52590a103471ac..8cb01c6e4be357977ef0079077df1d61eacd7f37 100644 --- a/instance/views/panels.ejs +++ b/instance/views/panels.ejs @@ -1,14 +1,13 @@ <%# vim: ts=4 syntax=html The template for the main panels %> <div id="panelWrapper" class="row" style="margin-bottom: 13px"> - <ul - id="panelLeft" + <ul id="panelLeft" style="padding: 0px; margin-right: 10px" - class="col panel d-flex flex-column bd-highlight mb-3" - ></ul> - <ul - id="panelRight" + class="col panel d-flex flex-column bd-highlight mb-3"> + </ul> + <ul id="panelRight" style="padding: 0px; margin-left: 10px" - class="col panel d-flex flex-column bd-highlight mb-3" - ></ul> + class="col panel d-flex flex-column bd-highlight mb-3"> + </ul> + <%- include('menu/queue.ejs'); %> </div>