LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

CCM NG: More work on the PageModelEditor 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5613 8810af33-2d31-482b-a856-94f89814c4df
jensp 2018-07-19 12:51:54 +00:00
parent 964d762df2
commit 2e1d98c237
3 changed files with 161 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ccm-cms-js/src/main/typescript/ccm-cms/ccm-cms-pagemodelseditor.tsx
View File

@ -146,6 +146,32 @@ class ItemListComponentEditor
public renderEditorDialog(): React.ReactFragment {
return <React.Fragment />;
return <React.Fragment>
<label htmlFor="descending">
Descending?
</label>
<input checked={this.props.component.descending}
id="descending"
type="checkbox" />
<label htmlFor="limitToType">Limit to type</label>
<input id="limitToType"
maxLength={1024}
size={64}
type="text"
value={this.props.component.limitToType}/>
<label htmlFor="pageSize">Page size</label>
<input id="pageSize"
min="1"
type="number"
value={this.props.component.pageSize}/>
<label htmlFor="listOrder">List Order</label>
<textarea cols={40} id="listOrder" rows={5}>
{Array.isArray(this.props.component.listOrder) ? (
this.props.component.listOrder.join(", ")
) : (
""
)}
</textarea>
</React.Fragment>;
}
}

77
ccm-pagemodelseditor/src/main/typescript/ccm-pagemodelseditor/PageModelsEditor.tsx
View File

@ -914,6 +914,8 @@ interface ComponentModelEditorProps<C extends ComponentModel> {
interface ComponentModelEditorState {
dialogExpanded: string;
dialogOpened: boolean | undefined;
componentKey: string;
}
abstract class AbstractComponentModelEditor<
@ -927,10 +929,33 @@ abstract class AbstractComponentModelEditor<
super(props as any);
this.setState({
this.state = {
...this.state as any,
dialogExpanded: "dialogClosed",
});
dialogOpened: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
public handleChange(event: React.ChangeEvent<HTMLElement>): void {
if (event.currentTarget.id === this.props.component.key + "_componentKey") {
const target: HTMLInputElement
= event.currentTarget as HTMLInputElement;
this.setState({
...this.state as any,
componentKey: target.value,
});
}
}
public handleSubmit(event: React.FormEvent<HTMLFormElement>): void {
}
public abstract renderPropertyList(): React.ReactFragment;
@ -947,27 +972,65 @@ abstract class AbstractComponentModelEditor<
<dd>{this.props.component.type}</dd>
{this.renderPropertyList()}
</dl>
<button onClick={this.toggleEditorDialog}>
<button onClick={(event) => this.closeOnButton(event)}>
Edit
</button>
<dialog className="{this.state.dialogExpanded}">
{this.renderEditorDialog()}
<dialog aria-labelledby={this.props.component.key
+ "_editDialogHeading"}
className={this.state.dialogExpanded}
onKeyDown={(event) => this.closeOnEsc}
open={this.state.dialogOpened}>
<button className="closeButton"
onClick={(event) => this.toggleEditorDialog}>
<span className="accessibility hidden">Close</span>
<span className="fa fa-times-circle"></span>
</button>
<h1 id={this.props.component.key + "_editDialogHeading"}>
Edit component {this.props.component.key}
</h1>
<form onSubmit={this.handleSubmit}>
<label htmlFor={this.props.component.key + "_componentKey"}>
Key
</label>
<input id={this.props.component.key + "_componentKey"}
onChange={this.handleChange}
required={true}
type="text"
value={this.state.componentKey} />
{this.renderEditorDialog()}
</form>
<div className="backdrop"></div>
</dialog>
</li>;
}
private toggleEditorDialog(
event: React.MouseEvent<HTMLButtonElement>): void {
private closeOnButton(event: React.MouseEvent<HTMLButtonElement>): void {
event.preventDefault();
this.toggleEditorDialog();
}
private closeOnEsc(event: React.KeyboardEvent<HTMLElement>): void {
if (event.keyCode === 27) {
this.toggleEditorDialog();
}
}
private toggleEditorDialog(): void {
if (this.state.dialogExpanded === "dialogExpanded") {
this.setState({
...this.state as any,
dialogExpanded: "dialogClosed",
dialogOpened: false,
});
} else {
this.setState({
...this.state as any,
dialogExpanded: "dialogExpanded",
dialogOpened: true,
});
}
}

70
ccm-theme-foundry/src/main/resources/themes/foundry/foundry/styles/admin.css
View File

@ -2065,23 +2065,81 @@ div.errorPanel {
left: 5em;
} */
li.componentModelEditor dialog.closed {
li.componentModelEditor dialog.dialogClosed {
display: none;
}
li.componentModelEditor dialog.closed {
li.componentModelEditor dialog.dialogExpanded {
border: 2px solid #ccc;
border-radius: 3em;
border-radius: 3rem;
display: block;
padding: 2em;
position: fixed;
top: 10vh;
right: 10vw;
bottom: 10vh;
left: 10vw;
bottom: 20vh;
left: 20vw;
width: 80vw;
width: 60vw;
height: 80vh;
z-index: 1000;
}
li.componentModelEditor dialog.dialogExpanded button.closeButton {
background-color: none;
border: none;
color: #fff;
font-size: 2em;
position: absolute;
top: 1.5em;
right: 1.5em;
z-index: 1200;
}
li.componentModelEditor dialog.dialogExpanded h1 {
background-color: #0776a0;
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
box-sizing: border-box;
color: #fff;
font-size: 2em;
font-weight: bold;
padding: 1em 3em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3em;
z-index: 1100;
}
li.componentModelEditor dialog.dialogExpanded input,
li.componentModelEditor dialog.dialogExpanded label,
li.componentModelEditor dialog.dialogExpanded textarea {
display: block;
}
li.componentModelEditor dialog.dialogExpanded input,
li.componentModelEditor dialog.dialogExpanded textarea {
margin-bottom: 1em;
}