From 54bb452371f1d32a621b031d860377d25203a042 Mon Sep 17 00:00:00 2001 From: allyoucanmap Date: Wed, 10 Sep 2025 18:25:40 +0200 Subject: [PATCH 01/17] MOCKUP --- .../mapcontrols/mouseposition/CRSSelector.jsx | 9 ++- .../mouseposition/MousePosition.jsx | 62 ++++++++++--------- .../mouseposition/MousePositionLabelDMS.jsx | 36 ++++++----- .../mouseposition/MousePositionLabelYX.jsx | 19 +++--- web/client/plugins/MousePosition.jsx | 3 +- 5 files changed, 71 insertions(+), 58 deletions(-) diff --git a/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx b/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx index c2ee37eee46..cc309c65ce0 100644 --- a/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx +++ b/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx @@ -12,6 +12,7 @@ import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'; import ReactDOM from 'react-dom'; import {filterCRSList, getAvailableCRS} from '../../../utils/CoordinatesUtils'; +import FlexBox from '../../layout/FlexBox'; class CRSSelector extends React.Component { static propTypes = { @@ -63,19 +64,21 @@ class CRSSelector extends React.Component { {list} ); } else if (this.props.enabled && !this.props.useRawInput) { + // TODO: check why we need inline style return ( - - {this.props.label} + + {this.props.label} {list} - ); + ); } return null; } diff --git a/web/client/components/mapcontrols/mouseposition/MousePosition.jsx b/web/client/components/mapcontrols/mouseposition/MousePosition.jsx index 6854073ad54..ba7646eb186 100644 --- a/web/client/components/mapcontrols/mouseposition/MousePosition.jsx +++ b/web/client/components/mapcontrols/mouseposition/MousePosition.jsx @@ -9,7 +9,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import proj4js from 'proj4'; -import { Glyphicon, Label } from 'react-bootstrap'; +import { Glyphicon } from 'react-bootstrap'; import CopyToClipboard from 'react-copy-to-clipboard'; import { reproject, getUnits } from '../../../utils/CoordinatesUtils'; import MousePositionLabelDMS from './MousePositionLabelDMS'; @@ -19,6 +19,10 @@ import Message from '../../I18N/Message'; import { isNumber } from 'lodash'; import Button from '../../misc/Button'; + +import FlexBox from '../../layout/FlexBox'; +import Text from '../../layout/Text'; + import './mousePosition.css'; /** * MousePosition is a component that shows the coordinate of the mouse position in a selected crs. @@ -66,8 +70,8 @@ class MousePosition extends React.Component { editCRS: false, degreesTemplate: MousePositionLabelDMS, projectedTemplate: MousePositionLabelYX, - crsTemplate: crs => {crs}, - elevationTemplate: elevation => isNumber(elevation) ? {elevation} m : , + crsTemplate: crs => {crs}, + elevationTemplate: elevation => isNumber(elevation) ? `Alt: ${elevation} m` : '', style: {}, copyToClipboardEnabled: false, glyphicon: "paste", @@ -104,33 +108,31 @@ class MousePosition extends React.Component { if (this.props.enabled) { const position = this.getPosition(); return ( -
- - {this.props.showLabels ? : null} - {Template ?