Add bootstrap form styles to the bulk manager

bulkManager/code/GridFieldBulkActionEditHandler.php

@@ -73,15 +73,15 @@ public function bulkEditForm()
         $actions->push(
             FormAction::create('doSave', _t('GRIDFIELD_BULKMANAGER_EDIT_HANDLER.SAVE_BTN_LABEL', 'Save all'))
                 ->setAttribute('id', 'bulkEditingSaveBtn')
-                ->addExtraClass('ss-ui-action-constructive')
+                ->addExtraClass('btn btn-success')
                 ->setAttribute('data-icon', 'accept')
                 ->setUseButtonTag(true)
         );
 
         $actions->push(
             FormAction::create('Cancel', _t('GRIDFIELD_BULKMANAGER_EDIT_HANDLER.CANCEL_BTN_LABEL', 'Cancel'))
                 ->setAttribute('id', 'bulkEditingUpdateCancelBtn')
-                ->addExtraClass('ss-ui-action-destructive cms-panel-link')
+                ->addExtraClass('btn btn-danger cms-panel-link')
                 ->setAttribute('data-icon', 'decline')
                 ->setAttribute('href', $one_level_up->Link)
                 ->setUseButtonTag(true)

bulkManager/code/GridFieldBulkManager.php

@@ -299,16 +299,16 @@ public function getHTMLFragments($gridField)
 
         $dropDownActionsList = DropdownField::create('bulkActionName', '')
             ->setSource($actionsListSource)
-            ->setAttribute('class', 'bulkActionName no-change-track')
+            ->addExtraClass('bulkActionName no-change-track no-chosen')
             ->setAttribute('id', '');
 
         $templateData = array(
-            'Menu' => $dropDownActionsList->FieldHolder(),
+            'Menu' => $dropDownActionsList,
             'Button' => array(
                 'Label' => _t('GRIDFIELD_BULK_MANAGER.ACTION_BTN_LABEL', 'Go'),
                 'DataURL' => $gridField->Link('bulkAction'),
                 'Icon' => $this->config['actions'][$firstAction]['config']['icon'],
-                'DataConfig' => htmlspecialchars(json_encode($actionsConfig), ENT_QUOTES, 'UTF-8'),
+                'DataConfig' => json_encode($actionsConfig),
             ),
             'Select' => array(
                 'Label' => _t('GRIDFIELD_BULK_MANAGER.SELECT_ALL_LABEL', 'Select all'),
@@ -350,13 +350,13 @@ public function getURLHandlers($gridField)
      * but have more specific path defined
      *
      * @param GridField      $gridField
-     * @param SS_HTTPRequest $request
+     * @param HTTPRequest $request
      *
      * @return mixed
      */
     public function handleBulkAction($gridField, $request)
     {
-        $controller = $gridField->getForm()->Controller();
+        $controller = $gridField->getForm()->getController();
 
         foreach ($this->config['actions'] as $name => $data) {
             $handlerClass = $data['handler'];

bulkManager/css/GridFieldBulkManager.scss

@@ -1,7 +1,11 @@
-.cms table.ss-gridfield-table 
+.cms table.grid-field__table
 {
   tr.bulkManagerOptions
   {
+    th.bulkmanagerheading {
+        padding-left: 40px;
+    }
+
     th.bulkmanagerselect
     {
       text-align: center;
@@ -17,7 +21,7 @@
       margin: 0 0 2px 2px;
     }
 
-    .dropdown 
+    .dropdown
     {
       display: inline-block;
       border: none;
@@ -71,4 +75,4 @@
       background-repeat: no-repeat no-repeat;
     }
   }
-}
+}

bulkManager/javascript/GridFieldBulkManager.js

@@ -1,5 +1,5 @@
-(function($) {	
-	$.entwine('ss', function($) {		
+(function($) {
+	$.entwine('ss', function($) {
 
 		$.entwine('colymba', function($) {
 
@@ -34,14 +34,14 @@
         onunmatch: function(){}
       });
 
-		  
+
 		  /**
 		   * Bulkselect table cell behaviours
 		   */
 			$('td.col-bulkSelect').entwine({
 				onmatch: function(){
 				},
-				onunmatch: function(){				
+				onunmatch: function(){
 				},
 				onmouseover: function(){
 					//disable default row click behaviour -> avoid navigation to edit form when clicking the checkbox
@@ -59,56 +59,56 @@
 				}
 			});
 
-			
+
 			/**
 			 * Individual select checkbox behaviour
 			 */
 			$('td.col-bulkSelect input').entwine({
 				onmatch: function(){
 				},
-				onunmatch: function(){				
+				onunmatch: function(){
 				},
 				onclick: function(e) {
-					$(this).parents('.ss-gridfield-table').find('input.bulkSelectAll').prop('checked', '');
+					$(this).parents('.grid-field__table').find('input.bulkSelectAll').prop('checked', '');
 				}
 			});
-			
+
 
 			/**
 			 * Bulkselect checkbox behaviours
 			 */
 	    $('input.bulkSelectAll').entwine({
 	      onmatch: function(){
 				},
-				onunmatch: function(){				
+				onunmatch: function(){
 				},
 	      onclick: function()
 	      {
 	        var state = $(this).prop('checked');
-	        $(this).parents('.ss-gridfield-table')
+	        $(this).parents('.grid-field__table')
 	        			 .find('td.col-bulkSelect input')
 	        			 .prop('checked', state)
 	        			 .trigger('change');
 	      },
 	      getSelectRecordsID: function()
 	      {
-	      	return $(this).parents('.ss-gridfield-table')
+	      	return $(this).parents('.grid-field__table')
 					      				.find('td.col-bulkSelect input:checked')
-					      				.map(function() {  
+					      				.map(function() {
 					      					return parseInt( $(this).data('record') )
 					      				})
 											  .get();
 	      }
 	    });
 
-	    
+
 	    /**
 	     * Bulk action dropdown behaviours
 	     */
 			$('select.bulkActionName').entwine({
 				onmatch: function(){
 				},
-				onunmatch: function(){				
+				onunmatch: function(){
 				},
 				onchange: function(e)
 				{
@@ -136,18 +136,18 @@
 					else{
 						$btn.removeClass('ss-ui-action-destructive');
 					}
-					
-				} 
+
+				}
 			});
-			
+
 
 			/**
 			 * bulk action button behaviours
 			 */
 			$('.doBulkActionButton').entwine({
 				onmatch: function(){
 				},
-				onunmatch: function(){				
+				onunmatch: function(){
 				},
 				getActionURL: function(action, url)
 				{
@@ -176,21 +176,21 @@
           var $parent = $(this).parents('.bulkManagerOptions'),
               action  = $parent.find('select.bulkActionName').val(),
               ids     = $(this).parents('.bulkManagerOptions').find('input.bulkSelectAll:first').getSelectRecordsID()
-							;							
+							;
 
-					this.doBulkAction(action, ids);					
+					this.doBulkAction(action, ids);
 				},
 
 				doBulkAction: function(action, ids, callbackFunction, callbackContext)
-				{					
+				{
           var $parent = $(this).parents('.bulkManagerOptions'),
               $btn    = $parent.find('a.doBulkActionButton'),
 
               config  = $btn.data('config'),
               url     = this.getActionURL(action, $(this).data('url')),
               data    = { records: ids }
 							;
-							
+
 					if ( ids.length <= 0 )
 					{
 						alert( ss.i18n._t('GRIDFIELD_BULK_MANAGER.BULKACTION_EMPTY_SELECT') );
@@ -207,10 +207,10 @@
 								callbackFunction.call(callbackContext, false);
 							}
 							return false;
-						}					
-					}	
+						}
+					}
 
-					$btn.addClass('loading');				
+					$btn.addClass('loading');
 
 					if ( config[action]['isAjax'] )
 					{
@@ -219,7 +219,7 @@
 							data: data,
 							type: "POST",
 							context: $(this)
-						}).done(function(data, textStatus, jqXHR) {	            
+						}).done(function(data, textStatus, jqXHR) {
 	            $btn.removeClass('loading');
 	            if ( callbackFunction && callbackContext )
 							{
@@ -239,7 +239,7 @@
 				}
 			});
 
-			
-		});	
+
+		});
 	});
 }(jQuery));

bulkManager/templates/BulkManagerButtons.ss

@@ -1,15 +1,25 @@
 <tr class="bulkManagerOptions">
-	<th class="main bulkmanagerheading" colspan="$Colspan">
-
-		<p class="title"><% _t('GRIDFIELD_BULK_MANAGER.COMPONENT_TITLE', 'Modify one or more entry at a time.') %></p>
-
-		$Menu
-		<a data-url="$Button.DataURL" data-config="$Button.DataConfig" class="doBulkActionButton ss-ui-button" data-icon="$Button.Icon">
-			$Button.Label
-		</a>
-
-	</th>
-	<th class="main bulkmanagerselect">
-		<input class="no-change-track bulkSelectAll" type="checkbox" title="$Select.Label" name="toggleSelectAll" />
-	</th>
-</tr>
+    <th class="main bulkmanagerheading" colspan="$Colspan">
+        <div class="row">
+            <p class="title"><% _t('GRIDFIELD_BULK_MANAGER.COMPONENT_TITLE', 'Modify one or more entry at a time.') %></p>
+        </div>
+        <div class="row">
+            <div class="form-inline">
+                $Menu
+                <a data-url="$Button.DataURL"
+                    data-config="$Button.DataConfig"
+                    class="doBulkActionButton btn btn-primary"
+                    data-icon="$Button.Icon">
+                    $Button.Label
+                </a>
+                <label class="form-check-label">
+                    <input class="no-change-track bulkSelectAll form-check-input"
+                        type="checkbox"
+                        title="$Select.Label"
+                        name="toggleSelectAll" />
+                    <% _t('GRIDFIELD_BULK_MANAGER.SELECT_ALL_LABEL', '$Select.Label') %>
+                </label>
+            </div>
+        </div>
+    </th>
+</tr>

composer.json

@@ -20,7 +20,7 @@
     },
     "extra": {
         "branch-alias": {
-            "dev-feature/ss4-compat": "3.x-dev"
+            "dev-master": "3.x-dev"
         }
     },
     "autoload": {