title bar lights up on push to talk
This commit is contained in:
parent
a65561630d
commit
02c8f7b038
@ -4,18 +4,82 @@ html, body{
|
|||||||
margin:0px;
|
margin:0px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:97%;
|
||||||
}
|
}
|
||||||
|
|
||||||
webview {
|
webview {
|
||||||
height:100%;
|
height:100%;
|
||||||
width:100%;
|
height:97%;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.title-bar {
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
background-color: #23272A;
|
||||||
|
width: 100%;
|
||||||
|
height: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button-container {
|
||||||
|
background-color: #23272A;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background-color: #23272A;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-controls-container {
|
||||||
|
background-color: #23272A;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimize-button {
|
||||||
|
border:none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 1px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimize-button:hover {
|
||||||
|
background-color: #99AAB5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
border:none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 1px;
|
||||||
|
margin-right: 3px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:hover {
|
||||||
|
background-color: #B22222;
|
||||||
|
}
|
10
index.html
10
index.html
@ -6,6 +6,16 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="title-bar" class="title-bar">
|
||||||
|
<div id='title-bar-status' class="status">
|
||||||
|
</div>
|
||||||
|
<div id='title-bar-controls' class="window-controls-container">
|
||||||
|
<button id="minimize-button" class="minimize-button"> - </button>
|
||||||
|
<button id="close-button" class="close-button"> x </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<webview id="discord" src="https://discordapp.com/login"></webview>
|
<webview id="discord" src="https://discordapp.com/login"></webview>
|
||||||
|
|
||||||
<script src="./renderer.js"></script>
|
<script src="./renderer.js"></script>
|
||||||
|
5
main.js
5
main.js
@ -12,9 +12,10 @@ let devMode = false
|
|||||||
function createWindow () {
|
function createWindow () {
|
||||||
// Create the browser window.
|
// Create the browser window.
|
||||||
mainWindow = new BrowserWindow({
|
mainWindow = new BrowserWindow({
|
||||||
width: 1200,
|
width: 1000,
|
||||||
height: 840,
|
height: 750,
|
||||||
icon: './assets/icon.ico',
|
icon: './assets/icon.ico',
|
||||||
|
frame: false,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
preload: path.join(__dirname, 'preload.js'),
|
preload: path.join(__dirname, 'preload.js'),
|
||||||
nodeIntegration: true,
|
nodeIntegration: true,
|
||||||
|
18
renderer.js
18
renderer.js
@ -1,4 +1,4 @@
|
|||||||
const { ipcRenderer } = require('electron')
|
const { remote, ipcRenderer } = require('electron')
|
||||||
|
|
||||||
onload = () => {
|
onload = () => {
|
||||||
const webview = document.querySelector('webview')
|
const webview = document.querySelector('webview')
|
||||||
@ -22,11 +22,19 @@ onload = () => {
|
|||||||
console.log("talking")
|
console.log("talking")
|
||||||
webview.sendInputEvent({keyCode: 'Backspace', type: 'keyDown'});
|
webview.sendInputEvent({keyCode: 'Backspace', type: 'keyDown'});
|
||||||
webview.sendInputEvent({keyCode: 'Backspace', type: 'char'});
|
webview.sendInputEvent({keyCode: 'Backspace', type: 'char'});
|
||||||
|
document.getElementById("title-bar-status").style.backgroundColor = "green"
|
||||||
|
document.getElementById("title-bar-controls").style.backgroundColor = "green"
|
||||||
|
document.getElementById("title-bar").style.backgroundColor = "green"
|
||||||
|
|
||||||
}
|
}
|
||||||
if (msg === 'mic-closed'){
|
if (msg === 'mic-closed'){
|
||||||
console.log("not talking")
|
console.log("not talking")
|
||||||
webview.sendInputEvent({keyCode: 'Backspace', type: 'keyUp'});
|
webview.sendInputEvent({keyCode: 'Backspace', type: 'keyUp'});
|
||||||
webview.sendInputEvent({keyCode: 'Backspace', type: 'char'});
|
webview.sendInputEvent({keyCode: 'Backspace', type: 'char'});
|
||||||
|
document.getElementById("title-bar-status").style.backgroundColor = "#23272A"
|
||||||
|
document.getElementById("title-bar-controls").style.backgroundColor = "#23272A"
|
||||||
|
document.getElementById("title-bar").style.backgroundColor = "#23272A"
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -37,3 +45,11 @@ onload = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.getElementById('minimize-button').addEventListener('click', () => {
|
||||||
|
remote.getCurrentWindow().minimize()
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById('close-button').addEventListener('click', () => {
|
||||||
|
remote.app.quit()
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user