Skip to content
Snippets Groups Projects
Commit fea1efe6 authored by Maximilian Giller's avatar Maximilian Giller
Browse files

Some visual adjustments

parent b65fd594
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56527 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/editor/js/components/editor.css
+ 2
− 0
View file @ fea1efe6
......@@ -9,6 +9,8 @@ div#ks-editor #sidepanel {
border: 1px lightgrey solid;
border-radius: 5px;
overflow-y: auto;
}
div#ks-editor #sidepanel > * {
......
src/editor/js/components/toolbutton.css
+ 5
− 0
View file @ fea1efe6
div#ks-editor #toolpool > button {
margin: 0.25rem;
}
div#ks-editor #toolpool > button > image {
height: 30px;
width: auto;
}
\ No newline at end of file
src/editor/js/components/tooldetails.css 0 → 100644
+ 6
− 0
View file @ fea1efe6
div#ks-editor #tooldetails * {
width: 100%;
}
div#ks-editor #tooldetails p {
}
src/editor/js/components/tooldetails.tsx
+ 9
− 92
View file @ fea1efe6
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
......
src/editor/js/components/tooldetails/selectdetail.tsx 0 → 100644
+ 109
− 0
View file @ fea1efe6
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>
);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment