diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 98202ca93fb4f17746981c23ed43af1e0c9ef736..44648b68d6cfe7de1024aae9b6181cb9204b32b9 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -302,7 +302,7 @@ html, body {
}
#popupMosaic {
- background: #243538;
+ background: #243538;
box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
border: 0;
border-radius: 3px;
@@ -322,26 +322,27 @@ html, body {
}
.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;
+ 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;
+ margin: 2vh 0 1.5vh 0;
}
.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;
- margin: 2vh 0 1.5vh 0;
+ /* 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;
+ margin: 2vh 0 1.5vh 0;
}
.mosaic_item .caption {
- display:block;
+ display:block;
}
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index e68d867b0798684e03f6fa99f3787f55d7e9ff52..dd0c8a263aa2f9d54a841fcdca65c364d08615b7 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -816,33 +816,27 @@ function closeEdit() {
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";
- }
+ let path = Utils.getPreviewPath(tagOrDoc);
+ let name = tagOrDoc.getMetadata("Rekall->Name");
+ let url ='';
+ 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);
diff --git a/legacy/create.zip b/legacy/create.zip
index a2a703ea770860eb81d342239f65d7a857384d5a..4b2f2211e0693a3b02976ec59b92cf7ce0977b19 100644
Binary files a/legacy/create.zip and b/legacy/create.zip differ