UI behavior and visual enhancements

Switch Actions to FormActions buttons and add colored visual hints about
items status.

code/GridFieldBulkImageUpload_Request.php

@@ -159,28 +159,38 @@ class GridFieldBulkImageUpload_Request extends RequestHandler {
 		
 		$actions = new FieldList();		
 		
-		$html = "
-		<a id=\"bulkImageUploadUpdateBtn\" class=\"cms-panel-link action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary\" data-icon=\"accept\" data-url=\"".$this->Link('update')."\" href=\"#\">
-			Save All
-		</a>";
-		$actions->push(new LiteralField('savebutton', $html));
-		
+		$actions->push(
+			FormAction::create('SaveAll', 'Save All')
+				->setAttribute('id', 'bulkImageUploadUpdateBtn')
+				->addExtraClass('ss-ui-action-constructive cms-panel-link')
+				->setAttribute('data-icon', 'accept')
+				->setAttribute('data-url', $this->Link('update'))
+				->setUseButtonTag(true)
+		);
 		
 		if($crumbs && $crumbs->count()>=2)
 		{			
-			$html = "
-			<a id=\"bulkImageUploadUpdateFinishBtn\" class=\"cms-panel-link action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary\" data-icon=\"accept\" data-url=\"".$this->Link('update')."\" href=\"".$one_level_up->Link."\">
-				Save All &amp; Finish
-			</a>";
-			$actions->push(new LiteralField('finishbutton', $html));
+			$actions->push(
+				FormAction::create('SaveAndFinish', 'Save All & Finish')
+					->setAttribute('id', 'bulkImageUploadUpdateFinishBtn')
+					->addExtraClass('ss-ui-action-constructive cms-panel-link')
+					->setAttribute('data-icon', 'accept')
+					->setAttribute('data-url', $this->Link('update'))
+					->setAttribute('data-return-url', $one_level_up->Link)
+					->setUseButtonTag(true)
+			);
 		}	
 		
-		$html = "                                       
-		<a id=\"bulkImageUploadUpdateCancelBtn\" class=\"cms-panel-link delete ss-ui-action-destructive ss-ui-button ui-button ui-widget ui-state-default ui-button-text-icon-primary\" data-icon=\"decline\" data-url=\"".$this->Link('cancel')."\" href=\"#\">
-			Cancel &amp; Delete All
-		</a>";
-		$actions->push(new LiteralField('cancelbutton', $html));
-
+		$actions->push(
+			FormAction::create('Cancel', 'Cancel & Delete All')
+				->setAttribute('id', 'bulkImageUploadUpdateCancelBtn')
+				->addExtraClass('ss-ui-action-destructive cms-panel-link')
+				->setAttribute('data-icon', 'decline')
+				->setAttribute('data-url', $this->Link('cancel'))
+				->setUseButtonTag(true)
+		);
+		
+		
 		$uploadField = UploadField::create('BulkImageUploadField', '');
 		$uploadField->setConfig('previewMaxWidth', 40);
 		$uploadField->setConfig('previewMaxHeight', 30);
@@ -207,7 +217,8 @@ class GridFieldBulkImageUpload_Request extends RequestHandler {
 		);
 				
 		$form->setTemplate('LeftAndMain_EditForm');
-		$form->addExtraClass('center cms-edit-form cms-content');
+		//$form->addExtraClass('center cms-edit-form cms-content');
+		$form->addExtraClass('center cms-content');
 		$form->setAttribute('data-pjax-fragment', 'CurrentForm Content');
 		
 		if($crumbs && $crumbs->count()>=2){

css/GridFieldBulkImageUpload.css

@@ -29,3 +29,23 @@ li.ss-uploadfield-item.template-download .imgPreview
 	background-image: linear-gradient(top, #a4ca3a 0%, #59781D 100%);
 }
 
+#BulkImageUploadField .ss-uploadfield-item-info.dirty
+{
+	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%);
+}
+
+#BulkImageUploadField .ss-uploadfield-item-status.updated
+{
+	color: #3b8716;
+}
+#BulkImageUploadField .ss-uploadfield-item-status.dirty
+{
+	color: #f25000;
+}

javascript/GridFieldBulkImageUpload.js

@@ -27,6 +27,7 @@
 					$('.ss-uploadfield-files .ss-uploadfield-item-editform').show();					
 					$(this).addClass('opened');
 				}
