Use styled-components for window border

This commit is contained in:
GHOSCHT 2021-07-10 16:19:37 +02:00
parent ac05fbcb91
commit e89d12f13b
2 changed files with 31 additions and 35 deletions

View file

@ -1,32 +1,40 @@
import React from "react";
// import SerialPort from "serialport";
import { remote } from "electron";
import SerialPort from "serialport";
import { createGlobalStyle } from "styled-components";
import Knob from "./Components/Knob";
const App = () => {
// https://www.electronjs.org/docs/api/system-preferences#systempreferencesgetcolorcolor-windows-macos
console.log(remote.systemPreferences.getColor("active-border")); // border
// https://www.electronjs.org/docs/api/system-preferences#systempreferencesgetaccentcolor-windows-macos
console.log(remote.systemPreferences.getAccentColor()); // accent color
const GlobalStyle = createGlobalStyle`
html {
border-style: solid;
border-color: #363636;
border-width: 1px;
box-sizing: border-box;
height: 100%;
border-bottom-style: hidden;
border-right-style: hidden;
}
`;
// const port = new SerialPort("COM5", {
// baudRate: 9600,
// autoOpen: false,
// });
// const handler = () => {
// // eslint-disable-next-line
// port.write("off", (err) => {
// if (err) {
// return console.log("Error on write: ", err.message);
// }
// console.log("message written");
// });
// };
const App = () => {
const port = new SerialPort("COM5", {
baudRate: 9600,
autoOpen: false,
});
const handler = () => {
// eslint-disable-next-line
port.write("off", (err) => {
if (err) {
return console.log("Error on write: ", err.message);
}
console.log("message written");
});
};
return (
<div>
<GlobalStyle />
<Knob increase={() => { console.log("inc"); }} decrease={() => { console.log("dec"); }} toggle={() => { console.log("togg"); }} />
{/* <button
<button
type="button"
onClick={() => {
port.open();
@ -55,9 +63,8 @@ const App = () => {
}}
>
list
</button> */}
</button>
</div>
);
};
export default App;

View file

@ -1,16 +1,5 @@
<!DOCTYPE html>
<html
lang="en"
style="
border-style: solid;
border-color: #363636;
border-width: 1px;
box-sizing: border-box;
height: 100%;
border-bottom-style: hidden;
border-right-style: hidden;
"
>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Light Control</title>