diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css index d1fc014924ae21f95a567bff81710956f23808cf..db901e39c4c024798b7cf9f19e7ce9ac59738c2d 100644 --- a/capsule-prototype/css/online-theme.css +++ b/capsule-prototype/css/online-theme.css @@ -324,13 +324,30 @@ html, body { } .mosaic_category { + padding: 1.0em 1vw; + margin: 2vh 0 1.5vh 0; + border-radius: 3px; + background: rgba(0,0,0,.15); +} + +.mosaic_category_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); - background: rgba(0,0,0,.15); grid-auto-rows: 150px; - border-radius: 3px; +} + +.mosaic_filter { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); +} + +.mosaic_filter_item { padding: 1.0em 1vw; - margin: 2vh 0 1.5vh 0; + margin: 2vh 0.5vw 1.5vh 0.5vw; + border-radius: 3px; +} +.mosaic_filter_disabled { + opacity: 0.5; } .mosaic_item img { diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index b3844ecbe54144573b76e2e28cdfbea1d10c7d81..eb341dbe22f42fc679f0a72614be0c134aa49120 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -834,13 +834,32 @@ function openMosaic() { $("#popupMosaicSpace").show(); let container = $('#popupMosaicMosaic'); container.html(''); - // TODO append filter div + let filterdiv = $('<div/>').addClass('mosaic_filter'); + 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)) { + let categoryName = v.categoryRaw; let category = $('<div/>').addClass('mosaic_category').css('background', getTagGradientColor(v)); - // TODO append button on filter div + + let grid = $('<div/>').addClass('mosaic_category_grid'); + + category.append($('<h2/>').text(categoryName)); + category.append(grid); + + filterdiv.append($('<sdiv/>') + .addClass('mosaic_filter_item') + .on('click', 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){ - category.append(getMosaicItem(v.tags[i])); + grid.append(getMosaicItem(v.tags[i])); } container.append(category); }