tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

MINOR: rewrote CSS for fieldeditor to make it more maintainable

Browse Source
This commit is contained in:
Will Rossiter 2009-04-21 05:10:39 +00:00
parent e429137bb8
commit 83f827f006
7 changed files with 135 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
code/editor/EditableFormHeading.php
View File

@ -6,10 +6,6 @@
*/ */
class EditableFormHeading extends EditableFormField { class EditableFormHeading extends EditableFormField {
static $db = array(
'Level' => 'Varchar(1)'
);
static $singular_name = 'Form heading'; static $singular_name = 'Form heading';
static $plural_name = 'Form headings'; static $plural_name = 'Form headings';

1
code/editor/EditableTextField.php
View File

@ -75,6 +75,7 @@ class EditableTextField extends EditableFormField {
return $this->createField( true ); return $this->createField( true );
} }
function createField( $asFilter = false ) { function createField( $asFilter = false ) {
if( $this->Rows == 1 ) if( $this->Rows == 1 )
return new TextField( $this->Name, $this->Title, ( $asFilter ) ? "" : $this->getField('Default'), $this->MaxLength); return new TextField( $this->Name, $this->Title, ( $asFilter ) ? "" : $this->getField('Default'), $this->MaxLength);

11
code/editor/FieldEditor.php
View File

@ -67,11 +67,12 @@ class FieldEditor extends FormField {
// get the nice title and strip out field // get the nice title and strip out field
$niceTitle = trim(str_ireplace("Field", "", eval("return $title::\$singular_name;"))); $niceTitle = trim(str_ireplace("Field", "", eval("return $title::\$singular_name;")));
$title = trim(str_ireplace("Editable", "", $title)); $title = trim(str_ireplace("Editable", "", $title));
if($title != 'MultipleOptionField') {
$output->push(new ArrayData(array( $output->push(new ArrayData(array(
'ClassName' => $title, 'ClassName' => $title,
'Title' => "$niceTitle" 'Title' => "$niceTitle"
))); )));
}
} }
return $output; return $output;
} }

289
css/FieldEditor.css
View File

@ -1,211 +1,122 @@
* { /**
font-family: Arial, Helvetica, sans-serif; * User Defined Form Builder CSS
font-size: 10px; *
*/
/* Add a Field Menu
---------------------------------------- */
.MenuHolder {
color: #999;
} }
.MenuHolder ul {
div.FieldEditor { background: #e7e7e7;
border: 1px solid #CCCCCC; border: 1px solid #c6c6c6;
padding: 0px; padding: 8px;
}
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 li {
div.FieldEditor ul.Menu li { display: inline;
background-color: transparent; font-size: 11px;
} padding: 2px 0;
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 a {
div.FieldEditor div.FormOptions div.optionset li { padding: 5px 4px 3px 4px;
display: block; font-weight: bold;
} border: 1px solid transparent;
text-decoration: none;
div.FieldEditor div.FormOptions div.optionset li label { }
float: none !important; .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 { /* Options / Settings Area
border: 0; ---------------------------------------- */
.FormOptions {
padding: 10px 0 0 0;
} }
div.FieldEditor .MenuHolder ul li { /* Field Listing
display: inline; ---------------------------------------- */
}
div.FieldEditor ul a {
padding: 3px;
}
div.FieldEditor ul a:hover {
background-color: #CCCCCC;
}
/*********************************************************************
* EditableFormField - Default class for all editable form fields
********************************************************************/
#Fields_fields { #Fields_fields {
padding: 10px 0; 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 { #Fields_fields .EditableFormField {
display: none; margin: 2px;
margin: 0px; padding: 3px;
border-top: 1px dotted #ccc;
overflow: hidden;
} }
#Fields_fields .EditableFormField * {
.EditableFormField div.FieldInfo {
margin: 0px;
padding-right: -3px;
}
.EditableFormField div.FieldInfo * {
display: inline; display: inline;
margin-right: 3px;
margin-left: 0px;
vertical-align: middle; vertical-align: middle;
} }
#Fields_fields .EditableFormField .fieldHandler,
.EditableFormField div.FieldInfo input, #Fields_fields .EditableFormField .handle {
.EditableFormField div.FieldDefault input { 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; width: 250px;
margin-left: 0px; margin-left: 0px;
} }
.EditableFormField div.extraOptions { /** Field Options **/
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;
}
#right #Form_EditForm li.EditableFormFieldOption a { #Fields_fields .EditableFormField div.extraOptions {
width: 16px; display: block;
} margin: 3px 0px 3px 57px;
background-color: #eee;
#right #Form_EditForm li.EditableFormFieldOption input.text { padding: 3px;
width: 170px !important; clear: both;
}
#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;
}
/* CHECKBOX */
#Fields_fields .EditableFormField .checkbox { }
#Fields_fields .EditableFormField .checkbox input {
float: left;
margin: 0 8px 0 0;
}
/* Need first rule in order to overwrite */ #Fields_fields .EditableFormField div.hidden {
#right #Form_EditForm li.AddDropdownOption input.text { display: none;
width: 170px !important; }
margin-left: 0px;
} /* Holder to prevent form from collapsing */
#Fields_fields .removed-form-field {
height: 40px;
display: block;
overflow: hidden;
}

