diff --git a/css/80_app_fb.css b/css/80_app_fb.css index 0e3675717..fa2a5268d 100644 --- a/css/80_app_fb.css +++ b/css/80_app_fb.css @@ -357,9 +357,9 @@ button.rapid-features.layer-off use { /* For things that should stack in rows */ .rapid-stack { - display: flex; - flex-direction: column; - align-items: flex-start; + display: flex; + flex-direction: column; + align-items: flex-start; } /* Rapid modal dialogs */ @@ -902,50 +902,46 @@ div.combobox.combobox-dataset-categories a:focus { text-align: center; margin: 50px; } -.rapid-catalog-datasets-spinner { - filter: brightness(2)contrast(0.8); -} .rapid-catalog-datasets { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - align-items: flex-start; - width: 100%; + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-items: flex-start; + padding: 5px; + width: 100%; } .rapid-catalog-dataset { - flex: 0 1 50%; - padding: 15px 25px; - margin-bottom: 10px; - color: #eee; - display: flex; - flex-flow: row nowrap; + display: flex; + flex: 1 1 40%; + flex-flow: row nowrap; + padding: 10px; + margin: 5px; + border-radius: 5px; + height: 220px; + color: #eee; +} +.rapid-catalog-dataset.added { + background: rgba(55, 55, 55, 0.9); } .rapid-catalog-dataset-label { - flex: 1; - padding: 0 8px; + flex: 1; + padding: 0 8px; } .rapid-catalog-dataset-thumb { - flex: 0; + flex: 0; } img.rapid-catalog-dataset-thumbnail { - border-radius: 10px; - object-fit: cover; - height: 130px; - width: 180px; + border-radius: 10px; + object-fit: cover; + height: 130px; + width: 180px; } img.rapid-catalog-dataset-thumbnail.inverted { - filter: invert(1)brightness(2)contrast(0.75); + filter: invert(1) brightness(2) contrast(0.75); } -.rapid-catalog-dataset button.rapid-catalog-dataset-action { - font-size: 12px; - height: 28px; - border-radius: 14px; - margin: 10px 0; - padding: 0 15px; -} .rapid-catalog-dataset-name { font-weight: bold; font-size: 14px; @@ -978,6 +974,17 @@ img.rapid-catalog-dataset-thumbnail.inverted { .dataset-category-featured { background: #a21; } +.dataset-added-text { + color: #16da16; +} + +.rapid-catalog-dataset button.rapid-catalog-dataset-action { + font-size: 12px; + height: 28px; + border-radius: 14px; + margin: 10px 0; + padding: 0 15px; +} /* Colorpicker popup */ .colorpicker-popup { diff --git a/data/core.yaml b/data/core.yaml index 26ece0865..4b2fe3873 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1122,9 +1122,14 @@ en: view_manage_datasets: "Add/Manage Datasets" center_map: Center map here worldwide: Worldwide - filter_datasets: filter datasets - any_type: any type + no_datasets: No datasets available. + remove: Remove + add_dataset: Add Dataset + dataset_added: Dataset added + more_info: More Info clear_filters: Clear Filters + filter_datasets: filter datasets # placeholder text for the filter text + any_type: any type # placeholder text for the filter type dropdown datasets_found: one: "{n} dataset found" other: "{gt}{n} datasets found" # {gt} = placeholder for greater than symbol '>', {n} = count @@ -1141,10 +1146,6 @@ en: preview: preview roads: roads trees: trees - no_datasets: No datasets available. - remove: Remove - add_dataset: Add Dataset - more_info: More Info fbRoads: label: Facebook Roads description: AI predicted roads detected from Maxar Premium imagery and available in over 80 countries. diff --git a/data/l10n/core.en.json b/data/l10n/core.en.json index 08548f2b6..1385a58f7 100644 --- a/data/l10n/core.en.json +++ b/data/l10n/core.en.json @@ -1403,9 +1403,14 @@ "view_manage_datasets": "Add/Manage Datasets", "center_map": "Center map here", "worldwide": "Worldwide", + "no_datasets": "No datasets available.", + "remove": "Remove", + "add_dataset": "Add Dataset", + "dataset_added": "Dataset added", + "more_info": "More Info", + "clear_filters": "Clear Filters", "filter_datasets": "filter datasets", "any_type": "any type", - "clear_filters": "Clear Filters", "datasets_found": { "one": "{n} dataset found", "other": "{gt}{n} datasets found" @@ -1424,10 +1429,6 @@ "roads": "roads", "trees": "trees" }, - "no_datasets": "No datasets available.", - "remove": "Remove", - "add_dataset": "Add Dataset", - "more_info": "More Info", "fbRoads": { "label": "Facebook Roads", "description": "AI predicted roads detected from Maxar Premium imagery and available in over 80 countries." diff --git a/modules/ui/UiRapidCatalog.js b/modules/ui/UiRapidCatalog.js index 767908584..4f504910d 100644 --- a/modules/ui/UiRapidCatalog.js +++ b/modules/ui/UiRapidCatalog.js @@ -445,6 +445,10 @@ export class UiRapidCatalog extends EventEmitter { $$link .call(uiIcon('#rapid-icon-out-link', 'inline')); + $$label + .append('div') + .attr('class', 'dataset-added-text'); + $$label .append('button') .attr('class', 'rapid-catalog-dataset-action') @@ -464,6 +468,7 @@ export class UiRapidCatalog extends EventEmitter { $datasets = $datasets.merge($$datasets); $datasets + .classed('added', d => d.added) .classed('hide', d => d.filtered); $datasets.selectAll('.rapid-catalog-dataset-name') @@ -475,7 +480,7 @@ export class UiRapidCatalog extends EventEmitter { $$datasets.selectAll('.dataset-category') .text(d => { if (d === 'preview') return ''; - const star = (d === 'featured') ? '\u2b50 ' : ''; // emoji star + const star = (d === 'featured') ? '\u2b50 ' : ''; // 2b50 = emoji star const text = l10n.t(`rapid_feature_toggle.category.${d}`, { default: d }); return star + text; }); @@ -486,6 +491,9 @@ export class UiRapidCatalog extends EventEmitter { $datasets.selectAll('.rapid-catalog-dataset-snippet') .html(d => this.highlight(this._filterText, d.getDescription())); + $datasets.selectAll('.dataset-added-text') + .text(d => d.added ? '\u2705 ' + l10n.t('rapid_feature_toggle.dataset_added') : ''); // 2705 = emoji check + $datasets.selectAll('.rapid-catalog-dataset-action') .classed('secondary', d => d.added) .text(d => d.added ? l10n.t('rapid_feature_toggle.remove') : l10n.t('rapid_feature_toggle.add_dataset'));