Add zoom buttons to the location view (#7482)
This commit is contained in:
Andy Balaam
GitHub
parent
d00483be3e
commit
9cb8ce7c20
6 changed files with 102 additions and 8 deletions
|
|
@ -49,8 +49,48 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_MLocationBody .mx_MLocationBody_map {
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
.mx_MLocationBody {
|
||||
position: absolute;
|
||||
|
||||
.mx_MLocationBody_map {
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.mx_MLocationBody_zoomButtons {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 8px;
|
||||
|
||||
right: 24px;
|
||||
bottom: 48px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
background-color: $background;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
.mx_MLocationBody_zoomButton {
|
||||
background-color: $primary-content;
|
||||
margin: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_MLocationBody_plusButton {
|
||||
mask-image: url('$(res)/img/element-icons/plus-button.svg');
|
||||
}
|
||||
|
||||
.mx_MLocationBody_minusButton {
|
||||
mask-image: url('$(res)/img/element-icons/minus-button.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
res/img/element-icons/minus-button.svg
Normal file
3
res/img/element-icons/minus-button.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8.00001C2 7.56779 2.35038 7.21741 2.78261 7.21741L13.2173 7.21741C13.6496 7.21741 13.9999 7.56779 13.9999 8.00001C13.9999 8.43223 13.6496 8.78262 13.2173 8.78262L2.78261 8.78262C2.35038 8.78262 2 8.43223 2 8.00001Z" fill="#17191C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 388 B |
3
res/img/element-icons/plus-button.svg
Normal file
3
res/img/element-icons/plus-button.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.78269 2.78285C8.78269 2.35063 8.43231 2.00024 8.00009 2.00024C7.56787 2.00024 7.21748 2.35063 7.21748 2.78285V7.21748L2.78285 7.21748C2.35063 7.21748 2.00024 7.56787 2.00024 8.00009C2.00024 8.43231 2.35063 8.78269 2.78285 8.78269L7.21748 8.7827V13.2176C7.21748 13.6498 7.56787 14.0002 8.00009 14.0002C8.43231 14.0002 8.7827 13.6498 8.7827 13.2176V8.7827L13.2176 8.7827C13.6498 8.7827 14.0002 8.43231 14.0002 8.00009C14.0002 7.56787 13.6498 7.21749 13.2176 7.21749L8.78269 7.21748V2.78285Z" fill="#17191C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
|
|
@ -33,11 +33,13 @@ interface IState {
|
|||
@replaceableComponent("views.location.LocationViewDialog")
|
||||
export default class LocationViewDialog extends React.Component<IProps, IState> {
|
||||
private coords: GeolocationCoordinates;
|
||||
private map?: maplibregl.Map;
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
|
||||
this.map = null;
|
||||
this.state = {
|
||||
error: undefined,
|
||||
};
|
||||
|
|
@ -48,7 +50,7 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
|
|||
return;
|
||||
}
|
||||
|
||||
createMap(
|
||||
this.map = createMap(
|
||||
this.coords,
|
||||
true,
|
||||
this.getBodyId(),
|
||||
|
|
@ -65,6 +67,14 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
|
|||
return `mx_MLocationViewDialog_marker_${this.props.mxEvent.getId()}`;
|
||||
};
|
||||
|
||||
private onZoomIn = () => {
|
||||
this.map?.zoomIn();
|
||||
};
|
||||
|
||||
private onZoomOut = () => {
|
||||
this.map?.zoomOut();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<BaseDialog
|
||||
|
|
@ -77,6 +87,9 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
|
|||
bodyId={this.getBodyId()}
|
||||
markerId={this.getMarkerId()}
|
||||
error={this.state.error}
|
||||
zoomButtons={true}
|
||||
onZoomIn={this.onZoomIn}
|
||||
onZoomOut={this.onZoomOut}
|
||||
/>
|
||||
</BaseDialog>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import Modal from '../../../Modal';
|
|||
import LocationViewDialog from '../location/LocationViewDialog';
|
||||
import TooltipTarget from '../elements/TooltipTarget';
|
||||
import { Alignment } from '../elements/Tooltip';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
interface IState {
|
||||
error: Error;
|
||||
|
|
@ -89,7 +90,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
|
|||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
render(): React.ReactElement<HTMLDivElement> {
|
||||
return <LocationBodyContent
|
||||
mxEvent={this.props.mxEvent}
|
||||
bodyId={this.getBodyId()}
|
||||
|
|
@ -108,9 +109,13 @@ interface ILocationBodyContentProps {
|
|||
error: Error;
|
||||
tooltip?: string;
|
||||
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
||||
zoomButtons?: boolean;
|
||||
onZoomIn?: () => void;
|
||||
onZoomOut?: () => void;
|
||||
}
|
||||
|
||||
export function LocationBodyContent(props: ILocationBodyContentProps) {
|
||||
export function LocationBodyContent(props: ILocationBodyContentProps):
|
||||
React.ReactElement<HTMLDivElement> {
|
||||
const mapDiv = <div
|
||||
id={props.bodyId}
|
||||
onClick={props.onClick}
|
||||
|
|
@ -152,6 +157,36 @@ export function LocationBodyContent(props: ILocationBodyContentProps) {
|
|||
height="5"
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
props.zoomButtons
|
||||
? <ZoomButtons
|
||||
onZoomIn={props.onZoomIn}
|
||||
onZoomOut={props.onZoomOut}
|
||||
/>
|
||||
: null
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
|
||||
interface IZoomButtonsProps {
|
||||
onZoomIn: () => void;
|
||||
onZoomOut: () => void;
|
||||
}
|
||||
|
||||
function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElement> {
|
||||
return <div className="mx_MLocationBody_zoomButtons">
|
||||
<AccessibleButton
|
||||
onClick={props.onZoomIn}
|
||||
title={_t("Zoom in")}
|
||||
>
|
||||
<div className="mx_MLocationBody_zoomButton mx_MLocationBody_plusButton" />
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={props.onZoomOut}
|
||||
title={_t("Zoom out")}
|
||||
>
|
||||
<div className="mx_MLocationBody_zoomButton mx_MLocationBody_minusButton" />
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2093,6 +2093,8 @@
|
|||
"You sent a verification request": "You sent a verification request",
|
||||
"Expand map": "Expand map",
|
||||
"Failed to load map": "Failed to load map",
|
||||
"Zoom in": "Zoom in",
|
||||
"Zoom out": "Zoom out",
|
||||
"Vote not registered": "Vote not registered",
|
||||
"Sorry, your vote was not registered. Please try again.": "Sorry, your vote was not registered. Please try again.",
|
||||
"Final result based on %(count)s votes|other": "Final result based on %(count)s votes",
|
||||
|
|
@ -2201,8 +2203,6 @@
|
|||
"%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
|
||||
"%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
|
||||
"%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
|
||||
"Zoom out": "Zoom out",
|
||||
"Zoom in": "Zoom in",
|
||||
"Rotate Left": "Rotate Left",
|
||||
"Rotate Right": "Rotate Right",
|
||||
"Information": "Information",
|
||||
|
|
|
|||
Loading…
Reference in a new issue