hzhang/HangmanLab.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: update css

Browse Source
This commit is contained in:
h z
2025-05-11 20:14:29 +01:00
parent 101666d26d
commit e5affe3465
5 changed files with 103 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/MarkdownTemplate/LayoutEditor.js
View File

@@ -5,6 +5,7 @@ const LayoutEditor = ({layout, onChange}) => {
return (
<textarea
className="textarea"
style={{ height: "60vh" }}
value={_layout}
onChange={(e) => {
setLayout(e.target.value);

13
src/components/MarkdownTemplate/MarkdownTemplateEditor.js
View File

@@ -65,6 +65,7 @@ const MarkdownTemplateEditor = () => {
<div className="columns is-variable is-8">
<div className="column">
<h3 className="title is-5">Layout</h3>
<div className="box">
<LayoutEditor
layout={layout}
@@ -72,15 +73,15 @@ const MarkdownTemplateEditor = () => {
onChange={(newLayout) => setLayout(newLayout)}
/>
</div>
</div>
<div className="column">
<h3 className="title is-5">Parameters</h3>
<div className="box">
<ParametersManager
parameters={parameters}
onChange={(newParameters) => setParameters(newParameters)}
/>
</div>
<ParametersManager
parameters={parameters}
onChange={(newParameters) => setParameters(newParameters)}
/>
</div>
</div>
<div className="field is-grouped">

104
src/components/MarkdownTemplate/ParametersManager.js
View File

@@ -3,18 +3,36 @@ import TypeEditor from "./TypeEditor";
const ParametersManager = ({ parameters, onChange }) => {
const [_parameters, setParameters] = useState(parameters || []);
const [expandedStates, setExpandedStates] = useState({});
const handleAdd = () => {
const updated = [
..._parameters,
{
name: "",
type: { base_type: "string" }
type: {
base_type: "string",
definition: {}
}
}
];
setParameters(updated);
onChange(updated);
};
const handleTypeChange = (index, newType) => {
const updated = [..._parameters];
if (newType.base_type === "list" && !newType.extend_type) {
newType.extend_type = {
base_type: "string",
definition: {}
};
}
updated[index].type = newType;
setParameters(updated);
onChange(updated);
};
useEffect(() => {
setParameters(parameters);
}, [parameters]);
@@ -33,6 +51,13 @@ const ParametersManager = ({ parameters, onChange }) => {
onChange(updated);
};
const toggleExpand = (index) => {
setExpandedStates(prev => ({
...prev,
[index]: !prev[index]
}));
};
return (
<div className="box">
<div className="field">
@@ -42,44 +67,51 @@ const ParametersManager = ({ parameters, onChange }) => {
</button>
</div>
</div>
{_parameters.map((param, index) => (
<div key={index} className="box" style={{ marginBottom: "1rem" }}>
<div className="field is-grouped is-grouped-multiline">
<div className="control is-expanded">
<label className="label">Name:</label>
<input
type="text"
className="input"
value={param.name}
onChange={(e) => handleNameChange(index, e.target.value)}
placeholder="Parameter name"
/>
<div style={{ maxHeight: "50vh", overflowY: "auto" }}>
{_parameters.map((param, index) => (
<div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
<div className="field is-grouped is-grouped-multiline">
<div className="control is-expanded">
<label className="label mb-1">Name:</label>
<input
type="text"
className="input"
value={param.name}
onChange={(e) => handleNameChange(index, e.target.value)}
placeholder="Parameter name"
/>
</div>
<div className="control">
<button
className="button is-danger"
onClick={() => handleDelete(index)}
>
Delete
</button>
</div>
</div>
<div className="control">
<button
className="button is-danger"
onClick={() => handleDelete(index)}
>
Delete
</button>
<div className="field">
<div className="is-flex is-justify-content-space-between is-align-items-center mb-1">
<label className="label mb-0">Type:</label>
<button
className="button is-small"
onClick={() => toggleExpand(index)}
>
{expandedStates[index] ? "-" : "+"}
</button>
</div>
{expandedStates[index] && (
<div className="control">
<TypeEditor
type={param.type}
onChange={(newType) => handleTypeChange(index, newType)}
/>
</div>
)}
</div>
</div>
<div className="field">
<label className="label">Type:</label>
<div className="control">
<TypeEditor
type={param.type}
onChange={(newType) => {
const updated = [..._parameters];
updated[index].type = newType;
setParameters(updated);
onChange(updated);
}}
/>
</div>
</div>
</div>
))}
))}
</div>
</div>
);
};

2
src/components/Markdowns/MarkdownEditor.js
View File

@@ -277,7 +277,7 @@ const MarkdownEditor = () => {
</div>
) : (
<TemplatedEditor
style={{height: "70vh"}}
style={{height: "40vh"}}
content={content}
template={!markdown?.id ? selectedTemplate : template}
onContentChanged={(k, v) => setContent(

40
src/components/Markdowns/TemplatedEditor.js
View File

@@ -28,9 +28,10 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
<label className="label">{__namespace}</label>
<div className="control">
<textarea
className="textarea"
value={value}
onChange={(e) => onContentChanged(variable.name, e.target.value)}
style={{maxHeight: "10vh"}}
className="textarea"
value={value}
onChange={(e) => onContentChanged(variable.name, e.target.value)}
/>
</div>
</div>
@@ -152,7 +153,7 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
return <>{renderField()}</>;
};
const TemplatedEditor = ({ content, template, onContentChanged }) => {
const TemplatedEditor = ({ content, template, onContentChanged, style }) => {
const tpl = template || {
parameters: [{ name: "markdown", type: { base_type: "markdown", definition: {} } }],
layout: "<markdown/>",
@@ -160,16 +161,27 @@ const TemplatedEditor = ({ content, template, onContentChanged }) => {
};
return (
<div className="box">
{tpl.parameters.map((variable, idx) => (
<TemplatedEditorComponent
key={idx}
variable={variable}
value={content[variable.name]}
namespace={tpl.title}
onContentChanged={onContentChanged}
/>
))}
<div className="box" style={{
...style,
display: "flex",
flexDirection: "column",
overflow: "hidden"
}}>
<div style={{
flex: 1,
overflowY: "auto",
padding: "1rem"
}}>
{tpl.parameters.map((variable, idx) => (
<TemplatedEditorComponent
key={idx}
variable={variable}
value={content[variable.name]}
namespace={tpl.title}
onContentChanged={onContentChanged}
/>
))}
</div>
</div>
);
};