diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip
index a2a703ea770860eb81d342239f65d7a857384d5a..419e3d5aa51ceee98c96258c0207f7532b3a1482 100644
Binary files a/capsule-prototype/create.zip and b/capsule-prototype/create.zip differ
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
Binary files /dev/null and b/capsule-prototype/css/images/icn-menu-mosaic.png differ
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 8c0dbb6e3d7f9637ae94c467eb86a175dc15bf76..64ee7c2c8a2eac7b971e3b80c731f8658bc40100 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 d1fd20f7e1fe630c7a3512afe37b28db07dc8e7b..653fe15a8339a1b2de40e626397fe5dec6d03e8a 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">✕</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 34f3d2bdad3de974802694b02184d90b8328f83f..09ab90fda5c4d77d66d5199712107dc1a2d0948a 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
+