diff --git a/package-lock.json b/package-lock.json index 1d3d8a92..a33fa05b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ninjaterm", - "version": "4.6.0", + "version": "4.6.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ninjaterm", - "version": "4.6.0", + "version": "4.6.6", "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", @@ -59,6 +59,8 @@ "@playwright/test": "^1.39.0", "@types/react-window": "^1.8.5", "jest-canvas-mock": "^2.5.2", + "postcss": "^8.4.31", + "postcss-nesting": "^12.0.1", "vite-plugin-pwa": "^0.16.5" } }, @@ -1758,6 +1760,28 @@ "node": ">=6.9.0" } }, + "node_modules/@csstools/selector-specificity": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", + "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, "node_modules/@emotion/babel-plugin": { "version": "11.11.0", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", @@ -3943,6 +3967,18 @@ "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==" }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/cssfontparser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", @@ -6002,9 +6038,9 @@ } }, "node_modules/postcss": { - "version": "8.4.30", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", - "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -6028,6 +6064,45 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-nesting": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz", + "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/selector-specificity": "^3.0.0", + "postcss-selector-parser": "^6.0.13" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.13", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", + "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/pretty-bytes": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", @@ -7240,6 +7315,12 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true + }, "node_modules/validatorjs": { "version": "3.22.1", "resolved": "https://registry.npmjs.org/validatorjs/-/validatorjs-3.22.1.tgz", diff --git a/package.json b/package.json index da42683a..50d2e8d2 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,8 @@ "@playwright/test": "^1.39.0", "@types/react-window": "^1.8.5", "jest-canvas-mock": "^2.5.2", + "postcss": "^8.4.31", + "postcss-nesting": "^12.0.1", "vite-plugin-pwa": "^0.16.5" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..892c58fa --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + 'postcss-nesting': { /* plugin options */ }, + }, +} diff --git a/src/Components/BorderedSection.tsx b/src/Components/BorderedSection.tsx new file mode 100644 index 00000000..5bf2f5a9 --- /dev/null +++ b/src/Components/BorderedSection.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import SvgIcon from "@mui/material/SvgIcon"; +import styles from "./BorederedSection.module.css"; + +import { ReactElement } from "react"; +import { SvgIconTypeMap } from "@mui/material/SvgIcon"; +import { OverridableComponent } from "@mui/material/OverridableComponent"; + +type BorderedSectionProps = { + icon?: OverridableComponent> & { props: { className?: string } }; + title?: string; + children: React.ReactNode; +}; + +function BorderedSection({ icon, title, children }: BorderedSectionProps): JSX.Element { + return ( +
+
+
+ {(icon || title) && ( +
+ {icon && } + {title && {title}} +
+ )} +
+
+
{children}
+
+ ); +} + +export default BorderedSection; diff --git a/src/Components/BorederedSection.module.css b/src/Components/BorederedSection.module.css new file mode 100644 index 00000000..586c3d10 --- /dev/null +++ b/src/Components/BorederedSection.module.css @@ -0,0 +1,53 @@ +:root { + --border-color: #b2b2b2; +} + +.mainContainer { + display: flex; + flex-direction: column; + max-width: 100%; + + border-left: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + border-right: 1px solid var(--border-color); + border-radius: 5px; + margin: 1em; + + .childrenContainer { + padding: 1em; + } + + .header { + display: flex; + flex-direction: row; + width: 100% !important; + + .headerBorderBefore { + border-top: 1px solid var(--border-color); + width: 1em; + border-top-left-radius: 5px; + } + + .headerTitle { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + gap: 0.25em; + width: fit-content; + height: 2em; + margin: -1em 0.5em 0em 0.5em; + overflow: hidden; + text-overflow: ellipsis; + font-size: 1em; + font-weight: 600; + } + + .headerBorderAfter { + border-top: 1px solid var(--border-color); + width: 1em; + flex-grow: 2; + border-top-right-radius: 5px; + } + } +} diff --git a/src/FakePorts/FakePortsController.tsx b/src/FakePorts/FakePortsController.tsx index 7d3292f3..347c6dbd 100644 --- a/src/FakePorts/FakePortsController.tsx +++ b/src/FakePorts/FakePortsController.tsx @@ -332,7 +332,7 @@ export default class FakePortsController { this.fakePorts.push( new FakePort( 'bytes 0x00-0xFF, 5chars/s', - 'Sends all bytes from 0x00 to 0xFF, one by one, at a rate of 5 characters per second. Good for testing unprintable characters.', + 'Sends all bytes from 0x00 to 0xFF, one by one, at a rate of 5 characters per second. Good for testing unprintable characters. Sets the char size to 30px.', () => { app.settings.dataProcessing.visibleData.fields.ansiEscapeCodeParsingEnabled.value = false; @@ -341,8 +341,7 @@ export default class FakePortsController { app.settings.dataProcessing.applyChanges(); let testCharIdx = 0; const intervalId = setInterval(() => { - // this.parseRxData(Uint8Array.from([ testCharIdx ])); - app.parseRxData(Uint8Array.from([0x08])); + app.parseRxData(Uint8Array.from([ testCharIdx ])); testCharIdx += 1; if (testCharIdx === 256) { testCharIdx = 0; diff --git a/src/Homepage/HomepageView.tsx b/src/Homepage/HomepageView.tsx index ba7442c1..36fa55af 100644 --- a/src/Homepage/HomepageView.tsx +++ b/src/Homepage/HomepageView.tsx @@ -1,16 +1,17 @@ import { observer } from "mobx-react-lite"; -import { ThemeProvider, createTheme } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; import { Box, Button, IconButton, Typography, + // Grid, } from "@mui/material"; -import Grid from "@mui/material/Unstable_Grid2"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; import TerminalIcon from "@mui/icons-material/Terminal"; import GitHubIcon from "@mui/icons-material/GitHub"; import TwitterIcon from '@mui/icons-material/Twitter'; +import Grid from "@mui/material/Unstable_Grid2"; import GitHubReadmeLogo from "./github-readme-logo.png"; import AnsiEscapeCodeColours from "./ansi-escape-code-colours.gif"; diff --git a/src/Settings/DataProcessingSettingsView.tsx b/src/Settings/DataProcessingSettingsView.tsx index 0e85bfa7..78ef1df4 100644 --- a/src/Settings/DataProcessingSettingsView.tsx +++ b/src/Settings/DataProcessingSettingsView.tsx @@ -18,6 +18,7 @@ import { DataViewConfiguration, dataViewConfigEnumToDisplayName, } from 'src/Settings/DataProcessingSettings'; +import BorderedSection from 'src/Components/BorderedSection'; interface Props { app: App; @@ -294,6 +295,9 @@ function DataProcessingView(props: Props) { > Apply + +
test
 + ); } diff --git a/src/Terminal/SingleTerminal/SingleTerminalView.module.css b/src/Terminal/SingleTerminal/SingleTerminalView.module.css index 0d412b05..8af23cde 100644 --- a/src/Terminal/SingleTerminal/SingleTerminalView.module.css +++ b/src/Terminal/SingleTerminal/SingleTerminalView.module.css @@ -69,7 +69,7 @@ it */ } @font-face { - font-family: testFont; + font-family: ConsolasControlChars; src: url(../../fonts/ConsolasControlChars-Regular.woff2); } @@ -82,8 +82,8 @@ it */ "white-space: nowrap" worked, but made spaces collapse when flex was applied, as flex turns all children into block elements. "whitespace: pre" prevents that. */ white-space: pre; - /* font-family: testFont, Consolas, monospace; */ - font-family: Consolas, monospace; + font-family: ConsolasControlChars, Consolas, monospace; + /* font-family: Consolas, monospace; */ /* This is to center the chars in the middle of their row, prevents clipping of the cursor when on the first row */ display: flex; diff --git a/src/fonts/ConsolasControlChars.fcp b/src/fonts/ConsolasControlChars.fcp index fbb59b70..dfb09415 100644 Binary files a/src/fonts/ConsolasControlChars.fcp and b/src/fonts/ConsolasControlChars.fcp differ