action button interactive styling

change action button style and icon depending on selected action

code/GridFieldBulkManager.php

@@ -53,12 +53,12 @@ class GridFieldBulkManager implements GridField_HTMLProvider, GridField_ColumnPr
 		Requirements::javascript(BULK_EDIT_TOOLS_PATH . '/javascript/GridFieldBulkManager.js');
 		
 		$dropDownActionList = DropdownField::create('bulkActionName', '')
-			->setSource( array('Edit','UnLink','Delete') );
+			->setSource( array('Edit' => 'Edit','UnLink' => 'UnLink','Delete' => 'Delete') );
 		
 		$actionButton = FormAction::create('doBulkAction', 'GO')
 				->setAttribute('id', 'doBulkActionButton')
-				->addExtraClass('ss-ui-action-constructive cms-panel-link')
-				->setAttribute('data-icon', 'accept')
+				//->addExtraClass('cms-panel-link')
+				->setAttribute('data-icon', 'pencil')
 				->setAttribute('data-url', 'bulkEdit')
 				->setUseButtonTag(true);
 		

javascript/GridFieldBulkManager.js

@@ -28,9 +28,50 @@
 			},
 			onunmatch: function(){				
 			},
-			onclick: function(e) {		
-							
+			onclick: function(e) {
+			} 
+		});
+		
+		$('#bulkActionName').entwine({
+			onmatch: function(){
+			},
+			onunmatch: function(){				
+			},
+			onchange: function(e) {
+				var value, btn, icon;
+				value = $(this).val();
+				btn = $('#doBulkActionButton');
+				icon = $('#doBulkActionButton .ui-icon');
 				
+				switch (value) {
+					case 'Edit':
+						$(btn).removeClass('ss-ui-action-destructive');
+						$(btn).attr('data-icon', 'pencil');
+						$(icon).removeClass('btn-icon-decline btn-icon-pencil').addClass('btn-icon-pencil');
+						break;
+						
+					case 'UnLink':
+						$(btn).removeClass('ss-ui-action-destructive');
+						$(btn).attr('data-icon', 'chain--minus');
+						$(icon).removeClass('btn-icon-decline btn-icon-pencil').addClass('btn-icon-chain--minus');
+						break;
+						
+					case 'Delete':
+						$(btn).addClass('ss-ui-action-destructive');
+						$(btn).attr('data-icon', 'decline');
+						$(icon).removeClass('btn-icon-decline btn-icon-pencil').addClass('btn-icon-decline');
+						break;
+				}
+				
+			} 
+		});
+		
+		$('#doBulkActionButton').entwine({
+			onmatch: function(){
+			},
+			onunmatch: function(){				
+			},
+			onclick: function(e) {
 			} 
 		});