feature #565, Batch Manager, font-icons checkboxes

For each photo.

And we use full colors for "hover" thumbnails, ie orange on "clear" theme and pink on "dark" theme.

admin/themes/clear/theme.css

@@ -307,8 +307,36 @@ INPUT[type="text"].large  { width: 317px; }
 
 UL.thumbnails li.rank-of-image {background-color: #ddd;}
 
-#batchManagerGlobal .thumbSelected {background-color:#C2F5C2 !important}
-#batchManagerGlobal #selectedMessage {background-color:#C2F5C2;}
+/* Batch Manager */
+#batchManagerGlobal .thumbnails .font-checkbox [class*="icon-check"]::before {
+  color:#999;
+}
+
+#batchManagerGlobal .thumbnails li:hover .font-checkbox [class*="icon-check"]::before {
+  color:white;
+}
+
+#batchManagerGlobal li.thumbSelected .font-checkbox [class*="icon-check"]::before {
+  color:white;
+}
+
+#batchManagerGlobal UL.thumbnails li:hover .wrap2 {
+  background-color: #ff7700;
+  color: #999;
+}
+
+#batchManagerGlobal .thumbSelected { background-color:transparent !important }
+
+#batchManagerGlobal .thumbSelected .wrap2 {
+  background-color: #444 !important;
+}
+
+#batchManagerGlobal #selectedMessage {
+  background-color: #555;
+  color:white;
+}
+
+
 .slider-info {color:#ff7700;font-weight:bold;}
 
 .selectedComment {background-color:#C2F5C2;}

admin/themes/default/template/batch_manager_global.tpl

@@ -153,16 +153,16 @@ $(document).ready(function() {
   $(".wrap1 label").click(function (event) {
     $("input[name=setSelected]").prop('checked', false);
 
-    var wrap2 = $(this).children(".wrap2");
+    var li = $(this).closest("li");
     var checkbox = $(this).children("input[type=checkbox]");
 
     checkbox.triggerHandler("shclick",event);
 
     if ($(checkbox).is(':checked')) {
-      $(wrap2).addClass("thumbSelected");
+      $(li).addClass("thumbSelected");
     }
     else {
-      $(wrap2).removeClass('thumbSelected');
+      $(li).removeClass('thumbSelected');
     }
 
     checkPermitAction();
@@ -177,11 +177,10 @@ $(document).ready(function() {
 
   function selectPageThumbnails() {
     $(".thumbnails label").each(function() {
-      var wrap2 = $(this).children(".wrap2");
       var checkbox = $(this).children("input[type=checkbox]");
 
-      $(checkbox).prop('checked', true);
-      $(wrap2).addClass("thumbSelected");
+      $(checkbox).prop('checked', true).trigger("change");
+      $(this).closest("li").addClass("thumbSelected");
     });
   }
 
@@ -189,11 +188,13 @@ $(document).ready(function() {
     $("input[name=setSelected]").prop('checked', false);
 
     $(".thumbnails label").each(function() {
-      var wrap2 = $(this).children(".wrap2");
       var checkbox = $(this).children("input[type=checkbox]");
 
-      $(checkbox).prop('checked', false);
-      $(wrap2).removeClass("thumbSelected");
+      if (jQuery(checkbox).is(':checked')) {
+        $(checkbox).prop('checked', false).trigger("change");
+      }
+
+      $(this).closest("li").removeClass("thumbSelected");
     });
     checkPermitAction();
     return false;
@@ -203,16 +204,15 @@ $(document).ready(function() {
     $("input[name=setSelected]").prop('checked', false);
 
     $(".thumbnails label").each(function() {
-      var wrap2 = $(this).children(".wrap2");
       var checkbox = $(this).children("input[type=checkbox]");
 
-      $(checkbox).prop('checked', !$(checkbox).is(':checked'));
+      $(checkbox).prop('checked', !$(checkbox).is(':checked')).trigger("change");
 
       if ($(checkbox).is(':checked')) {
-        $(wrap2).addClass("thumbSelected");
+        $(this).closest("li").addClass("thumbSelected");
       }
       else {
-        $(wrap2).removeClass('thumbSelected');
+        $(this).closest("li").removeClass('thumbSelected');
       }
     });
     checkPermitAction();
@@ -515,11 +515,11 @@ UL.thumbnails SPAN.wrap2 {ldelim}
 		{/html_style}
 		{foreach from=$thumbnails item=thumbnail}
 		{assign var='isSelected' value=$thumbnail.id|@in_array:$selection}
-		<li>
+		<li{if $isSelected} class="thumbSelected"{/if}>
 			<span class="wrap1">
-				<label>
-					<input type="checkbox" name="selection[]" value="{$thumbnail.id}" {if $isSelected}checked="checked"{/if}>
-					<span class="wrap2{if $isSelected} thumbSelected{/if}">
+				<label class="font-checkbox">
+					<span class="icon-check"></span><input type="checkbox" name="selection[]" value="{$thumbnail.id}" {if $isSelected}checked="checked"{/if}>
+					<span class="wrap2">
 					<div class="actions"><a href="{$thumbnail.FILE_SRC}" class="preview-box">{'Zoom'|@translate}</a> &middot; <a href="{$thumbnail.U_EDIT}" target="_blank">{'Edit'|@translate}</a></div>
 						{if $thumbnail.level > 0}
 						<em class="levelIndicatorB">{'Level %d'|@sprintf:$thumbnail.level|@translate}</em>

admin/themes/default/theme.css

@@ -1012,6 +1012,15 @@ LEGEND {
 
 #batchManagerGlobal #duplicates_options label {margin-left:10px;}
 
+#batchManagerGlobal .thumbnails span.icon-check,
+#batchManagerGlobal .thumbnails span.icon-check-empty {
+  position:absolute;
+  left:5px;
+  top:3px;
+  font-size:14px;
+}
+
+
 #order_filters a.addFilter {font-weight:normal;margin-left:20px;}
 #order_filters a.removeFilter {font-weight:normal;}
 #order_filters span.property span.filter:first-child a.removeFilter {display:none;} /* can't delete the first field */

admin/themes/roma/theme.css

@@ -288,8 +288,34 @@ color:transparent;}
 .languageName {color:#ccc;}
 .languageDefault {background-color:#555; color:#aaa;}
 
-#batchManagerGlobal .thumbSelected {background-color:#555 !important}
-#batchManagerGlobal #selectedMessage {background-color:#555; color:#ddd;}
+/* Batch Manager */
+#batchManagerGlobal .thumbnails .font-checkbox [class*="icon-check"]::before {
+  color:#777;
+}
+
+#batchManagerGlobal .thumbnails li:hover .font-checkbox [class*="icon-check"]::before {
+  color:white;
+}
+
+#batchManagerGlobal li.thumbSelected .font-checkbox [class*="icon-check"]::before {
+  color:white;
+}
+
+#batchManagerGlobal UL.thumbnails li:hover .wrap2 {
+  background-color: #ff3363;
+  color: white;
+}
+
+#batchManagerGlobal .thumbSelected { background-color:transparent !important }
+
+#batchManagerGlobal .thumbSelected .wrap2 {
+  background-color: #555 !important;
+}
+
+#batchManagerGlobal #selectedMessage {
+  background-color: #555;
+  color:white;
+}
 
 /* TokenInput (with Facebook style for ROMA) */
 ul.token-input-list {border-color:#666 !important;background-color:#444 !important;}