Add row layout for wide screens

Author: joshuatowner

src/ts/index.ts

@@ -10,18 +10,20 @@ async function createWindow(): Promise<void> {
   const mainWindow = new BrowserWindow({
     height: 1000,
     width: 1800,
+    autoHideMenuBar: true,
     webPreferences: {
       nodeIntegrationInWorker: true,
       nodeIntegration: true,
-      contextIsolation: false
+      contextIsolation: false,
+      zoomFactor: 1.0,
     },
   });
 
   mainWindow.maximize();
 
   await mainWindow.loadFile(path.join(__dirname, index));
 
-  mainWindow.webContents.openDevTools();
+  // mainWindow.webContents.openDevTools();
 }
 
 if (process && process.type === 'renderer') {

src/ts/ui/layout/engine/default.tsx

@@ -6,6 +6,7 @@ import {ProcessesInfoWidget} from "../../process";
 import MemoryUsageWidget from "../../memory";
 import {NetworkStatusWidget, NetworkUsageWidget, PingWidget, WebRequestWidget} from "../../network";
 import PartitionWidget from "../../disk";
+import RowLayoutEngine from "./row";
 
 interface PropType {
   windowSize: Size;
@@ -16,6 +17,10 @@ export default class ResponsiveLayoutEngine extends React.Component<PropType, {}
   render() {
     const totalWidth = numPointsX(this.props.windowSize) - 1;
     const totalHeight = numPointsY(this.props.windowSize) - 1;
+
+    if (totalWidth > totalHeight * 3) {
+      return <RowLayoutEngine windowSize={this.props.windowSize} />
+    }
     const padding = 1;
     let cpuSize = Math.min(6, totalHeight, totalWidth);
     if (cpuSize / totalHeight < 0.3) {

src/ts/ui/layout/engine/row.tsx

@@ -0,0 +1,80 @@
+import {Size} from "../../../util/vec2";
+import * as React from "react";
+import {numPointsX, numPointsY} from "../points";
+import CpuUsageWidget from "../../cpu";
+import {ProcessesInfoWidget} from "../../process";
+import MemoryUsageWidget from "../../memory";
+import {NetworkStatusWidget, NetworkUsageWidget} from "../../network";
+
+interface PropType {
+  windowSize: Size;
+}
+
+export default class RowLayoutEngine extends React.Component<PropType, {}> {
+
+  render() {
+    const totalWidth = numPointsX(this.props.windowSize) - 1;
+    const totalHeight = numPointsY(this.props.windowSize) - 1;
+    const padding = 1;
+    let cpuSize = totalHeight;
+    const fullCpuSize = cpuSize + padding;
+
+    let networkFlowWidth = 10;
+    const networkFlowTotalWidth = networkFlowWidth + padding;
+
+    const pingWidth = 6;
+    const totalPingWidth = pingWidth + padding;
+
+    const memoryWidth = totalWidth - fullCpuSize - networkFlowTotalWidth - totalPingWidth;
+
+    return (
+      <>
+        <CpuUsageWidget
+          topLeft={{x: 0, y: 0}}
+          size={{width: cpuSize, height: cpuSize}}
+          windowSize={this.props.windowSize}
+        />
+        {memoryWidth > 0 && <MemoryUsageWidget
+            topLeft={{x: fullCpuSize, y: 0}}
+            size={{width: memoryWidth, height: cpuSize}}
+            windowSize={this.props.windowSize}
+        />}
+        <NetworkUsageWidget
+            topLeft={{x: fullCpuSize + memoryWidth + padding, y: 0}}
+            size={{width: networkFlowWidth, height: totalHeight - padding * 4}}
+            windowSize={this.props.windowSize}
+        />
+        <NetworkStatusWidget
+            topLeft={{x: fullCpuSize + memoryWidth + padding + networkFlowWidth + padding, y: 0}}
+            size={{width: pingWidth, height: totalHeight - padding * 4}}
+            windowSize={this.props.windowSize}
+        />
+        <ProcessesInfoWidget
+            topLeft={{x: fullCpuSize + memoryWidth + padding, y: totalHeight - padding * 3}}
+            size={{width: networkFlowWidth + pingWidth + padding, height: padding * 3}}
+            windowSize={this.props.windowSize}
+        />
+        {/*{diskHeight > 0 && <PartitionWidget*/}
+        {/*    topLeft={{x: 0, y: fullCpuSize + networkFlowHeight + padding}}*/}
+        {/*    size={{width: networkFlowWidth + padding + pingWebWidth, height: diskHeight}}*/}
+        {/*    windowSize={this.props.windowSize}*/}
+        {/*/>}*/}
+        {/*{swapHeight !== 0 && <SwapUsageWidget*/}
+        {/*    topLeft={{x: fullCpuWidth + fullProcessWidth, y: memoryHeight}}*/}
+        {/*    size={{width: memoryNetworkWidth, height: swapHeight}}*/}
+        {/*    windowSize={this.props.windowSize}*/}
+        {/*/>}*/}
+        {/*{networkHeight !== 0 && <NetworkUsageWidget*/}
+        {/*    topLeft={{x: fullCpuWidth + fullProcessWidth, y: memoryHeight + swapHeight}}*/}
+        {/*    size={{width: memoryNetworkWidth, height: networkHeight}}*/}
+        {/*    windowSize={this.props.windowSize}*/}
+        {/*/>}*/}
+        {/*{detailsWidth !== 0 && <DetailsWidget*/}
+        {/*  topLeft={{x: fullCpuWidth + fullProcessWidth + fullMemoryNetworkWidth, y: 0}}*/}
+        {/*  size={{width: detailsWidth, height: totalHeight}}*/}
+        {/*  windowSize={this.props.windowSize}*/}
+        {/*/>}*/}
+      </>
+    );
+  }
+}