Feat/dsfr drawing (#288)

* fix(drawing): style change when one selected

* fenêtre édition style OK

* Add DSFR icons and buttons

* Fenêtre édition texte au DSFR

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

@@ -1,4 +1,83 @@
 .gpf-btn-icon-drawing::after {
   -webkit-mask: url("img/modifier.svg") center no-repeat;
   mask: url("img/modifier.svg") center no-repeat;
-}
+}
+
+.gp-label-div,
+.gp-styling-div {
+  width: 370px;
+  transform: translateY(20px);
+}
+
+.gp-label-div textarea {
+  max-width: 100%;
+  margin-bottom: 1rem;
+}
+
+.gp-label-div input {
+  width: 100%;
+}
+
+.gp-styling-button.closer {
+  display: none;
+}
+
+.gp-styling-option.fr-range--sm[data-fr-js-range]::before,
+.gp-styling-option.fr-range--sm[data-fr-js-range]::after {
+  top: 1.74rem;
+}
+
+.drawing-tool {
+  width: 40px;
+}
+
+.drawing-tool-active {
+  background-color: var(--hover-tint);
+}
+
+/*
+* Drawing tools
+*/
+button[id^=drawing-tool-point-]::after {
+  -webkit-mask: url("img/dsfr/create-point.svg") center no-repeat;
+  mask: url("img/dsfr/create-point.svg") center no-repeat;
+}
+
+
+button[id^=drawing-tool-line-]::after {
+  -webkit-mask: url("img/dsfr/create-line.svg") center no-repeat;
+  mask: url("img/dsfr/create-line.svg") center no-repeat;
+}
+
+button[id^=drawing-tool-polygon-]::after {
+  -webkit-mask: url("img/dsfr/create-polygon.svg") center no-repeat;
+  mask: url("img/dsfr/create-polygon.svg") center no-repeat;
+}
+
+button[id^=drawing-tool-text-]::after {
+  -webkit-mask: url("img/dsfr/create-label.svg") center no-repeat;
+  mask: url("img/dsfr/create-label.svg") center no-repeat;
+}
+
+/*
+* Editing tools
+*/
+button[id^=drawing-tool-edit-]::after {
+  -webkit-mask: url("img/dsfr/edit-geom.svg") center no-repeat;
+  mask: url("img/dsfr/edit-geom.svg") center no-repeat;
+}
+
+button[id^=drawing-tool-display]::after {
+  -webkit-mask: url("img/dsfr/edit-style.svg") center no-repeat;
+  mask: url("img/dsfr/edit-style.svg") center no-repeat;
+}
+
+button[id^=drawing-tool-tooltip]::after {
+  -webkit-mask: url("img/dsfr/edit-text.svg") center no-repeat;
+  mask: url("img/dsfr/edit-text.svg") center no-repeat;
+}
+
+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;
+}

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

@@ -55,9 +55,10 @@ div[id^=GPdrawingBasicPanel-] {
   text-transform: uppercase;
 }
 
