diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx index b49bbb33bd08d6cdaef13d0903c86cf24f53b5d9..0bdc857d8c74863ede44cb241bc5ac7f3e175905 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 0601956fa60594760785d34a339563947790f65c..20bade5dd9f2508a1e1a968c385971037ee3a7b3 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; +}