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
ccm-docs
jensp 2018-06-04 18:28:58 +00:00
parent 363bfcf132
commit fc0ebfee23
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 { public render(): React.ReactNode {
return <div className="pageModelsList"> return <div className="pagemodeleditor pageModelsList">
{this.state.errorMsg !== null && {this.state.errorMsg !== null &&
<div className="errorPanel"> <div className="errorPanel">
{this.state.errorMsg} {this.state.errorMsg}
@ -170,30 +170,77 @@ interface PageModelComponentProps {
pageModel: PageModel; pageModel: PageModel;
} }
class PageModelComponent extends React.Component<PageModelComponentProps, {}> { interface PageModelComponentState {
editMode: boolean;
}
class PageModelComponent
extends React.Component<PageModelComponentProps, PageModelComponentState> {
constructor(props: PageModelComponentProps) { constructor(props: PageModelComponentProps) {
super(props); super(props);
this.state = {
editMode: false
};
} }
public render(): React.ReactNode { public render(): React.ReactNode {
return <div className="bebop-body"> if (this.state.editMode) {
<dl className="properties-list"> return <div className="bebop-body">
<dt>Name</dt> <form className="pagemodeleditor pagemodel propertiesForm">
<dd>{this.props.pageModel.name}</dd> <label htmlFor="pageModelName">
<dt>Title</dt> Name
<dd>{this.props.pageModel.title}</dd> </label>
<dt>Type</dt> <input
<dd>{this.props.pageModel.type}</dd> id="pageModelName"
<dt>Version</dt> size={32}
<dd>{this.props.pageModel.version}</dd> type="text"
<dt>Description</dt> value={this.props.pageModel.name} />
<dd>{this.props.pageModel.description}</dd>
</dl>
<button>Edit</button>
</div>;
<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> // return <dl>
// <dt>Name</dt> // <dt>Name</dt>
// <dd>{this.props.pageModel.name}</dd> // <dd>{this.props.pageModel.name}</dd>
@ -251,7 +298,7 @@ class PageModelEditor
</h3> </h3>
<div className="bebop-segment-body"> <div className="bebop-segment-body">
<button <button
className="pagemodels addbutton"> className="pagemodeleditor addbutton">
<span>+</span> Create new PageModel <span>+</span> Create new PageModel
</button> </button>
<PageModelsList <PageModelsList
@ -269,7 +316,7 @@ class PageModelEditor
}; };
}); });
}} /> }} />
<button className="pagemodels addbutton"> <button className="pagemodeleditor addbutton">
<span>+</span> Create new PageModel <span>+</span> Create new PageModel
</button> </button>
</div> </div>
@ -301,9 +348,6 @@ class PageModelEditor
// </React.Fragment> // </React.Fragment>
} }
</pageModelEditorContext.Consumer> </pageModelEditorContext.Consumer>
<pre>
{this.getCcmApplication()}
</pre>
</div> </div>
</div> </div>
</pageModelEditorContext.Provider> </pageModelEditorContext.Provider>

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

