From fea1efe64939180eed297fbb8abc2f1137d2f274 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Sat, 21 May 2022 11:59:43 +0200
Subject: [PATCH] Some visual adjustments
---
src/editor/js/components/editor.css | 2 +
src/editor/js/components/toolbutton.css | 5 +
src/editor/js/components/tooldetails.css | 6 +
src/editor/js/components/tooldetails.tsx | 101 ++--------------
.../components/tooldetails/selectdetail.tsx | 109 ++++++++++++++++++
5 files changed, 131 insertions(+), 92 deletions(-)
create mode 100644 src/editor/js/components/tooldetails.css
create mode 100644 src/editor/js/components/tooldetails/selectdetail.tsx
diff --git a/src/editor/js/components/editor.css b/src/editor/js/components/editor.css
index 1887d6d..e962785 100644
--- a/src/editor/js/components/editor.css
+++ b/src/editor/js/components/editor.css
@@ -9,6 +9,8 @@ div#ks-editor #sidepanel {
border: 1px lightgrey solid;
border-radius: 5px;
+
+ overflow-y: auto;
}
div#ks-editor #sidepanel > * {
diff --git a/src/editor/js/components/toolbutton.css b/src/editor/js/components/toolbutton.css
index e444068..4627ed3 100644
--- a/src/editor/js/components/toolbutton.css
+++ b/src/editor/js/components/toolbutton.css
@@ -1,3 +1,8 @@
div#ks-editor #toolpool > button {
margin: 0.25rem;
+}
+
+div#ks-editor #toolpool > button > image {
+ height: 30px;
+ width: auto;
}
\ No newline at end of file
diff --git a/src/editor/js/components/tooldetails.css b/src/editor/js/components/tooldetails.css
new file mode 100644
index 0000000..1f23862
--- /dev/null
+++ b/src/editor/js/components/tooldetails.css
@@ -0,0 +1,6 @@
+div#ks-editor #tooldetails * {
+ width: 100%;
+}
+
+div#ks-editor #tooldetails p {
+}
diff --git a/src/editor/js/components/tooldetails.tsx b/src/editor/js/components/tooldetails.tsx
index a9d58d3..55cf54a 100644
--- a/src/editor/js/components/tooldetails.tsx
+++ b/src/editor/js/components/tooldetails.tsx
@@ -1,8 +1,17 @@
import React from "react";
import { ReactNode } from "react";
+import { SelectDetail } from "./tooldetails/selectdetail";
+import "./tooldetails.css";
export class ToolDetails extends React.Component {
render(): ReactNode {
+ // Based on what tool is currently selected, show the appropriate details
+ return (
+ <div id="tooldetails">
+ <SelectDetail />
+ </div>
+ );
+
return (
<div id="tooldetails">
<div id="delete-menu" className="hidden">
@@ -16,98 +25,6 @@ export class ToolDetails extends React.Component {
<button id="clear-collection">Clear</button>
<ul id="selected-items"></ul>
</div>
- <div id="select-menu" className="">
- <p id="nothing-selected">Nothing selected</p>
- <div id="node-selected" className="hidden">
- <label htmlFor="node-name" hidden>
- Name
- </label>
- <br />
- <input
- type="text"
- id="node-name"
- name="node-name"
- placeholder="Enter name"
- className="bottom-space"
- ></input>
- <br />
- <label htmlFor="node-description">Description</label>
- <br />
- <textarea
- id="node-description"
- name="node-description"
- className="bottom-space"
- ></textarea>
- <br />
- <label htmlFor="node-image">Node Image</label>
- <br />
- <img
- id="node-image-preview"
- className="preview-image"
- src=""
- />
- <br />
- <input
- type="text"
- id="node-image"
- name="node-image"
- placeholder="Enter file name or URL"
- className="bottom-space"
- />
- <br />
- <label htmlFor="node-detail-image">Info Image</label>
- <br />
- <img
- id="node-detail-image-preview"
- className="preview-image"
- src=""
- />
- <br />
- <input
- type="text"
- id="node-detail-image"
- name="node-detail-image"
- placeholder="Enter file name or URL"
- className="bottom-space"
- />
- <br />
- <label htmlFor="node-type">Type</label>
- <br />
- <select
- id="node-type"
- name="node-type"
- className="bottom-space"
- >
- <option value="Vorlesung">Vorlesung</option>
- <option value="Algorithmus">Algorithmus</option>
- <option value="Definition">Definition</option>
- <option value="Beispiel">Beispiel</option>
- <option value="Ãœbung">Ãœbung</option>
- <option value="Kapitel">Kapitel</option>
- </select>
- <br />
- <label htmlFor="node-video">Video</label>
- <br />
- <input
- type="text"
- placeholder="Video URL"
- id="node-video"
- name="node-video"
- ></input>
- <br />
- <label htmlFor="node-references">References</label>{" "}
- <small>One URL per line</small>
- <br />
- <textarea
- id="node-references"
- name="node-references"
- className="bottom-space"
- ></textarea>
- </div>
- <div id="link-selected" className="hidden">
- <h3 id="link-name"></h3>
- </div>
- </div>
<div id="settings-menu" className="hidden">
<label htmlFor="label-toggle" className="bottom-space">
<input
diff --git a/src/editor/js/components/tooldetails/selectdetail.tsx b/src/editor/js/components/tooldetails/selectdetail.tsx
new file mode 100644
index 0000000..5609b4e
--- /dev/null
+++ b/src/editor/js/components/tooldetails/selectdetail.tsx
@@ -0,0 +1,109 @@
+import React from "react";
+import { ReactNode } from "react";
+
+export class SelectDetail extends React.Component {
+ render(): ReactNode {
+ return (
+ <section id="select-menu">
+ <p id="nothing-selected">Nothing selected</p>
+ <div id="node-selected" className="">
+ <p>
+ <label htmlFor="node-name" hidden>
+ Name
+ </label>
+ <br />
+ <input
+ type="text"
+ id="node-name"
+ name="node-name"
+ placeholder="Enter name"
+ className="bottom-space"
+ ></input>
+ </p>
+ <p>
+ <label htmlFor="node-description">Description</label>
+ <br />
+ <textarea
+ id="node-description"
+ name="node-description"
+ className="bottom-space"
+ ></textarea>
+ </p>
+ <p>
+ <label htmlFor="node-image">Node Image</label>
+ <br />
+ <img
+ id="node-image-preview"
+ className="preview-image"
+ src=""
+ />
+ <br />
+ <input
+ type="text"
+ id="node-image"
+ name="node-image"
+ placeholder="Enter file name or URL"
+ className="bottom-space"
+ />
+ </p>
+ <p>
+ <label htmlFor="node-detail-image">Info Image</label>
+ <br />
+ <img
+ id="node-detail-image-preview"
+ className="preview-image"
+ src=""
+ />
+ <br />
+ <input
+ type="text"
+ id="node-detail-image"
+ name="node-detail-image"
+ placeholder="Enter file name or URL"
+ className="bottom-space"
+ />
+ </p>
+ <p>
+ <label htmlFor="node-type">Type</label>
+ <br />
+ <select
+ id="node-type"
+ name="node-type"
+ className="bottom-space"
+ >
+ <option value="Vorlesung">Vorlesung</option>
+ <option value="Algorithmus">Algorithmus</option>
+ <option value="Definition">Definition</option>
+ <option value="Beispiel">Beispiel</option>
+ <option value="Ãœbung">Ãœbung</option>
+ <option value="Kapitel">Kapitel</option>
+ </select>
+ </p>
+ <p>
+ <label htmlFor="node-video">Video</label>
+ <br />
+ <input
+ type="text"
+ placeholder="Video URL"
+ id="node-video"
+ name="node-video"
+ ></input>
+ </p>
+ <p>
+ <label htmlFor="node-references">References</label>{" "}
+ <small>One URL per line</small>
+ <br />
+ <textarea
+ id="node-references"
+ name="node-references"
+ className="bottom-space"
+ ></textarea>
+ </p>
+ </div>
+ <div id="link-selected" className="hidden">
+ <h3 id="link-name"></h3>
+ </div>
+ </section>
+ );
+ }
+}
--
GitLab