From 2634461d5c02a7c4eba66d4f6054c9d1d1194858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Fri, 17 Dec 2021 15:03:17 +0100
Subject: [PATCH] change leaflet-draw button order for mobile display on
feature_edit
---
src/views/feature/Feature_edit.vue | 28 ++++++++++++++++++++++------
1 file changed, 22 insertions(+), 6 deletions(-)
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index 183929cb..12342f42 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -181,11 +181,6 @@
/>
<div class="ui tab active map-container" data-tab="map">
<div id="map" ref="map"></div>
- <!-- // todo: ajouter v-if -->
- <!-- {% if serialized_base_maps|length > 0 %} {% include
- "geocontrib/map-layers/sidebar-layers.html" with
- basemaps=serialized_base_maps layers=serialized_layers
- project=project.slug%} {% endif %} -->
<SidebarLayers v-if="basemaps && map" />
</div>
</div>
@@ -850,7 +845,10 @@ export default {
if (this.currentRouteName === "editer-signalement") {
this.map.addControl(this.drawControlEditOnly);
- } else this.map.addControl(this.drawControlFull);
+ } else {
+ this.map.addControl(this.drawControlFull);
+ }
+ this.changeMobileBtnOrder();
this.map.on(
"draw:created",
@@ -984,6 +982,24 @@ export default {
}
},
+ changeMobileBtnOrder() { //* move large toolbar for polygon creation, cutting map in the middle
+ function changeDisplay() {
+ let buttons = document.querySelector(".leaflet-draw-actions.leaflet-draw-actions-top.leaflet-draw-actions-bottom")
+ if (buttons && buttons.style) {
+ buttons.style.display = "flex"
+ buttons.style["flex-direction"] = "column"
+ }
+ }
+ if (window.screen.availWidth < 767) { //* change button order all the time to keep homogeinity on mobile
+ let wrapper = document.querySelector(".leaflet-top.leaflet-right");
+ if (wrapper) wrapper.appendChild(wrapper.children[0]);
+ if (this.feature_type.geom_type === "polygon") { //* if it's a polygon, change tools direction to vertical
+ let polygonBtn = document.querySelector(".leaflet-draw-draw-polygon"); //* since elements are generated
+ if (polygonBtn) polygonBtn.addEventListener("click", changeDisplay) //* it should be done at each click
+ }
+ }
+ },
+
getFeatureAttachments() {
featureAPI
.getFeatureAttachments(this.$route.params.slug_signal)
--
GitLab