heliox/old-monorepo
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First rough modal implementation

Browse source
This commit is contained in:
GHOSCHT 2022-03-14 21:10:32 +01:00
parent fa25c53b43
commit 65c08d8d6a
No known key found for this signature in database
GPG key ID: A35BD466B8871994
4 changed files with 55 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Dashboard/src/App.tsx
View file

@ -1,12 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { createGlobalStyle } from "styled-components"; import { createGlobalStyle } from "styled-components";
// import { useDispatch } from "react-redux";
import Select from "react-select"; import Select from "react-select";
import SerialPort from "serialport"; import SerialPort from "serialport";
import electron from "electron"; import electron from "electron";
import KnobSection from "./Components/KnobSection"; import KnobSection from "./Components/KnobSection";
import { useAppDispatch } from "./redux/hooks"; import { useAppDispatch } from "./redux/hooks";
import { connect, disconnect, setSerialPort } from "./redux/slices/serialConnectionSlice"; import { connect, disconnect, setSerialPort } from "./redux/slices/serialConnectionSlice";
import Settings from "./Components/Settings";
const GlobalStyle = createGlobalStyle` const GlobalStyle = createGlobalStyle`
html { html {
@ -41,6 +41,7 @@ const App = () => {
return ( return (
<div> <div>
<Settings />
<GlobalStyle /> <GlobalStyle />
<KnobSection /> <KnobSection />
<button <button

51
Dashboard/src/Components/Settings.tsx Normal file
View file

@ -0,0 +1,51 @@
import electron from "electron";
import React, { useState } from "react";
import styled from "styled-components";
import ReactDom from "react-dom";
type Proptypes = {
}
const Content = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
padding: 50px;
z-index: 1000;
`;
const Overlay = styled.div`
position: fixed;
top:0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
z-index: 999;
`;
const Settings: React.FC<Proptypes> = () => {
const [open, setOpen] = useState(false);
const ipcHandler = () => {
setOpen(true);
};
electron.ipcRenderer.on("show-settings", ipcHandler);
if (!open) {
return null;
}
return ReactDom.createPortal(
<>
<Overlay />
<Content>
<button type="button" onClick={() => { setOpen(false); }}>close</button>
</Content>
</>,
document.getElementById("portal")!,
);
};
export default Settings;

2
Dashboard/src/electron.js
View file

@ -118,7 +118,7 @@ function createTray() {
{ {
label: "Settings", label: "Settings",
click: () => { click: () => {
ipcMain.emit("show-settings"); mainWindow.webContents.send("show-settings", true);
}, },
}, },
{ {

1
Dashboard/src/index.html
View file

@ -6,5 +6,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="portal"></div>
</body> </body>
</html> </html>