Improving the tile server chooser (#7)

This commit is contained in:
Eric van der Vlist 2022-09-27 17:34:17 +02:00
parent f5ce103cb3
commit 59fbe4aa3f
2 changed files with 71 additions and 6 deletions

View File

@ -1,4 +1,7 @@
import { import {
createAnimation,
IonButton,
IonButtons,
IonContent, IonContent,
IonHeader, IonHeader,
IonItem, IonItem,
@ -8,29 +11,69 @@ import {
IonRadio, IonRadio,
IonRadioGroup, IonRadioGroup,
IonTitle, IonTitle,
IonToolbar,
} from '@ionic/react'; } from '@ionic/react';
import React from 'react'; import React, { useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { mapActions, MapState } from '../../store/map'; import { mapActions, MapState } from '../../store/map';
import { tileProviders } from './tile'; import { tileProviders } from './tile';
const TileServerChooserDialog: React.FC<{}> = () => { const TileServerChooserDialog: React.FC<{}> = () => {
const tileProvider = useSelector( const tileProvider = useSelector(
(state: { map: MapState }) => state.map.scope.tileProvider (state: { map: MapState }) => state.map.scope.tileProvider
) as keyof typeof tileProviders; ) as keyof typeof tileProviders;
const dispatch = useDispatch(); const dispatch = useDispatch();
const modal = useRef<HTMLIonModalElement>(null);
const dismiss = () => {
modal.current?.dismiss();
};
const changeHandler = (event: any) => { const changeHandler = (event: any) => {
dispatch(mapActions.setTileProvider(event.detail.value)); dispatch(mapActions.setTileProvider(event.detail.value));
dismiss();
};
const enterAnimation = (baseEl: HTMLElement) => {
const root = baseEl.shadowRoot;
const backdropAnimation = createAnimation()
.addElement(root?.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = createAnimation()
.addElement(root?.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '0', transform: 'scale(0)' },
{ offset: 1, opacity: '0.99', transform: 'scale(1)' },
]);
return createAnimation()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
};
const leaveAnimation = (baseEl: HTMLElement) => {
return enterAnimation(baseEl).direction('reverse');
}; };
return ( return (
<IonModal trigger='open-TileServerChooser'> <IonModal
<IonHeader> ref={modal}
<IonTitle>Select your map</IonTitle> trigger='open-TileServerChooser'
</IonHeader> enterAnimation={enterAnimation}
leaveAnimation={leaveAnimation}
>
<IonToolbar>
<IonTitle>Choose your map</IonTitle>
<IonButtons slot='end'>
<IonButton onClick={() => dismiss()}>Close</IonButton>
</IonButtons>
</IonToolbar>
<IonContent> <IonContent>
<IonList> <IonList>
<IonRadioGroup value={tileProvider} onIonChange={changeHandler}> <IonRadioGroup value={tileProvider} onIonChange={changeHandler}>

View File

@ -42,3 +42,25 @@ path {
path.current { path.current {
stroke: rgba(2, 71, 20, 0.8); stroke: rgba(2, 71, 20, 0.8);
} }
ion-modal {
--height: 50%;
--border-radius: 16px;
--box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
}
/* ion-modal::part(backdrop) {
background: rgba(209, 213, 219);
opacity: 1;
} */
ion-modal ion-toolbar {
--background: rgba(14,116,144, .7);
--color: white;
}
ion-modal ion-content {
background-color: rgba(255,255,255,.7)
;
}