+				e.preventDefault();
 			} 
 		});
 		
@@ -44,14 +45,24 @@
 		// start add-on behaviours
 		
 		$.entwine('colymba', function($) {		
-			
+						
 			$('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({
 				onchange: function(){
-					var form = this.closest('.bulkImageUploadUpdateForm');
+					var form, itemInfo, itemStatus;
+					
+					form = this.closest('.bulkImageUploadUpdateForm');
+					itemStatus = (this).parents('li').find('.ss-uploadfield-item-status');					
+					itemInfo = $(this).parents('li').find('.ss-uploadfield-item-info');
+					
 					if ( !$(form).hasClass('hasUpdate') ) {
 						$(form).addClass('hasUpdate');
 					}
-					$('a#bulkImageUploadUpdateFinishBtn').addClass('dirty');
+					
+					$(itemStatus).removeClass('updated').addClass('dirty').html('Changed');
+					if ( $(itemInfo).hasClass('updated') ) $(itemInfo).removeClass('updated');
+					if ( !$(itemInfo).hasClass('dirty') ) $(itemInfo).addClass('dirty');
+					
+					$('#bulkImageUploadUpdateFinishBtn').addClass('dirty');
 				}
 			});
 
@@ -68,6 +79,8 @@
 					var url = $(this).data('url');
 					var cacheBuster = new Date().getTime();
 					
+					if ( $(formsWithUpadtes).length > 0 ) $(this).addClass('loading');
+					
 					$(formsWithUpadtes).each(function(){
 						var data = $(this).serialize();
 						$.ajax({
@@ -77,31 +90,32 @@
 							context: $(this)
 						}).done(function() { 
 							
-							var btn = $('a#bulkImageUploadUpdateBtn');
+							var btn = $('#bulkImageUploadUpdateBtn');
 							var totalForms = parseInt( $(btn).data('formsToUpdate') );				
 							var counter = parseInt( $(btn).data('completedForms') );							
 							counter = counter + 1;							
 							$(btn).data('completedForms', counter);
 							
 							$(this).removeClass('hasUpdate');		
-							$(this).parents('li').find('.ss-uploadfield-item-status').html('Updated');							
-							$(this).parents('li').find('.ss-uploadfield-item-info').addClass('updated');
+							$(this).parents('li').find('.ss-uploadfield-item-status').removeClass('dirty').addClass('updated').html('Updated');							
+							$(this).parents('li').find('.ss-uploadfield-item-info').removeClass('dirty').addClass('updated');
 							$(this).parents('li').find('.ss-uploadfield-item-editform').css('display', 'none');
 							
-							$(this).removeClass('hasUpdate');		
+							$(this).removeClass('hasUpdate');
 							
 							if ( counter == totalForms ) {
 								$('#bulkImageUploadUpdateFinishBtn').removeClass('dirty');
-								if ( $(this).hasClass('doFinish') ) {
-									$('#bulkImageUploadUpdateFinishBtn').clcik();
-								}
+								$('#bulkImageUploadUpdateBtn').data('completedForms', 0);
+								$('#bulkImageUploadUpdateBtn').removeClass('loading');
+								if ( $('#bulkImageUploadUpdateBtn').hasClass('doFinish') ) {
+									//@TODO find a way to pass this as CMS navigation through AJAX
+									window.location = $('#bulkImageUploadUpdateFinishBtn').data('return-url');
+								}								
 							}
 							
 						});
 					})
 					
-					//@todo Fix IE, seems to go right through the prevent default and 
-					e.preventDefault();
 				}
 			});
 			
@@ -110,7 +124,6 @@
 					if ( $(this).hasClass('dirty') ) {
 						$('#bulkImageUploadUpdateBtn').addClass('doFinish');
 						$('#bulkImageUploadUpdateBtn').click();
-						e.stopImmediatePropagation();
 					}					
 				}				
 			});	
@@ -139,10 +152,8 @@
 							}
 
 						});
-					});					
-						
-					e.stopImmediatePropagation();	
-					e.preventDefault();		
+					});	
+					
 				}				
 			});