feat(route:dsfr): route widget compatible with dsfr

IGNF · Aug 8, 2024 · 0de5d79 · 0de5d79
1 parent 66947b2
commit 0de5d79
Show file tree

Hide file tree

Showing 15 changed files with 322 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.0-137",
+  "version": "1.0.0-beta.0-139",
   "date": "01/08/2024",
   "module": "src/index.js",
   "directories": {},

diff --git a/samples-src/pages/tests/Route/pages-ol-route-modules-dsfr-default.html b/samples-src/pages/tests/Route/pages-ol-route-modules-dsfr-default.html
@@ -1,7 +1,7 @@
 {{#extend "ol-sample-modules-dsfr-layout"}}
 
 {{#content "vendor"}}
-        
+
         <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
         <script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
         <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlRoute.css" />
@@ -16,7 +16,7 @@
         <style>
             div#map {
                 width: 100%;
-                height: 500px;
+                height: 700px
             }
         </style>
 {{/content}}

diff --git a/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css b/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css
@@ -22,10 +22,6 @@
   margin-top: 0;
 }
 
-.GPlocationOriginLabel {
-  display: none;
-}
-
 div[id^="GPisochronChoice"] {
   justify-content: left;
   gap: 1em;

diff --git a/src/packages/CSS/Controls/LocationSelector/DSFRlocationStyle.css b/src/packages/CSS/Controls/LocationSelector/DSFRlocationStyle.css
@@ -17,13 +17,57 @@
   position: relative;
 }
 
+.gpf-btn-icon-remove {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
 .gpf-btn-icon-label {}
 .gpf-btn-icon-remove::after {
-    -webkit-mask: url("img/GPlocationOptions.png") -82px center no-repeat;
-    mask: url("img/GPlocationOptions.png") -82px center no-repeat;
+    -webkit-mask: url("img/dsfr/close-line.svg") center no-repeat;
+    mask: url("img/dsfr/close-line.svg") center no-repeat;
 }
 
 .gpf-btn-icon-add::after {
-    -webkit-mask: url("img/GPlocationOptions.png") -54px center no-repeat;
-    mask: url("img/GPlocationOptions.png") -54px center no-repeat;
+    -webkit-mask: url("img/GPlocationOptions.png") -51px center no-repeat;
+    mask: url("img/GPlocationOptions.png") -51px center no-repeat;
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.GPlocationOriginLabel {
+  display: none;
+  pointer-events: none;
+}
+
+[class^="GPlocationPoint-"]:has(.GPflexInput.GPelementHidden) {
+  padding: 0;
+}
+[id^="GPlocationPoint_"] {
+  justify-content: left;
+}
+
+.GPlocationStageFlexInput {
+  flex-wrap: wrap;
+}
+
+.GPlocationStageAdd {
+  flex-basis: 45%;
+  width: 0px;
+  min-height: 40px;
+  padding: 0.25rem 0.75rem 0.25rem 2.5rem;
+  text-align: left;
+}
+
+.GPlocationOriginLabel {
+  flex-basis: fit-content;
+}
+
+.GPlocationOriginPointerImg {
+  flex-basis: 2.5em;
+}
+
+.GPlocationStageFlexInput input {
+  flex-basis: 33%;
+  flex-grow: 1;
 }
diff --git a/src/packages/CSS/Controls/LocationSelector/GPFlocation.css b/src/packages/CSS/Controls/LocationSelector/GPFlocation.css
@@ -1,13 +1,5 @@
 /* Location */
 
-[id^=GPlocationStageRemove],
-[id^=GPlocationStageAdd] {
-  width: 28px;
-  height: 28px;
-  border: none;
-  cursor: pointer;
-}
-
 [id^=GPlocationStageRemove] {
 
 }

diff --git a/src/packages/CSS/Controls/LocationSelector/GPFlocationStyle.css b/src/packages/CSS/Controls/LocationSelector/GPFlocationStyle.css
@@ -9,6 +9,14 @@
   background-image: url("img/GPlocationOptions.png");
 }
 
+[id^=GPlocationStageRemove],
+[id^=GPlocationStageAdd] {
+  width: 28px;
+  height: 28px;
+  border: none;
+  cursor: pointer;
+}
+
 .GPlocationOpen {
   background-color: unset;
 }
@@ -46,4 +54,4 @@ button.GPlocationOriginPointerImg[id*="GPlocationOriginPointerImg"] {
 
 div[id^=GPlocationAutoCompleteList] {
 
-}
+}
diff --git a/src/packages/CSS/Controls/LocationSelector/img/dsfr/close-line.svg b/src/packages/CSS/Controls/LocationSelector/img/dsfr/close-line.svg
diff --git a/src/packages/CSS/Controls/Route/DSFRrouteStyle.css b/src/packages/CSS/Controls/Route/DSFRrouteStyle.css
@@ -12,3 +12,73 @@
 .GProuteFormMini .GPelementShow {
   color: var(--grey-200-850);
 }
+
+[id^="GProuteForm-"] .GPlocationOriginLabel {
+  display: unset;
+}
+
+[id^="GProuteForm-"] > .GPpanelFooter {
+  position: unset;
+}
+
+[id^="GProuteSubmit-"] {
+  width: 80%;
+}
+
+[id^="GProuteForm-"] > [class^="GPlocationPoint-"] {
+  margin-top: 1rem;
+}
+
+[id^="GProuteForm-"].GProuteFormMini > [class^="GPlocationPoint-"] {
+  margin-top: 0;
+}
+
+[id^="GProuteForm-"] > [class^="GPlocationPoint-"] ~ [class^="GPlocationPoint-"] {
+  margin-top: 0;
+}
+
+/* Reset picto */
+button[id^=GProuteReset-], div[id^=GProuteResultsNew-] {
+  min-width: 2.5em;
+}
+
+div[id^=GProuteResultsValueDist],
+div[id^=GProuteResultsValueTime]  {
+  color: var(--text-action-high-blue-france);
+  font-weight: bold;
+}
+
+.GProuteResultsShowDetailsDiv {
+  justify-content: left;
+}
+
+div:has(input[id^=GProuteResultsShowDetails]) + div[id^=GProuteResultsDetails-] {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+div:has(input[id^=GProuteResultsShowDetails]:checked) + div[id^=GProuteResultsDetails-] {
+  max-height: 200px;
+  opacity: 1;
+  overflow-y: scroll;
+}
+
+div[id^=GProuteResultsDetails-] {
+  max-width: 350px;
+  transition: max-height 0.5s ease-in-out 0.25s, opacity 0.5s ease-in-out 0.25s;
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  gap: 0.5rem 5px;
+}
+
+.GProuteResultsDetailsNumber,
+.GProuteResultsDetailsInstruction {
+  display: inline-block;
+}
+
+.GProuteResultsDetailsNumber {
+  font-weight: bold;
+  text-align: right;
+  vertical-align: top;
+}
diff --git a/src/packages/CSS/Controls/Route/GPFroute.css b/src/packages/CSS/Controls/Route/GPFroute.css
@@ -28,13 +28,6 @@ button[id^="GPshowRoutePicto-"][aria-pressed="true"] + dialog {
   left: 34px;
 }
 
-/* Reset picto */
-
-button[id^=GProuteReset] {
-  opacity: 0.8;
-  transition: opacity 0.2s ease-out;
-}
-
 button[id^=GProuteReset]:hover {
   opacity: 1;
 }
@@ -159,37 +152,6 @@ div[id^=GProuteResultsPanel] {
   padding: 15px;
 }
 
-div[id^=GProuteResultsValueDist],
-div[id^=GProuteResultsValueTime]  {
-  color: #366291;
-}
-
-div[id^=GProuteResultsNew] {
-  background-color: #366291;
-  background-image: url("img/GProuteOptions.png");
-}
-
-input[id^=GProuteResultsShowDetails] + label:hover,
-input[id^=GProuteResultsShowDetails] + label + label:hover {
-  color: #366291;
-}
-
-div[id^=GProuteResultsStages] {
-  margin-bottom: 15px;
-}
-
-div[id^=GProuteResultsValueDist],
-div[id^=GProuteResultsValueTime] {
-  display: inline-block;
-  line-height: 18px;
-}
-
-div[id^=GProuteResultsValueDist],
-div[id^=GProuteResultsValueTime] {
-  width: 80px;
-  font-weight: bold;
-}
-
 div[id^=GProuteResults-] {
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -206,20 +168,6 @@ div[id^=GProuteResults-] {
   margin-bottom: 10px;
 }
 
-select[id^=GProuteResultsComputationSelect] {
-  width: 100px;
-}
-
-div[id^=GProuteResultsNew] {
-  width: 28px;
-  height: 28px;
-  border-radius: 3px;
-  opacity: 0.8;
-  background-position: -224px 0;
-  transition: opacity 0.2s ease-out;
-  cursor: pointer;
-}
-
 div[id^=GProuteResultsNew]:hover {
   opacity: 1;
 }

diff --git a/src/packages/CSS/Controls/Route/GPFrouteStyle.css b/src/packages/CSS/Controls/Route/GPFrouteStyle.css
@@ -82,6 +82,10 @@ div[id^=GProuteTransportChoice] input {
   display: none;
 }
 
+div[id^=GProuteTransportChoice] .gpf-radio-btn-group {
+  justify-content: center;
+}
+
 select[id^=GProuteComputationSelect] {
   width: 100px;
 }
@@ -182,6 +186,8 @@ button[id^=GProuteReset] {
   /* background-color: #366291; */
   background-image: url("img/GProuteOptions.png");
   background-position: -224px center;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-out;
 }
 
 /* Results popup */
@@ -191,6 +197,50 @@ button[id^=GProuteReset] {
 }
 
 /* Results details header */
+div[id^=GProuteResultsValueDist],
+div[id^=GProuteResultsValueTime]  {
+  color: #366291;
+}
+
+input[id^=GProuteResultsShowDetails] + label:hover,
+input[id^=GProuteResultsShowDetails] + label + label:hover {
+  color: #366291;
+}
+
+div[id^=GProuteResultsStages] {
+  margin-bottom: 15px;
+}
+
+div[id^=GProuteResultsValueDist],
+div[id^=GProuteResultsValueTime] {
+  display: inline-block;
+  line-height: 18px;
+}
+
+div[id^=GProuteResultsValueDist],
+div[id^=GProuteResultsValueTime] {
+  width: 80px;
+  font-weight: bold;
+}
+
+div[id^=GProuteResultsNew] {
+  background-color: #366291;
+  background-image: url("img/GProuteOptions.png");
+}
+
+select[id^=GProuteResultsComputationSelect] {
+  width: 100px;
+}
+
+div[id^=GProuteResultsNew] {
+  width: 28px;
+  height: 28px;
+  border-radius: 3px;
+  opacity: 0.8;
+  background-position: -224px 0;
+  transition: opacity 0.2s ease-out;
+  cursor: pointer;
+}
 
 .GPfakeBorder {
   display: inline-block;
@@ -224,12 +274,12 @@ input[id^=GProuteResultsShowDetails] + label + label {
   display: none;
 }
 
-input[id^=GProuteResultsShowDetails] + label + label + div + div[id^=GProuteResultsDetails] {
+div:has(input[id^=GProuteResultsShowDetails]) + div[id^=GProuteResultsDetails] {
   max-height: 0;
   opacity: 0;
 }
 
-input[id^=GProuteResultsShowDetails]:checked + label + label + div + div[id^=GProuteResultsDetails] {
+div:has(input[id^=GProuteResultsShowDetails]:checked) + div[id^=GProuteResultsDetails] {
   max-height: 200px;
   opacity: 1;
 }

diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css
@@ -42,6 +42,7 @@
   background-color: transparent;
   padding: 0;
   margin-top: 0;
+  justify-content: center;
 }
 
 .gpf-panel__content {
@@ -226,6 +227,11 @@
 
 .gpf-radio-group {}
 
+.gpf-radio-btn-group {
+  display: flex;
+  gap: 1em;
+}
+
 .gpf-upload {}
 
 /*************/