Use styled-components for window border
This commit is contained in:
parent
ac05fbcb91
commit
e89d12f13b
2 changed files with 31 additions and 35 deletions
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue