Refactor + css colors coherent + fix bug double open mosaic

capsule-prototype/css/online-theme.css

@@ -324,6 +324,7 @@ html, body {
 .mosaic_category {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+	background:				rgba(0,0,0,.15); 
 	grid-auto-rows: 150px;
 	border-radius: 3px;
 	padding: 1.0em 1vw;

capsule-prototype/js/online-script.js

@@ -818,31 +818,25 @@ function openMosaic() {
     function getMosaicItem(tagOrDoc) {
         let path = Utils.getPreviewPath(tagOrDoc);
         let name = tagOrDoc.getMetadata("Rekall->Name");
-            let type = tagOrDoc.getMetadata("Rekall->Type");
         let url ='';
-        if (typeof path === 'undefined') {
-            if (type =='rekall/link') {
-                url = "../shared/css/images/img-link.png";
-            } else {
-                url = "../shared/css/images/img-note.png";
-            }
+        if ('undefined' === typeof path) {
+            let icon = ('rekall/link' === tagOrDoc.getMetadata("Rekall->Type")) ? "link" : "note";
+            url = "../shared/css/images/img-"+icon+".png";
         } else {
             url = path;
         }
-        let div=$('<div/>').addClass('mosaic_item')
+        let div=$('<div/>').addClass('mosaic_item').on('click', function() {tagOrDoc.openPopupEdit();});
         div.append($('<img/>').attr('src', url));
         div.append($('<span/>').addClass('caption').text(name));
-        div.on('click', function() {tagOrDoc.openPopupEdit();});
         return div;
     }
 
 	$("#popupMosaicSpace").show();  
     let container = $('#popupMosaicMosaic');
+    container.html('');
     // TODO is there a better way to iterate over tags or documents ?
     for ( let [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
-        let category = $('<div/>');
-        category.addClass('mosaic_category');
-        category.css('background', v.color);
+        let category = $('<div/>').addClass('mosaic_category').css('background', getTagGradientColor(v));
         for (let i in v.tags){
             category.append(getMosaicItem(v.tags[i]));
         }
@@ -850,6 +844,24 @@ function openMosaic() {
     }
 }
 
+function getTagGradientColor(tag) {
+	var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;  // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
+	var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
+	var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;   // At least Safari 3+: "[object HTMLElementConstructor]"
+	var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
+	var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
+
+    if(isOpera) {
+        return  "-o-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";
+    }
+    if(isFirefox) {
+        return "-moz-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";          
+    }
+    if((isSafari)||(isChrome)){
+        return "-webkit-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)"; 
+    }
+}
+
 function closeMosaic() {
 	$("#popupMosaicSpace").hide();  
 }
@@ -866,17 +878,9 @@ function fillPopupEdit(tag) {
 	$("#popupTC").css("background",tag.color); 
 	/*$("#popupType").css("color",tag.color);*/
 
-	var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;  // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
-	var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
-	var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;   // At least Safari 3+: "[object HTMLElementConstructor]"
-	var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
-	var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
-
 	var bgColorLeft = tag.color.replace(/rgb/g, "rgba").replace(/\)/g, ",.35)");
 	
-    if(isOpera) bgColorLeft = "-o-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";
-    else if(isFirefox) bgColorLeft = "-moz-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)";          
-    else if((isSafari)||(isChrome))  bgColorLeft = "-webkit-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, "+tag.color+" 100%)"; 
+    bgColorLeft = getTagGradientColor(tag);
 	
 	$("#popupLeft").css("background",bgColorLeft);