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

CCM NG: Some things for the PageModelEditor 

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5475 8810af33-2d31-482b-a856-94f89814c4df
jensp 2018-06-04 18:28:58 +00:00
parent 2c9ca290c2
commit e88e0f742f
2 changed files with 168 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,7 +119,7 @@ class PageModelsList
public render(): React.ReactNode {
return <div className="pageModelsList">
return <div className="pagemodeleditor pageModelsList">
{this.state.errorMsg !== null &&
<div className="errorPanel">
{this.state.errorMsg}
@ -170,30 +170,77 @@ interface PageModelComponentProps {
pageModel: PageModel;
}
class PageModelComponent extends React.Component<PageModelComponentProps, {}> {
interface PageModelComponentState {
editMode: boolean;
}
class PageModelComponent
extends React.Component<PageModelComponentProps, PageModelComponentState> {
constructor(props: PageModelComponentProps) {
super(props);
this.state = {
editMode: false
};
}
public render(): React.ReactNode {
return <div className="bebop-body">
<dl className="properties-list">
<dt>Name</dt>
<dd>{this.props.pageModel.name}</dd>
<dt>Title</dt>
<dd>{this.props.pageModel.title}</dd>
<dt>Type</dt>
<dd>{this.props.pageModel.type}</dd>
<dt>Version</dt>
<dd>{this.props.pageModel.version}</dd>
<dt>Description</dt>
<dd>{this.props.pageModel.description}</dd>
</dl>
<button>Edit</button>
</div>;
if (this.state.editMode) {
return <div className="bebop-body">
<form className="pagemodeleditor pagemodel propertiesForm">
<label htmlFor="pageModelName">
Name
</label>
<input
id="pageModelName"
size={32}
type="text"
value={this.props.pageModel.name} />
<label htmlFor="pageModelTitle">
Name
</label>
<input
id="pageModelTitle"
size={32}
type="text"
value={this.props.pageModel.title}/>
<label htmlFor="pageModelDescription">
Name
</label>
<textarea id="pageModeDescription" cols={80} rows={20}>
{this.props.pageModel.description}
</textarea>
</form>
</div>
} else {
return <div className="bebop-body">
<dl className="pagemodeleditor pagemodel propertiesList">
<dt>Name</dt>
<dd>{this.props.pageModel.name}</dd>
<dt>Title</dt>
<dd>{this.props.pageModel.title}</dd>
<dt>Type</dt>
<dd>{this.props.pageModel.type}</dd>
<dt>Version</dt>
<dd>{this.props.pageModel.version}</dd>
<dt>Description</dt>
<dd>{this.props.pageModel.description}</dd>
</dl>
<button onClick={(event) => {
event.preventDefault();
this.setState({
editMode: true
});
}}>Edit</button>
</div>;
}
// return <dl>
// <dt>Name</dt>
// <dd>{this.props.pageModel.name}</dd>
@ -251,7 +298,7 @@ class PageModelEditor
</h3>
<div className="bebop-segment-body">
<button
className="pagemodels addbutton">
className="pagemodeleditor addbutton">
<span>+</span> Create new PageModel
</button>
<PageModelsList
@ -269,7 +316,7 @@ class PageModelEditor
};
});
}} />
<button className="pagemodels addbutton">
<button className="pagemodeleditor addbutton">
<span>+</span> Create new PageModel
</button>
</div>
@ -301,9 +348,6 @@ class PageModelEditor
// </React.Fragment>
}
</pageModelEditorContext.Consumer>
<pre>
{this.getCcmApplication()}
</pre>
</div>
</div>
</pageModelEditorContext.Provider>

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

@ -1978,7 +1978,7 @@ span#quickLinksCascade {
white-space: pre;
}
button.pagemodels.addbutton {
button.pagemodeleditor.addbutton {
border: none;
border-radius: 0.25em;
@ -1990,7 +1990,7 @@ button.pagemodels.addbutton {
padding: 0.2em 0.33em;
}
button.pagemodels.addbutton > span {
button.pagemodeleditor.addbutton > span {
border-right: 1px solid #eee;
@ -2000,7 +2000,7 @@ button.pagemodels.addbutton > span {
}
div.pageModelsList {
div.pagemodeleditor.pageModelsList {
margin-top: 0.66em;
margin-bottom: 0.66em;
@ -2008,5 +2008,30 @@ div.pageModelsList {
padding-top: 0.66em;
border-bottom: 1px solid #0776A0;
padding-bottom: 0.66em;
}
dl.pagemodeleditor.pagemodel.propertiesList {
display: grid;
grid-template-columns: 1fr 2fr;
max-width: 30em;
}
dl.pagemodeleditor.pagemodel.propertiesList dt{
font-weight: bold;
}
dl.pagemodeleditor.pagemodel.propertiesList dd {
}
dl.pagemodeleditor.pagemodel.propertiesForm {
display: grid;
grid-template-columns: 1fr 2fr;
max-width: 30em;
}
dl.pagemodeleditor.pagemodel.propertiesForm label {
font-weight: bold;
}