adds legend tab content to map component, re: #4670

archesproject · Jun 19, 2019 · 901bde5 · 901bde5
1 parent 3b08e1b
commit 901bde5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 16 deletions.
diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
@@ -1182,10 +1182,20 @@ ul.tabbed-report-tab-list {
     color: rgb(33, 62, 95);
 }
 
-.basemap-listing, .overlay-listing {
+.basemap-listing, .overlay-listing, .legend-listing {
     padding: 20px;
-    cursor: pointer;
     border-bottom: 1px solid rgb(216, 216, 216);
+}
+
+.basemap-listing, .overlay-listing .overlay-opacity-control, .overlay-listing .overlay-name {
+    cursor: pointer;
+}
+
+.overlay-listing, .legend-listing {
+    cursor: grab;
+}
+
+.basemap-listing, .overlay-listing {
     font-size: 16px;
     color: rgb(158, 158, 158);
 }
@@ -1270,8 +1280,17 @@ ul.tabbed-report-tab-list {
     width: 150px;
     opacity: 1;
 }
-
-.basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing.active-overlay, .overlay-listing:hover {
+.legend-listing .legend-name {
+    font-size: 16px;
+}
+.legend-listing .legend-content {
+    padding: 10px 10px 0;
+}
+.layer-listing-icon {
+    padding-right: 10px;
+    min-width: 10px;
+}
+.basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing.active-overlay, .overlay-listing:hover, .legend-listing .legend-name {
     color: rgb(33, 62, 95);
 }
 .basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing:hover {

diff --git a/arches/app/templates/views/components/cards/map.htm b/arches/app/templates/views/components/cards/map.htm
@@ -4,14 +4,6 @@
 {% block form %}
 <div class="map-card-wrapper">
     <div class="map-card-sidebar">
-        <div class="map-card-sidebar-tab" data-bind="click: function() {
-            toggleTab('legend');
-        }, css: {
-            'active': activeTab() === 'legend'
-        }">
-            <i class="fa fa-list-alt"></i>
-            {% trans "Legend" %}
-        </div>
         <div class="map-card-sidebar-tab" data-bind="click: function() {
             toggleTab('basemap');
         }, css: {
@@ -28,6 +20,14 @@
             <i class="fa fa-list"></i>
             {% trans "Overlays" %}
         </div>
+        <div class="map-card-sidebar-tab" data-bind="click: function() {
+            toggleTab('legend');
+        }, css: {
+            'active': activeTab() === 'legend'
+        }">
+            <i class="fa fa-list-alt"></i>
+            {% trans "Legend" %}
+        </div>
     </div>
     <!--ko if: activeTab() -->
         <div class="map-card-sidepanel">
@@ -37,10 +37,12 @@ <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
                 </h4>
                 <!--ko foreach: basemaps -->
                 <div class="basemap-listing" data-bind="
-                    text: name,
                     click: $parent.activeBasemap,
                     css: {'active-basemap': $data === $parent.activeBasemap()}
-                    "></div>
+                    ">
+                    <i data-bind="css: icon" class="layer-listing-icon"></i>
+                    <span data-bind="text: name"></span>
+                </div>
                 <!--/ko -->
             <!--/ko -->
 
@@ -52,11 +54,14 @@ <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
                     data: overlays
                 }">
                     <div class="overlay-listing" data-bind="css: {'active-overlay': onMap}">
-                        <div class="overlay-name" data-bind="text: name,
+                        <div class="overlay-name" data-bind="
                             click: function() {
                                 onMap(!onMap());
                             }
-                        "></div>
+                        ">
+                            <i data-bind="css: icon" class="layer-listing-icon"></i>
+                            <span data-bind="text: name"></span>
+                        </div>
                         <div class="overlay-opacity-control">
                             <i class="fa fa-adjust"></i>
                             <div class="overlay-opacity-slider">
@@ -66,6 +71,23 @@ <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
                     </div>
                 </div>
             <!--/ko -->
+
+            <!--ko if: activeTab() === 'legend' -->
+                <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
+                    {% trans "Legend" %}
+                </h4>
+                <div data-bind="sortable: {
+                    data: overlays
+                }">
+                    <div class="legend-listing" data-bind="css: {'hidden': !onMap()}">
+                        <div class="legend-name">
+                            <i data-bind="css: icon" class="layer-listing-icon"></i>
+                            <span data-bind="text: name"></span>
+                        </div>
+                        <div class="legend-content" data-bind="html: legend"></div>
+                    </div>
+                </div>
+            <!--/ko -->
         </div>
     <!--/ko -->
     <div class="map-card-container" data-bind="mapboxgl: {