Bring back navigation buttons.
This commit is contained in:
parent
2c79c74376
commit
02f02984e5
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -0,0 +1 @@
|
|||
export { Back, Forward } from './BackForward';
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue