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

Merge pull request #30 from tractorcow/pulls/formeditor-styles

Browse Source 
Update form editor colours
This commit is contained in:
David Craig 2015-08-14 15:38:43 +12:00
commit 766555928e
13 changed files with 257 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
code/extensions/UserFormFieldEditorExtension.php
View File

@ -32,6 +32,8 @@ class UserFormFieldEditorExtension extends DataExtension {
* @return GridField
*/
public function getFieldEditorGrid() {
Requirements::javascript(USERFORMS_DIR . '/javascript/FieldEditor.js');
$fields = $this->owner->Fields();
$this->createInitialFormStep(true);
@ -66,7 +68,6 @@ class UserFormFieldEditorExtension extends DataExtension {
new GridFieldDeleteAction(),
new GridFieldToolbarHeader(),
new GridFieldOrderableRows('Sort'),
new GridState_Component(),
new GridFieldDetailForm()
);
@ -75,7 +76,7 @@ class UserFormFieldEditorExtension extends DataExtension {
_t('UserDefinedForm.FIELDS', 'Fields'),
$fields,
$config
);
)->addExtraClass('uf-field-editor');
return $fieldEditor;
}

3
code/model/UserDefinedForm.php
View File

@ -170,15 +170,12 @@ SQL;
$config->addComponent($filter = new UserFormsGridFieldFilterHeader());
$config->addComponent(new GridFieldDataColumns());
$config->addComponent(new GridFieldEditButton());
$config->addComponent(new GridState_Component());
$config->addComponent(new GridFieldDeleteAction());
$config->addComponent(new GridFieldPageCount('toolbar-header-right'));
$config->addComponent($pagination = new GridFieldPaginator(25));
$config->addComponent(new GridFieldDetailForm());
$config->addComponent($export = new GridFieldExportButton());
$config->addComponent($print = new GridFieldPrintButton());
Requirements::javascript(USERFORMS_DIR . '/javascript/Gridfield.js');
/**
* Support for {@link https://github.com/colymba/GridFieldBulkEditingTools}

12
code/model/editableformfields/EditableFieldGroup.php
View File

@ -31,11 +31,15 @@ class EditableFieldGroup extends EditableFormField {
}
public function getCMSTitle() {
$title = $this->getFieldNumber()
?: $this->Title
?: 'group';
return _t(
'EditableFieldGroupEnd.FIELD_GROUP_START',
'Start of {group}',
'Group {group}',
array(
'group' => $this->Title ?: 'group'
'group' => $title
)
);
}
@ -63,8 +67,8 @@ class EditableFieldGroup extends EditableFormField {
}
// if this field has an extra class
if($field->ExtraClass) {
$field->addExtraClass($field->ExtraClass);
if($this->ExtraClass) {
$field->addExtraClass($this->ExtraClass);
}
}

4
code/model/editableformfields/EditableFieldGroupEnd.php
View File

@ -29,9 +29,9 @@ class EditableFieldGroupEnd extends EditableFormField {
$group = $this->Group();
return _t(
'EditableFieldGroupEnd.FIELD_GROUP_END',
'End of {group}',
'{group} end',
array(
'group' => ($group && $group->exists() && $group->Title) ? $group->Title : 'group'
'group' => ($group && $group->exists()) ? $group->CMSTitle : 'Group'
)
);
}

46
code/model/editableformfields/EditableFormField.php
View File

@ -237,8 +237,7 @@ class EditableFormField extends DataObject {
new GridFieldButtonRow(),
new GridFieldToolbarHeader(),
new GridFieldAddNewInlineButton(),
new GridFieldDeleteAction(),
new GridState_Component()
new GridFieldDeleteAction()
);
$fields->addFieldsToTab('Root.DisplayRules', array(
@ -470,6 +469,45 @@ class EditableFormField extends DataObject {
return Convert::raw2xml($this->Title);
}
/**
* Find the numeric indicator (1.1.2) that represents it's nesting value
*
* Only useful for fields attached to a current page, and that contain other fields such as pages
* or groups
*
* @return string
*/
public function getFieldNumber() {
// Check if exists
if(!$this->exists()) {
return null;
}
// Check parent
$form = $this->Parent();
if(!$form || !$form->exists() || !($fields = $form->Fields())) {
return null;
}
$prior = 0; // Number of prior group at this level
$stack = array(); // Current stack of nested groups, where the top level = the page
foreach($fields->map('ID', 'ClassName') as $id => $className) {
if($className === 'EditableFormStep') {
$priorPage = empty($stack) ? $prior : $stack[0];
$stack = array($priorPage + 1);
$prior = 0;
} elseif($className === 'EditableFieldGroup') {
$stack[] = $prior + 1;
$prior = 0;
} elseif($className === 'EditableFieldGroupEnd') {
$prior = array_pop($stack);
}
if($id == $this->ID) {
return implode('.', $stack);
}
}
return null;
}
public function getCMSTitle() {
return $this->i18n_singular_name() . ' (' . $this->Title . ')';
}
@ -560,8 +598,8 @@ class EditableFormField extends DataObject {
}
// if this field has an extra class
if($field->ExtraClass) {
$field->addExtraClass($field->ExtraClass);
if($this->ExtraClass) {
$field->addExtraClass($this->ExtraClass);
}
}

4
code/model/editableformfields/EditableFormHeading.php
View File

@ -71,8 +71,8 @@ class EditableFormHeading extends EditableFormField {
$field->setRightTitle(Convert::raw2xml($this->RightTitle));
}
// if this field has an extra class
if($field->ExtraClass) {
$field->addExtraClass($field->ExtraClass);
if($this->ExtraClass) {
$field->addExtraClass($this->ExtraClass);
}
}

21
code/model/editableformfields/EditableFormStep.php
View File

@ -34,6 +34,7 @@ class EditableFormStep extends EditableFormField {
*/
public function getFormField() {
$field = UserFormsStepField::create()
->setName($this->Name)
->setTitle($this->EscapedTitle);
$this->doUpdateFormField($field);
return $field;
@ -41,8 +42,8 @@ class EditableFormStep extends EditableFormField {
protected function updateFormField($field) {
// if this field has an extra class
if($field->ExtraClass) {
$field->addExtraClass($field->ExtraClass);
if($this->ExtraClass) {
$field->addExtraClass($this->ExtraClass);
}
}
@ -61,10 +62,16 @@ class EditableFormStep extends EditableFormField {
}
public function getCMSTitle() {
$title = $this->i18n_singular_name();
if($this->Title) {
$title .= ' (' . $this->Title . ')';
}
return $title;
$title = $this->getFieldNumber()
?: $this->Title
?: '';
return _t(
'EditableFormStep.STEP_TITLE',
'Page {page}',
array(
'page' => $title
)
);
}
}

3
code/model/editableformfields/EditableMultipleOptionField.php
View File

@ -56,8 +56,7 @@ class EditableMultipleOptionField extends EditableFormField {
$editableColumns,
new GridFieldButtonRow(),
new GridFieldAddNewInlineButton(),
new GridFieldDeleteAction(),
new GridState_Component()
new GridFieldDeleteAction()
);
$optionsGrid = GridField::create(

1
code/model/recipients/UserDefinedForm_EmailRecipient.php
View File

@ -88,7 +88,6 @@ class UserDefinedForm_EmailRecipient extends DataObject {
new GridFieldButtonRow('before'),
new GridFieldToolbarHeader(),
new GridFieldAddNewInlineButton(),
new GridState_Component(),
new GridFieldDeleteAction(),
$columns = new GridFieldEditableColumns()
);

61
css/UserForm_cms.css
View File

@ -1,28 +1,65 @@
/**
* Styles for cms
*/
.cms .ss-gridfield > div.ss-gridfield-buttonrow-before {
.cms .uf-field-editor > div.ss-gridfield-buttonrow-before {
margin-bottom: 10px;
overflow: auto;
}
.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover {
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item:hover {
background: white;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td {
border-right-width: 0;
border-bottom: 1px solid #EEE;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td:last-child {
border-right-width: 1px;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup:hover {
background: #f2f9fd;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup td {
border-bottom: 1px solid #CCC;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle {
background: #BEE0F8;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .handle {
background: #99CEF4;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .handle {
background: #89BEF4;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover {
background: #dae2e7;
}
.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] label {
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] label {
font-weight: bold;
color: #444;
color: black;
font-size: 1.1em;
}
.cms table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup'], .cms table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup']:hover {
background: #E7EFF4;
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] td {
border-top: 1px inset #c9e6f9;
}
.cms table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup'] label {
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'].inFieldGroup-level-2 td {
border-top-color: #a8d7f5;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'].inFieldGroup-level-3 td {
border-top-color: #94cef3;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] label {
font-weight: bold;
color: #444;
}
.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] .col-Title input {
display: none;
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] td {
border-bottom: 1px outset #c9e6f9;
}
.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder,
.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle {
background: #E7EFF4;
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-2 td {
border-bottom-color: #a8d7f5;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-3 td {
border-bottom-color: #94cef3;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label {
color: #777;
}

43
javascript/FieldEditor.js Normal file
View File

@ -0,0 +1,43 @@
/**
* form builder behaviour.
*/
(function($) {
$.entwine('ss', function($) {
$(".uf-field-editor tbody").entwine({
onmatch: function() {
var i, thisLevel, depth = 0;
this._super();
// Loop through all rows and set necessary styles
this.find('.ss-gridfield-item').each(function() {
switch($(this).data('class')) {
case 'EditableFormStep': {
depth = 0;
return;
}
case 'EditableFieldGroup': {
thisLevel = ++depth;
break;
}
case 'EditableFieldGroupEnd': {
thisLevel = depth--;
break;
}
default: {
thisLevel = depth;
}
}
$(this).toggleClass('inFieldGroup', thisLevel > 0);
for(i = 1; i <= 5; i++) {
$(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i);
}
});
},
onunmatch: function () {
this._super();
}
});
});
}(jQuery));

23
javascript/Gridfield.js
View File

@ -1,23 +0,0 @@
/**
* form builder behaviour.
*/
(function($) {
$.entwine('ss', function($) {
$(".ss-gridfield-orderable tbody").entwine({
onmatch: function() {
this._super();
this.find('.ss-gridfield-item')
.removeClass('inFieldGroup');
this.find('.ss-gridfield-item[data-class="EditableFieldGroup"]')
.nextUntil('.ss-gridfield-item[data-class="EditableFieldGroupEnd"]')
.addClass('inFieldGroup');
},
onunmatch: function () {
this._super();
}
});
});
}(jQuery));

122
scss/UserForm_cms.scss
View File

@ -3,44 +3,108 @@
*/
.cms {
.ss-gridfield > div.ss-gridfield-buttonrow-before {
margin-bottom: 10px;
overflow: auto;
}
table.ss-gridfield-table {
.ss-gridfield-item[data-class='EditableFormStep'] {
&, &:hover {
background: #dae2e7;
}
label {
font-weight: bold;
color: #444;
font-size: 1.1em;
}
.uf-field-editor {
> div.ss-gridfield-buttonrow-before {
margin-bottom: 10px;
overflow: auto;
}
// Row styles
table.ss-gridfield-table {
.ss-gridfield-item[data-class^='EditableFieldGroup'] {
&, &:hover {
background: #E7EFF4;
// Standard rows
.ss-gridfield-item {
&, &:hover {
background: white;
}
td {
border-right-width: 0;
border-bottom: 1px solid #EEE;
&:last-child {
border-right-width: 1px;
}
}
}
label {
font-weight: bold;
.ss-gridfield-item.inFieldGroup {
&, &:hover {
background: #f2f9fd;
}
td {
// border style for darker background
border-bottom: 1px solid #CCC;
}
.col-reorder, .handle {
// level 1
background: #BEE0F8;
}
&.inFieldGroup-level-2 {
.col-reorder, .handle {
background: #99CEF4;
}
}
&.inFieldGroup-level-3 {
.col-reorder, .handle {
background: #89BEF4;
}
}
}
}
.ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
.col-Title input {
display: none;
.ss-gridfield-item[data-class='EditableFormStep'] {
&, &:hover {
background: #dae2e7;
}
label {
font-weight: bold;
color: black;
font-size: 1.1em;
}
}
}
.ss-gridfield-item.inFieldGroup {
.col-reorder,
.handle {
background: #E7EFF4;
.ss-gridfield-item[data-class='EditableFieldGroup'] {
td {
border-top: 1px inset #c9e6f9;
}
&.inFieldGroup-level-2 td {
border-top-color: #a8d7f5;
}
&.inFieldGroup-level-3 td {
border-top-color: #94cef3;
}
label {
font-weight: bold;
color: #444;
}
}
.ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
td {
border-bottom: 1px outset #c9e6f9;
}
&.inFieldGroup-level-2 td {
border-bottom-color: #a8d7f5;
}
&.inFieldGroup-level-3 td {
border-bottom-color: #94cef3;
}
label {
color: #777;
}
}
}
}