diff --git a/instance/index.ejs b/instance/index.ejs
index dde4e7fdea76bca064b75029bbb2886a332de38b..e874260257035d6f605f535d6f3690ee3badd2ad 100644
--- a/instance/index.ejs
+++ b/instance/index.ejs
@@ -18,11 +18,7 @@
<body>
<%- include('views/settings.ejs'); %>
<div id="mainFrame" class="container-fluid">
- <div
- id="buttonPanelListLeft"
- class="d-flex flex-row bd-highlight mb-3 row card"
- style="-webkit-app-region: drag"
- ></div>
+ <%- include('views/menubar.ejs'); %>
<%- include('views/panels.ejs'); %>
<%- include('views/progressBar.ejs'); %>
</div>
diff --git a/instance/main.js b/instance/main.js
index f2f74989ac8ee53f685b6b84dae792ff2b830942..e80430817edcd023351ce09c8606e0bb539c632c 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -5,23 +5,6 @@ const { ipcRenderer } = require('electron'),
ejs = require('ejs'),
e = require('express');
-/* prettier-ignore */
-const buttonList = [
- [ 'left', `<i class="fas fa-play"></i>`, 'commandPlay', 'Play or pause Lektor' ],
- [ 'left', `<i class="fas fa-stop"></i>`, 'commandStop', 'Stop lektor' ],
- [ 'left', `<i class="fas fa-eraser"></i>`, 'commandClear', 'Clear the queue' ],
-
- [ 'sleft', `<i class="fas fa-search"></i>`, 'selectAdvence', 'Advence search' ],
- [ 'sleft', `<i class="fas fa-database"></i>`, 'selectDatabase', 'Database search' ],
- [ 'sleft', `<i class="fas fa-tag"></i>`, 'selectPlaylist', 'Playlist search' ],
- [ 'sleft', `<i class="fas fa-bookmark"></i>`, 'selectPool', 'Pool search' ],
-
- [ 'right', `<i class="fas fa-compass"></i>`, 'openKurisu', 'Kurisu in a new page' ],
- [ 'right', `<i class="fas fa-user-friends"></i>`, 'openUserView', 'Open client view' ],
- [ 'right', `<i class="fas fa-music"></i>`, 'openMdtView', 'Open metadata view' ],
- [ 'right', `<i class="fas fa-window-close"></i>`, 'closeButton', 'Quit Amadeus' ],
-];
-
/* Global variables */
var countKaraInQueue = 0;
var currentSong = 0;
@@ -68,8 +51,27 @@ function flushFillSettings() {
}
window.onload = () => {
- createButtonList(buttonList);
+ /* Set things up for the settings modal*/
+ var modal = document.getElementById('modal-settings');
+ var btn = document.getElementById('btn-settings');
+ var span = document.getElementsByClassName('modal-close')[0];
+
+ btn.onclick = function () {
+ modal.style.display = 'block';
+ };
+
+ span.onclick = function () {
+ modal.style.display = 'none';
+ flushFillSettings();
+ };
+
+ window.onclick = function (event) {
+ if (event.target == modal) {
+ modal.style.display = 'none';
+ }
+ };
+ /* Add IPC to button list */
addIpcToButton('closeButton', ['close-app']);
addIpcToButton('commandPlay', ['cmd-play']);
@@ -135,73 +137,6 @@ window.onload = () => {
autoFillSettings();
};
-/* Create the button list */
-function createButtonList(list) {
- function action(ipc, argument) {
- logger.error('instance', 'The action function builder for control buttons is not implemented');
- }
- var renderHtmlLeft = '';
- var renderHtmlRight = '';
- var renderHtmlSLeft = '';
- list.forEach(btn => {
- if (btn[0] == 'left') {
- renderHtmlLeft = `${renderHtmlLeft}
- <button id="${btn[2]}" type="button" class="btn btn-primary p-2 bd-highlight"
- data-toggle="tooltip" data-placement="bottom" title="${btn[3]}"
- style="-webkit-app-region: no-drag">${btn[1]}</button>`;
- logger.debug('instance', `Create button for "${btn[1]}" with id "${btn[2]} at the left"`);
- } else if (btn[0] == 'right') {
- renderHtmlRight = `${renderHtmlRight}
- <button id="${btn[2]}" type="button" class="btn btn-secondary p-2 bd-highlight"
- data-toggle="tooltip" data-placement="bottom" title="${btn[3]}"
- style="-webkit-app-region: no-drag">${btn[1]}</button>`;
- logger.debug('instance', `Create button for "${btn[1]}" with id "${btn[2]} at the right"`);
- } else if (btn[0] == 'sleft') {
- renderHtmlSLeft = `${renderHtmlSLeft}
- <button id="${btn[2]}" type="button" class="btn btn-secondary p-2 bd-highlight"
- data-toggle="tooltip" data-placement="bottom" title="${btn[3]}"
- style="-webkit-app-region: no-drag">${btn[1]}</button>`;
- logger.debug('instance', `Create button for "${btn[1]}" with id "${btn[2]} at the right"`);
- } else {
- logger.warn('instance', `Unknown button type ${btn[0]} in top bar builder`);
- }
- });
- document.getElementById('buttonPanelListLeft').innerHTML = `
- <div class="btn-group" role="group">${renderHtmlLeft}</div>
- <div class="btn-group" role="group">${renderHtmlSLeft}</div>
- <div class="p-1 bd-highlight mb-1 mr-auto ml-auto" style="width: 60%;-webkit-app-region: no-drag;">
- <input id="filterInput" type="text" class="form-control filterInput" placeholder="Filter...">
- </div>
- <div class="btn-group" role="group">
- <button id="btn-settings" type="button" class="btn btn-secondary p-2 bd-highlight"
- style="-webkit-app-region: no-drag" data-toggle="tooltip"
- data-placement="bottom" title="Open settings">
- <i class="fas fa-cogs"></i>
- </button>
- ${renderHtmlRight}
- </div>`;
-
- /* Set things up for the settings modal*/
- var modal = document.getElementById('modal-settings');
- var btn = document.getElementById('btn-settings');
- var span = document.getElementsByClassName('modal-close')[0];
-
- btn.onclick = function () {
- modal.style.display = 'block';
- };
-
- span.onclick = function () {
- modal.style.display = 'none';
- flushFillSettings();
- };
-
- window.onclick = function (event) {
- if (event.target == modal) {
- modal.style.display = 'none';
- }
- };
-}
-
/* Create the left panel */
ipcRenderer.on('reload-db-responce', (event, arg) => {
logger.debug('instance', `Web page got reload-db`);
diff --git a/instance/views/menubar.ejs b/instance/views/menubar.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..b62e64c7b7db74428129ca6fc600a205ced284b1
--- /dev/null
+++ b/instance/views/menubar.ejs
@@ -0,0 +1,25 @@
+<%# vim: ts=4 syntax=html
+ The button list at the top of the window %>
+<div id="buttonPanelListLeft" class="d-flex flex-row bd-highlight mb-3 row card" style="-webkit-app-region: drag">
+ <div class="btn-group" role="group"><%- include('menubar/buttons.ejs', {type: 'primary', buttons: [
+ {id: 'commandPlay', tooltip: 'Play or pause Lektor', name: 'play'},
+ {id: 'commandStop', tooltip: 'Stop Lektor', name: 'stop'},
+ {id: 'commandClear', tooltip: 'Clear the queue', name: 'eraser'},
+ ]}); %></div>
+ <div class="btn-group" role="group"><%- include('menubar/buttons.ejs', {type: 'secondary', buttons: [
+ {id: 'selectAdvence', tooltip: 'Advence search', name: 'search'},
+ {id: 'selectDatabase', tooltip: 'Database search', name: 'database'},
+ {id: 'selectPlaylist', tooltip: 'Playlist search', name: 'tag'},
+ {id: 'selectPool', tooltip: "Kurisu's pool search", name: 'bookmark'},
+ ]}); %></div>
+ <div class="p-1 bd-highlight mb-1 mr-auto ml-auto" style="width: 60%;-webkit-app-region: no-drag;">
+ <input id="filterInput" type="text" class="form-control filterInput" placeholder="Filter...">
+ </div>
+ <div class="btn-group" role="group"><%- include('menubar/buttons.ejs', {type: 'secondary', buttons: [
+ {id: 'btn-settings', tooltip: 'Open settings', name: 'cogs'},
+ {id: 'openKurisu', tooltip: 'Open Kurisu in a new page', name: 'compass'},
+ {id: 'openUserView', tooltip: 'Open client view in a new page', name: 'user-friends'},
+ {id: 'openMdtView', tooltip: 'Open metadata view', name: 'music'},
+ {id: 'closeButton', tooltip: 'Quit Amadeus', name: 'window-close'},
+ ]}); %></div>
+</div>
diff --git a/instance/views/menubar/buttons.ejs b/instance/views/menubar/buttons.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..4c6f60d891f093a944918c76fe6d67887dd1d364
--- /dev/null
+++ b/instance/views/menubar/buttons.ejs
@@ -0,0 +1,11 @@
+<%# vim: ts=4 syntax=html
+ The buttons for the menubar at the top of the window %>
+<% buttons.forEach(function(btn){ %>
+<button
+ id="<%= btn.id %>" type="button"
+ class="btn btn-<%= type %> p-2 bd-highlight"
+ data-toggle="tooltip" data-placement="bottom" title="<%= btn.tooltip %>"
+ style="-webkit-app-region: no-drag">
+ <i class="fas fa-<%= btn.name %>"></i>
+</button>
+<% })%>