From 50c5b2e16214888a5ccb2309eb6280aaf3fd0961 Mon Sep 17 00:00:00 2001 From: David Beniamine <david.beniamine@tetras-libre.fr> Date: Mon, 21 Feb 2022 12:26:15 +0100 Subject: [PATCH] Improve CSS and add reset filter --- capsule-prototype/css/online-theme.css | 23 +++++++++++++++++- capsule-prototype/js/online-script.js | 32 ++++++++++++++++++-------- 2 files changed, 45 insertions(+), 10 deletions(-) diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css index db901e3..a35e65b 100644 --- a/capsule-prototype/css/online-theme.css +++ b/capsule-prototype/css/online-theme.css @@ -312,7 +312,6 @@ html, body { font-weight: 200; font-size: 0.9em; - cursor: pointer; padding-bottom: 0; line-height: 1.2em; @@ -345,10 +344,31 @@ html, body { padding: 1.0em 1vw; margin: 2vh 0.5vw 1.5vh 0.5vw; border-radius: 3px; + cursor:pointer; } .mosaic_filter_disabled { opacity: 0.5; } +.mosaic_filter_disabled>h2:after { + background-image: url('images/icn-menu-filter.png'); +} + +.mosaic_filter_item:not(.mosaic_filter_disabled)>h2:after{ + background-image: url('images/icn-menu-preview.png'); +} +.mosaic_filter_item>h2:after{ + display:inline-block; + height:20px; + width:20px; + content: " "; + background-size: 20px 20px; + margin-left: 5px; + padding-top: 3px; + background-repeat: no-repeat; +} +.mosaic_filter_item_all>h2:after { + background-image: url('images/icn-reload.png') !important; +} .mosaic_item img { /* To correctly align image, regardless of content height: */ @@ -359,6 +379,7 @@ html, body { /* The width of the container also implies margin around the images. */ width: 100px; margin: 2vh 0 1.5vh 0; + cursor:pointer; } .mosaic_item .caption { display:block; diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index eb341db..a22c231 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -830,11 +830,28 @@ function openMosaic() { div.append($('<span/>').addClass('caption').text(name)); return div; } + function getFilterElement(text, color, callback, css_class) { + return $('<div/>') + .addClass('mosaic_filter_item') + .addClass(css_class) + .on('click', callback) + .css('background', color) + .append($('<h2/>').text(text)); + } $("#popupMosaicSpace").show(); let container = $('#popupMosaicMosaic'); container.html(''); let filterdiv = $('<div/>').addClass('mosaic_filter'); + filterdiv.append(getFilterElement( + 'Reset filters', + 'rgb(100,100,100)', + function () { + $('.mosaic_filter_item').removeClass('mosaic_filter_disabled'); + $('.mosaic_category').show(); + }, + 'mosaic_filter_item_all' + )); container.append(filterdiv); // TODO is there a better way to iterate over tags or documents ? for ( let [k, v] of Object.entries(rekall.sortings.colors.categories)) { @@ -846,17 +863,14 @@ function openMosaic() { category.append($('<h2/>').text(categoryName)); category.append(grid); - filterdiv.append($('<sdiv/>') - .addClass('mosaic_filter_item') - .on('click', function() { + filterdiv.append(getFilterElement( + categoryName, + v.color,function() { category.toggle(); - console.log(this); - console.log($(this)); $(this).toggleClass('mosaic_filter_disabled'); - }) - .css('background', v.color) - .append($('<h2/>').text(categoryName)) - ); + }, + '' + )); for (let i in v.tags){ grid.append(getMosaicItem(v.tags[i])); -- GitLab