Legend: Remove legend previews from toolbar

This follows the design mock at https://www.figma.com/design/6bbLaj8VZViuArkhpzMm9M/PDG-Enhancements?node-id=42-2041&t=w060AL3WjPqoZPdD-1

src/css/map-view.css

@@ -784,7 +784,7 @@ represents 1 unit of the given distance measurement. */
       background-color: var(--portal-col-primary-1, #15324e);
     }
 
-    .layer-item__legend-and-settings {
+    .layer-item__settings {
       /* Show button when layer is hovered. */
       display: flex;
       border: 1px solid var(--portal-col-neutral-4);
@@ -815,19 +815,14 @@ represents 1 unit of the given distance measurement. */
       }
     }
 
-    .layer-item__legend-and-settings {
+    .layer-item__settings {
       /* Show button when layer is shown. */
       display: flex;
       border: 1px solid var(--portal-col-primary-2);
-
-      /* Only show legend when layer is shown. */
-      .layer-item__legend-container {
-        display: block;
-      }
     }
   }
 
-  .layer-item__legend-and-settings {
+  .layer-item__settings {
     /* By default, don't show button. */
     display: none;
     align-items: center;
@@ -844,12 +839,6 @@ represents 1 unit of the given distance measurement. */
       color: var(--portal-col-neutral-6, currentColor);
     }
 
-    .layer-item__legend-container {
-      /* By default, don't show legend. */
-      display: none;
-      margin-left: -0.5rem;
-    }
-
     /* Use the same style on button hover and when selected. */
     &.layer-item--selected,
     &:hover {

src/js/templates/maps/layer-item.html

@@ -7,7 +7,6 @@
     <%= label %>
   </span>
 </span>
-<span class="<%= classes.legendAndSettings %>">
+<span class="<%= classes.settings %>">
   <i class="icon-gear layer-item__settings-toggle"></i>
-  <span class="layer-item__legend-container"></span>
 </span>

src/js/views/maps/LayerDetailsView.js

@@ -11,7 +11,6 @@ define([
   "views/maps/LayerOpacityView",
   "views/maps/LayerInfoView",
   "views/maps/LayerNavigationView",
-  "views/maps/LegendView",
 ], function (
   $,
   _,
@@ -23,7 +22,6 @@ define([
   LayerOpacityView,
   LayerInfoView,
   LayerNavigationView,
-  LegendView,
 ) {
   /**
    * @class LayerDetailsView
@@ -120,13 +118,6 @@ define([
           showTitle: false,
           hideIfError: true,
         },
-        {
-          label: "Legend",
-          view: LegendView,
-          collapsible: false,
-          showTitle: true,
-          hideIfError: true,
-        },
         {
           label: "Opacity",
           view: LayerOpacityView,

src/js/views/maps/LayerItemView.js

@@ -7,26 +7,21 @@ define([
   "models/maps/assets/MapAsset",
   "common/IconUtilities",
   "text!templates/maps/layer-item.html",
-  // Sub-views
-  "views/maps/LegendView",
 ], function (
   $,
   _,
   Backbone,
   MapAsset,
   IconUtilities,
   Template,
-  // Sub-views
-  Legend,
 ) {
   /**
    * @class LayerItemView
    * @classdesc One item in a Layer List: shows some basic information about the Map
    * Asset (Layer), including label and icon. Also has a button that changes the
    * visibility of the Layer of the map (by updating the 'visibility' attribute in the
    * MapAsset model). Clicking on the Layer Item opens the Layer Details panel (by
-   * setting the 'selected' attribute to true in the Layer model.) Additionally, shows a
-   * small preview of a legend for the data that's on the map.
+   * setting the 'selected' attribute to true in the Layer model.)
    * @classcategory Views/Maps
    * @name LayerItemView
    * @extends Backbone.View
@@ -75,8 +70,6 @@ define([
        * @property {string} icon The span element that contains the SVG icon
        * @property {string} visibilityToggle The element that acts like a button to
        * switch the Layer's visibility on and off
-       * @property {string} legendContainer The element that the legend preview will be
-       * inserted into.
        * @property {string} selected The class that gets added to the view when the Layer
        * Item is selected
        * @property {string} shown The class that gets added to the view when the Layer
@@ -89,13 +82,12 @@ define([
         label: "layer-item__label",
         icon: "layer-item__icon",
         visibilityToggle: "layer-item__visibility-toggle",
-        legendContainer: "layer-item__legend-container",
         selected: "layer-item--selected",
         shown: "layer-item--shown",
         labelText: "layer-item__label-text",
         highlightedText: "layer-item__highlighted-text",
         categorized: "layer-item__categorized",
-        legendAndSettings: "layer-item__legend-and-settings",
+        settings: "layer-item__settings",
         badge: "map-view__badge",
         tooltip: "map-tooltip",
       },
@@ -117,7 +109,7 @@ define([
       events: function () {
         try {
           var events = {};
-          events["click ." + this.classes.legendAndSettings] = "toggleSelected";
+          events["click ." + this.classes.settings] = "toggleSelected";
           events["click"] = "toggleVisibility";
           return events;
         } catch (error) {
@@ -176,16 +168,6 @@ define([
             this.insertIcon();
           }
 
-          // Add a thumbnail / legend preview
-          const legendContainer = this.el.querySelector(
-            "." + this.classes.legendContainer,
-          );
-          const legendPreview = new Legend({
-            model: this.model,
-            mode: "preview",
-          });
-          legendContainer.append(legendPreview.render().el);
-
           // Ensure the view's main element has the given class name
           this.el.classList.add(this.className);
 
@@ -284,8 +266,8 @@ define([
       toggleVisibility: function (event) {
         try {
           if (
-            this.$(`.${this.classes.legendAndSettings}`).is(event.target) ||
-            this.$(`.${this.classes.legendAndSettings}`).has(event.target)
+            this.$(`.${this.classes.settings}`).is(event.target) ||
+            this.$(`.${this.classes.settings}`).has(event.target)
               .length > 0
           ) {
             return;
@@ -324,11 +306,11 @@ define([
         try {
           var layerModel = this.model;
           if (layerModel.get("selected")) {
-            this.$(`.${this.classes.legendAndSettings}`).addClass(
+            this.$(`.${this.classes.settings}`).addClass(
               this.classes.selected,
             );
           } else {
-            this.$(`.${this.classes.legendAndSettings}`).removeClass(
+            this.$(`.${this.classes.settings}`).removeClass(
               this.classes.selected,
             );
           }