diff --git a/instance/index.html b/instance/index.html index 43230f5344044fb479c2747ce0b367a482cbbdb1..fad0b790ebc89589673f57d9c6b333b4ba7b16c0 100644 --- a/instance/index.html +++ b/instance/index.html @@ -17,24 +17,16 @@ </head> <body> <div id="mainFrame" class="container-fluid"> - <div id="headerBar" class="row"> - <div id="headerCard" class="card"> - <div id="headerTitle" class="card-header text-center"> - <h2 class="text-center"> - LektorApp Admin Interface - </h2> - </div> - <div id="buttonPanelListLeft" class="card-body text-left" - style="padding-top: 0px;padding-bottom: 0px;padding-right: 0px;padding-left: 0px;"> - <!-- Will be generated on loading page --!> - </div> - </div> + <div id="buttonPanelListLeft" class="d-flex flex-row bd-highlight mb-3 row card" + style="padding:0px!important;margin-bottom:0px!important;margin-top:0px"> + <!-- Will be generated on loading page --!> </div> - <div id="panelWrapper" class="row"> - <div id="panelLeft" class="col panel"> + <div id="panelWrapper" class="row" + style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;"> + <div id="panelLeft" class="col panel d-flex flex-column bd-highlight mb-3"> <!-- Will be generated on loading page --!> </div> - <div id="panelRight" class="col panel"> + <div id="panelRight" class="col panel d-flex flex-column bd-highlight mb-3"> <!-- Will be generated on loading page --!> </div> </div> diff --git a/instance/main.js b/instance/main.js index a56640e3aad77fa44e87aa87e4602919e5316b60..a89e72421662a941ca5b393f7959e88dad074a19 100644 --- a/instance/main.js +++ b/instance/main.js @@ -36,27 +36,33 @@ function createButtonList(list) { list.forEach( (btn) => { if (btn[0] == "left") { renderHtmlLeft = `${renderHtmlLeft} - <button id="${btn[2]}" type="button" class="btn btn-outline-primary"> - ${btn[1]} - </button>`; + <button id="${btn[2]}" type="button" class="btn btn-outline-primary p-2 bd-highlight">${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-outline-primary"> - ${btn[1]} - </button>`; + <button id="${btn[2]}" type="button" class="btn btn-outline-primary p-2 bd-highlight">${btn[1]}</button>`; logger.debug(`Create button for "${btn[1]}" with id "${btn[2]} at the right"`); } }); - document.getElementById("buttonPanelListLeft").innerHTML = renderHtmlLeft + renderHtmlRight; + document.getElementById("buttonPanelListLeft").innerHTML = + `${renderHtmlLeft} + <h5 class="text-capitalize font-weight-bold text-center p-2 mr-auto ml-auto bd-highlight align-middle"> + lektor-app admin iterface</h5> + ${renderHtmlRight}`; } ipcRenderer.on("reload-db-responce", (event, arg) => { var karaList = ""; logger.debug(`Web page got reload-db`); arg.forEach( kara => { - karaList += `<div class="card shadow" style="margin: 5px; border-radius: 10px; margin: 20px 0px 20px 0px;"> - <div class="card-body">${kara.string} </div></div>`; + karaList += + `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-secondary" + style="border:0px;margin:0px!important;"> + <div class="p-2 bd-highlight">${kara.id}</div> + <div class="p-2 bd-highlight">${kara.cat}</div> + <div class="p-2 bd-highlight">${kara.type}</div> + <div class="p-2 bd-highlight ml-auto">${kara.string}</div> + </div>`; }); document.getElementById("panelLeft").innerHTML = karaList; }); diff --git a/main.js b/main.js index 6f0a79d41f18aa73ae6f160a9d7f2bda5e68887d..d6fee932e0988d2516276451324cf76723fadb80 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,7 @@ const logger = require.main.require('./common/logger.js'); const electron = require('electron'); const { app, BrowserWindow } = require('electron'); -const { globalShortcut } = require('electron'); +const { globalShortcut } = require('electron'); const { ipcMain } = require('electron'); const { fork, spawn } = require('child_process'); const fs = require("fs"); @@ -25,16 +25,16 @@ tail.on("line", function(data) { console.log(data); }); ***************************************************************/ function createInstanceWindow () { + /* Main window */ const win = new BrowserWindow({ width: 1280, height: 720, frame: false, - menuBarVisible: true, + menuBarVisible: true, webPreferences: { nodeIntegration: true } - }); - + }); win.loadFile('instance/index.html'); } @@ -60,23 +60,25 @@ app.on('ready', () => { createInstanceWindow(); client = fork('client/main.js'); - globalShortcut.register('CommandOrControl+D', () => { - var win = BrowserWindow.getFocusedWindow(); - if (win === null) { - return; - } - logger.info("Reloading DB"); - let contents = win.webContents; - myDb.all().then( karas => { - contents.send("reload-db-responce", karas); - }); - }); - globalShortcut.register('F12', () => { - var focused = BrowserWindow.getFocusedWindow(); - if (focused) { - focused.webContents.openDevTools(); - } - }); + globalShortcut.register('CommandOrControl+D', () => { + var win = BrowserWindow.getFocusedWindow(); + if (win === null) { + return; + } + logger.info("Reloading DB"); + let contents = win.webContents; + myDb.all().then( karas => { + contents.send("reload-db-responce", karas); + }); + }); + globalShortcut.register('CommandOrControl+C', () => { + }); + globalShortcut.register('F12', () => { + var focused = BrowserWindow.getFocusedWindow(); + if (focused) { + focused.webContents.openDevTools(); + } + }); }); /*********************************