5
javascript/UserForm.js
View File

@ -69,14 +69,19 @@
* currently have it open * currently have it open
*/ */
$(".EditableFormField .moreOptions").livequery('click',function() { $(".EditableFormField .moreOptions").livequery('click',function() {
var parentID = $(this).parents(".EditableFormField"); var parentID = $(this).parents(".EditableFormField");
if(parentID) { if(parentID) {
var extraOptions = parentID.children(".extraOptions"); var extraOptions = parentID.children(".extraOptions");
if(extraOptions) { if(extraOptions) {
if(extraOptions.hasClass('hidden')) { if(extraOptions.hasClass('hidden')) {
$(this).html("Hide More Options");
$(this).addClass("showing");
extraOptions.removeClass('hidden').show(); extraOptions.removeClass('hidden').show();
} }
else { else {
$(this).html("More Options");
$(this).removeClass("showing");
extraOptions.addClass('hidden').hide(); extraOptions.addClass('hidden').hide();
} }
} }

30
templates/EditableFormField.ss
View File

@ -1,31 +1,27 @@
<li class="$ClassName EditableFormField" id="$Name.Attr EditableItem_$Pos"> <li class="$ClassName EditableFormField" id="$Name.Attr EditableItem_$Pos">
<div class="FieldInfo"> <div class="fieldInfo">
<% if isReadonly %> <% if isReadonly %>
<img class="fieldHandler" src="sapphire/images/drag_readonly.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" /> <img class="fieldHandler" src="sapphire/images/drag_readonly.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" />
<% else %> <% else %>
<img class="fieldHandler" src="sapphire/images/drag.gif" alt="<% _t('DRAG', 'Drag to rearrange order of fields') %>" /> <img class="fieldHandler" src="sapphire/images/drag.gif" alt="<% _t('DRAG', 'Drag to rearrange order of fields') %>" />
<% end_if %> <% end_if %>
<img class="icon" src="$Icon" alt="$ClassName" title="$singular_name" /> <img class="icon" src="$Icon" alt="$ClassName" title="$singular_name" />
$TitleField $TitleField
</div>
<div class="fieldActions">
<% if showExtraOptions %> <% if showExtraOptions %>
<a class="moreOptions" href="#" title="<% _t('MORE', 'More options') %>"> <a class="moreOptions" href="#" title="<% _t('MOREOPTIONS', 'More Options') %>"><% _t('MOREOPTIONS','More Options') %></a>
<img src="cms/images/edit.gif" alt="<% _t('MORE', 'More options') %>" />
</a>
<% end_if %> <% end_if %>
<% if isReadonly %> <% if CanDelete %>
<img src="cms/images/locked.gif" alt="<% _t('LOCKED', 'These fields cannot be modified') %>" /> <a class="delete" href="#" title="<% _t('DELETE', 'Delete') %>">
<% else %> <% _t('DELETE', 'Delete') %>
<% if CanDelete %> </a>
<a class="delete" href="#" title="<% _t('DELETE', 'Delete this field') %>"><img src="cms/images/delete.gif" alt="<% _t('DELETE', 'Delete this field') %>" /></a> <% end_if %>
<% else %> </div>
<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 showExtraOptions %> <% if showExtraOptions %>
<div class="extraOptions hidden" id="$Name.Attr-extraOptions"> <div class="extraOptions hidden" id="$Name.Attr-extraOptions">

18
templates/FieldEditor.ss
View File

@ -1,7 +1,7 @@
<div class="FieldEditor <% if isReadonly %>readonly<% end_if %>" id="Fields" name="$Name.Attr"> <div class="FieldEditor <% if isReadonly %>readonly<% end_if %>" id="Fields" name="$Name.Attr">
<div class="MenuHolder"> <div class="MenuHolder">
<ul class="TopMenu Menu"> <ul class="TopMenu Menu">
<li><% _t('ADD', 'Add') %>:</li> <li class="addField"><% _t('ADD', 'Add') %>:</li>
<% control CreatableFields %> <% control CreatableFields %>
<li><a href="#" title="<% _t('ADD', 'Add') %> $Title" id="$ClassName">$Title</a></li> <li><a href="#" title="<% _t('ADD', 'Add') %> $Title" id="$ClassName">$Title</a></li>
<% end_control %> <% end_control %>
@ -19,16 +19,18 @@
</ul> </ul>
</div> </div>
<div class="MenuHolder"> <div class="MenuHolder">
<ul class="BottomMenu Menu"> <ul class="TopMenu Menu">
<li><% _t('ADD', 'Add') %>:</li> <li class="addField"><% _t('ADD', 'Add') %>:</li>
<% control CreatableFields %> <% control CreatableFields %>
<li><a href="#" title="<% _t('ADD', 'Add') %> $Title" id="$ClassName">$Title</a></li> <li><a href="#" title="<% _t('ADD', 'Add') %> $Title" id="$ClassName">$Title</a></li>
<% end_control %> <% end_control %>
</ul> </ul>
<div class="FormOptions"> </div>
<% control FormOptions %>
$FieldHolder <div class="FormOptions">
<% end_control %> <h3>Form Options</h3>
</div> <% control FormOptions %>
$FieldHolder
<% end_control %>
</div> </div>
</div> </div>