WIP : add a mosaic of tags and documents

capsule-prototype/css/online-theme.css

@@ -19,7 +19,7 @@ html, body {
 	user-select: 			none;
 }    
 
-#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace {
+#popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace, #popupMosaicSpace {
 	width:					100%;
 	height:					100%;
 	background:				rgba(0,0,0,.25);
@@ -271,7 +271,7 @@ html, body {
 	
 }       
 
-#popupAddLinkMessage {    
+#popupAddLinkMessage, #popupMosaicMessage {    
 	font-weight:			100;        
 	color:					rgba(255,255,255,.75);  
 	text-align:				center;  
@@ -301,7 +301,44 @@ html, body {
 	margin:					2vh 0 1.5vh 0;
 }
 
+#popupMosaic {
+    background: #243538;
+	box-shadow:				0 1px 3px rgba(0,0,0,.2) inset;  
+	border:					0;   
+	border-radius:			3px;     
+	color:					rgba(255,255,255,.85); 
+	width:					30vw;   
+	display:				inline-block;   
+	
+	font-weight:			200;
+	font-size:				0.9em;      
+	cursor:					pointer;  
+	padding-bottom:			0;    
+	
+	line-height:			1.2em;  
+	padding:				1.0em 1vw;
+	
+	margin:					2vh 0 1.5vh 0;
+}
+
+#popupMosaicMosaic {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+    grid-auto-rows: 150px;
+}
 
+.mosaic_item img {
+    /* To correctly align image, regardless of content height: */
+    vertical-align: top;
+    display: inline-block;
+    /* To horizontally center images and caption */
+    text-align: center;
+    /* The width of the container also implies margin around the images. */
+    width: 100px;
+}
+.mosaic_item .caption {
+    display:block;
+}
 
 
 
@@ -395,9 +432,26 @@ html, body {
 	right:					25.5vw;
 	z-index:				110;   
 } 
-#closePopupEdit:hover {            	 
+
+#closePopupMosaic {                  
+	width:					40px; 
+	height:					40px;    
+	font-weight:			200;    
+	color:					rgba(255,255,255,.25);     
+	font-size:				30px;                       
+	text-align:				center;
+	line-height:			40px;   
+	cursor:					pointer;           
+	border-radius:			3px;  
+	position:				fixed;
+	top:					2vh;
+	right:					34vw;
+	z-index:				110;   
+} 
+#closePopupEdit:hover, #closePopupMosaic:hover {            	 
 	color:					rgba(255,255,255,.75);
 }
+
 .popupRightItem {
 	width:					25vw;                   
 	display:				inline-block;      
@@ -766,6 +820,7 @@ html, body {
 #left_menu_item_icn_highlight { background:url("images/icn-menu-highlight.png"); }
 #left_menu_item_icn_search { background:url("images/icn-menu-search.png"); }
 #left_menu_item_icn_keywords { background:url("images/icn-menu-keywords.png"); }  
+#left_menu_item_icn_mosaic { background:url("images/icn-menu-mosaic.png"); }
 
 #left_menu_item_icn_preview { background:url("images/icn-menu-preview.png"); }
 #left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); }  

capsule-prototype/index.html

@@ -112,6 +112,13 @@
 				</div>
 			</div>
 		</div>  
+		<div id="popupMosaicSpace">                        
+			<div id="popupMosaic">                          
+				<div id="popupMosaicMessage">Notes and documents</div>                                      
+				<div id="closePopupMosaic">&#10005;</div> 
+				<div id="popupMosaicMosaic"></div>
+			</div>
+		</div>  
 		<div id="popupSettingsSpace">  
 			<table id="popupSettings">  
 				<tr>
@@ -231,6 +238,11 @@
 						<div class="left_menu_item_title">Add File</div>
 						<div class="left_menu_item_value"></div>
 					</div>
+				<div class="left_menu_item dropable" id="left_menu_item_open_mosaic" title="Mosaic">
+					<div class="left_menu_item_icn" id="left_menu_item_icn_mosaic"></div>
+					<div class="left_menu_item_title">Open Mosaic</div>
+					<div class="left_menu_item_value"></div>
+				</div>
 			</tr></td>
 		</table>
 	    <video id="video" class="video-js vjs-default-skin vjs-big-play-centered">

capsule-prototype/js/online-script.js

@@ -357,6 +357,17 @@ function setEditionControls() {
 		}
 	});
 
+	$("#left_menu_item_open_mosaic").click(function(event){   
+		event.stopPropagation();   
+		rekall.timeline.pause();
+        openMosaic();
+	});       
+
+	$("#closePopupMosaic").click(function(event){
+		event.stopPropagation();  
+		closeMosaic(); 
+	});
+                            
 	
 	$("#popupEdit").click(function(event){  
 		event.stopPropagation(); 
@@ -803,6 +814,45 @@ function closeEdit() {
 	$("#popupEdit").hide();
 }                      
 
+function openMosaic() {
+    function getMosaicItemHtml(tagOrDoc) {
+            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";
+            } else {
+                url = "../shared/css/images/img-note.png";
+            }
+        } 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="../shared/css/images/img-'+type+'.png"></img><span class="caption">'+text+'</span></div>';
+    }
+
+    let html ='';
+	$("#popupMosaicSpace").show();  
+    // TODO is there a better way to iterate over tags or documents ?
+    for ( [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
+        for (let i in v.tags){
+            html += getMosaicItemHtml(v.tags[i]);
+        }
+    }
+    console.log(html);
+    $('#popupMosaicMosaic').html(html);
+}
+
+function closeMosaic() {
+	$("#popupMosaicSpace").hide();  
+}
+                           
 function fillPopupEdit(tag) {                
 	
 	//if(rekall_common.owner.canEdit) { alert("edit mode !"); }