Group items by category with background color in mosaic

capsule-prototype/css/online-theme.css

@@ -321,10 +321,13 @@ html, body {
 	margin:					2vh 0 1.5vh 0;
 }
 
-#popupMosaicMosaic {
+.mosaic_category {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
     grid-auto-rows: 150px;
+    border-radius: 3px;
+    padding: 1.0em 1vw;
+    margin: 2vh 0 1.5vh 0;
 }
 
 .mosaic_item img {
@@ -335,6 +338,7 @@ html, body {
     text-align: center;
     /* The width of the container also implies margin around the images. */
     width: 100px;
+    margin: 2vh 0 1.5vh 0;
 }
 .mosaic_item .caption {
     display:block;

capsule-prototype/js/online-script.js

@@ -819,11 +819,6 @@ function openMosaic() {
             let path = Utils.getPreviewPath(tagOrDoc);
             let name = tagOrDoc.getMetadata("Rekall->Name");
 	        let type = tagOrDoc.getMetadata("Rekall->Type");
-            let color = tagOrDoc.color;
-            console.log(name);
-            console.log(type);
-            console.log(color);
-            console.log(path);
         if (typeof path === 'undefined') {
             if (type =='rekall/link') {
                 url = "../shared/css/images/img-link.png";
@@ -833,7 +828,7 @@ function openMosaic() {
         } else {
             url = path;
         }
-        return '<div class="mosaic_item style="background:'+color+'"><img src="'+url+'"></img><span class="caption">'+name+'</span></div>';
+        return '<div class="mosaic_item "><img src="'+url+'"></img><span class="caption">'+name+'</span></div>';
         return '<div class="mosaic_item"><img src="../shared/css/images/img-'+type+'.png"></img><span class="caption">'+text+'</span></div>';
     }
 
@@ -841,9 +836,12 @@ function openMosaic() {
 	$("#popupMosaicSpace").show();  
     // TODO is there a better way to iterate over tags or documents ?
     for ( [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
+        let color = v.color;
+        html += '<div class="mosaic_category" style="background:'+color+'">';
         for (let i in v.tags){
             html += getMosaicItemHtml(v.tags[i]);
         }
+        html += '</div>';
     }
     console.log(html);
     $('#popupMosaicMosaic').html(html);