Make it a little easier to see which datasets are added

This gives the added datasets some background grey color and a message like "dataset added", next to the "remove" button
facebook · Dec 10, 2024 · efc1137 · efc1137
1 parent 079ef96
commit efc1137
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'));