From 59fbe4aa3f73a4c0f4225372291e4facb04691e7 Mon Sep 17 00:00:00 2001 From: evlist Date: Tue, 27 Sep 2022 17:34:17 +0200 Subject: [PATCH] Improving the tile server chooser (#7) --- .../map/TileServerChooserDialog.tsx | 55 +++++++++++++++++-- src/theme/map.css | 22 ++++++++ 2 files changed, 71 insertions(+), 6 deletions(-) diff --git a/src/components/map/TileServerChooserDialog.tsx b/src/components/map/TileServerChooserDialog.tsx index f2eac57..daac924 100644 --- a/src/components/map/TileServerChooserDialog.tsx +++ b/src/components/map/TileServerChooserDialog.tsx @@ -1,4 +1,7 @@ import { + createAnimation, + IonButton, + IonButtons, IonContent, IonHeader, IonItem, @@ -8,29 +11,69 @@ import { IonRadio, IonRadioGroup, IonTitle, + IonToolbar, } from '@ionic/react'; -import React from 'react'; +import React, { useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { mapActions, MapState } from '../../store/map'; import { tileProviders } from './tile'; const TileServerChooserDialog: React.FC<{}> = () => { - const tileProvider = useSelector( (state: { map: MapState }) => state.map.scope.tileProvider ) as keyof typeof tileProviders; const dispatch = useDispatch(); + const modal = useRef(null); + + const dismiss = () => { + modal.current?.dismiss(); + }; + const changeHandler = (event: any) => { 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 ( - - - Select your map - + + + Choose your map + + dismiss()}>Close + + diff --git a/src/theme/map.css b/src/theme/map.css index 1053002..e3d16b8 100644 --- a/src/theme/map.css +++ b/src/theme/map.css @@ -42,3 +42,25 @@ path { path.current { 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) + ; +} \ No newline at end of file