-ul.drawing-tools-flex-display {
+div.drawing-tools-flex-display {
   justify-content: center;
   padding : 0;
+  margin: 12px 0;
 }
 .drawing-tools-flex-display {
   align-items: center;
@@ -68,102 +69,3 @@ ul.drawing-tools-flex-display {
   margin-right: 10px;
 }
 
-.drawing-tool {
-  border-radius: 10px;
-  cursor: pointer;
-  display: block;
-  height: 40px;
-  width: 40px;
-}
-
-.drawing-tool {
-  background-image: url("img/drawing-tools.svg");
-  background-size: 720px 40px;
-}
-
-.drawing-tool {
-  background-color: #e9edf0;
-}
-
-.drawing-tool-active {
-  background-color: #002a50;
-}
-
-
-/*
-* Drawing tools
-*/
-li[id^=drawing-tool-point-] {
-  background-position: 0 0;
-}
-
-li[id^=drawing-tool-point-].drawing-tool-active {
-  background-position: -40px 0;
-}
-
-li[id^=drawing-tool-line-].drawing-tool-active {
-  background-position: -120px 0;
-}
-
-li[id^=drawing-tool-line-] {
-  background-position: -80px 0;
-}
-
-li[id^=drawing-tool-holes-] {
-  background-position: -640px 0;
-}
-
-li[id^=drawing-tool-holes-].drawing-tool-active {
-  background-position: -680px 0;
-}
-
-li[id^=drawing-tool-polygon-] {
-  background-position: -160px 0;
-}
-
-li[id^=drawing-tool-polygon-].drawing-tool-active {
-  background-position: -200px 0;
-}
-
-li[id^=drawing-tool-text-] {
-  background-position: -240px 0;
-}
-
-li[id^=drawing-tool-text-].drawing-tool-active {
-  background-position: -280px 0;
-}
-
-/*
-* Editing tools
-*/
-li[id^=drawing-tool-edit-] {
-  background-position: -320px 0;
-}
-
-li[id^=drawing-tool-edit-].drawing-tool-active {
-  background-position: -360px 0;
-}
-
-li[id^=drawing-tool-display] {
-  background-position: -400px 0;
-}
-
-li[id^=drawing-tool-display-].drawing-tool-active {
-  background-position: -440px 0;
-}
-
-li[id^=drawing-tool-tooltip] {
-  background-position: -480px 0;
-}
-
-li[id^=drawing-tool-tooltip-].drawing-tool-active {
-  background-position: -520px 0;
-}
-
-li[id^=drawing-tool-remove] {
-  background-position: -560px 0;
-}
-
-li[id^=drawing-tool-remove-].drawing-tool-active {
-  background-position: -600px 0;
-}

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

@@ -35,7 +35,101 @@ input.marker-input-radio:checked + label {
   border: 1px solid red;
 }
 
+/* drawing tools */
+.drawing-tool {
+  border-radius: 10px;
+  cursor: pointer;
+  display: block;
+  height: 40px;
+  width: 40px;
+  background-image: url("img/drawing-tools.svg");
+  background-size: 720px 40px;
+  background-color: #e9edf0;
+  border: unset;
+}
+
+.drawing-tool-active {
+  background-color: #002a50;
+}
+
+
+/*
+* Drawing tools
+*/
+button[id^=drawing-tool-point-] {
+  background-position: 0 0;
+}
+
+button[id^=drawing-tool-point-].drawing-tool-active {
+  background-position: -40px 0;
+}
+
+button[id^=drawing-tool-line-].drawing-tool-active {
+  background-position: -120px 0;
+}
+
+button[id^=drawing-tool-line-] {
+  background-position: -80px 0;
+}
+
+button[id^=drawing-tool-holes-] {
+  background-position: -640px 0;
+}
+
+button[id^=drawing-tool-holes-].drawing-tool-active {
+  background-position: -680px 0;
+}
+
+button[id^=drawing-tool-polygon-] {
+  background-position: -160px 0;
+}
+
+button[id^=drawing-tool-polygon-].drawing-tool-active {
+  background-position: -200px 0;
+}
 
+button[id^=drawing-tool-text-] {
+  background-position: -240px 0;
+}
+
+button[id^=drawing-tool-text-].drawing-tool-active {
+  background-position: -280px 0;
+}
+
+/*
+* Editing tools
+*/
+button[id^=drawing-tool-edit-] {
+  background-position: -320px 0;
+}
+
+button[id^=drawing-tool-edit-].drawing-tool-active {
+  background-position: -360px 0;
+}
+
+button[id^=drawing-tool-display] {
+  background-position: -400px 0;
+}
+
+button[id^=drawing-tool-display-].drawing-tool-active {
+  background-position: -440px 0;
+}
+
+button[id^=drawing-tool-tooltip] {
+  background-position: -480px 0;
+}
+
+button[id^=drawing-tool-tooltip-].drawing-tool-active {
+  background-position: -520px 0;
+}
+
+button[id^=drawing-tool-remove] {
+  background-position: -560px 0;
+}
+
+button[id^=drawing-tool-remove-].drawing-tool-active {
+  background-position: -600px 0;
+}
 
 /* section d'export */
 
@@ -83,6 +177,7 @@ button[id^=drawing-export-] {
   background-color: #FFF;
   box-shadow: 0 0 5px #000;
   box-sizing: border-box;
+  border: unset;
 }
 
 .gp-label-div::before,
@@ -207,12 +302,6 @@ button[id^=drawing-export-] {
   background-position: center;
 }
 
-.gp-styling-div ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
 .gp-styling-option {
   font-size: 11px;
   position: relative;