GSLUX-694: Draw panel

public/assets/locales/app.de.json

@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "",
   "Display full description": "",
   "Display informations for \"{{layerName}}\"": "",
+  "Drawings menu": "",
   "Edit the start date": "",
   "Edit the end date": "",
   "Hide full description": "",

public/assets/locales/app.en.json

@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "",
   "Display full description": "",
   "Display informations for \"{{layerName}}\"": "",
+  "Drawings menu": "",
   "Edit the start date": "",
   "Edit the end date": "",
   "Hide full description": "",

public/assets/locales/app.fr.json

@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "Modifier l'opacité pour la couche {{layerName}}",
   "Display full description": "Afficher la description complète",
   "Display informations for \"{{layerName}}\"": "Afficher les informations pour \"{{layerName}}\"",
+  "Drawings menu": "Afficher les options de dessins",
   "Edit the start date": "Modifier la date de début",
   "Edit the end date": "Modifier la date de fin",
   "Hide full description": "Cacher la description complète",

public/assets/locales/app.lb.json

@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "",
   "Display full description": "",
   "Display informations for \"{{layerName}}\"": "",
+  "Drawings menu": "",
   "Edit the start date": "",
   "Edit the end date": "",
   "Hide full description": "",

src/assets/main.css

@@ -28,17 +28,33 @@
     @apply text-primary no-underline;
   }
 
+  /*********** Baseline, reset styles ***********/
+  input[type='range'] {
+    @apply cursor-pointer bg-transparent appearance-none;
+  }
+
+  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
+  /* slider track */
+  input[type='range']::-webkit-slider-runnable-track {
+    @apply bg-white h-1 rounded-full;
+  }
+
+  /* slider thumb */
   input[type='range']::-webkit-slider-thumb {
-    @apply bg-tertiary h-4 w-4 rounded-full border-tertiary;
-    -webkit-appearance: none;
+    @apply appearance-none rounded-full w-4 h-4 bg-tertiary;
+    margin-top: -5.6px; /* Centers thumb on the track */
   }
 
-  input[type='range']::-moz-range-thumb {
-    @apply bg-tertiary h-3 w-3 rounded-full border-tertiary;
+  /*********** Firefox styles ***********/
+  /* slider track */
+  input[type='range']::-moz-range-track {
+    @apply bg-white h-1 rounded-full;
   }
 
-  input[type='range']::-ms-thumb {
-    @apply bg-tertiary h-4 w-4 rounded-full border-tertiary;
+  /* slider thumb */
+  input[type='range']::-moz-range-thumb {
+    @apply appearance-none rounded-full w-4 h-4 bg-tertiary;
+    border: none; /*Removes extra border that FF applies*/
   }
 }
 
@@ -76,9 +92,29 @@
     outline: none;
   }
 
+  .lux-icon {
+    font-family: 'geoportail-icons-wc';
+  }
+
+  .lux-icon.point::before {
+    content: '\E901';
+  }
+
+  .lux-icon.line::before {
+    content: '\E900';
+  }
+
+  .lux-icon.polygon::before {
+    content: '\E902';
+  }
+
   .lux-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:lux-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
