diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index df8db274df67aef7a68df5b5ffe993dbfb79aa85..5383b368b37b82b882868fa28a18e8d0180401ba 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -36,6 +36,7 @@ body { width: 100%; height: 100%; min-height: 250px; + touch-action: none; /* workaround for modifying feature on mobile */ } #app-footer { diff --git a/src/assets/styles/openlayers-custom.css b/src/assets/styles/openlayers-custom.css index 34f063f7e47254e95bfa5e81a156c986dcdd74ee..13cc34418542081af11ac9c3c3a4fed1e13f6de3 100644 --- a/src/assets/styles/openlayers-custom.css +++ b/src/assets/styles/openlayers-custom.css @@ -34,13 +34,6 @@ background-color: #ebebeb; } -.editionToolbar { - border: 2px solid rgba(0,0,0,.2); - background-clip: padding-box; - padding: 0; - right: 5px; -} - /* .leaflet-bar { box-shadow: none !important; } diff --git a/src/components/Map/EditingToolbar.vue b/src/components/Map/EditingToolbar.vue index 3ea2391527201b9ad8886a3dc15c2cb2efd1c7e5..3465c628b02185d7b575e2712c827a20863c2766 100644 --- a/src/components/Map/EditingToolbar.vue +++ b/src/components/Map/EditingToolbar.vue @@ -3,7 +3,7 @@ <div v-if="showDrawTool"> <div class="leaflet-bar"> <a - class="leaflet-draw-draw-polygon" + class="leaflet-draw-draw-polygon active" title="Dessiner un polygone" > <img @@ -26,12 +26,20 @@ </div> <div v-if="!showDrawTool"> <div class="leaflet-bar"> - <a @click="update"> + <a + :class="{ active: isEditing }" + @click="update" + > <i class="edit outline icon" /> - <span class="sr-only">Modifier l'objet</span></a> - <a @click="deleteObj"> + <span class="sr-only">Modifier l'objet</span> + </a> + <a + :class="{ active: isDeleting }" + @click="deleteObj" + > <i class="trash alternate outline icon" /> - <span class="sr-only">Supprimer l'objet</span></a> + <span class="sr-only">Supprimer l'objet</span> + </a> </div> </div> </div> @@ -47,21 +55,35 @@ export default { data() { return { editionService: editionService, + isEditing: false, + isDeleting: false }; }, computed: { showDrawTool() { return this.editionService && this.editionService.editing_feature === undefined; + }, + }, + + watch: { + showDrawTool(newValue) { + if (!newValue && !this.isEditing && !this.isDeleting) { + this.isEditing = true; + } } }, methods: { - update(){ + update() { editionService.activeUpdateFeature(); + this.isDeleting = false; + this.isEditing = true; }, - deleteObj(){ + deleteObj() { editionService.activeDeleteFeature(); + this.isEditing = false; + this.isDeleting = true; }, } @@ -73,13 +95,13 @@ export default { .editionToolbar{ position: absolute; top: 80px; - right: 5px; -} -.leaflet-bar { + right: 6px; border: 2px solid rgba(0,0,0,.2); + border-radius: 4px; background-clip: padding-box; padding: 0; - border-radius: 2px; +} +.leaflet-bar { a:first-child { border-top-left-radius: 2px; @@ -112,6 +134,19 @@ export default { } } + .active { + background-color: rgba(255, 145, 0, 0.904); + color: #fff; + + i { + font-weight: bold; + } + + img { + filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(282deg) brightness(105%) contrast(100%); + } + } + .list-image-type { height: 20px; vertical-align: middle; diff --git a/src/services/edition-service.js b/src/services/edition-service.js index fdb63c615e516a2873aac3f2c9fb08effb904699..1595d4f66238c0a04e411b45f6190ec0333d4770 100644 --- a/src/services/edition-service.js +++ b/src/services/edition-service.js @@ -124,7 +124,7 @@ const editionService = { // On mobile stop drawing when selecting a drawn point if (isMobile) { - this.selectForUpdate.once('select', () => { + this.selectForUpdate.on('select', () => { if (this.draw.getActive() && this.draw.sketchCoords_.length > 2) { this.draw.finishDrawing(); }