Update form editor colours

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

code/model/UserDefinedForm.php

@@ -170,7 +170,6 @@ 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));
@@ -178,8 +177,6 @@ SQL;
 			$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}
 			 */

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) {
+		if($this->ExtraClass) {
-			$field->addExtraClass($field->ExtraClass);
+			$field->addExtraClass($this->ExtraClass);
 		}
 	}
 

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'
 			)
 		);
 	}

code/model/editableformfields/EditableFormField.php

@@ -237,8 +237,7 @@ class EditableFormField extends DataObject {
 				new GridFieldButtonRow(),
 				new GridFieldToolbarHeader(),
 				new GridFieldAddNewInlineButton(),
-				new GridFieldDeleteAction(),
+				new GridFieldDeleteAction()
-				new GridState_Component()
 			);
 
 		$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) {
+		if($this->ExtraClass) {
-			$field->addExtraClass($field->ExtraClass);
+			$field->addExtraClass($this->ExtraClass);
 		}
 	}
 	

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) {
+		if($this->ExtraClass) {
-			$field->addExtraClass($field->ExtraClass);
+			$field->addExtraClass($this->ExtraClass);
 		}
 	}
 	

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) {
+		if($this->ExtraClass) {
-			$field->addExtraClass($field->ExtraClass);
+			$field->addExtraClass($this->ExtraClass);
 		}
 	}
 
@@ -61,10 +62,16 @@ class EditableFormStep extends EditableFormField {
 	}
 
 	public function getCMSTitle() {
-		$title = $this->i18n_singular_name();
+		$title = $this->getFieldNumber()
-		if($this->Title) {
+			?: $this->Title
-			$title .= ' (' . $this->Title . ')';
+			?: '';
-		}
+
-		return $title;
+		return _t(
+			'EditableFormStep.STEP_TITLE',
+			'Page {page}',
+			array(
+				'page' => $title
+			)
+		);
 	}
 }

code/model/editableformfields/EditableMultipleOptionField.php

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

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

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 {
+.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] td {
-  background: #E7EFF4;
+  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 {
+.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] td {
-  display: none;
+  border-bottom: 1px outset #c9e6f9;
 }
-.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder,
+.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-2 td {
-.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle {
+  border-bottom-color: #a8d7f5;
-  background: #E7EFF4;
+}
+.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;
 }

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

javascript/Gridfield.js

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

scss/UserForm_cms.scss

@@ -3,12 +3,61 @@
  */
 
 .cms {
-	.ss-gridfield > div.ss-gridfield-buttonrow-before {
+
+	.uf-field-editor {
+		
+		> div.ss-gridfield-buttonrow-before {
 			margin-bottom: 10px;
 			overflow: auto;
 		}
 		
+		// Row styles
 		table.ss-gridfield-table {
+
+			// Standard rows
+			.ss-gridfield-item {
+				&, &:hover {
+					background: white;
+				}
+					
+				td {
+					border-right-width: 0;
+					border-bottom: 1px solid #EEE;
+						
+					&:last-child {
+						border-right-width: 1px;
+					}
+				}
+			}
+
+			.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='EditableFormStep'] {
 				&, &:hover {
 					background: #dae2e7;
@@ -16,31 +65,46 @@
 
 				label {
 					font-weight: bold;
-				color: #444;
+					color: black;
 					font-size: 1.1em;
 				}
 			}
 
-		.ss-gridfield-item[data-class^='EditableFieldGroup'] {
+			.ss-gridfield-item[data-class='EditableFieldGroup'] {
-			&, &:hover {
+				td {
-				background: #E7EFF4;
+					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'] {
-			.col-Title input {
+				td {
-				display: none;
+					border-bottom: 1px outset #c9e6f9;
-			}
 				}
 				
-		.ss-gridfield-item.inFieldGroup {
+				&.inFieldGroup-level-2 td {
-			.col-reorder,
+					border-bottom-color: #a8d7f5;
-			.handle {
+				}
-				background: #E7EFF4;
+				
+				&.inFieldGroup-level-3 td {
+					border-bottom-color: #94cef3;
+				}
+				
+				label {
+					color: #777;
+				}
 			}
 		}
 	}