Feat/track record (#156)

Co-authored-by: hcaillaud <hector.caillaud@ign.fr>

Author: azarz

android/app/src/main/AndroidManifest.xml

@@ -103,6 +103,7 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 

capacitor.config.json

@@ -7,7 +7,8 @@
   },
   "android": {
     "overrideUserAgent": "IGN-app-android",
-    "flavor": "google"
+    "flavor": "google",
+    "useLegacyBridge": true
   },
   "ios": {
     "overrideUserAgent": "IGN-app-ios",

ios/App/App/Info.plist

@@ -49,7 +49,7 @@
   <key>NSLocationWhenInUseUsageDescription</key>
   <string>Votre position est nécessaire pour vous positionner sur la carte et calculer des itinéraires et isochrones à partir de votre position</string>
   <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
-  <string>Votre position en arrière-plan est nécessaire pour réaliser de l'enregistrement de trace lorsque le téléphone est vérouillé ou lorsque vous ovrez d'autres applications.</string>
+  <string>La position en arrière-plan est nécessaire pour enregistrer la trace avec l'application fermée ou le téléphone vérouillé.</string>
   <key>UIBackgroundModes</key>
   <array>
     <string>location</string>

src/css/app.scss

@@ -14,6 +14,7 @@
 @use 'layer-catalogue.css';
 @use 'layer-switcher.css';
 @use 'route-draw.css';
+@use 'track-record.css';
 @use 'my-account.css';
 @use 'poi.css';
 @use 'compare.css';

src/css/assets/map-buttons/pause.svg

@@ -211,6 +211,25 @@ TODO: remove all DOM.$layerManagerBtn.classList.add/remove("highest") in nav.js
   bottom: 132px;
 }
 
+#trackRecordBtn {
+  background-color: var(--dark-green);
+  position: absolute;
+  bottom: 132px;
+  outline: 1px solid var(--dark-green);
+}
+
+#compassBtn:not(.d-none) + #trackRecordBtn {
+  bottom: 198px;
+}
+
+#trackRecordBtn.recording {
+  background-image: url("assets/map-buttons/recording.svg");
+}
+
+#trackRecordBtn.pause {
+  background-image: url("assets/map-buttons/pause.svg");
+}
+
 #filterPoiBtn {
   background-image: url("assets/map-buttons/filtrer.svg");
   position: fixed;
@@ -219,9 +238,7 @@ TODO: remove all DOM.$layerManagerBtn.classList.add/remove("highest") in nav.js
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 25px;
   background-position: 13px center;
-  width: 5.385rem;
   transition: top 0.3s, opacity 0.5s;
   font-size: 14px;
 }
@@ -352,10 +369,16 @@ TODO: remove all DOM.$layerManagerBtn.classList.add/remove("highest") in nav.js
   color: var(--dark-grey);
 }
 
-#routeDrawEdit > .button#routeDrawSave {
+#routeDrawSnap {
+  background-image: url("assets/route-draw/arrow-left-darkgrey.svg");
+}
+
+#routeDrawSave {
   background-color: var(--dark-green);
   border: 1px solid var(--dark-green);
   background-image: url("assets/route-draw/save.svg");
+  position: fixed;
+  top: calc(142px + var(--safe-area-inset-top));
 }
 
 #routeDrawEdit > .button > span {
@@ -392,7 +415,7 @@ TODO: remove all DOM.$layerManagerBtn.classList.add/remove("highest") in nav.js
   display: flex;
   position: absolute;
   box-sizing: border-box;
-  top: calc(100% - 77px - max(var(--safe-area-inset-bottom), 20px));
+  top: calc(100% - 75px - max(var(--safe-area-inset-bottom), 20px));
   width: 100%;
   height: calc(75px + max(var(--safe-area-inset-bottom), 20px));
   font-size: 12px;
@@ -498,6 +521,10 @@ button.maplibregl-ctrl-shrink {
     right: 15px;
   }
 