+  }
+
+  .lux-btn-primary {
+    @apply lux-btn bg-primary text-white hover:bg-quaternary border-[1px] border-[color:var(--color-quaternary)];
   }
 
   .lux-btn-grey {
@@ -306,6 +342,69 @@
   .lux-tooltip {
     @apply relative bg-black bg-opacity-50 rounded text-white p-1.5 opacity-70 whitespace-nowrap;
   }
+
+  .lux-draw-panel-title {
+    @apply text-white;
+  }
+
+  .lux-drawing-item {
+    @apply my-1;
+  }
+
+  .lux-drawing-item-label {
+    @apply text-white;
+  }
+
+  .lux-drawing-item-label .selected {
+    @apply bg-tertiary;
+  }
+
+  .lux-drawing-item-content {
+    @apply mt-1 mb-2 p-3;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .lux-drawing-item-content input[type='text'],
+  .lux-drawing-item-content textarea {
+    @apply bg-secondary px-3 py-[6px] text-white;
+  }
+
+  .lux-drawing-item-content input[type='color'],
+  .lux-drawing-item-content input[type='number'] {
+    border: 1px solid rgb(118, 118, 118);
+  }
+
+  .lux-drawing-item-content input[type='number'] {
+    @apply py-[2px] px-1;
+  }
+
+  .lux-menu-popup-list {
+    @apply py-1 z-50 top-0 left-0 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  }
+
+  .form-control {
+    border: 1px solid var(--color-gray);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  }
+
+  .form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+  }
+
+  /* slider track */
+  .popup input[type='range']::-webkit-slider-runnable-track {
+    background-color: var(--color-secondary);
+  }
+
+  /* slider track */
+  .popup input[type='range']::-moz-range-track {
+    background-color: var(--color-secondary);
+  }
 }
 
 .fa-solid {
@@ -327,98 +426,129 @@
     --color-primary: #2980b9;
     --color-secondary: #97bbd3;
     --color-tertiary: #1f5d87;
+    --color-quaternary: #20638f;
     --color-navbar-default: #777;
-    --color-btn-ol: #8394a0;
+    --color-border-default: #8394a0;
     --main-primary: #2980b9;
     --main-secondary: #97bbd3;
     --main-tertiary: #1f5d87;
+    --main-quaternary: #20638f;
     --tourisme-primary: #e84c3d;
     --tourisme-secondary: #e88c83;
     --tourisme-tertiary: #a50f15;
+    --tourisme-quaternary: #d82a1a;
     --emwelt-primary: #558b2f;
     --emwelt-secondary: #85bb5c;
     --emwelt-tertiary: #255d00;
+    --emwelt-quaternary: #667625;
     --eau-primary: #03a2ac;
     --eau-secondary: #45cdd6;
     --eau-tertiary: #078f98;
+    --eau-quaternary: #02737a;
     --pag-primary: #2b8cbe;
     --pag-secondary: #74a9cf;
     --pag-tertiary: #045a8d;
+    --pag-quaternary: #226d94;
     --agriculture-primary: #f39c11;
     --agriculture-secondary: #ffc363;
     --agriculture-tertiary: #9c6101;
+    --agriculture-quaternary: #c77e0a;
     --lenoz-primary: #f4b72b;
     --lenoz-secondary: #f3d89b;
     --lenoz-tertiary: #b3851d;
+    --lenoz-quaternary: #e0a00c;
     --preizerdaul-primary: #2980b9;
     --preizerdaul-secondary: #97bbd3;
     --preizerdaul-tertiary: #1f5d87;
+    --preizerdaul-quaternary: #821a2c;
     --wellenstein-primary: #7ac573;
     --wellenstein-secondary: #b0e4ab;
     --wellenstein-tertiary: #42803c;
+    --wellenstein-quaternary: #58b64f;
     --lintgen-primary: #f3c531;
     --lintgen-secondary: #f3d89b;
     --lintgen-tertiary: #b3851d;
+    --lintgen-quaternary: #e4b10d;
     --remich-primary: #8ca229;
     --remich-secondary: #bacd63;
     --remich-tertiary: #5c6b1b;
+    --remich-quaternary: #69791f;
     --at-primary: #f4511e;
     --at-secondary: #ff844c;
     --at-tertiary: #b91400;
+    --at-quaternary: #986a34;
     --cadastre_hertzien-primary: #7ac573;
     --cadastre_hertzien-secondary: #b0e4ab;
     --cadastre_hertzien-tertiary: #42803c;
+    --cadastre_hertzien-quaternary: #4f792b;
     --urban_farming-primary: #028349;
     --urban_farming-secondary: #4ab475;
     --urban_farming-tertiary: #005520;
+    --urban_farming-quaternary: #005520;
     --energie-primary: #558b2f;
     --energie-secondary: #85bb5c;
     --energie-tertiary: #255d00;
+    --energie-quaternary: #255d00;
     --atlas_demographique-primary: #f4b72b;
     --atlas_demographique-secondary: #f3d89b;
     --atlas_demographique-tertiary: #b3851d;
+    --atlas_demographique-quaternary: #b3851d;
     --logement-primary: #b0271a;
     --logement-secondary: #e95b43;
     --logement-tertiary: #790000;
+    --logement-quaternary: #790000;
     --np_our-primary: #76b854;
     --np_our-secondary: #a8ea82;
     --np_our-tertiary: #458725;
+    --np_our-quaternary: #458725;
     --geosciences-primary: #895e03;
     --geosciences-secondary: #d7ba87;
     --geosciences-tertiary: #5e4024;
+    --geosciences-quaternary: #5e4024;
     --ahc-primary: #ff5722;
     --ahc-secondary: #ff8a50;
     --ahc-tertiary: #c41c00;
+    --ahc-quaternary: #c41c00;
     --municipalities-primary: #9e9ac8;
     --municipalities-secondary: #cbc9e2;
     --municipalities-tertiary: #756bb1;
+    --municipalities-quaternary: #7e79b6;
     --Amenagement_du_territoire-primary: #f4511e;
     --Amenagement_du_territoire-secondary: #ff844c;
     --Amenagement_du_territoire-tertiary: #b91400;
+    --Amenagement_du_territoire-quaternary: #b91400;
     --Environnement_naturel-primary: #879d31;
     --Environnement_naturel-secondary: #bacd81;
     --Environnement_naturel-tertiary: #627529;
+    --Environnement_naturel-quaternary: #627529;
     --Environnement_humain-primary: #558b2f;
     --Environnement_humain-secondary: #85bb5c;
     --Environnement_humain-tertiary: #255d00;
+    --Environnement_humain-quaternary: #255d00;
     --Occupation_du_sol-primary: #8d6e63;
     --Occupation_du_sol-secondary: #bd9b8f;
     --Occupation_du_sol-tertiary: #5e4238;
+    --Occupation_du_sol-quaternary: #5e4238;
     --intranet-at-primary: #9e9ac8;
     --intranet-at-secondary: #cbc9e2;
     --intranet-at-tertiary: #756bb1;
+    --intranet-at-quaternary: #756bb1;
     --prof-primary: #006d2c;
     --prof-secondary: #99d8c9;
     --prof-tertiary: #238b45;
+    --prof-quaternary: #003a17;
     --go-primary: #555;
     --go-secondary: #bbb;
     --go-tertiary: #756bb1;
+    --go-quaternary: #3b3b3b;
     --sig_secours-primary: #2979ff;
     --sig_secours-secondary: #75a7ff;
     --sig_secours-tertiary: #004ecb;
+    --sig_secours-quaternary: #004ecb;
     --school-primary: #756bb1;
     --school-secondary: #9e9ac8;
     --school-tertiary: #54278f;
-    --button-bg-color: #ccc;
+    --school-quaternary: #54278f;
+    --color-gray: #ccc;
   }
 }

src/assets/ol.css

@@ -8,15 +8,15 @@
 
   .ol-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:ol-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .ol-control {
     @apply absolute rounded p-1;
   }
 
   .ol-control button {
-    @apply w-10 h-10 text-xl text-center font-normal indent-0 block ol-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-btn-ol)];
+    @apply w-10 h-10 text-xl text-center font-normal indent-0 block ol-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-border-default)];
     font-family: 'geoportail-icons-wc';
   }
 
@@ -37,7 +37,7 @@
   }
 
   .lux-control {
-    @apply p-0 right-2 z-[2] border-[color:var(--color-btn-ol)] border-[1px];
+    @apply p-0 right-2 z-[2] border-[color:var(--color-border-default)] border-[1px];
   }
 
   .geoportailv3-attribution {

src/components/common/menu-popup/menu-popup-item.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: { label: string; action?: (event?: MouseEvent) => any }
+}>()
+const emit = defineEmits(['click'])
+
+function onClick() {
+  emit('click', props.item)
+}
+</script>
+
+<template>
+  <button class="lux-dropdown-list-item" @click="onClick">
+    <slot>{{ item.label }}</slot>
+  </button>
+</template>