Add bulk edit form header + toggle btn

bulkManager/code/GridFieldBulkActionEditHandler.php

@@ -58,9 +58,28 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
 				->setAttribute('src', '')//changes type to image so isn't hooked by default actions handlers
 		);
 		
-		$recordList = $this->getRecordIDList();
+    $recordList       = $this->getRecordIDList();
-		$editedRecordList = new FieldList();
+    $recordsFieldList = new FieldList();
-		$config = $this->component->getConfig();
+    $config           = $this->component->getConfig();
+
+    $editingCount     = count($recordList);
+    $singleton        = singleton($this->gridField->getModelClass());
+    $editingClassName = (($editingCount > 1) ? $singleton->i18n_plural_name() : $singleton->i18n_singular_name());
+
+		$header = LiteralField::create(
+			'bulkEditHeader',
+			'<h1 id="bulkEditHeader">' . _t('GRIDFIELD_BULKMANAGER_EDIT_HANDLER.HEADER',
+				'Editing {count} {class}',
+				array(
+					'count' => $editingCount,
+					'class' => $editingClassName
+				)
+			) . '</h1>'
+		);
+		$recordsFieldList->push($header);
+
+		$toggle = LiteralField::create('bulkEditToggle', '<span id="bulkEditToggle">' . _t('GRIDFIELD_BULKMANAGER_EDIT_HANDLER.TOGGLE_ALL_LINK', 'Show/Hide all') . '</span>');
+		$recordsFieldList->push($toggle);
 				
 		foreach ( $recordList as $id )
 		{						
@@ -71,7 +90,7 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
 			$recordCMSDataFields['ID'] = new HiddenField('ID', '', $id);			
 			$recordCMSDataFields = GridFieldBulkEditingHelper::escapeFormFieldsName( $recordCMSDataFields, $id );
 			
-			$editedRecordList->push(
+			$recordsFieldList->push(
 				ToggleCompositeField::create(
 					'GFBM_'.$id,
 					DataObject::get_by_id($this->gridField->list->dataClass, $id)->getTitle(),					
@@ -84,7 +103,7 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
 		$form = new Form(
 			$this,
 			'bulkEditingForm',
-			$editedRecordList,
+			$recordsFieldList,
 			$actions
 		);		
 		

bulkManager/css/GridFieldBulkEditingForm.css

@@ -1,33 +1,41 @@
-/**
+#bulkEditHeader {
- * Bulk editing styles
+  float: left;
- */
+  width: 85%;
-.bulkEditingForm.hasUpdate .ui-accordion-header
+  margin: 40px 0 20px 0;
-{
+  font-size: 30px;
-	background-color: #f2ba11;
+  font-weight: bold; }
-	
-	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2ba11), color-stop(100%, #df6e00));
-	background-image: -webkit-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
-	background-image: -moz-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
-	background-image: -o-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
-	background-image: -ms-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
-	background-image: linear-gradient(top, #f2ba11 0%, #df6e00 100%);
-}
 
-.bulkEditingForm.updated .ui-accordion-header
+#bulkEditToggle {
-{
+  float: right;
-	background-color: #a4ca3a;
+  clear: right;
-	
+  width: 10%;
-	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #59781D));
+  margin: 40px 0 20px 0;
-	background-image: -webkit-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+  text-decoration: underline;
-	background-image: -moz-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+  cursor: pointer; }
-	background-image: -o-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
-	background-image: -ms-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
-	background-image: linear-gradient(top, #a4ca3a 0%, #59781D 100%);
-}
 
-.bulkEditingForm.hasUpdate .ui-accordion-header a,
+.bulkEditingForm {
-.bulkEditingForm.updated .ui-accordion-header a
+  position: relative;
-{
+  float: left;
-	color: #fff;
+  width: 100%; }
-	text-shadow: none;
+  .bulkEditingForm.hasUpdate .ui-accordion-header {
-}
+    background-color: #f2ba11;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2ba11), color-stop(100%, #df6e00));
+    background-image: -webkit-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+    background-image: -moz-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+    background-image: -o-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+    background-image: -ms-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+    background-image: linear-gradient(top, #f2ba11 0%, #df6e00 100%); }
+    .bulkEditingForm.hasUpdate .ui-accordion-header a {
+      color: #fff;
+      text-shadow: none; }
+  .bulkEditingForm.updated .ui-accordion-header {
+    background-color: #a4ca3a;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #59781d));
+    background-image: -webkit-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
+    background-image: -moz-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
+    background-image: -o-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
+    background-image: -ms-linear-gradient(top, #a4ca3a 0%, #59781d 100%);
+    background-image: linear-gradient(top, #a4ca3a 0%, #59781d 100%); }
+    .bulkEditingForm.updated .ui-accordion-header a {
+      color: #fff;
+      text-shadow: none; }

bulkManager/css/GridFieldBulkEditingForm.scss

@@ -0,0 +1,66 @@
+
+#bulkEditHeader
+{
+	float: left;
+	width: 85%;
+
+	margin: 40px 0 20px 0;
+
+	font-size: 30px;
+	font-weight: bold;
+}
+
+#bulkEditToggle
+{
+	float: right;
+	clear: right;
+	width: 10%;
+
+	margin: 40px 0 20px 0;
+
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.bulkEditingForm
+{
+	position: relative;
+	float: left;
+	width: 100%;
+
+	&.hasUpdate .ui-accordion-header
+	{
+		background-color: #f2ba11;
+		
+		background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2ba11), color-stop(100%, #df6e00));
+		background-image: -webkit-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+		background-image: -moz-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+		background-image: -o-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+		background-image: -ms-linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+		background-image: linear-gradient(top, #f2ba11 0%, #df6e00 100%);
+
+		a
+		{
+			color: #fff;
+			text-shadow: none;
+		}
+	}
+
+	&.updated .ui-accordion-header
+	{
+		background-color: #a4ca3a;
+		
+		background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #59781D));
+		background-image: -webkit-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+		background-image: -moz-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+		background-image: -o-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+		background-image: -ms-linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+		background-image: linear-gradient(top, #a4ca3a 0%, #59781D 100%);
+
+		a
+		{
+			color: #fff;
+			text-shadow: none;
+		}
+	}
+}

bulkManager/javascript/GridFieldBulkEditingForm.js

@@ -1,5 +1,41 @@
 (function($) {	
-	$.entwine('colymba', function($) {	    
+	$.entwine('colymba', function($) {
+
+		$('#bulkEditToggle') .entwine({
+			onmatch: function(){},
+			onunmatch: function(){},
+			onclick: function(e)
+			{
+				var toggleFields = $(this).parents('#Form_bulkEditingForm').find('.ss-toggle h4'),
+						state = this.data('state')
+						;
+
+				if ( !state || state === 'close' )
+				{
+					state = 'open';
+				}
+				else {
+					state = 'close';
+				}
+
+				toggleFields.each(function()
+				{
+					var $this = $(this);
+					
+					if ( state === 'open' && !$this.hasClass('ui-state-active') )
+					{
+						$this.click();
+					}
+
+					if ( state === 'close' && $this.hasClass('ui-state-active') )
+					{
+						$this.click();
+					} 
+				});
+
+				this.data('state', state);
+			}
+		}); 
 		
 		
 		$('.bulkEditingFieldHolder').entwine({