Using Ionic components.

This commit is contained in:
Eric van der Vlist 2022-09-22 13:52:08 +02:00
parent 18c2819da9
commit 7447cfd128
5 changed files with 50 additions and 15 deletions

View File

@ -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;

View File

@ -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,9 +34,10 @@ const Map: react.FC<{}> = (props: {}) => {
}, []);
return (
<Fragment>
<>
<IonContent fullscreen={true}>
<IonApp>
<Slippy>
<GetLocation />
<Whiteboard>
<CurrentLocation />
</Whiteboard>
@ -37,7 +45,16 @@ const Map: react.FC<{}> = (props: {}) => {
<Layer>
<TiledMap />
</Layer>
</Fragment>
</IonApp>
</IonContent>
<IonFooter className='ion-no-border'>
<IonToolbar>
<IonButtons>
<GetLocation />
</IonButtons>
</IonToolbar>
</IonFooter>
</>
);
};

View File

@ -6,3 +6,9 @@
height: 256px;
width: 256px;
}
ion-button.get-location {
--opacity: 0.6;
--ion-background-color: white;
margin-left: calc(50% - 20px);
}

View File

@ -1,5 +1,5 @@
.slippy {
position: relative;
position: fixed;
width: 100%;
height: 100%;
z-index: 10;

View File

@ -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;