Cms styling for fieldgroups

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+.sass-cache/

code/model/UserDefinedForm.php

@@ -178,6 +178,8 @@ 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}
 			 */

config.rb

@@ -0,0 +1,12 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "javascript"
+
+line_comments = false
+

css/UserForm.css

@@ -1,38 +1,37 @@
 /**
  * Lightweight base styles for the front-end form.
  */
-.userform-progress .step-buttons,
-.step-navigation .step-buttons {
-	margin-left: 0;
-}
-
-.userform-progress .step-buttons {
-	position: relative;
-}
-
-.userform-progress .step-button-jump {
-	position: absolute;
-	top: 0;
-}
-
-.userform-progress .step-buttons .step-button-wrapper,
-.step-navigation .step-buttons .step-button-wrapper {
-	display: inline-block;
-	list-style-type: none;
-}
-
 .userform-progress .progress {
-	position: relative;
+  position: relative;
-	height: 1em;
+  height: 1em;
-	background: #eee;
+  background: #eee;
+}
+.userform-progress .progress .progress-bar {
+  position: absolute;
+  height: 1em;
+  background: #666;
+}
+.userform-progress .step-buttons {
+  margin-left: 0;
+  position: relative;
+}
+.userform-progress .step-buttons .step-button-wrapper {
+  display: inline-block;
+  list-style-type: none;
+}
+.userform-progress .step-button-jump {
+  position: absolute;
+  top: 0;
 }
 
-.userform-progress .progress .progress-bar {
+.step-navigation .step-buttons {
-	position: absolute;
+  margin-left: 0;
-	height: 1em;
+}
-	background: #666;
+.step-navigation .step-buttons .step-button-wrapper {
+  display: inline-block;
+  list-style-type: none;
 }
 
 .userform {
-	clear: both;
+  clear: both;
 }

css/UserForm_cms.css

@@ -1,24 +1,28 @@
-
-.cms .ss-gridfield > div.ss-gridfield-buttonrow-before {
-	margin-bottom: 10px;
-	overflow: auto;
-}
-
 /**
- * Styles for page steps
+ * Styles for cms
  */
-.cms table.ss-gridfield-table .ss-gridfield-inline-new.uf-gridfield-steprow,
+.cms .ss-gridfield > div.ss-gridfield-buttonrow-before {
-.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'],
+  margin-bottom: 10px;
-.cms table.ss-gridfield-table .ss-gridfield-inline-new.uf-gridfield-steprow:hover,
+  overflow: auto;
-.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover
-{
-	background: #dae2e7;
 }
-
+.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover {
-.cms table.ss-gridfield-table .ss-gridfield-inline-new.uf-gridfield-steprow label,
+  background: #dae2e7;
-.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] label
+}
-{
+.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] label {
-	font-weight: bold;
+  font-weight: bold;
-	color: #393939;
+  color: #444;
-	font-size: 1.1em;
+  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 table.ss-gridfield-table .ss-gridfield-item[data-class^='EditableFieldGroup'] label {
+  font-weight: bold;
+}
+.cms table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] .col-Title input {
+  display: none;
+}
+.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder,
+.cms table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle {
+  background: #E7EFF4;
 }

javascript/Gridfield.js

@@ -0,0 +1,23 @@
+/**
+ * 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.scss

@@ -0,0 +1,47 @@
+/**
+ * Lightweight base styles for the front-end form.
+ */
+
+.userform-progress {
+	.progress {
+		position: relative;
+		height: 1em;
+		background: #eee;
+
+		.progress-bar {
+			position: absolute;
+			height: 1em;
+			background: #666;
+		}
+	}
+
+	.step-buttons {
+		margin-left: 0;
+		position: relative;
+
+		.step-button-wrapper {
+			display: inline-block;
+			list-style-type: none;
+		}
+	}
+
+	.step-button-jump {
+		position: absolute;
+		top: 0;
+	}
+}
+
+.step-navigation {
+	.step-buttons {
+		margin-left: 0;
+
+		.step-button-wrapper {
+			display: inline-block;
+			list-style-type: none;
+		}
+	}
+}
+
+.userform {
+	clear: both;
+}

scss/UserForm_cms.scss

@@ -0,0 +1,50 @@
+/**
+ * Styles for cms
+ */
+
+.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;
+			}
+		}
+
+		.ss-gridfield-item[data-class^='EditableFieldGroup'] {
+			&, &:hover {
+				background: #E7EFF4;
+			}
+
+			label {
+				font-weight: bold;
+			}
+		}
+
+		.ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
+			.col-Title input {
+				display: none;
+			}
+		}
+
+		.ss-gridfield-item.inFieldGroup {
+			.col-reorder,
+			.handle {
+				background: #E7EFF4;
+			}
+		}
+	}
+}
+
+
+