+  #trackRecordBtn {
+    right: 15px;
+  }
+
   #bottomButtons {
     position: fixed;
     bottom: calc(5px + max(var(--safe-area-inset-bottom), 20px));
@@ -533,6 +560,11 @@ button.maplibregl-ctrl-shrink {
     position: fixed;
   }
 
+  #routeDrawSave {
+    top: calc(10px + var(--safe-area-inset-top));
+    transform: translateX(-66px);
+  }
+
   #routeDrawEdit {
     position: fixed;
     flex-direction: row;
@@ -547,11 +579,6 @@ button.maplibregl-ctrl-shrink {
     margin-bottom: 12px;
   }
 
-  #routeDrawEdit > .button > span {
-    position: relative;
-    bottom: -44px;
-  }
-
   #mapCenter {
     top: calc(50vh - 25px);
     right: calc((100vw - 25px));

src/css/assets/map-buttons/recording.svg

@@ -198,6 +198,10 @@
   background-image: url(../html/img/tracer.svg);
 }
 
+#trackRecord > .nav-picto {
+  background-image: url(../html/img/tracker.svg);
+}
+
 @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #navContainer {
     flex-direction: column;

src/css/map-buttons.css

@@ -143,27 +143,33 @@
 }
 
 .lblPositionShareImg {
-  background-image: url("assets/share.svg");
+  -webkit-mask: url("assets/share.svg") center;
+  mask: url("assets/share.svg") center;
 }
 
 .lblPositionNearImg {
-  background-image: url("assets/isochrone-white.svg");
+  -webkit-mask: url("assets/isochrone-white.svg") center;
+  mask: url("assets/isochrone-white.svg") center;
 }
 
 .lblPositionRouteImg {
-  background-image: url("assets/syrendre-white.svg");
+  -webkit-mask: url("assets/syrendre-white.svg") center;
+  mask: url("assets/syrendre-white.svg") center;
 }
 
 .lblPositionSignalImg {
-  background-image: url("assets/signal.svg");
+  -webkit-mask: url("assets/signal.svg") center;
+  mask: url("assets/signal.svg") center;
 }
 
 .lblPositionLandmarkImg {
-  background-image: url("assets/landmark-white.svg");
+  -webkit-mask: url("assets/landmark-white.svg") center;
+  mask: url("assets/landmark-white.svg") center;
 }
 
 .lblPositionLandmarkEditImg {
-  background-image: url("assets/edit-white.svg");
+  -webkit-mask: url("assets/edit-white.svg") center;
+  mask: url("assets/edit-white.svg") center;
 }
 
 .btnPositionButtons {
@@ -184,6 +190,23 @@
   font-size: 12px;
 }
 
+.btnPositionButtons.secondary {
+  color: var(--dark-green);
+  background-color: #fff0;
+  border: 1px solid var(--dark-green);
+  box-sizing: border-box;
+}
+
+.btnPositionButtons > label {
+  background-color: white;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.btnPositionButtons.secondary > label {
+  background-color: var(--dark-green);
+}
+
 /*
  * coordonnées
  */

src/css/nav.css

@@ -22,19 +22,22 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap-reverse;
+  flex-wrap: wrap;
   row-gap: 15px;
 }
 
 #routeDrawMode {
   background-color: var(--dark-green);
-  color: white;
   font-family: "Open Sans Semibold";
   font-size: 14px;
   width: fit-content;
   padding: 12px 28px;
   border-radius: 100px;
   flex-shrink: 0;
+  border-color: var(--dark-green);
+  color: var(--dark-green);
+  background-color: white;
+  border: solid 1px;
 }
 
 #routeDrawModeActionSheet > div:not(:first-child) {
@@ -274,7 +277,6 @@
   border: 1px solid var(--grey-2);
   padding: 9px 8px;
   flex-grow: 1;
-
 }
 
 #routeDrawSaveNameInput::placeholder {