BGDIINF_SB-3194: Swap checkbox and toggle children in catalogue tree

geoadmin · Dec 12, 2023 · 0a919cc · 0a919cc
1 parent cd975f6
commit 0a919cc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -4,7 +4,7 @@
  * layers or a single layer.
  */
 
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
 import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -116,19 +116,6 @@ function zoomToLayer() {
             @click="onItemClick"
             @mouseenter="startLayerPreview"
         >
-            <button
-                v-if="hasChildren"
-                class="btn btn-rounded"
-                :class="{
-                    'btn-lg': !compact,
-                }"
-                @click.stop="onCollapseClick"
-            >
-                <FontAwesomeLayers>
-                    <FontAwesomeIcon class="text-secondary" icon="fa-regular fa-circle" />
-                    <FontAwesomeIcon size="xs" :icon="showChildren ? 'minus' : 'plus'" />
-                </FontAwesomeLayers>
-            </button>
             <button
                 v-if="canBeAddedToTheMap"
                 class="btn"
@@ -146,6 +133,19 @@ function zoomToLayer() {
                     }`"
                 />
             </button>
+            <button
+                v-if="hasChildren"
+                class="btn btn-rounded"
+                :class="{
+                    'text-primary': isPresentInActiveLayers || isCurrentlyHidden,
+                    'btn-lg': !compact,
+                }"
+                @click.stop="onCollapseClick"
+            >
+                <!-- TODO change to the regular icons once we have bought fontawesome fonts -->
+                <FontAwesomeIcon :icon="['fas', showChildren ? 'circle-minus' : 'circle-plus']" />
+            </button>
+
             <span
                 class="menu-catalogue-item-name"
                 :class="{ 'text-primary': isPresentInActiveLayers || isCurrentlyHidden }"

diff --git a/src/modules/menu/components/LayerLegendPopup.vue b/src/modules/menu/components/LayerLegendPopup.vue
@@ -53,7 +53,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <ModalWithBackdrop :title="title" :allow-print="true" @close="emit('close', layerId)">
+    <ModalWithBackdrop :title="title" :allow-print="true" fluid @close="emit('close', layerId)">
         <div class="layer-legend" data-cy="layer-legend-popup">
             <h4 v-if="!isExternal && !htmlContent" class="mb-0">
                 <font-awesome-icon spin :icon="['fa', 'spinner']" />

diff --git a/src/setup-fontawesome.js b/src/setup-fontawesome.js
@@ -23,6 +23,8 @@ import {
     faChevronUp,
     faCircle,
     faCircleChevronRight,
+    faCircleMinus,
+    faCirclePlus,
     faClockRotateLeft,
     faCog,
     faCube,
@@ -116,6 +118,8 @@ library.add(
     faXmark,
     faSortAlphaUp,
     faSortAlphaDown,
+    faCirclePlus,
+    faCircleMinus,
     // Regular
     faCheckSquare,
     faClock,