From 1ac70cae6164e9e73c0ecde6b552bdd7e9af46de Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Mon, 29 Aug 2022 23:46:41 +0200
Subject: [PATCH] Adjusts sidepanel layout
---
src/editor/js/components/editor.tsx | 36 ++++++++++++------------
src/editor/js/components/nodedetails.css | 5 ++++
2 files changed, 23 insertions(+), 18 deletions(-)
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index b49bbb3..0bdc857 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -484,24 +484,6 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
onChange={this.onHistoryChange}
/>
<hr />
- <ul className="instructions">
- <li>Click background to create node</li>
- <li>SHIFT+Click background to clear selection</li>
- <li>Click node to select and edit</li>
- <li>CTRL+Click node to delete</li>
- <li>CTRL+Click link to delete</li>
- <li>SHIFT+Click a second node to connect</li>
- {this.state.connectOnDrag ? (
- <li>
- Drag node close to other node to connect
- </li>
- ) : (
- ""
- )}
- <li>DELETE to delete selected node</li>
- <li>ESCAPE to clear selection</li>
- </ul>
- <hr />
<NodeDetails
selectedNode={this.state.selectedNode}
allTypes={
@@ -554,6 +536,24 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<label htmlFor="connect-on-drag">
Connect nodes when dragged
</label>
+ <hr />
+ <ul className="instructions">
+ <li>Click background to create node</li>
+ <li>SHIFT+Click background to clear selection</li>
+ <li>Click node to select and edit</li>
+ <li>CTRL+Click node to delete</li>
+ <li>CTRL+Click link to delete</li>
+ <li>SHIFT+Click a second node to connect</li>
+ {this.state.connectOnDrag ? (
+ <li>
+ Drag node close to other node to connect
+ </li>
+ ) : (
+ ""
+ )}
+ <li>DELETE to delete selected node</li>
+ <li>ESCAPE to clear selection</li>
+ </ul>
</div>
</div>
</div>
diff --git a/src/editor/js/components/nodedetails.css b/src/editor/js/components/nodedetails.css
index 0601956..20bade5 100644
--- a/src/editor/js/components/nodedetails.css
+++ b/src/editor/js/components/nodedetails.css
@@ -7,3 +7,8 @@ div#ks-editor #nodedetails .preview-image {
max-width: 3rem;
width: auto;
}
+
+div#ks-editor #nodedetails #node-name {
+ font-weight: bold;
+ font-size: large;
+}
--
GitLab