mirror of
https://github.com/cupcakearmy/volta.git
synced 2024-12-22 07:56:27 +00:00
Panel
This commit is contained in:
parent
01db723768
commit
068f0a15a6
139
src/index.css
Executable file
139
src/index.css
Executable file
@ -0,0 +1,139 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('./vendor/Source\ Sans\ Pro.woff2') format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('./vendor/Source\ Sans\ Pro\ Bold.woff2') format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
color: #3B252C;
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: #F7FFF7;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 1px solid #E9F1F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app .title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app .link {
|
||||||
|
color: #3F8EFC;
|
||||||
|
/* color: inherit; */
|
||||||
|
font-size: 1em;
|
||||||
|
/* font-weight: normal; */
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app .link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#currentBattery {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings #values {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings #slider {
|
||||||
|
padding: 1em .6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings #slider-cont {
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-target {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-horizontal {
|
||||||
|
height: .3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-connect {
|
||||||
|
background: #3F8EFC;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-connects {
|
||||||
|
background: #E9F1F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-horizontal .noUi-handle {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 1.25em;
|
||||||
|
border-radius: 2em;
|
||||||
|
height: 1.25em;
|
||||||
|
background: #3F8EFC;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
top: -.5em;
|
||||||
|
right: -.6em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-horizontal .noUi-handle:focus {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-origin .noUi-handle::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings .noUi-origin .noUi-handle::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid #3F8EFC;
|
||||||
|
padding: .75em;
|
||||||
|
border-radius: 2em;
|
||||||
|
height: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: .5em;
|
||||||
|
transition: all ease .25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked {
|
||||||
|
background-color: #3F8EFC;
|
||||||
|
border-color: #3473CC;
|
||||||
|
}
|
59
src/index.html
Executable file
59
src/index.html
Executable file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Weather</title>
|
||||||
|
<link rel="stylesheet" href="./index.css" charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="./vendor/nouislider.min.css" charset="utf-8">
|
||||||
|
<script charset="utf-8" src="./vendor/nouislider.min.js">
|
||||||
|
</script>
|
||||||
|
<script charset="utf-8">
|
||||||
|
require('./index')
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
|
||||||
|
<div class="title">Current:
|
||||||
|
<span id="currentBattery"></span>
|
||||||
|
</div>
|
||||||
|
<small>Note: Due to limits in the implementation the actual battery value may differ from the one given by the OS</small>
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<div id="settings">
|
||||||
|
<div class="title">Limits</div>
|
||||||
|
<div id="slider">
|
||||||
|
<div id="slider-range"></div>
|
||||||
|
</div>
|
||||||
|
<div id="values">
|
||||||
|
<div id="min">
|
||||||
|
<strong>Min:</strong>
|
||||||
|
<span id="min-value"></span>
|
||||||
|
</div>
|
||||||
|
<div id="max">
|
||||||
|
<strong>Max:</strong>
|
||||||
|
<span id="max-value"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<small>Set at which battery level Volta should notify you</small>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<div class="title">Start on boot
|
||||||
|
<input type="checkbox" id="launch">
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div class="title link" id="close">Close Window</div>
|
||||||
|
<div class="title link" id="quit">Quit App</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
61
src/index.js
Executable file
61
src/index.js
Executable file
@ -0,0 +1,61 @@
|
|||||||
|
const {
|
||||||
|
ipcRenderer,
|
||||||
|
shell,
|
||||||
|
remote
|
||||||
|
} = require('electron')
|
||||||
|
|
||||||
|
let rangeSlider
|
||||||
|
let autoLaunch
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.getElementById('quit').addEventListener('click', () => {
|
||||||
|
ipcRenderer.send('quit')
|
||||||
|
})
|
||||||
|
document.getElementById('close').addEventListener('click', () => {
|
||||||
|
remote.getCurrentWindow().hide()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function iniSlider() {
|
||||||
|
rangeSlider = document.getElementById('slider-range')
|
||||||
|
|
||||||
|
noUiSlider.create(rangeSlider, {
|
||||||
|
start: [0, 100],
|
||||||
|
step: 0.01,
|
||||||
|
range: {
|
||||||
|
min: [0],
|
||||||
|
max: [100]
|
||||||
|
},
|
||||||
|
connect: true
|
||||||
|
})
|
||||||
|
|
||||||
|
rangeSlider.noUiSlider.on('update', function (values, handle) {
|
||||||
|
const min = parseInt(values[0])
|
||||||
|
const max = parseInt(values[1])
|
||||||
|
document.getElementById('min-value').innerHTML = min
|
||||||
|
document.getElementById('max-value').innerHTML = max
|
||||||
|
ipcRenderer.send('values', {
|
||||||
|
max,
|
||||||
|
min
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function iniLaunch() {
|
||||||
|
autoLaunch = document.getElementById('launch')
|
||||||
|
autoLaunch.addEventListener('change', () => ipcRenderer.send('launch', autoLaunch.checked))
|
||||||
|
}
|
||||||
|
|
||||||
|
ipcRenderer.on('values', (event, values) => {
|
||||||
|
if (rangeSlider === undefined) iniSlider()
|
||||||
|
rangeSlider.noUiSlider.set([values.min, values.max]);
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('launch', (event, checked) => {
|
||||||
|
if (autoLaunch === undefined) iniLaunch()
|
||||||
|
autoLaunch.checked = checked
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('battery', (event, value) => {
|
||||||
|
document.getElementById('currentBattery').innerText = `${value}%`
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user