@ -1,6 +1,6 @@
/* /*
Copyright: 2006, 2007, 2008 Sören Bernstein Copyright: 2006, 2007, 2008 Sören Bernstein
This file is part of Mandalay. This file is part of Mandalay.
Mandalay is free software: you can redistribute it and/or modify Mandalay is free software: you can redistribute it and/or modify
@ -205,18 +205,18 @@ table.htmlarea td.toolbarElement {
background-image: -o-linear-gradient(top, #56a1bd 5%, #024C68 95%); background-image: -o-linear-gradient(top, #56a1bd 5%, #024C68 95%);
background-image: -ie-linear-gradient(top, #56a1bd 5%, #024C68 95%); background-image: -ie-linear-gradient(top, #56a1bd 5%, #024C68 95%);
background-image: -moz-linear-gradient(top, #56a1bd 5%, #024C68 95%); background-image: -moz-linear-gradient(top, #56a1bd 5%, #024C68 95%);
background-image: -webkit-linear-gradient(top, #56a1bd 5%, #024C68 95%); background-image: -webkit-linear-gradient(top, #56a1bd 5%, #024C68 95%);
/*Compatibility IE- es fuktioniert noch nicht ganz*/ /*Compatibility IE- es fuktioniert noch nicht ganz*/
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='0',startColorstr='#56a1bd', filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='0',startColorstr='#56a1bd',
endColorstr='#024C68'); /* IE6 & IE7 */ endColorstr='#024C68'); /* IE6 & IE7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='0',startColorstr='#56a1bd', -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='0',startColorstr='#56a1bd',
endColorstr='#024C68'); /* IE8 */ endColorstr='#024C68'); /* IE8 */
font-size: 0.8em; font-size: 0.8em;
} }
div#cms-header .min-width, div#cms-header .min-width,
div#cms-header .logo, div#cms-header .logo,
div#cms-header .logo img { div#cms-header .logo img {
height: 100%; height: 100%;
} }
@ -267,7 +267,7 @@ div#cms-header .cms-greeting .cms-username {
} }
div#cms-header h1 { div#cms-header h1 {
margin: 2em 0em 0em 0em; margin: 2em 0em 0em 0em;
clear: left; clear: left;
} }
@ -320,7 +320,7 @@ span.bebopTab.current {
color: #ffffff; color: #ffffff;
background-color: #4a4747; background-color: #4a4747;
margin: 0 -1.25em 0 0; margin: 0 -1.25em 0 0;
font-family: 'colaborate-mediumregular', Verdana, Helvetica, Arial, sans-serif; font-family: 'colaborate-mediumregular', Verdana, Helvetica, Arial, sans-serif;
font-size: 1.2em; font-size: 1.2em;
} }
@ -399,7 +399,7 @@ div#bebop-tabbed-pane span.user_admin:before {
} }
div#bebop-tabbed-pane span.user_admin.current:before { div#bebop-tabbed-pane span.user_admin.current:before {
content: url('../../images/cms/admin-current.png'); content: url('../../images/cms/admin-current.png');
} }
div#bebop-tabbed-pane span.cse:before { div#bebop-tabbed-pane span.cse:before {
@ -435,7 +435,7 @@ div#cms-breadcrumbs {
} }
div.bebop-contextbar { div.bebop-contextbar {
color:#767676; color:#767676;
font-weight:bold; font-weight:bold;
} }
@ -459,7 +459,7 @@ div.bebop-contextbar span.bebop-contextbar-current-element {
div.bebop-contextbar span.bebop-contextbar-seperator { div.bebop-contextbar span.bebop-contextbar-seperator {
margin-left: 5px; margin-left: 5px;
border-left: 1px solid #a4a4a4; border-left: 1px solid #a4a4a4;
color: transparent; color: transparent;
background-image:url('../images/scrumb.png'); background-image:url('../images/scrumb.png');
background-repeat:no-repeat; background-repeat:no-repeat;
background-position: center; background-position: center;
@ -471,11 +471,11 @@ div.bebop-contextbar a:focus,
div.bebop-contextbar a:active, div.bebop-contextbar a:active,
div.bebop-contextbar a:visited div.bebop-contextbar a:visited
{ {
color: #767676; color: #767676;
} }
div .bebop-contextbar-current-element{ div .bebop-contextbar-current-element{
padding: 2px 5px; padding: 2px 5px;
} }
/*----cmscontent----*/ /*----cmscontent----*/
@ -488,7 +488,7 @@ div#cms-content {
margin-top: 75px !important; margin-top: 75px !important;
font-size: 1em; font-size: 1em;
overflow: hidden; overflow: hidden;
/*border-radius: 0.3em; jensp 2014-07-11: border-radius causes silly problems in this combination when scrolling in Firefox running under Linux*/ /*border-radius: 0.3em; jensp 2014-07-11: border-radius causes silly problems in this combination when scrolling in Firefox running under Linux*/
background-color: #e6dcde; background-color: #e6dcde;
box-shadow: 0px 0px 5px #4a4a4a; box-shadow: 0px 0px 5px #4a4a4a;
} }
@ -627,7 +627,7 @@ a:hover {
color: #FF9200; color: #FF9200;
} }
a img { a img {
border:none; border:none;
} }
@ -642,7 +642,7 @@ ul ul li{
margin-left: 2.3em; margin-left: 2.3em;
} }
table { table {
width: 100%; width: 100%;
border-bottom: 1px solid #999999; border-bottom: 1px solid #999999;
border-collapse: separate; border-collapse: separate;
@ -664,7 +664,7 @@ table * table ,form table {
margin: 0; margin: 0;
} }
table thead tr th { table thead tr th {
/*padding-left: 0.9em;*/ /*padding-left: 0.9em;*/
color: #999999; color: #999999;
text-align: left; text-align: left;
@ -676,7 +676,7 @@ table tbody tr:nth-child(2n) {
background-color: inherit; background-color: inherit;
} }
table tbody tr td { table tbody tr td {
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
border: none !important; border: none !important;
@ -686,7 +686,7 @@ table tbody tr td {
-o-hyphens: none; -o-hyphens: none;
} }
table tbody tr td + td{ table tbody tr td + td{
text-align: left; text-align: left;
} }
@ -746,7 +746,7 @@ input #draft_search{
textarea, select{ textarea, select{
vertical-align: baseline; vertical-align: baseline;
/*margin-left: 0.4em;*/ /*margin-left: 0.4em;*/
background-color: #fbfbfb; background-color: #fbfbfb;
-moz-border-radius:3px; -moz-border-radius:3px;
-webkit-border-radius:3px; -webkit-border-radius:3px;
border-radius: 3px; border-radius: 3px;
@ -767,7 +767,7 @@ input{
-webkit-border-radius:3px; -webkit-border-radius:3px;
padding: 0.2em; padding: 0.2em;
vertical-align: baseline; vertical-align: baseline;
background-color: #fbfbfb; background-color: #fbfbfb;
box-shadow: inset 0 0 3px rgba(74,74,74,0.5); box-shadow: inset 0 0 3px rgba(74,74,74,0.5);
} }
@ -787,7 +787,7 @@ span.key {
-o-hyphens: none; -o-hyphens: none;
} }
div.action-link { div.action-link {
margin-bottom: 1em; margin-bottom: 1em;
margin-top: 1em; margin-top: 1em;
} }
@ -825,26 +825,26 @@ ul.bebop-list {
border-collapse: collapse; border-collapse: collapse;
} }
#folder-browse table.dataTable thead tr th { #folder-browse table.dataTable thead tr th {
text-align: left; text-align: left;
color:#633e69; color:#633e69;
} }
#folder-browse table.dataTable thead tr th + th + th + th + th { #folder-browse table.dataTable thead tr th + th + th + th + th {
text-align: center; text-align: center;
} }
#folder-browse table.dataTable tbody tr td { #folder-browse table.dataTable tbody tr td {
text-align: left; text-align: left;
padding:5px; padding:5px;
} }
#folder-browse table.dataTable tbody tr td + td + td + td + td { #folder-browse table.dataTable tbody tr td + td + td + td + td {
text-align: center; text-align: center;
} }
div#bebop-current-pane table.dataTable tbody tr:hover{ div#bebop-current-pane table.dataTable tbody tr:hover{
background-color: #ffe0e0; background-color: #ffe0e0;
} }
/* special layout for folder-permissions */ /* special layout for folder-permissions */
@ -858,7 +858,7 @@ div#bebop-current-pane table.dataTable tbody tr:hover{
padding-right: 0.4em; padding-right: 0.4em;
} }
#folder-permissions table.dataTable tbody tr td + td { #folder-permissions table.dataTable tbody tr td + td {
text-align: center; text-align: center;
} }
@ -898,7 +898,7 @@ div .query{
} }
div#search fieldset { div#search fieldset {
margin-top: 25px; margin-top: 25px;
-o-border-radius:5px; -o-border-radius:5px;
-ie-border-radius:5px; -ie-border-radius:5px;
-moz-border-radius:5px; -moz-border-radius:5px;
@ -930,9 +930,9 @@ div#search .terms {
} }
div#search .filterName { div#search .filterName {
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
font-weight: bold; font-weight: bold;
padding-right: 1em; padding-right: 1em;
color: #0776A0; color: #0776A0;
} }
@ -945,7 +945,7 @@ div#search .filterParam {
div#search .filterParam >select{ div#search .filterParam >select{
-moz-border-radius:5px; -moz-border-radius:5px;
-webkit-border-radius:5px; -webkit-border-radius:5px;
border-radius:5px; border-radius:5px;
background-color: #fbfbfb; background-color: #fbfbfb;
width: 100%; width: 100%;
overflow: scroll; overflow: scroll;
@ -1017,7 +1017,7 @@ div#content .bebop-body .bebop-panel-row span {
div#content .bebop-body .bebop-panel-row span.option-group:after, div#content .bebop-body .bebop-panel-row span.option-group:after,
div#content .bebop-body .bebop-panel-row span.action:after, div#content .bebop-body .bebop-panel-row span.action:after,
div#content .bebop-body .bebop-panel-row span[key="not_yet_published_user"]:after, div#content .bebop-body .bebop-panel-row span[key="not_yet_published_user"]:after,
div#content .bebop-body .bebop-panel-row span[key="not_yet_published_date"]:after{ div#content .bebop-body .bebop-panel-row span[key="not_yet_published_date"]:after{
content: ""; content: "";
}*/ }*/
@ -1041,7 +1041,7 @@ div.bebop-left, form[name="category"] table {
position: absolute; position: absolute;
float: left; float: left;
width: auto; width: auto;
background: #e6dcde; background: #e6dcde;
padding: 0em 1em; padding: 0em 1em;
margin-top: 10px; margin-top: 10px;
border-radius: 10px; border-radius: 10px;
@ -1052,18 +1052,18 @@ div.bebop-left, form[name="category"] table {
} }
form[name="category"] table table{ form[name="category"] table table{
background: none; background: none;
} }
form[name="category"] ul li.notSelectedAncestorCategory { form[name="category"] ul li.notSelectedAncestorCategory {
background-color: #e6dcde; background-color: #e6dcde;
} }
form[name="category"] ul li ul li.selectedAncestorCategory { form[name="category"] ul li ul li.selectedAncestorCategory {
background-color: #fff; background-color: #fff;
} }
div.bebop-segment { div.bebop-segment {
margin-bottom:1em; margin-bottom:1em;
padding-bottom:0.5em; padding-bottom:0.5em;
border-bottom:1px solid rgba(102, 102, 102, 0.5); border-bottom:1px solid rgba(102, 102, 102, 0.5);
@ -1096,16 +1096,16 @@ div.bebop-segment {
padding: 10px; padding: 10px;
} }
div.bebop-left div.bebop-panel-row { div.bebop-left div.bebop-panel-row {
width:100%; width:100%;
} }
div.bebop-panel-row { div.bebop-panel-row {
margin-bottom:1em; margin-bottom:1em;
padding: 0; padding: 0;
width:40%; width:40%;
} }
div.bebop-panel-row table tr td { div.bebop-panel-row table tr td {
margin-bottom: 1em; margin-bottom: 1em;
padding: 3px; padding: 3px;
} }
@ -1114,7 +1114,7 @@ div.bebop-panel-row textarea{
width:100%; width:100%;
} }
div.bebop-segment div.bebop-segment-header { div.bebop-segment div.bebop-segment-header {
padding-left:1em; padding-left:1em;
border-bottom:1px solid #cacaca; border-bottom:1px solid #cacaca;
font-weight:bold; font-weight:bold;
@ -1132,7 +1132,7 @@ div#right div.bebop-body {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
padding: 0em 1em; padding: 0em 1em;
background-color: #fff; background-color: #fff;
} }
div.bebop-body table tr{ div.bebop-body table tr{
@ -1142,7 +1142,7 @@ div.bebop-body table tr{
div.bebop-body div.bebop-panel-row { div.bebop-body div.bebop-panel-row {
width:99%; width:99%;
} }
div.bebop-body form #search span { div.bebop-body form #search span {
display: inline; display: inline;
@ -1165,7 +1165,7 @@ div .bebop-body ul li{
margin-top: 5px; margin-top: 5px;
} }
h3.bebop-segment-header{ h3.bebop-segment-header{
margin-bottom:0.15em; margin-bottom:0.15em;
margin-top: 15px; margin-top: 15px;
color: #0776A0; color: #0776A0;
@ -1204,12 +1204,12 @@ ul.bebop-tree * ul {
} }
/* Bebop CurrentPane*/ /* Bebop CurrentPane*/
div#bebop-current-pane { div#bebop-current-pane {
position: absolute; position: absolute;
text-align: left; text-align: left;
} }
/* ActionGroupSet */ /* ActionGroupSet */
div.action-group-subject tr{ div.action-group-subject tr{
text-align: left; text-align: left;
} }
@ -1260,11 +1260,11 @@ div.cmsSortableList > ul li:nth-child(2n+1)
} }
/* CMS Summary Section */ /* CMS Summary Section */
div.cmsSummarySection { div.cmsSummarySection {
padding: 0 1em; padding: 0 1em;
} }
div.cmsSummarySection div.cmsSummaryHeading { div.cmsSummarySection div.cmsSummaryHeading {
font-weight: bold; font-weight: bold;
margin-bottom:0.3em; margin-bottom:0.3em;
} }
@ -1273,7 +1273,7 @@ div.cmsSummarySection .cmsSummaryHeading {
color: #0776A0; color: #0776A0;
} }
div.cmsSummaryBody { div.cmsSummaryBody {
margin-bottom:0.7em; margin-bottom:0.7em;
padding-bottom:0.3em; padding-bottom:0.3em;
border-bottom: 1px solid rgba(102, 102, 102, 0.5); border-bottom: 1px solid rgba(102, 102, 102, 0.5);
@ -1285,7 +1285,7 @@ div.cmsSummaryBody ul.categoryList li{
div.cmsSummarySection ul { div.cmsSummarySection ul {
text-indent: -2.5em; text-indent: -2.5em;
} }
span.cmsCurrentRevision { span.cmsCurrentRevision {
font-style:italic; font-style:italic;
@ -1478,7 +1478,7 @@ div.item-search-widget dialog .controls label {
margin-right: 0.5em; margin-right: 0.5em;
} }
div.asset-search-widget dialog .dialogarea controls button, div.asset-search-widget dialog .dialogarea controls button,
div.item-search-widget dialog .dialogarea controls button{ div.item-search-widget dialog .dialogarea controls button{
margin-left: 0.5em; margin-left: 0.5em;
@ -1507,7 +1507,7 @@ div.item-search-widget dialog .titlebar {
-moz-border-radius-topright: 10px; -moz-border-radius-topright: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
color: white; color: white;
} }
@ -1761,7 +1761,7 @@ form#propertyedit input[type='text'].minute {
#content span.option-group input[value="internalLink"]:checked ~ fieldset[class="externalLink"]{ #content span.option-group input[value="internalLink"]:checked ~ fieldset[class="externalLink"]{
display:none; display:none;
} }
#content form select { #content form select {
padding: 0.25em; padding: 0.25em;
@ -1829,7 +1829,7 @@ a#preview_link:hover{
a#preview_link:visited{ a#preview_link:visited{
color: white; color: white;
border: none; border: none;
} }
div.bebop-grid-panel{ div.bebop-grid-panel{
@ -1861,12 +1861,12 @@ table span.hint{
font-size: 0.65em; font-size: 0.65em;
z-index: 65535; z-index: 65535;
font-family: 'DejaVuSansMono', Verdana, Helvetica, Arial, sans-serif; font-family: 'DejaVuSansMono', Verdana, Helvetica, Arial, sans-serif;
background-image: linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
} }
/*ul.bebop-tree li a[type="control"] { /*ul.bebop-tree li a[type="control"] {
@ -1964,7 +1964,7 @@ span#quickLinksCascade {
} }
.wysiwg div.image.center { .wysiwg div.image.center {
text-align: center; text-align: center;
} }
.wysiwg div.image.center span.caption { .wysiwg div.image.center span.caption {
@ -1978,35 +1978,60 @@ span#quickLinksCascade {
white-space: pre; white-space: pre;
} }
button.pagemodels.addbutton { button.pagemodeleditor.addbutton {
border: none; border: none;
border-radius: 0.25em; border-radius: 0.25em;
background-color: #383838; background-color: #383838;
color: #fff; color: #fff;
padding: 0.2em 0.33em; padding: 0.2em 0.33em;
} }
button.pagemodels.addbutton > span { button.pagemodeleditor.addbutton > span {
border-right: 1px solid #eee; border-right: 1px solid #eee;
font-weight: bold; font-weight: bold;
padding-right: 0.2em; padding-right: 0.2em;
} }
div.pageModelsList { div.pagemodeleditor.pageModelsList {
margin-top: 0.66em; margin-top: 0.66em;
margin-bottom: 0.66em; margin-bottom: 0.66em;
border-top: 1px solid #0776A0; border-top: 1px solid #0776A0;
padding-top: 0.66em; padding-top: 0.66em;
border-bottom: 1px solid #0776A0; border-bottom: 1px solid #0776A0;
padding-bottom: 0.66em; 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;
}