Bring back navigation buttons.
This commit is contained in:
parent
2c79c74376
commit
02f02984e5
|
@ -8,6 +8,8 @@
|
||||||
android:label="@string/app_name"
|
android:label="@string/app_name"
|
||||||
android:roundIcon="@mipmap/ic_launcher_round"
|
android:roundIcon="@mipmap/ic_launcher_round"
|
||||||
android:supportsRtl="true"
|
android:supportsRtl="true"
|
||||||
|
android:isGame="false"
|
||||||
|
android:appCategory="maps"
|
||||||
android:theme="@style/AppTheme">
|
android:theme="@style/AppTheme">
|
||||||
|
|
||||||
<activity
|
<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 { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
|
||||||
import GetLocation, { getCurrentLocation } from '../get-location';
|
import GetLocation, { getCurrentLocation } from '../get-location';
|
||||||
import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
|
import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
|
||||||
|
import { Back, Forward } from '../back-forward';
|
||||||
|
|
||||||
const [getState, setState] = createSignal({
|
const [getState, setState] = createSignal({
|
||||||
lon: 0,
|
lon: 0,
|
||||||
|
@ -144,6 +145,22 @@ const Map: Component = () => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
|
new Control({
|
||||||
|
// @ts-ignore
|
||||||
|
element: (
|
||||||
|
<div>
|
||||||
|
<Back />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
new Control({
|
||||||
|
// @ts-ignore
|
||||||
|
element: (
|
||||||
|
<div>
|
||||||
|
<Forward />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
}),
|
||||||
]),
|
]),
|
||||||
});
|
});
|
||||||
olMap.on(['moveend'], changeListener);
|
olMap.on(['moveend'], changeListener);
|
||||||
|
|
Loading…
Reference in New Issue