From 2de7a3d0ac2f2c11e3ae9faa8f831d3afb5478e4 Mon Sep 17 00:00:00 2001
From: David Beniamine <david.beniamine@tetras-libre.fr>
Date: Tue, 8 Feb 2022 12:11:18 +0100
Subject: [PATCH] Group items by category with background color in mosaic
---
capsule-prototype/create.zip | Bin 58328 -> 58328 bytes
capsule-prototype/css/online-theme.css | 6 +++++-
capsule-prototype/js/online-script.js | 10 ++++------
3 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip
index 419e3d5aa51ceee98c96258c0207f7532b3a1482..4b2f2211e0693a3b02976ec59b92cf7ce0977b19 100644
GIT binary patch
delta 81
zcmca{ocYFa<_%lcF}o*vOy0guL3FA=QxXW5R&X;gvb<nsU|@N{y!p+#?}lI{&mQOr
SV@NYFOx|~2X0!9dsZ0O^%^kS_
delta 81
zcmca{ocYFa<_%lcF*EeLOy0guL3BaX-^7i7|0I@Ha5FHnykKTvU{Pe){AS&EL$H!(
X5A=jVN>HR37$)z#FSFVC;Z!C7jC3E)
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 64ee7c2..98202ca 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/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;
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 09ab90f..92d32bb 100644
--- a/capsule-prototype/js/online-script.js
+++ b/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);
--
GitLab