Upgrade UI for Coordinates plugin (#1138)

* Add styling and Grid components * Add more margin and change button width * Fix scroll bar for window A scroll bar now appears in the window if necessary. * Position buttons to the left and right Change design and placement on buttons. Two text buttons are now positioned to the left and two icon buttons are positioned to the right. * Update nested Grid structure in CoordinatesView * Update nested Grid structure in CoordinatesTransformRow * Add styling for Grid components * Clear unused constants * Clear unused modules * Add margin for mobile devices On mobile devices, the zoom button was hidden behind the snackbar. * Added possibility to disable padding in baseWindow * Removed unused styling (Hopefully unused... :) ) Co-authored-by: Henrik Hallberg <43059093+Hallbergs@users.noreply.github.com>
hajkmap · Aug 29, 2022 · 3c57fc8 · 3c57fc8
1 parent b88a766
commit 3c57fc8
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 85 deletions.
diff --git a/new-client/src/components/Window.js b/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
             }}

diff --git a/new-client/src/plugins/BaseWindowPlugin.js b/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}

diff --git a/new-client/src/plugins/Coordinates/Coordinates.js b/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,
         }}

diff --git a/new-client/src/plugins/Coordinates/CoordinatesTransformRow.js b/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 <></>;

diff --git a/new-client/src/plugins/Coordinates/CoordinatesView.js b/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>
     );
   }
 }