Merge pull request #983 from geoadmin/bug-look-and-feel

Put drawing style edit popover in a more optimal position - #patch
geoadmin · Jul 8, 2024 · e9f1f3d · e9f1f3d
2 parents 2208080 + a10f744
commit e9f1f3d
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 16 deletions.
diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue
@@ -85,6 +85,7 @@ function onDeleteLastPoint() {
         <div :class="[{ 'drawing-toolbox-closed': !drawMenuOpen }, 'drawing-toolbox']">
             <div
                 class="card text-center drawing-toolbox-content shadow-lg rounded-bottom rounded-top-0 rounded-start-0"
+                :class="{ 'rounded-bottom-0': isPhoneMode }"
             >
                 <div class="card-body position-relative container">
                     <div
@@ -183,7 +184,7 @@ function onDeleteLastPoint() {
                     @click="drawMenuOpen = !drawMenuOpen"
                 >
                     <FontAwesomeIcon :icon="drawMenuOpen ? 'caret-up' : 'caret-down'" />
-                    <span class="ms-1">{{ $t(drawMenuOpen ? 'close_menu' : 'open_menu') }}</span>
+                    <span class="ms-2">{{ $t(drawMenuOpen ? 'close_menu' : 'open_menu') }}</span>
                 </button>
             </div>
         </div>

diff --git a/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue b/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue
@@ -33,13 +33,15 @@
             :class="{ 'transparent-bottom': !showAllSymbols }"
         >
             <div
-                class="rounded d-flex align-content-center p-2"
+                class="rounded d-flex align-items-center p-2"
                 data-cy="drawing-style-toggle-all-icons-button"
                 @click="showAllSymbols = !showAllSymbols"
             >
-                {{ $t('modify_icon_label') }}
-                &nbsp;
-                <font-awesome-icon :icon="['fas', showAllSymbols ? 'caret-down' : 'caret-right']" />
+                <div>{{ $t('modify_icon_label') }}</div>
+                <font-awesome-icon
+                    :icon="['fas', showAllSymbols ? 'caret-down' : 'caret-right']"
+                    class="ms-2"
+                />
             </div>
             <div class="marker-icon-select-box" :class="{ 'one-line': !showAllSymbols }">
                 <button
@@ -196,7 +198,7 @@ export default {
     }
 }
 .marker-icon-select-box {
-    max-height: 15rem;
+    max-height: 10rem;
     overflow-y: scroll;
     &.one-line {
         max-height: 2rem;

diff --git a/src/modules/infobox/components/styling/DrawingStylePopoverButton.vue b/src/modules/infobox/components/styling/DrawingStylePopoverButton.vue
@@ -53,13 +53,22 @@ export default {
             type: String,
             default: null,
         },
+        placement: {
+            type: String,
+            default: 'auto',
+        },
+    },
+    watch: {
+        placement(newValue) {
+            this.popover.setProps({ placement: newValue })
+        },
     },
     mounted() {
         this.popover = tippy(this.$refs.popoverButton, {
             theme: 'popover-button light-border',
             content: this.$refs.popoverContent,
             allowHTML: true,
-            placement: 'top',
+            placement: this.placement,
             interactive: true,
             arrow: true,
             trigger: 'click',

diff --git a/src/modules/infobox/components/styling/FeatureStyleEdit.vue b/src/modules/infobox/components/styling/FeatureStyleEdit.vue
@@ -101,6 +101,7 @@ const coordinateFormat = computed(() => {
 const isFeatureMarker = computed(() => feature.value.featureType === EditableFeatureTypes.MARKER)
 const isFeatureText = computed(() => feature.value.featureType === EditableFeatureTypes.ANNOTATION)
 const isFeatureLine = computed(() => feature.value.featureType === EditableFeatureTypes.LINEPOLYGON)
+const showInBottomPanel = computed(() => store.getters.showFeatureInfoInBottomPanel)
 
 const store = useStore()
 const availableIconSets = computed(() => store.state.drawing.iconSets)
@@ -189,10 +190,10 @@ function mediaTypes() {
         </div>
 
         <div v-if="!isFeatureText" class="form-group mb-2">
-            <label class="form-label" for="drawing-style-feature-description">
-                {{ $t('modify_description') }}
-            </label>
-            <div>
+            <div class="d-flex justify-content-between">
+                <label class="form-label" for="drawing-style-feature-description">
+                    {{ $t('modify_description') }}
+                </label>
                 <div class="d-flex justify-content-end align-items-center">
                     <div v-for="(media, index) in mediaTypes()" :key="media.type">
                         <DrawingStylePopoverButton
@@ -212,6 +213,8 @@ function mediaTypes() {
                         </DrawingStylePopoverButton>
                     </div>
                 </div>
+            </div>
+            <div>
                 <textarea
                     id="drawing-style-feature-description"
                     v-model="description"
@@ -221,6 +224,7 @@ function mediaTypes() {
                     :class="{
                         'form-control-plaintext': readOnly,
                     }"
+                    rows="2"
                 ></textarea>
             </div>
         </div>
@@ -262,6 +266,7 @@ function mediaTypes() {
                     v-if="isFeatureMarker"
                     data-cy="drawing-style-marker-button"
                     icon="fas fa-map-marker-alt"
+                    :placement="showInBottomPanel ? 'top' : 'auto'"
                 >
                     <DrawingStyleIconSelector
                         data-cy="drawing-style-marker-popup"
@@ -302,7 +307,4 @@ function mediaTypes() {
 .feature-title {
     height: 1rem;
 }
-.feature-description {
-    height: 2rem;
-}
 </style>
diff --git a/src/modules/map/components/MapPopover.vue b/src/modules/map/components/MapPopover.vue
@@ -159,7 +159,7 @@ function onClose() {
                     @click="showContent = !showContent"
                     @mousedown.stop=""
                 >
-                    <FontAwesomeIcon :icon="`caret-${showContent ? 'down' : 'right'}`" />
+                    <FontAwesomeIcon :icon="`caret-${showContent ? 'up' : 'down'}`" />
                 </button>
                 <button
                     class="btn btn-sm btn-light d-flex align-items-center"

diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue
@@ -48,7 +48,7 @@ const emit = defineEmits(['close'])
                 <span v-if="title" class="me-auto text-truncate">{{ i18n.t(title) }}</span>
                 <span v-else class="me-auto" />
                 <button class="btn btn-light btn-sm me-2" @click.stop="showBody = !showBody">
-                    <FontAwesomeIcon :icon="`caret-${showBody ? 'down' : 'right'}`" />
+                    <FontAwesomeIcon :icon="`caret-${showBody ? 'up' : 'down'}`" />
                 </button>
                 <button
                     class="btn btn-light btn-sm"

diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
@@ -954,6 +954,7 @@ describe('Drawing module tests', () => {
                     expect(agnosticContent).to.be.equal(agnosticMockCsv)
                 })
             })
+            cy.get('[data-cy="infobox-close"]').should('be.visible').click()
 
             // it exports KML when clicking on the export button (without choosing format)
             cy.get(