Bring back navigation buttons.

This commit is contained in:
Eric van der Vlist 2022-11-26 12:33:26 +01:00
parent 2c79c74376
commit 02f02984e5
5 changed files with 66 additions and 0 deletions

View File

@ -8,6 +8,8 @@
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:isGame="false"
android:appCategory="maps"
android:theme="@style/AppTheme">
<activity

View File

@ -0,0 +1,16 @@
.common {
--opacity: 0.6;
--ion-background-color: white;
position: fixed !important;
top: 6px;
}
.back {
composes: common;
margin-left: 6px !important;
}
.forward {
composes: common;
margin-left: 40px !important;
}

View File

@ -0,0 +1,30 @@
import { Component, createEffect, createSignal } from 'solid-js';
import { IconButton } from '@suid/material';
import ArrowBackIcon from '@suid/icons-material/ArrowBack';
import ArrowForwardIcon from '@suid/icons-material/ArrowForward';
import styles from './BackForward.module.css';
export const Back: Component = () => {
const onClickHandler = (event: any) => {
window.history.back();
};
return (
<IconButton onClick={onClickHandler} class={styles.back}>
<ArrowBackIcon />
</IconButton>
);
};
export const Forward: Component = () => {
const onClickHandler = (event: any) => {
window.history.forward();
};
return (
<IconButton onClick={onClickHandler} class={styles.forward}>
<ArrowForwardIcon />
</IconButton>
);
};

View File

@ -0,0 +1 @@
export { Back, Forward } from './BackForward';

View File

@ -20,6 +20,7 @@ import { Point } from 'ol/geom';
import { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
import GetLocation, { getCurrentLocation } from '../get-location';
import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
import { Back, Forward } from '../back-forward';
const [getState, setState] = createSignal({
lon: 0,
@ -144,6 +145,22 @@ const Map: Component = () => {
</div>
),
}),
new Control({
// @ts-ignore
element: (
<div>
<Back />
</div>
),
}),
new Control({
// @ts-ignore
element: (
<div>
<Forward />
</div>
),
}),
]),
});
olMap.on(['moveend'], changeListener);