Upgrade UI for Coordinates plugin

new-client/src/components/Window.js

@@ -558,7 +558,10 @@ class Window extends React.PureComponent {
           <StyledSection
             sx={{
               overflowY: this.props.scrollable ? "auto" : "hidden",
-              padding: this.props.scrollable ? "10px" : "0px",
+              padding:
+                this.props.scrollable && this.props.disablePadding !== true
+                  ? "10px"
+                  : "0px",
               maxHeight:
                 this.getMaxWindowHeight() - (isMobile === false ? 50 : -30), // Super-hack special case for small screens
             }}

new-client/src/plugins/BaseWindowPlugin.js

@@ -188,6 +188,7 @@ class BaseWindowPlugin extends React.PureComponent {
           resizingEnabled={this.props.custom.resizingEnabled}
           scrollable={this.props.custom.scrollable}
           allowMaximizedWindow={this.props.custom.allowMaximizedWindow}
+          disablePadding={this.props.custom.disablePadding}
           width={this.width}
           height={this.height}
           position={this.position}

new-client/src/plugins/Coordinates/Coordinates.js

@@ -40,6 +40,7 @@ class Coordinates extends React.PureComponent {
           description: "Visa koordinater för given plats",
           height: "dynamic",
           width: 400,
+          disablePadding: true,
           onWindowShow: this.onWindowShow,
           onWindowHide: this.onWindowHide,
         }}

new-client/src/plugins/Coordinates/CoordinatesTransformRow.js

@@ -1,18 +1,10 @@
 import React from "react";
-import { styled } from "@mui/material/styles";
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import NumberFormat from "react-number-format";
 import { transform } from "ol/proj";
 import { withSnackbar } from "notistack";
-
-const StyledNumberFormat = styled(NumberFormat)(({ theme }) => ({
-  marginLeft: theme.spacing(1),
-  marginRight: theme.spacing(1),
-  marginTop: theme.spacing(2),
-}));
+import Grid from "@mui/material/Grid";
 
 class CoordinatesTransformRow extends React.PureComponent {
   state = {
@@ -183,17 +175,19 @@ class CoordinatesTransformRow extends React.PureComponent {
 
     if (this.model.showFieldsOnStart || this.state.wasModified) {
       return (
-        <TableRow key={this.props.transformation.code}>
-          <TableCell>
-            <Typography variant="body1" style={{ display: "flex" }}>
-              {this.props.transformation.title}
-            </Typography>
-            <Typography variant="body2" style={{ display: "flex" }}>
-              ({this.props.transformation.code})
+        <Grid container item spacing={2} rowSpacing={1}>
+          <Grid item xs={12}>
+            <Typography variant="body2" style={{ fontWeight: 600 }}>
+              {this.transformation
+                ? this.transformation.title +
+                  " (" +
+                  this.transformation.code +
+                  ")"
+                : ""}
             </Typography>
-          </TableCell>
-          <TableCell>
-            <StyledNumberFormat
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <NumberFormat
               label={this.props.transformation.xtitle}
               margin="dense"
               variant="outlined"
@@ -209,8 +203,11 @@ class CoordinatesTransformRow extends React.PureComponent {
               helperText={this.state.errorX}
               thousandSeparator={this.model.thousandSeparator ? " " : false}
               customInput={TextField}
+              fullWidth={true}
             />
-            <StyledNumberFormat
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <NumberFormat
               label={this.props.transformation.ytitle}
               margin="dense"
               size="small"
@@ -226,9 +223,10 @@ class CoordinatesTransformRow extends React.PureComponent {
               helperText={this.state.errorY}
               thousandSeparator={this.model.thousandSeparator ? " " : false}
               customInput={TextField}
+              fullWidth={true}
             />
-          </TableCell>
-        </TableRow>
+          </Grid>
+        </Grid>
       );
     } else {
       return <></>;

new-client/src/plugins/Coordinates/CoordinatesView.js

@@ -2,13 +2,8 @@ import React from "react";
 import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import Grid from "@mui/material/Grid";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
 import CoordinatesTransformRow from "./CoordinatesTransformRow.js";
+import { Divider, Tooltip } from "@mui/material";
 
 import { withSnackbar } from "notistack";
 
@@ -17,16 +12,8 @@ import {
   LOCATION_DENIED_SNACK_MESSAGE,
 } from "plugins/Location/constants/index.js";
 
-const StyledPaper = styled(Paper)(() => ({
-  backgroundImage: "none",
-  display: "flex",
-  flexGrow: 1,
-  flexWrap: "wrap",
-}));
-
-const StyledButton = styled(Button)(({ theme }) => ({
-  minWidth: 64,
-  margin: 0,
+const StyledGridContainer = styled(Grid)(({ theme }) => ({
+  padding: theme.spacing(2),
 }));
 
 class CoordinatesView extends React.PureComponent {
@@ -77,69 +64,94 @@ class CoordinatesView extends React.PureComponent {
   renderProjections() {
     return (
       <>
-        {this.props.model.transformations.map((transformation, index) => {
-          return (
-            <CoordinatesTransformRow
-              key={transformation.code + index + "-element"}
-              model={this.model}
-              transformation={transformation}
-              inverseAxis={transformation.inverseAxis}
-            />
-          );
-        })}
+        {this.props.model.transformations.map((transformation, index) => (
+          <CoordinatesTransformRow
+            key={`${transformation.code}${index}-element`}
+            model={this.model}
+            transformation={transformation}
+            inverseAxis={transformation.inverseAxis}
+          />
+        ))}
       </>
     );
   }
 
-  render() {
+  renderButtons() {
     return (
-      <>
-        <StyledPaper>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>Projektion</TableCell>
-                <TableCell>Koordinater</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>{this.renderProjections()}</TableBody>
-          </Table>
-          <Grid container justifyContent="space-between">
-            <StyledButton
-              variant="text"
+      <Grid container item spacing={2} rowSpacing={1}>
+        <Grid item xs={12} md={6}>
+          <Tooltip title="Rensa fält">
+            <Button
+              fullWidth={true}
+              variant="contained"
+              color="primary"
               onClick={() => {
-                this.props.model.zoomOnMarker();
+                this.props.model.resetCoords();
               }}
             >
-              Zooma
-            </StyledButton>
-            <StyledButton
-              variant="text"
+              Rensa
+            </Button>
+          </Tooltip>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Tooltip title="Min position">
+            <Button
+              fullWidth={true}
+              variant="contained"
+              color="primary"
               onClick={() => {
-                this.props.model.centerOnMarker();
+                this.props.model.goToUserLocation();
               }}
             >
-              Panorera
-            </StyledButton>
-            <StyledButton
-              variant="text"
+              Min position
+            </Button>
+          </Tooltip>
+        </Grid>
+        <Grid item xs={12} sm={6} md={6}>
+          <Tooltip title="Panorera till markering">
+            <Button
+              fullWidth={true}
+              variant="contained"
+              color="primary"
               onClick={() => {
-                this.props.model.goToUserLocation();
+                this.props.model.centerOnMarker();
               }}
             >
-              Min position
-            </StyledButton>
-            <StyledButton
-              variant="text"
+              Panorera
+            </Button>
+          </Tooltip>
+        </Grid>
+        <Grid item xs={12} sm={6} md={6}>
+          <Tooltip title="Zooma in till markering">
+            <Button
+              fullWidth={true}
+              variant="contained"
+              color="primary"
               onClick={() => {
-                this.props.model.resetCoords();
+                this.props.model.zoomOnMarker();
               }}
             >
-              Rensa fält
-            </StyledButton>
-          </Grid>
-        </StyledPaper>
-      </>
+              Zooma
+            </Button>
+          </Tooltip>
+        </Grid>
+      </Grid>
+    );
+  }
+
+  render() {
+    return (
+      <Grid container>
+        <StyledGridContainer container rowSpacing={2} columnSpacing={1}>
+          {this.renderProjections()}
+        </StyledGridContainer>
+        <Grid item xs={12}>
+          <Divider />
+        </Grid>
+        <StyledGridContainer container rowSpacing={2} columnSpacing={1}>
+          {this.renderButtons()}
+        </StyledGridContainer>
+      </Grid>
     );
   }
 }