Use caret instead of plus/minus icon

ltshb · ltshb · commit 000ac30635d6 · 2024-03-27T11:17:35.000+01:00
Also remove the border of button which don't need a user feedback on click, like
for example the caret, checkbox and cog icon, as they are animated then don't
require any feedback.
diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -228,7 +228,7 @@ function containsLayer(layers, searchText) {
         >
             <button
                 v-if="canBeAddedToTheMap"
-                class="btn"
+                class="btn border-0"
                 :class="{
                     'text-primary': isPresentInActiveLayers,
                     'btn-lg': !compact,
@@ -242,21 +242,20 @@ function containsLayer(layers, searchText) {
             </button>
             <button
                 v-if="hasChildren"
-                class="btn btn-rounded"
+                class="btn border-0"
                 :class="{
                     'text-primary': isPresentInActiveLayers,
                     'btn-lg': !compact,
                 }"
                 :data-cy="`catalogue-collapse-layer-button-${item.id}`"
                 @click.stop="onCollapseClick"
             >
-                <!-- TODO change to the regular icons once we have bought fontawesome fonts -->
-                <FontAwesomeIcon :icon="['fas', showChildren ? 'circle-minus' : 'circle-plus']" />
+                <FontAwesomeIcon :icon="['fas', showChildren ? 'caret-down' : 'caret-right']" />
             </button>
 
             <TextTruncate
                 :text="item.name"
-                class="menu-catalogue-item-name"
+                class="menu-catalogue-item-name px-1"
                 :class="{ 'text-primary': isPresentInActiveLayers }"
                 :data-cy="`catalogue-tree-item-name-${item.id}`"
                 :tippy-options="{ placement: isPhoneMode ? 'top' : 'right' }"
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue
@@ -118,23 +118,23 @@ function duplicateLayer() {
     >
         <div class="menu-layer-item-title">
             <button
-                class="btn d-flex align-items-center"
+                class="btn border-0 d-flex align-items-center"
                 :class="{ 'btn-lg': !compact }"
                 :data-cy="`button-remove-layer-${id}-${index}`"
                 @click="onRemoveLayer"
             >
                 <FontAwesomeIcon icon="times-circle" />
             </button>
             <button
-                class="btn d-flex align-items-center"
+                class="btn border-0 d-flex align-items-center"
                 :class="{ 'btn-lg': !compact }"
                 :data-cy="`button-toggle-visibility-layer-${id}-${index}`"
                 @click="onToggleLayerVisibility"
             >
                 <FontAwesomeIcon :icon="`far fa-${layer.visible ? 'check-' : ''}square`" />
             </button>
             <TextTruncate
-                class="menu-layer-item-name"
+                class="menu-layer-item-name p-1"
                 :class="{ 'text-body-tertiary fst-italic': showSpinner }"
                 :data-cy="`active-layer-name-${id}-${index}`"
                 :tippy-options="{ placement: isPhoneMode ? 'top' : 'right' }"
@@ -143,7 +143,7 @@ function duplicateLayer() {
             >
             <button
                 v-if="showSpinner"
-                class="loading-button btn"
+                class="loading-button btn border-0"
                 :class="{
                     'btn-lg': !compact,
                 }"
@@ -178,7 +178,7 @@ function duplicateLayer() {
                 />
             </ThirdPartDisclaimer>
             <button
-                class="btn"
+                class="btn border-0"
                 :class="{
                     'btn-lg': !compact,
                     'flip text-primary': showLayerDetail,
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersListItemTimeSelector.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersListItemTimeSelector.vue
@@ -100,7 +100,7 @@ function hidePopover() {
     <button
         v-if="hasMultipleTimestamps"
         ref="timeSelectorButton"
-        class="btn btn-secondary"
+        class="btn btn-secondary me-2"
         :class="{
             'btn-sm': compact,
         }"
diff --git a/src/modules/menu/components/advancedTools/MenuAdvancedToolsListItem.vue b/src/modules/menu/components/advancedTools/MenuAdvancedToolsListItem.vue
@@ -62,11 +62,11 @@ onUnmounted(() => {
             @click="emit('toggleMenu')"
         >
             <FontAwesomeIcon
-                class="dropdown-icon me-2"
-                :class="{ invisible: !dropdownMenu }"
+                class="btn border-0 px-2"
+                :class="{ invisible: !dropdownMenu, 'text-primary': isSelected }"
                 :icon="`caret-${isSelected ? 'down' : 'right'}`"
             />
-            <span ref="tippyTooltip" class="pe-1">{{ i18n.t(title) }} </span>
+            <span ref="tippyTooltip" class="px-1">{{ i18n.t(title) }} </span>
         </a>
         <slot />
     </div>
@@ -76,11 +76,6 @@ onUnmounted(() => {
 @import 'src/scss/webmapviewer-bootstrap-theme';
 @import 'src/modules/menu/scss/menu-items';
 .advanced-tools-item {
-    .dropdown-icon {
-        // The min-width here is to avoid size changes when toggling the dropdown, the caret-down
-        // icon is wider than the caret right
-        min-width: 8.5px;
-    }
     .advanced-tools-title {
         // Here we add the menu-item styling to the title only to avoid hover
         // on the content once the item has been opened
diff --git a/src/modules/menu/components/menu/MenuSection.vue b/src/modules/menu/components/menu/MenuSection.vue
@@ -16,8 +16,12 @@
             data-toggle="collapse"
             @click="toggleShowBody"
         >
-            <span class="menu-section-title">
-                <button class="btn menu-section-title-icon" type="button" :disabled="disabled">
+            <span class="menu-section-title d-flex align-items-center">
+                <button
+                    class="btn border-0 menu-section-title-icon"
+                    type="button"
+                    :disabled="disabled"
+                >
                     <font-awesome-icon :icon="['fas', titleCaretIcon]" />
                 </button>
                 <span class="ms-2 menu-section-title-text">{{ title }}</span>
@@ -132,7 +136,7 @@ $section-border: 1px;
     display: flex;
     flex: none;
     overflow: visible;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.6rem;
     line-height: 1.5;
     border-top: $section-border solid $gray-400;
     background-color: $light;
@@ -177,11 +181,6 @@ $section-border: 1px;
     }
 }
 
-.menu-section-title-icon {
-    &:disabled {
-        border-color: transparent;
-    }
-}
 .menu-section-body {
     background-color: $white;
     overflow: auto;
diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -6,8 +6,12 @@
             data-cy="menu-share-embed-button"
             @click="toggleEmbedSharing"
         >
-            <FontAwesomeIcon :icon="`caret-${showEmbedSharing ? 'down' : 'right'}`" />
-            <span class="ms-2">{{ $t('share_more') }}</span>
+            <FontAwesomeIcon
+                class="btn border-0 px-2"
+                :class="{ 'text-primary': showEmbedSharing }"
+                :icon="`caret-${showEmbedSharing ? 'down' : 'right'}`"
+            />
+            <span class="px-1">{{ $t('share_more') }}</span>
         </a>
         <CollapseTransition :duration="200">
             <div v-show="showEmbedSharing" class="p-2 ps-4 card border-light">
diff --git a/src/modules/menu/scss/menu-items.scss b/src/modules/menu/scss/menu-items.scss
@@ -16,18 +16,17 @@
 .menu-title {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-
-    padding: 0 0.8rem;
+    padding-left: 8px;
+    padding-right: 8px;
     height: 2.5rem;
 
     .compact & {
         height: 2.2rem;
     }
 
     & > button {
-        padding: 0;
+        padding-left: 6px;
+        padding-right: 6px;
     }
 }
 
diff --git a/tests/cypress/tests-e2e/importToolMaps.cy.js b/tests/cypress/tests-e2e/importToolMaps.cy.js
@@ -108,22 +108,22 @@ describe('The Import Maps Tool', () => {
         cy.get(`[data-cy="catalogue-collapse-layer-button-${itemFullId}"]`)
             .should('be.visible')
             .find('svg')
-            .should('have.class', 'fa-circle-plus')
+            .should('have.class', 'fa-caret-right')
         cy.get(`[data-cy="catalogue-collapse-layer-button-${itemFullId}"]`)
             .should('be.visible')
             .click()
         cy.get(`[data-cy="catalogue-collapse-layer-button-${itemFullId}"]`)
             .should('be.visible')
             .find('svg')
-            .should('have.class', 'fa-circle-minus')
+            .should('have.class', 'fa-caret-down')
         cy.get(`[data-cy="catalogue-tree-item-${firstSubItemId}"]`).contains(firstSubItemName)
         cy.get(`[data-cy="catalogue-collapse-layer-button-${itemFullId}"]`)
             .should('be.visible')
             .click()
         cy.get(`[data-cy="catalogue-collapse-layer-button-${itemFullId}"]`)
             .should('be.visible')
             .find('svg')
-            .should('have.class', 'fa-circle-plus')
+            .should('have.class', 'fa-caret-right')
         cy.get(`[data-cy="catalogue-tree-item-${firstSubItemId}"]`).should('not.be.visible')
         cy.get(`[data-cy="catalogue-collapse-layer-button-${itemFullId}"]`)
             .should('be.visible')
