From f3dd4b72a03d58aa57ff509a2417688346d69050 Mon Sep 17 00:00:00 2001
From: David Beniamine <david.beniamine@tetras-libre.fr>
Date: Fri, 4 Feb 2022 18:44:24 +0100
Subject: [PATCH] WIP : add a mosaic of tags and documents

---
 capsule-prototype/create.zip                  | Bin 58196 -> 58328 bytes
 .../css/images/icn-menu-mosaic.png            | Bin 0 -> 365 bytes
 capsule-prototype/css/online-theme.css        |  61 +++++++++++++++++-
 capsule-prototype/index.html                  |  12 ++++
 capsule-prototype/js/online-script.js         |  52 ++++++++++++++-
 5 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 capsule-prototype/css/images/icn-menu-mosaic.png

diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip
index a2a703ea770860eb81d342239f65d7a857384d5a..419e3d5aa51ceee98c96258c0207f7532b3a1482 100644
GIT binary patch
delta 3468
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
SP3C&+z_p8wfq~;L$YKC<F^vTP

delta 3308
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

diff --git a/capsule-prototype/css/images/icn-menu-mosaic.png b/capsule-prototype/css/images/icn-menu-mosaic.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b272e3abf67c16f31c173f1e1683fe1bc423108
GIT binary patch
literal 365
zcmeAS@N?(olHy`uVBq!ia0y~yU{C>J4mJh`hKCF@W-u@?u%tWsIx;Y9?C1WI$jZRL
zppfhl<jcTNrN+R}(89p*i-Ccm;RORjsR0ASs{{rHs~HRo;stYd1==t$Ft8<gySp%e
z!B6Mi^$ZLQoCO|{#S9D#31Ivo+vz+514F*2i(^Q{;kVZu`5F{>TrOU#Fz5@*KX&$5
zZ;nT)Gmqo{=xNh@oD^m-{*ZjnJ*jKv)Fs<@RZkUp>GsahsCsrlkcRm6s;rW2H`C<&
z+Z;}_-kKb>_hs(a$BFwV-gGT^Yt5o`;rWNZ4`h`t-2PF=Fyk%DrS@2!*68#?1_lPz
z64!{5l*E!$tK_28#FA77BLgENT>~Rs1CtO#11lqQD??*#0|P4qgNQAAPNHbY%}>cp
WtHiBA^Ce3u$m^c2elF{r5}E*eKXg(6

literal 0
HcmV?d00001

diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 8c0dbb6..64ee7c2 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/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"); }  
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index d1fd20f..653fe15 100644
--- a/capsule-prototype/index.html
+++ b/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">
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 34f3d2b..09ab90f 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -356,6 +356,17 @@ function setEditionControls() {
 			addLink(myLink);
 		}
 	});
+
+	$("#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){  
@@ -802,6 +813,45 @@ function closeEdit() {
 	$("#popupSpace").hide();   
 	$("#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) {                
 	
@@ -1190,4 +1240,4 @@ $(window).resize(function(e) {
 	}
 }); 
 $(window).trigger("resize");
-	
\ No newline at end of file
+	
-- 
GitLab