feat(drawing): better UX (#328)

* feat(drawing): better UX

* update version

* fixes for Elias

* fix draw label

* fix label oopsie

package.json

@@ -1,7 +1,7 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.2-323",
+  "version": "1.0.0-beta.1-328",
   "date": "09/01/2025",
   "module": "src/index.js",
   "directories": {},

src/packages/CSS/Controls/Drawing/DSFRdrawingStyle.css

@@ -9,6 +9,10 @@
   transform: translateY(20px);
 }
 
+.gp-styling-div {
+  width: 410px;
+}
+
 .gp-label-div textarea {
   max-width: 100%;
   margin-bottom: 1rem;
@@ -27,10 +31,31 @@
   width: 40px;
 }
 
+.drawing-tool-section-title {
+  color: var(--text-label-grey);
+  margin-bottom: 0.3rem;
+}
+
 .drawing-tool-active {
   background-color: var(--hover-tint);
 }
 
+div.drawing-tools-flex-display {
+  justify-content: space-between;
+  padding : 0;
+  margin: 0;
+}
+
+div.drawing-tools-flex-display {
+  border-bottom: 1px solid var(--border-default-grey);
+  padding-bottom: 15px;
+}
+
+.drawing-tool-section:last-child.drawing-tools-flex-display {
+  border-bottom: unset;
+  padding-bottom: unset;
+}
+
 /*
 * Drawing tools
 */
@@ -77,3 +102,34 @@ button[id^=drawing-tool-remove]::after {
   -webkit-mask: url("img/dsfr/delete.svg") center no-repeat;
   mask: url("img/dsfr/delete.svg") center no-repeat;
 }
+
+.gpf-draw-linestring-tooltip::before {
+  background-color: var(--background-default-grey);
+}
+
+.gpf-flex-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.gp-styling-div .gpf-flex-row {
+  padding-top: 1em;
+}
+
+.gpf-custom-dropdown-options .gpf-custom-dropdown-option:hover {
+  background-color: var(--background-default-grey-hover);
+}
+
+.gpf-custom-dropdown-options {
+  border: 1px solid var(--border-default-grey);
+  background-color: var(--background-default-grey);
+}
+
+.gpf-custom-dropdown-display:checked + label {
+  width: calc(43px + 3.5rem);
+}
+
+div:not(.position) > div[id^=GPdrawing-] > dialog[id^=GPdrawingPanel] {
+  max-height: unset !important;
+}

src/packages/CSS/Controls/Drawing/GPFdrawing.css

@@ -39,27 +39,11 @@ div[id^=GPdrawingBasicPanel-] {
   padding: 10px 15px;
 }
 
-.drawing-tool-section:not(:last-child) {
-  border-bottom: 1px solid #ddd;
-}
-
 .drawing-tool-section {
   padding: 2px 5px 5px;
 }
 
-.drawing-tool-section-title {
-  /* font-family: OpenSansExtraBold,"Open Sans",Arial,sans-serif; */
-  font-size: 0.75em;
-  margin-bottom: 0;
-  margin-top: 0;
-  text-transform: uppercase;
-}
 
-div.drawing-tools-flex-display {
-  justify-content: center;
-  padding : 0;
-  margin: 12px 0;
-}
 .drawing-tools-flex-display {
   align-items: center;
   display: flex;
@@ -69,3 +53,71 @@ div.drawing-tools-flex-display {
   margin-right: 10px;
 }
 
+.gpf-draw-linestring-tooltip {
+  transform: translate(calc(100% + 35px), -14px);
+}
+
+.gpf-draw-linestring-tooltip::before {
+  content: "";
+  display: block;
+  width: calc(100% + 2em);
+  height: 3em;
+  background-color: white;
+  position: absolute;
+  z-index: -1;
+  opacity: 0.8;
+  border-radius: 4px;
+  transform: translate(-1em, -0.75em);
+}
+
+.gpf-custom-dropdown-toggle {
+  display: none;
+}
+
+.gpf-custom-dropdown-display {
+  display: none;
+}
+
+.gpf-custom-dropdown-options {
+  position: absolute;
+  width: calc(100% - 3rem);
+  display: none;
+  z-index: 1000;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: -48px;
+}
+
+.gpf-custom-dropdown-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gpf-custom-dropdown-options .gpf-custom-dropdown-option {
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.gpf-custom-dropdown-options .gpf-custom-dropdown-option img {
+  max-width: 25px;
+  max-height: 25px;
+}
+
+.gpf-custom-dropdown-display + label {
+  display: none;
+}
+
+.gpf-custom-dropdown-display:checked + label {
+  display: flex;
+}
+
+.gpf-custom-dropdown-toggle:checked ~ .gpf-custom-dropdown-options {
+  display: flex;
+}
+
+/* Update the selected image when an option is clicked */
+.gpf-custom-dropdown-option img {
+  pointer-events: none;
+}

src/packages/CSS/Controls/Drawing/GPFdrawingStyle.css

@@ -52,6 +52,23 @@ input.marker-input-radio:checked + label {
   background-color: #002a50;
 }
 
+.drawing-tool-section-title {
+  /* font-family: OpenSansExtraBold,"Open Sans",Arial,sans-serif; */
+  font-size: 0.75em;
+  margin-bottom: 0;
+  margin-top: 0;
+  text-transform: uppercase;
+}
+
+div.drawing-tools-flex-display {
+  justify-content: center;
+  padding : 0;
+  margin: 12px 0;
+}
+
+.drawing-tool-section:not(:last-child) {
+  border-bottom: 1px solid #ddd;
+}
 
 /*
 * Drawing tools
@@ -457,3 +474,39 @@ button[id^=drawing-export-] {
 .gp-styling-option .marker-label img {
   height: 24px;
 }
+
+.gpf-draw-linestring-tooltip::before {
+  background-color: white;
+}
+
+.gpf-custom-dropdown-options .gpf-custom-dropdown-option:hover {
+  background-color: #f0f0f0;
+}
+
+.gpf-custom-dropdown-options {
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+
+.gp-styling-option input.gpf-custom-dropdown-toggle {
+  display: none;
+}
+
+.gp-styling-option input.gpf-custom-dropdown-display {
+  display: none;
+}
+
+.gpf-custom-dropdown-display:checked + label {
+  width: 53px;
+  border-radius: 3px;
+}
+
+.gpf-custom-dropdown-display:checked + label::after {
+  content: ">";
+  font-weight: bold;
+  display: flex;
+  transform: rotate(90deg);
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+}