highlights selected drawings in list, re: #4670

archesproject · Jun 28, 2019 · 0711430 · 0711430
1 parent 8eed378
commit 0711430
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
@@ -1351,6 +1351,14 @@ ul.tabbed-report-tab-list {
     content: "\f205";
 }
 
+.map-card-feature-item.active .map-card-feature-name {
+    font-weight: 600;
+}
+
+.map-card-feature-list .table {
+    margin-bottom: 0;
+}
+
 .map-card-feature-tool {
     font-size: 0.9em;
     width: 65px;

diff --git a/arches/app/media/js/views/components/cards/map.js b/arches/app/media/js/views/components/cards/map.js
@@ -107,6 +107,7 @@ define([
                     self.draw.changeMode('simple_select', {
                         featureIds: [feature.id]
                     });
+                    self.selectedFeatureIds([feature.id]);
                     _.each(self.featureLookup, function(value) {
                         value.selectedTool(null);
                     });
@@ -120,7 +121,7 @@ define([
                 map.setStyle(style);
             };
 
-            this.selectedFeatures = ko.observableArray();
+            this.selectedFeatureIds = ko.observableArray();
             this.draw = null;
             this.map.subscribe(function(map) {
                 self.draw = new MapboxDraw({
@@ -141,7 +142,9 @@ define([
                 map.on('draw.delete', updateFeatures);
                 map.on('draw.modechange', updateFeatures);
                 map.on('draw.selectionchange', function(e) {
-                    self.selectedFeatures(e.features);
+                    self.selectedFeatureIds(e.features.map(function(feature) {
+                        return feature.id;
+                    }));
                 });
 
                 self.form.on('tile-reset', function() {

diff --git a/arches/app/templates/views/components/map-editor.htm b/arches/app/templates/views/components/map-editor.htm
@@ -121,7 +121,7 @@ <h5 data-bind="text: card.model.instructions"></h5>
                                         <table class="table">
                                             <tbody>
                                                 <!-- ko foreach: {data: self.featureLookup[widget.node_id()].features, as: 'feature'} -->
-                                                <tr class="map-card-feature-item">
+                                                <tr class="map-card-feature-item" data-bind="css: {'active': self.selectedFeatureIds().indexOf(feature.id) >= 0}">
                                                     <td>
                                                         <span class="map-card-feature-name" data-bind="text: feature.geometry.type"></span>
                                                     </td>