Improve CSS and add reset filter

capsule-prototype/css/online-theme.css

@@ -312,7 +312,6 @@ html, body {
 	
 	font-weight:			200;
 	font-size:				0.9em;      
-	cursor:					pointer;  
 	padding-bottom:			0;    
 	
 	line-height:			1.2em;  
@@ -345,10 +344,31 @@ html, body {
 	padding: 1.0em 1vw;
 	margin: 2vh 0.5vw 1.5vh 0.5vw;
 	border-radius: 3px;
+    cursor:pointer;
 }
 .mosaic_filter_disabled {
     opacity: 0.5;
 }
+.mosaic_filter_disabled>h2:after {
+    background-image: url('images/icn-menu-filter.png');
+}
+
+.mosaic_filter_item:not(.mosaic_filter_disabled)>h2:after{
+    background-image: url('images/icn-menu-preview.png');
+}
+.mosaic_filter_item>h2:after{
+    display:inline-block;
+    height:20px;
+    width:20px;
+    content: " ";
+    background-size: 20px 20px;
+    margin-left: 5px;
+    padding-top: 3px;
+    background-repeat: no-repeat;
+}
+.mosaic_filter_item_all>h2:after {
+    background-image: url('images/icn-reload.png') !important;
+}
 
 .mosaic_item img {
 	/* To correctly align image, regardless of content height: */
@@ -359,6 +379,7 @@ html, body {
 	/* The width of the container also implies margin around the images. */
 	width: 100px;
 	margin: 2vh 0 1.5vh 0;
+    cursor:pointer;
 }
 .mosaic_item .caption {
 	display:block;

capsule-prototype/js/online-script.js

@@ -830,11 +830,28 @@ function openMosaic() {
         div.append($('<span/>').addClass('caption').text(name));
         return div;
     }
+    function getFilterElement(text, color, callback, css_class) {
+        return $('<div/>')
+            .addClass('mosaic_filter_item')
+            .addClass(css_class)
+            .on('click', callback)
+            .css('background', color)
+            .append($('<h2/>').text(text));
+    }
 
 	$("#popupMosaicSpace").show();  
     let container = $('#popupMosaicMosaic');
     container.html('');
     let filterdiv = $('<div/>').addClass('mosaic_filter');
+    filterdiv.append(getFilterElement(
+        'Reset filters',
+        'rgb(100,100,100)',
+        function () {
+            $('.mosaic_filter_item').removeClass('mosaic_filter_disabled');
+            $('.mosaic_category').show();
+        },
+        'mosaic_filter_item_all'
+    ));
     container.append(filterdiv);
     // TODO is there a better way to iterate over tags or documents ?
     for ( let [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
@@ -846,17 +863,14 @@ function openMosaic() {
         category.append($('<h2/>').text(categoryName));
         category.append(grid);
 
-        filterdiv.append($('<sdiv/>')
-            .addClass('mosaic_filter_item')
-            .on('click', function() {
+        filterdiv.append(getFilterElement(
+            categoryName,
+            v.color,function() {
                 category.toggle();
-                console.log(this);
-                console.log($(this));
                 $(this).toggleClass('mosaic_filter_disabled');
-            })
-            .css('background', v.color)
-            .append($('<h2/>').text(categoryName))
-        );
+            },
+            ''
+        ));
 
         for (let i in v.tags){
             grid.append(getMosaicItem(v.tags[i]));