INSTANCE: Continue the admin interface

instance/index.html

@@ -29,7 +29,8 @@
                 <!-- Will be generated on loading page --!>
                 </div>
             </div>
-            <div class="progress">
+            <div id="progressBar" class="progress"
+                 style="z-index: 666; position: fixed !important; right: 0; left: 0; bottom: 0;">
                 <div class="progress-bar" role="progressbar" style="width: 75%"></div>
                 <!-- Change the style 'width' to set the progress statue --!>
             </div>

instance/main.js

@@ -2,10 +2,14 @@ const { ipcRenderer } = require('electron');
 const logger          = require('../common/logger.js');
 
 const buttonList = [
-    [ "left",   "Reload",           "reloadDb"    ],
-    [ "left",   "Play",             "commandPlay" ],
-    [ "left",   "Stop",             "commandStop" ],
-    [ "right",  "Quit LektorApp",   "closeButton" ],
+    [ "left",   `<i class="fas fa-sync-alt"></i>`,      "reloadDb",         "Reload database"       ],
+    [ "left",   `<i class="fas fa-play"></i>`,          "commandPlay",      "Play or pause Lektor"  ],
+    [ "left",   `<i class="fas fa-stop"></i>`,          "commandStop",      "Stop lektor"           ],
+    [ "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-list"></i>`,          "selectPlaylist",   "Playlist search"       ],
+    [ "sleft",  `<i class="fas fa-bookmark"></i>`,      "selectPool",       "Pool search"           ],
+    [ "right",  `<i class="fas fa-window-close"></i>`,  "closeButton",      "Quit Lektor-App"       ],
 ];
 
 window.onload = () => {
@@ -33,20 +37,31 @@ window.onload = () => {
 function createButtonList(list) {
     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">${btn[1]}</button>`;
+                              <button id="${btn[2]}" type="button" class="btn btn-primary p-2 bd-highlight"
+                                      data-toggle="tooltip" data-placement="bottom" title="${btn[3]}">${btn[1]}</button>`;
             logger.debug(`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-primary p-2 bd-highlight">${btn[1]}</button>`;
+                               <button id="${btn[2]}" type="button" class="btn btn-secondary p-2 bd-highlight"
+                                       data-toggle="tooltip" data-placement="bottom" title="${btn[3]}">${btn[1]}</button>`;
             logger.debug(`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]}">${btn[1]}</button>`;
+            logger.debug(`Create button for "${btn[1]}" with id "${btn[2]} at the right"`);
+        } else {
+            logger.warn(`Unknown button type ${btn[0]} in top bar builder`);
         }
     });
     document.getElementById("buttonPanelListLeft").innerHTML =
-        `${renderHtmlLeft}
-         <h5 class="text-capitalize font-weight-bold text-center p-2 mr-auto ml-auto bd-highlight align-middle">
+        `${renderHtmlLeft}${renderHtmlSLeft}
+         <h5 class="text-capitalize font-weight-bold text-center p-2 mr-auto ml-auto bd-highlight align-middle"
+             style="-webkit-user-select: none; -webkit-app-region: drag;">
          lektor-app admin iterface</h5>
          ${renderHtmlRight}`;
 }
@@ -62,8 +77,10 @@ ipcRenderer.on("reload-db-responce", (event, arg) => {
             <span class="karaElement text-uppercase p-2 bd-highlight badge badge-info"><b>${kara.type}</b></span>
             <div class="p-2 bd-highlight mr-auto">${kara.source}<br> ${kara.title} <i>[${kara.author}]</i></div>
             <div class="p-2 bd-highlight">
-                <button class="btn btn-outline-light"><i class="fas fa-plus"></i></button>
-                <button class="btn btn-outline-light"><i class="fas fa-angle-double-up"></i></button>
+                <div class="d-flex flex-row bd-highlight mb-3 btn-group" role="group" style="vertical-align: middle;">
+                    <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-plus"></i></button>
+                    <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-level-up-alt"></i></button>
+                </div>
             </div>
             </div>`;
     });

style/css/instance.css

@@ -9,10 +9,27 @@ body {
     overflow: hidden;
     height: 100vh;
     font-family: "LTFinneganCustom";
+/*
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+    -webkit-tap-highlight-color: transparent !important;
+    -webkip-transition: none !important;
+    -webkit-touch-callout: none !important;
+    -webkit-user-select: none !important;
+    -khtml-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+*/
 }
 
 a {
-    text-decoration: no
+    text-decoration: no;
+    -webkit-transition: none;
+}
+
+button {
+    text-decoration: no;
+    -webkit-transition: none;
 }
 
 #mainFrame {
@@ -34,11 +51,6 @@ a {
     width: 100%;
 }
 
-#headerTitle{
-    -webkit-user-select: none;
-    -webkit-app-region: drag;
-}
-
 #panelWrapper {
     width: 100%;
     margin-left: 0px;
@@ -48,6 +60,11 @@ a {
     padding: 0px !important;
 }
 
+#progressBar {
+    clear: both;
+    order: 99;
+}
+
 #panelLeft {
     padding-left: 0px;
 }
@@ -62,15 +79,35 @@ a {
 }
 
 .karaElement {
-    .text-uppercase;
     height: fit-content;
     margin: auto;
     margin-left: 2px;
     margin-right: 2px;
 }
 
+.karaActionBtn {
+    margin: auto;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
 .panel {
     height: 100%;
     overflow-y: scroll;
 }
 
+/* Some overrides for buttons */
+
+.btn-secondary:hover {
+	background-color: inherit !important;
+	border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+	color: #df691a;
+}
+
+.btn:focus,
+.btn:active {
+    outline: none !important;
+    box-shadow: none !important;
+}