From 7447cfd12878a9ea447d976e0108d5b76d9edc9f Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 22 Sep 2022 13:52:08 +0200
Subject: [PATCH] Using Ionic components.

---
 src/components/map/get-location.tsx |  9 +++++--
 src/components/map/map.tsx          | 41 ++++++++++++++++++++---------
 src/theme/map.css                   |  6 +++++
 src/theme/slippy.css                |  2 +-
 src/theme/variables.css             |  7 +++++
 5 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/components/map/get-location.tsx b/src/components/map/get-location.tsx
index 293f59b..8d68bab 100644
--- a/src/components/map/get-location.tsx
+++ b/src/components/map/get-location.tsx
@@ -6,7 +6,8 @@ import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 
 import '../../theme/get-location.css';
-import location from '../../theme/icons/gps-location-svgrepo-com.svg';
+import { IonButton, IonIcon } from '@ionic/react';
+import { locateOutline } from 'ionicons/icons';
 
 const GetLocation: React.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -32,7 +33,11 @@ const GetLocation: React.FC<{}> = () => {
     });
   };
 
-  return <input className='get-position' type='image' src={location} onClick={onClickHandler} />;
+  return (
+    <IonButton onClick={onClickHandler} className='get-location' shape='round' size='small' fill='solid'>
+      <IonIcon slot='icon-only' icon={locateOutline} color='white' />
+    </IonButton>
+  );
 };
 
 export default GetLocation;
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index b6be5e0..9e1cf06 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -1,4 +1,4 @@
-import react, { useMemo, useEffect, Fragment } from 'react';
+import react, { useMemo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
@@ -9,6 +9,13 @@ import TiledMap from './tiled-map';
 import GetLocation from './get-location';
 import Whiteboard from './whiteboard';
 import CurrentLocation from './current-location';
+import {
+  IonApp,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonToolbar,
+} from '@ionic/react';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -27,17 +34,27 @@ const Map: react.FC<{}> = (props: {}) => {
   }, []);
 
   return (
-    <Fragment>
-      <Slippy>
-        <GetLocation />
-        <Whiteboard>
-          <CurrentLocation />
-        </Whiteboard>
-      </Slippy>
-      <Layer>
-        <TiledMap />
-      </Layer>
-    </Fragment>
+    <>
+      <IonContent fullscreen={true}>
+        <IonApp>
+          <Slippy>
+            <Whiteboard>
+              <CurrentLocation />
+            </Whiteboard>
+          </Slippy>
+          <Layer>
+            <TiledMap />
+          </Layer>
+        </IonApp>
+      </IonContent>
+      <IonFooter className='ion-no-border'>
+        <IonToolbar>
+          <IonButtons>
+            <GetLocation />
+          </IonButtons>
+        </IonToolbar>
+      </IonFooter>
+    </>
   );
 };
 
diff --git a/src/theme/map.css b/src/theme/map.css
index 982fe4c..802ff3b 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -6,3 +6,9 @@
   height: 256px;
   width: 256px;
 }
+
+ion-button.get-location {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  margin-left: calc(50% - 20px);
+}
diff --git a/src/theme/slippy.css b/src/theme/slippy.css
index 9975919..1f4b5db 100644
--- a/src/theme/slippy.css
+++ b/src/theme/slippy.css
@@ -1,5 +1,5 @@
 .slippy {
-  position: relative;
+  position: fixed;
   width: 100%;
   height: 100%;
   z-index: 10;
diff --git a/src/theme/variables.css b/src/theme/variables.css
index a44fcdd..854bb52 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -1,8 +1,15 @@
 /* Ionic Variables and Theming. For more info, please see:
 http://ionicframework.com/docs/theming/ */
 
+#background-content {
+  background: transparent;
+}
+
 /** Ionic CSS Variables **/
 :root {
+  --ion-background-color: transparent;
+
+
   /** primary **/
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56, 128, 255;