From 4529a7d07f5d260180b0900921b8a4f473a8d144 Mon Sep 17 00:00:00 2001 From: sawka Date: Mon, 13 May 2024 15:10:31 -0700 Subject: [PATCH] more tab/block structure --- frontend/app.tsx | 15 ++++----------- frontend/block.less | 3 +++ frontend/block.tsx | 6 +++--- frontend/package.json | 3 ++- frontend/public/style.less | 24 ++++++++++++------------ frontend/tab.less | 31 +++++++++++++++++++++++++++++++ frontend/tab.tsx | 27 +++++++++++++++++++++++++++ frontend/yarn.lock | 5 +++++ 8 files changed, 87 insertions(+), 27 deletions(-) create mode 100644 frontend/tab.less create mode 100644 frontend/tab.tsx diff --git a/frontend/app.tsx b/frontend/app.tsx index f62819ae8..ca103e998 100644 --- a/frontend/app.tsx +++ b/frontend/app.tsx @@ -10,6 +10,7 @@ import { Events } from "@wailsio/runtime"; import * as rx from "rxjs"; import { clsx } from "clsx"; import { Block } from "./block.tsx"; +import { TabContent } from "./tab.tsx"; import "/public/style.less"; @@ -35,9 +36,9 @@ const App = () => { ); }; -const Tabs = () => { +const TabBar = () => { return ( -
+
Tab 1
Tab 2
Tab 3
@@ -45,18 +46,10 @@ const Tabs = () => { ); }; -const TabContent = () => { - return ( -
- -
- ); -}; - const Workspace = () => { return (
- +
); diff --git a/frontend/block.less b/frontend/block.less index de8207db1..a77bf775e 100644 --- a/frontend/block.less +++ b/frontend/block.less @@ -9,6 +9,7 @@ width: 100%; height: 100%; overflow: hidden; + min-height: 0; } .block .block-header { @@ -26,4 +27,6 @@ flex-grow: 1; width: 100%; background-color: green; + overflow: hidden; + min-height: 0; } diff --git a/frontend/block.tsx b/frontend/block.tsx index 32e11d2e5..c2747f557 100644 --- a/frontend/block.tsx +++ b/frontend/block.tsx @@ -38,7 +38,7 @@ function getThemeFromCSSVars(el: Element): ITheme { return theme; } -const Block = () => { +const Block = ({ blockId }: { blockId: string }) => { const blockRef = React.useRef(null); const connectElemRef = React.useRef(null); const [dims, setDims] = React.useState({ width: 0, height: 0 }); @@ -71,8 +71,8 @@ const Block = () => { return (
-
- Block {dims.width}x{dims.height} +
+ Block [{blockId.substring(0, 8)}] {dims.width}x{dims.height}
diff --git a/frontend/package.json b/frontend/package.json index 2f3c1adcf..a74db29ee 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,6 +21,7 @@ "jotai": "^2.8.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "rxjs": "^7.8.1" + "rxjs": "^7.8.1", + "uuid": "^9.0.1" } } diff --git a/frontend/public/style.less b/frontend/public/style.less index eac6bac2c..a1d7cc836 100644 --- a/frontend/public/style.less +++ b/frontend/public/style.less @@ -1,4 +1,4 @@ -// Copyright 2023, Command Line Inc. +// Copyright 2024, Command Line Inc. // SPDX-License-Identifier: Apache-2.0 @import "./reset.less"; @@ -8,6 +8,7 @@ --border-color: #333333; --main-color: #f7f7f7; --base-font: normal 15px / normal "Lato", sans-serif; + --fixed-font: normal 12px / normal "Hack", monospace; --app-accent-color: rgb(88, 193, 66); --panel-bg-color: rgba(31, 33, 31, 1); } @@ -23,6 +24,14 @@ body { overflow: hidden; } +.flex-spacer { + flex-grow: 1; +} + +.text-fixed { + font: var(--fixed-font); +} + #main, .mainapp { display: flex; @@ -42,9 +51,10 @@ body { flex-direction: column; width: 100%; flex-grow: 1; + overflow: hidden; } -.tabs { +.tab-bar { display: flex; flex-direction: row; height: 35px; @@ -64,13 +74,3 @@ body { } } } - -.tabcontent { - display: flex; - flex-direction: row; - flex-grow: 1; - min-height: 0; - width: 100%; - align-items: center; - justify-content: center; -} diff --git a/frontend/tab.less b/frontend/tab.less new file mode 100644 index 000000000..c7e439487 --- /dev/null +++ b/frontend/tab.less @@ -0,0 +1,31 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +.tabcontent { + display: flex; + flex-direction: row; + flex-grow: 1; + min-height: 0; + width: 100%; + align-items: center; + justify-content: center; + overflow: hidden; + + .block-container { + display: flex; + flex-direction: row; + flex: 1 0 0; + height: 100%; + overflow: hidden; + border: 1px solid var(--border-color); + margin: 5px; + border-radius: 4px; + padding: 5px; + } + + .block1 { + } + + .block2 { + } +} diff --git a/frontend/tab.tsx b/frontend/tab.tsx new file mode 100644 index 000000000..c3f25c9d2 --- /dev/null +++ b/frontend/tab.tsx @@ -0,0 +1,27 @@ +// Copyright 2023, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +import * as React from "react"; +import * as jotai from "jotai"; +import { Block } from "./block.tsx"; +import { v4 as uuidv4 } from "uuid"; + +import "./tab.less"; + +const TabContent = () => { + const blockId1 = React.useMemo(() => uuidv4(), []); + const blockId2 = React.useMemo(() => uuidv4(), []); + + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export { TabContent }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index e6e2f0599..9b5bff43d 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -472,6 +472,11 @@ tslib@^2.1.0, tslib@^2.3.0: resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== +uuid@^9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" + integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== + vite@^5.0.0: version "5.2.11" resolved "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz"