MINOR: rewrote CSS for fieldeditor to make it more maintainable
This commit is contained in:
Will Rossiter
parent
e429137bb8
commit
83f827f006
|
|
@ -6,10 +6,6 @@
|
|||
*/
|
||||
class EditableFormHeading extends EditableFormField {
|
||||
|
||||
static $db = array(
|
||||
'Level' => 'Varchar(1)'
|
||||
);
|
||||
|
||||
static $singular_name = 'Form heading';
|
||||
|
||||
static $plural_name = 'Form headings';
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ class EditableTextField extends EditableFormField {
|
|||
return $this->createField( true );
|
||||
}
|
||||
|
||||
|
||||
function createField( $asFilter = false ) {
|
||||
if( $this->Rows == 1 )
|
||||
return new TextField( $this->Name, $this->Title, ( $asFilter ) ? "" : $this->getField('Default'), $this->MaxLength);
|
||||
|
|
|
|||
|
|
@ -67,11 +67,12 @@ class FieldEditor extends FormField {
|
|||
// get the nice title and strip out field
|
||||
$niceTitle = trim(str_ireplace("Field", "", eval("return $title::\$singular_name;")));
|
||||
$title = trim(str_ireplace("Editable", "", $title));
|
||||
|
||||
$output->push(new ArrayData(array(
|
||||
'ClassName' => $title,
|
||||
'Title' => "$niceTitle"
|
||||
)));
|
||||
if($title != 'MultipleOptionField') {
|
||||
$output->push(new ArrayData(array(
|
||||
'ClassName' => $title,
|
||||
'Title' => "$niceTitle"
|
||||
)));
|
||||
}
|
||||
}
|
||||
return $output;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,211 +1,122 @@
|
|||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
/**
|
||||
* User Defined Form Builder CSS
|
||||
*
|
||||
*/
|
||||
|
||||
/* Add a Field Menu
|
||||
---------------------------------------- */
|
||||
.MenuHolder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
div.FieldEditor {
|
||||
border: 1px solid #CCCCCC;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div.FieldEditor div.MenuHolder {
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.FieldEditor div.FormOptions div.CompositeField {
|
||||
margin-left: 4em;
|
||||
}
|
||||
|
||||
div.FieldEditor div.FormOptions label.left {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.FieldEditor div.FormOptions label.right,
|
||||
div.FieldEditor div.FormOptions label.CustomActionLabel {
|
||||
margin-left: 0em;
|
||||
float: none;
|
||||
line-height: auto;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.FieldEditor input.checkbox {
|
||||
width: auto !important;
|
||||
.MenuHolder ul {
|
||||
background: #e7e7e7;
|
||||
border: 1px solid #c6c6c6;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div.FieldEditor ul.Menu li {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div.FieldEditor div.FieldListHolder {
|
||||
height: 75%;
|
||||
}
|
||||
div.FieldEditor div.FieldList {
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/*div.FieldEditor div.FormOptions {
|
||||
background-color: #EEEEEE;
|
||||
position: relative;
|
||||
float: left;
|
||||
width:100%;
|
||||
}*/
|
||||
|
||||
div.FieldEditor div.FormOptions div.field {
|
||||
position: relative;
|
||||
.MenuHolder li {
|
||||
display: inline;
|
||||
font-size: 11px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
div.FieldEditor div.FormOptions div.optionset li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.FieldEditor div.FormOptions div.optionset li label {
|
||||
float: none !important;
|
||||
.MenuHolder li a {
|
||||
padding: 5px 4px 3px 4px;
|
||||
font-weight: bold;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
.MenuHolder li a:hover {
|
||||
background: #f4f4f4;
|
||||
border: 1px solid #c6c6c6;
|
||||
}
|
||||
.MenuHolder li.addField {
|
||||
background: url(../../cms/images/add.gif) no-repeat center left;
|
||||
padding-left: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.DragEditable {
|
||||
border: 0;
|
||||
/* Options / Settings Area
|
||||
---------------------------------------- */
|
||||
.FormOptions {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
div.FieldEditor .MenuHolder ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.FieldEditor ul a {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
div.FieldEditor ul a:hover {
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
|
||||
/*********************************************************************
|
||||
* EditableFormField - Default class for all editable form fields
|
||||
********************************************************************/
|
||||
/* Field Listing
|
||||
---------------------------------------- */
|
||||
#Fields_fields {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.fieldHandler,
|
||||
.handle {
|
||||
cursor: move;
|
||||
}
|
||||
.EditableFormField {
|
||||
margin: 2px;
|
||||
padding: 3px;
|
||||
border-top: 1px dotted #CCCCCC;
|
||||
}
|
||||
.removed-form-field {
|
||||
height: 40px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.EditableFormField.mouseOver {
|
||||
background-color: #f3ef9d;
|
||||
}
|
||||
|
||||
.EditableFormField div.hidden {
|
||||
display: none;
|
||||
margin: 0px;
|
||||
#Fields_fields .EditableFormField {
|
||||
margin: 2px;
|
||||
padding: 3px;
|
||||
border-top: 1px dotted #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.EditableFormField div.FieldInfo {
|
||||
margin: 0px;
|
||||
padding-right: -3px;
|
||||
}
|
||||
|
||||
.EditableFormField div.FieldInfo * {
|
||||
#Fields_fields .EditableFormField * {
|
||||
display: inline;
|
||||
margin-right: 3px;
|
||||
margin-left: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.EditableFormField div.FieldInfo input,
|
||||
.EditableFormField div.FieldDefault input {
|
||||
#Fields_fields .EditableFormField .fieldHandler,
|
||||
#Fields_fields .EditableFormField .handle {
|
||||
cursor: move;
|
||||
}
|
||||
#Fields_fields .EditableFormField .fieldInfo {
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#Fields_fields .EditableFormField .fieldActions {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#Fields_fields .EditableFormField .fieldActions a {
|
||||
padding: 0 5px 5px 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#Fields_fields .EditableFormField .moreOptions {
|
||||
background: url(../../cms/images/edit.gif) no-repeat top left;
|
||||
}
|
||||
#Fields_fields .EditableFormField .moreOptions.showing {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
#Fields_fields .EditableFormField .delete {
|
||||
background: url(../../cms/images/delete.gif) no-repeat top left;
|
||||
}
|
||||
|
||||
#Fields_fields .EditableFormField input {
|
||||
width: 250px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.EditableFormField div.extraOptions {
|
||||
display: none;
|
||||
margin: 3px 0px 3px 57px;
|
||||
background-color: #EEEEEE;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/*********************************************************************
|
||||
* EditableDateField
|
||||
********************************************************************/
|
||||
|
||||
div.EditableDateField div.FieldDefault input {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
div.EditableDateField div.FieldDefault input.year {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
/*********************************************************************
|
||||
* EditableEmailField
|
||||
********************************************************************/
|
||||
|
||||
/*********************************************************************
|
||||
* EditableDropdown
|
||||
********************************************************************/
|
||||
|
||||
#right #Form_EditForm div.EditableMultiOptionFormField div.FieldDefault ul.EditableDropdownOptions {
|
||||
margin: 0px;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#right #Form_EditForm div.EditableDropdown select {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#right #Form_EditForm div.EditableDropdown select,
|
||||
#right #Form_EditForm div.EditableMultiOptionFormField ul.EditableDropdownOptions {
|
||||
width: 250px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#right #Form_EditForm li.EditableFormFieldOption {
|
||||
display: block;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
|
||||
#right #Form_EditForm li.EditableFormFieldOption * {
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
}
|
||||
/** Field Options **/
|
||||
|
||||
#right #Form_EditForm li.EditableFormFieldOption a {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#right #Form_EditForm li.EditableFormFieldOption input.text {
|
||||
width: 170px !important;
|
||||
}
|
||||
|
||||
#right #Form_EditForm li.EditableFormFieldOption input.radio,
|
||||
#right #Form_EditForm li.EditableFormFieldOption input.checkbox {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#right #Form_EditForm li.AddDropdownOption {
|
||||
border-top: dashed 1px #7F9DB9;
|
||||
padding-left: 37px;
|
||||
height: auto;
|
||||
#Fields_fields .EditableFormField div.extraOptions {
|
||||
display: block;
|
||||
margin: 3px 0px 3px 57px;
|
||||
background-color: #eee;
|
||||
padding: 3px;
|
||||
clear: both;
|
||||
}
|
||||
#Fields_fields .EditableFormField div.extraOptions * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* CHECKBOX */
|
||||
#Fields_fields .EditableFormField .checkbox { }
|
||||
|
||||
#Fields_fields .EditableFormField .checkbox input {
|
||||
float: left;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Need first rule in order to overwrite */
|
||||
#right #Form_EditForm li.AddDropdownOption input.text {
|
||||
width: 170px !important;
|
||||
margin-left: 0px;
|
||||
}
|
||||
#Fields_fields .EditableFormField div.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Holder to prevent form from collapsing */
|
||||
#Fields_fields .removed-form-field {
|
||||
height: 40px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,14 +69,19 @@
|
|||
* currently have it open
|
||||
*/
|
||||
$(".EditableFormField .moreOptions").livequery('click',function() {
|
||||
|
||||
var parentID = $(this).parents(".EditableFormField");
|
||||
if(parentID) {
|
||||
var extraOptions = parentID.children(".extraOptions");
|
||||
if(extraOptions) {
|
||||
if(extraOptions.hasClass('hidden')) {
|
||||
$(this).html("Hide More Options");
|
||||
$(this).addClass("showing");
|
||||
extraOptions.removeClass('hidden').show();
|
||||
}
|
||||
else {
|
||||
$(this).html("More Options");
|
||||
$(this).removeClass("showing");
|
||||
extraOptions.addClass('hidden').hide();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,27 @@
|
|||
<li class="$ClassName EditableFormField" id="$Name.Attr EditableItem_$Pos">
|
||||
<div class="FieldInfo">
|
||||
<div class="fieldInfo">
|
||||
<% if isReadonly %>
|
||||
<img class="fieldHandler" src="sapphire/images/drag_readonly.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" />
|
||||
<% else %>
|
||||
<img class="fieldHandler" src="sapphire/images/drag.gif" alt="<% _t('DRAG', 'Drag to rearrange order of fields') %>" />
|
||||
<% end_if %>
|
||||
|
||||
|
||||
<img class="icon" src="$Icon" alt="$ClassName" title="$singular_name" />
|
||||
|
||||
|
||||
$TitleField
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fieldActions">
|
||||
<% if showExtraOptions %>
|
||||
<a class="moreOptions" href="#" title="<% _t('MORE', 'More options') %>">
|
||||
<img src="cms/images/edit.gif" alt="<% _t('MORE', 'More options') %>" />
|
||||
</a>
|
||||
<a class="moreOptions" href="#" title="<% _t('MOREOPTIONS', 'More Options') %>"><% _t('MOREOPTIONS','More Options') %></a>
|
||||
<% end_if %>
|
||||
|
||||
<% if isReadonly %>
|
||||
<img src="cms/images/locked.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" />
|
||||
<% else %>
|
||||
<% if CanDelete %>
|
||||
<a class="delete" href="#" title="<% _t('DELETE', 'Delete this field') %>"><img src="cms/images/delete.gif" alt="<% _t('DELETE', 'Delete this field') %>" /></a>
|
||||
<% else %>
|
||||
<img src="cms/images/locked.gif" alt="<% _t('REQUIRED', 'This field is required for this form and cannot be deleted') %>" />
|
||||
<% end_if %>
|
||||
<% end_if %>
|
||||
</div>
|
||||
<% if CanDelete %>
|
||||
<a class="delete" href="#" title="<% _t('DELETE', 'Delete') %>">
|
||||
<% _t('DELETE', 'Delete') %>
|
||||
</a>
|
||||
<% end_if %>
|
||||
</div>
|
||||
|
||||
<% if showExtraOptions %>
|
||||
<div class="extraOptions hidden" id="$Name.Attr-extraOptions">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="FieldEditor <% if isReadonly %>readonly<% end_if %>" id="Fields" name="$Name.Attr">
|
||||
<div class="MenuHolder">
|
||||
<ul class="TopMenu Menu">
|
||||
<li><% _t('ADD', 'Add') %>:</li>
|
||||
<li class="addField"><% _t('ADD', 'Add') %>:</li>
|
||||
<% control CreatableFields %>
|
||||
<li><a href="#" title="<% _t('ADD', 'Add') %> $Title" id="$ClassName">$Title</a></li>
|
||||
<% end_control %>
|
||||
|
|
@ -19,16 +19,18 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="MenuHolder">
|
||||
<ul class="BottomMenu Menu">
|
||||
<li><% _t('ADD', 'Add') %>:</li>
|
||||
<ul class="TopMenu Menu">
|
||||
<li class="addField"><% _t('ADD', 'Add') %>:</li>
|
||||
<% control CreatableFields %>
|
||||
<li><a href="#" title="<% _t('ADD', 'Add') %> $Title" id="$ClassName">$Title</a></li>
|
||||
<% end_control %>
|
||||
</ul>
|
||||
<div class="FormOptions">
|
||||
<% control FormOptions %>
|
||||
$FieldHolder
|
||||
<% end_control %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="FormOptions">
|
||||
<h3>Form Options</h3>
|
||||
<% control FormOptions %>
|
||||
$FieldHolder
|
||||
<% end_control %>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue