From a1d7feedae9244cb310451050319ad0536f57368 Mon Sep 17 00:00:00 2001 From: Damian Mooyman Date: Fri, 14 Aug 2015 14:51:42 +1200 Subject: [PATCH] Update form editor colours --- .../UserFormFieldEditorExtension.php | 5 +- code/model/UserDefinedForm.php | 3 - .../editableformfields/EditableFieldGroup.php | 12 +- .../EditableFieldGroupEnd.php | 4 +- .../editableformfields/EditableFormField.php | 46 ++++++- .../EditableFormHeading.php | 4 +- .../editableformfields/EditableFormStep.php | 21 ++- .../EditableMultipleOptionField.php | 3 +- .../UserDefinedForm_EmailRecipient.php | 1 - css/UserForm_cms.css | 61 +++++++-- javascript/FieldEditor.js | 43 ++++++ javascript/Gridfield.js | 23 ---- scss/UserForm_cms.scss | 122 +++++++++++++----- 13 files changed, 257 insertions(+), 91 deletions(-) create mode 100644 javascript/FieldEditor.js delete mode 100644 javascript/Gridfield.js diff --git a/code/extensions/UserFormFieldEditorExtension.php b/code/extensions/UserFormFieldEditorExtension.php index 8e6f47e..505c305 100644 --- a/code/extensions/UserFormFieldEditorExtension.php +++ b/code/extensions/UserFormFieldEditorExtension.php @@ -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; } diff --git a/code/model/UserDefinedForm.php b/code/model/UserDefinedForm.php index 1286966..4c6e30b 100755 --- a/code/model/UserDefinedForm.php +++ b/code/model/UserDefinedForm.php @@ -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} diff --git a/code/model/editableformfields/EditableFieldGroup.php b/code/model/editableformfields/EditableFieldGroup.php index 8ccd735..55d8d0c 100644 --- a/code/model/editableformfields/EditableFieldGroup.php +++ b/code/model/editableformfields/EditableFieldGroup.php @@ -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); } } diff --git a/code/model/editableformfields/EditableFieldGroupEnd.php b/code/model/editableformfields/EditableFieldGroupEnd.php index 51afe3c..cb0490a 100644 --- a/code/model/editableformfields/EditableFieldGroupEnd.php +++ b/code/model/editableformfields/EditableFieldGroupEnd.php @@ -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' ) ); } diff --git a/code/model/editableformfields/EditableFormField.php b/code/model/editableformfields/EditableFormField.php index ece9c34..e41bf48 100755 --- a/code/model/editableformfields/EditableFormField.php +++ b/code/model/editableformfields/EditableFormField.php @@ -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); } } diff --git a/code/model/editableformfields/EditableFormHeading.php b/code/model/editableformfields/EditableFormHeading.php index c23b01e..627d25d 100755 --- a/code/model/editableformfields/EditableFormHeading.php +++ b/code/model/editableformfields/EditableFormHeading.php @@ -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); } } diff --git a/code/model/editableformfields/EditableFormStep.php b/code/model/editableformfields/EditableFormStep.php index a89face..2ca93e8 100644 --- a/code/model/editableformfields/EditableFormStep.php +++ b/code/model/editableformfields/EditableFormStep.php @@ -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 + ) + ); } } diff --git a/code/model/editableformfields/EditableMultipleOptionField.php b/code/model/editableformfields/EditableMultipleOptionField.php index 9574f3f..68dd919 100644 --- a/code/model/editableformfields/EditableMultipleOptionField.php +++ b/code/model/editableformfields/EditableMultipleOptionField.php @@ -56,8 +56,7 @@ class EditableMultipleOptionField extends EditableFormField { $editableColumns, new GridFieldButtonRow(), new GridFieldAddNewInlineButton(), - new GridFieldDeleteAction(), - new GridState_Component() + new GridFieldDeleteAction() ); $optionsGrid = GridField::create( diff --git a/code/model/recipients/UserDefinedForm_EmailRecipient.php b/code/model/recipients/UserDefinedForm_EmailRecipient.php index 5757b5e..b42b2c3 100644 --- a/code/model/recipients/UserDefinedForm_EmailRecipient.php +++ b/code/model/recipients/UserDefinedForm_EmailRecipient.php @@ -88,7 +88,6 @@ class UserDefinedForm_EmailRecipient extends DataObject { new GridFieldButtonRow('before'), new GridFieldToolbarHeader(), new GridFieldAddNewInlineButton(), - new GridState_Component(), new GridFieldDeleteAction(), $columns = new GridFieldEditableColumns() ); diff --git a/css/UserForm_cms.css b/css/UserForm_cms.css index 0280219..8c2ff75 100644 --- a/css/UserForm_cms.css +++ b/css/UserForm_cms.css @@ -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; } diff --git a/javascript/FieldEditor.js b/javascript/FieldEditor.js new file mode 100644 index 0000000..5c313c5 --- /dev/null +++ b/javascript/FieldEditor.js @@ -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)); diff --git a/javascript/Gridfield.js b/javascript/Gridfield.js deleted file mode 100644 index ffedf66..0000000 --- a/javascript/Gridfield.js +++ /dev/null @@ -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)); diff --git a/scss/UserForm_cms.scss b/scss/UserForm_cms.scss index 52b2dad..233314c 100644 --- a/scss/UserForm_cms.scss +++ b/scss/UserForm_cms.scss @@ -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; + } } } }