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 {
static $db = array(
'Level' => 'Varchar(1)'
);
static $singular_name = 'Form heading';
static $plural_name = 'Form headings';

1
code/editor/EditableTextField.php
View File

@ -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);

11
code/editor/FieldEditor.php
View File

@ -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;
}

277
css/FieldEditor.css
View File

@ -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;
}
#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;
}
.EditableFormField div.FieldInfo input,
.EditableFormField div.FieldDefault input {
#Fields_fields .EditableFormField input {
width: 250px;
margin-left: 0px;
}
.EditableFormField div.extraOptions {
display: none;
margin: 3px 0px 3px 57px;
background-color: #EEEEEE;
padding: 3px;
}
/** Field Options **/
/*********************************************************************
* EditableDateField
********************************************************************/
#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;
}
div.EditableDateField div.FieldDefault input {
width: 2em;
}
/* CHECKBOX */
#Fields_fields .EditableFormField .checkbox { }
div.EditableDateField div.FieldDefault input.year {
width: 4em;
}
#Fields_fields .EditableFormField .checkbox input {
float: left;
margin: 0 8px 0 0;
}
/*********************************************************************
* 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;
#Fields_fields .EditableFormField div.hidden {
display: none;
}
#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;
}
/* Need first rule in order to overwrite */
#right #Form_EditForm li.AddDropdownOption input.text {
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
*/
$(".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();
}
}

24
templates/EditableFormField.ss
View File

@ -1,5 +1,5 @@
<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 %>
@ -9,23 +9,19 @@
<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">

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="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>