From 8de18df491bc12d5ab49df6fcd5dc10b9d456ba7 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Mon, 26 Sep 2022 20:02:46 +0200
Subject: [PATCH] Implemented simple tab view
---
src/editor/components/sidepanel.tsx | 51 ++++++++++++++++++-----------
src/editor/components/tabheader.css | 30 +++++++++++++++++
src/editor/components/tabheader.tsx | 38 +++++++++++++++++++++
3 files changed, 100 insertions(+), 19 deletions(-)
create mode 100644 src/editor/components/tabheader.css
create mode 100644 src/editor/components/tabheader.tsx
diff --git a/src/editor/components/sidepanel.tsx b/src/editor/components/sidepanel.tsx
index cb7f5b5..9c45184 100644
--- a/src/editor/components/sidepanel.tsx
+++ b/src/editor/components/sidepanel.tsx
@@ -10,6 +10,7 @@ import Instructions from "./instructions";
import { Node } from "../../common/graph/node";
import { NodeType, NodeTypeData } from "../../common/graph/nodetype";
import { EditorSettings, NodeDataChangeRequest } from "../editor";
+import TabHeader from "./tabheader";
interface SidepanelProps {
graph: DynamicGraph;
@@ -62,26 +63,38 @@ function Sidepanel({
<button onClick={onSave}>Save</button>
</div>
<hr />
- <NodeDetails
- selectedNodes={selectedNodes}
- idToObjectType={graph.idToObjectGroup}
- onNodeDataChange={onNodeDataChange}
- createCheckpoint={createCheckpoint}
- />
- <hr />
- <NodeTypesEditor
- nodeTypes={graph.objectGroups}
- onNodeTypeSelect={onNodeTypeSelect}
- onNodeTypeCreation={onNodeTypeCreation}
- onNodeTypeDelete={onNodeTypeDelete}
- onNodeTypeDataChange={onNodeTypeDataChange}
- createCheckpoint={createCheckpoint}
- />
- <hr />
- <Settings settings={settings} onSettingsChange={onSettingsChange} />
- <hr />
+ <TabHeader tabs={["Edit", "Types", "Help"]}>
+ {/* Edit-Tab */}
+ <NodeDetails
+ selectedNodes={selectedNodes}
+ idToObjectType={graph.idToObjectGroup}
+ onNodeDataChange={onNodeDataChange}
+ createCheckpoint={createCheckpoint}
+ />
+
+ {/* Types-Tab */}
+ <NodeTypesEditor
+ nodeTypes={graph.objectGroups}
+ onNodeTypeSelect={onNodeTypeSelect}
+ onNodeTypeCreation={onNodeTypeCreation}
+ onNodeTypeDelete={onNodeTypeDelete}
+ onNodeTypeDataChange={onNodeTypeDataChange}
+ createCheckpoint={createCheckpoint}
+ />
+
+ {/* Help-Tab */}
+ <div>
+ <Settings
+ settings={settings}
+ onSettingsChange={onSettingsChange}
+ />
+ <hr />
- <Instructions connectOnDragEnabled={settings.connectOnDrag} />
+ <Instructions
+ connectOnDragEnabled={settings.connectOnDrag}
+ />
+ </div>
+ </TabHeader>
</div>
);
}
diff --git a/src/editor/components/tabheader.css b/src/editor/components/tabheader.css
new file mode 100644
index 0000000..49a2aee
--- /dev/null
+++ b/src/editor/components/tabheader.css
@@ -0,0 +1,30 @@
+div#ks-editor .tab-header {
+ display: flex;
+ margin-top: 0.2em;
+ margin-bottom: 0.5em;
+}
+
+div#ks-editor .tab-button {
+ display: block;
+
+ font-size: medium;
+ padding: 0.2em 0.5em;
+
+ border-bottom: 1px solid gray;
+ margin-bottom: 1px;
+
+ margin-right: 0.2em;
+
+ cursor: default;
+}
+
+div#ks-editor .tab-button:hover {
+ margin-bottom: 0px;
+ border-bottom: 2px solid gray;
+}
+
+div#ks-editor .tab-button.tab-open {
+ font-weight: bold;
+ margin-bottom: 0px;
+ border-bottom: 2px solid black;
+}
diff --git a/src/editor/components/tabheader.tsx b/src/editor/components/tabheader.tsx
new file mode 100644
index 0000000..8acb2d9
--- /dev/null
+++ b/src/editor/components/tabheader.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import "./tabheader.css";
+
+interface TabHeaderProps {
+ tabs: string[];
+ initialTabIndex?: number;
+ children: React.ReactNode[];
+}
+
+function TabHeader({ tabs, initialTabIndex, children }: TabHeaderProps) {
+ if (initialTabIndex === undefined) {
+ initialTabIndex = 0;
+ }
+
+ const [currentIndex, setCurrentIndex] = useState<number>(initialTabIndex);
+ return (
+ <div className={"tab-view"}>
+ <div className={"tab-header"}>
+ {tabs.map((name: string, index: number) => (
+ <div
+ key={index}
+ className={
+ index === currentIndex
+ ? "tab-button tab-open"
+ : "tab-button"
+ }
+ onClick={() => setCurrentIndex(index)}
+ >
+ {name}
+ </div>
+ ))}
+ </div>
+ <div>{children[currentIndex]}</div>
+ </div>
+ );
+}
+
+export default TabHeader;
--
GitLab