Updates to styling. (04ec9739) · Commits · aflab / astrogeology / Asc Geostac

app/src/components/container/App.jsx

+7 −9

Original line number	Diff line number	Diff line
		@@ -4,10 +4,9 @@ import MapContainer from "./MapContainer.jsx";
		import QueryConsole from "../presentational/QueryConsole.jsx";
		import CreditsDisplay from "../presentational/CreditsDisplay.jsx";
		import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx";
		import { makeStyles } from "@material-ui/core/styles";
		import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';

		const useStyles = makeStyles(theme => ({
		const css = {
		shown: {
		display: "block",
		background: "#f8f9fa"
		@@ -15,7 +14,7 @@ const useStyles = makeStyles(theme => ({
		hidden: {
		display: "none"
		}
		}))
		};

		/**
		* App is the parent component for all of the other components in the project. It
		@@ -25,14 +24,13 @@ const useStyles = makeStyles(theme => ({
		* @component
		*/
		export default function App() {
		const classes = useStyles();
		const [targetPlanet, setTargetPlanet] = React.useState("Mars");
		const [showSortBar, setShowSortBar] = React.useState(true);
		const [sortBarStyle, setSortBarStyle] = React.useState(classes.hidden);
		const [sortBarStyle, setSortBarStyle] = React.useState(css.hidden);

		const ShowHideSort = () => {
		setShowSortBar(!showSortBar);
		setSortBarStyle(showSortBar ? classes.shown : classes.hidden);
		setSortBarStyle(showSortBar ? css.shown : css.hidden);
		}

		/**

app/src/components/presentational/ConsoleAppBar.jsx

+4 −10

Original line number	Diff line number	Diff line
		@@ -3,22 +3,17 @@ import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";
		import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";
		import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";
		import ConsoleCoordinates from "./ConsoleCoordinates.jsx";
		import { makeStyles } from "@material-ui/core/styles";
		import AppBar from "@mui/material/AppBar";
		import Toolbar from "@mui/material/Toolbar"; // Not sure what this did?
		import Divider from "@mui/material/Divider";

		/**
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles(theme => ({
		let css = {
		appbar: {
		background: "#f8f9fa"
		},
		toolbar: {
		padding: 0
		}
		}));
		};

		/**
		* Main component of the console, which arranges all subcomponents into a grid
		@@ -27,11 +22,10 @@ const useStyles = makeStyles(theme => ({
		* @component
		*/
		export default function ConsoleAppBar(props) {
		const classes = useStyles();

		return (
		<AppBar
		className={classes.appbar}
		sx={css.appbar}
		position="static"
		color="inherit"
		id="consoleToolbar"

app/src/components/presentational/ConsoleCoordinates.jsx

+7 −9

Original line number	Diff line number	Diff line
		import React from "react";
		import { makeStyles, withStyles } from "@material-ui/core/styles";
		import Grid from "@mui/material/Grid";
		import Typography from "@mui/material/Typography";
		import Zoom from "@mui/material/Zoom";
		@@ -10,7 +9,7 @@ import StyledTooltip from "./StyledTooltip.jsx";
		/**
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles({
		let css = {
		grid: {
		height: "100%",
		maxHeight: 60,
		@@ -45,7 +44,7 @@ const useStyles = makeStyles({
		textAlign: "center"
		}
		}
		});
		};

		/**
		* Main component that displays the container for the coordinate display
		@@ -54,7 +53,6 @@ const useStyles = makeStyles({
		* @component
		*/
		export default function ConsoleCoordinates() {
		const classes = useStyles();

		return (
		<StyledTooltip
		@@ -69,18 +67,18 @@ export default function ConsoleCoordinates() {
		arrow
		TransitionComponent={Zoom}
		>
		<div id="coordContainer" className={classes.container}>
		<div id="coordContainer" style={css.container}>
		<Paper
		style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
		variant="outlined"
		>
		<Typography variant="overline" className={classes.title}>
		<Typography variant="overline" sx={css.title}>
		Longitude
		</Typography>
		<Divider variant="fullWidth" />
		<Typography
		noWrap
		className={classes.coords}
		sx={css.coords}
		id="lonCoordinateDisplay"
		variant="subtitle2"
		/>
		@@ -93,13 +91,13 @@ export default function ConsoleCoordinates() {
		}}
		variant="outlined"
		>
		<Typography variant="overline" className={classes.title}>
		<Typography variant="overline" sx={css.title}>
		Latitude
		</Typography>
		<Divider variant="fullWidth" />
		<Typography
		noWrap
		className={classes.coords}
		sx={css.coords}
		id="latCoordinateDisplay"
		variant="subtitle2"
		/>

app/src/components/presentational/ConsoleLonLatSelects.jsx

+94 −56

Original line number	Diff line number	Diff line
		import React from "react";
		import { alpha, makeStyles, withStyles } from "@material-ui/core/styles";
		import { alpha } from "@mui/material/styles";
		import Zoom from "@mui/material/Zoom";
		import AutorenewIcon from "@mui/icons-material/Autorenew";
		import AddBoxIcon from "@mui/icons-material/AddBoxOutlined";
		@@ -8,12 +8,12 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
		import ToggleButton from "@mui/material/ToggleButton";
		import Typography from "@mui/material/Typography";
		import Divider from "@mui/material/Divider";
		import StyledTooltip from "./StyledTooltip.jsx";
		import Tooltip from "@mui/material/Tooltip";

		/**
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles(theme => ({
		let css = {
		grid: {
		width: 600,
		height: "100%",
		@@ -49,12 +49,13 @@ const useStyles = makeStyles(theme => ({
		flexWrap: "wrap",
		backgroundColor: alpha("#1971c2", 0.7)
		}
		}));
		};


		/**
		* Custom Component that uses ToggleButton with modified css styling
		*/
		const StyledToggleButton = withStyles(theme => ({
		const styledToggleButton = {
		root: {
		height: 30,
		color: alpha("#f8f9fa", 0.8),
		@@ -80,36 +81,63 @@ const StyledToggleButton = withStyles(theme => ({
		color: "#343a40",
		backgroundColor: "#e9ecef"
		}
		}))(ToggleButton);
		};

		const StyledToggleButtonGroup = withStyles(theme => ({
		const styledToggleButtonGroup = {
		root: {
		backgroundColor: alpha("#1971c2", 0.7),
		border: `1px solid ${theme.palette.divider}`,
		border: `1px solid black`,
		height: 37
		},
		grouped: {
		margin: theme.spacing(0.5),
		margin: "4px",
		border: "none",
		padding: theme.spacing(0, 0.75),
		"&:not(:first-child)": {
		borderRadius: theme.shape.borderRadius
		padding: "0, 6px",
		"&:not(:first-of-type)": {
		borderRadius: "4px"
		},
		"&:first-child": {
		borderRadius: theme.shape.borderRadius
		"&:first-of-type": {
		borderRadius: "4px"
		}
		}
		}))(ToggleButtonGroup);
		};

		const StyledDivider = withStyles(theme => ({
		const styledDivider = {
		root: {
		alignSelf: "stretch",
		height: "auto",
		margin: theme.spacing(1, 0.5),
		margin: "8px, 4px",
		backgroundColor: alpha("#f8f9fa", 0.8),
		width: 1
		}
		}))(Divider);
		};

		const styledTooltip = {
		root: {
		backgroundColor: "#f8f9fa",
		color: "rgba(0, 0, 0, 0.87)",
		maxWidth: 250,
		fontSize: 12,
		border: `2px solid black`,
		textAlign: "center"
		},
		arrow: {
		color: "#f8f9fa"
		},
		tooltipPlacementRight: {
		margin: "0 8px"
		},
		tooltipPlacementLeft: {
		margin: "0 8px"
		},
		tooltipPlacementTop: {
		margin: "8px 0"
		},
		tooltipPlacementBottom: {
		margin: "8px 0"
		}
		};

		/**
		* Main component which controls and displays the console's longitude and latitude
		* selectors and handles user click events.
		@@ -139,12 +167,10 @@ export default function ConsoleLonLatSelects() {
		}
		};

		const classes = useStyles();

		return (
		<div className="flexbar">
		<div className="flexbar-item">
		<StyledTooltip
		<Tooltip
		title={
		<Typography variant="subtitle1">
		Switch to either positive east or positive west longitude
		@@ -153,32 +179,39 @@ export default function ConsoleLonLatSelects() {
		}
		enterDelay={800}
		leaveDelay={0}
		arrow
		TransitionComponent={Zoom}
		>
		<div id="lonLatEastWest">
		<StyledToggleButtonGroup
		<ToggleButtonGroup
		exclusive
		size="small"
		value={posEastWest}
		onChange={handlePosEastWest}
		sx={styledToggleButtonGroup}
		>
		<StyledToggleButton id="consoleLonEastBtn" value="PositiveEast">
		<AutorenewIcon fontSize="small" className={classes.flip} />
		<Typography className={classes.buttonText}>East</Typography>
		</StyledToggleButton>
		<StyledToggleButton id="consoleLonWestBtn" value="PositiveWest">
		<ToggleButton
		id="consoleLonEastBtn"
		value="PositiveEast"
		style={styledToggleButton}>
		<AutorenewIcon fontSize="small" sx={css.flip} />
		<Typography sx={css.buttonText}>East</Typography>
		</ToggleButton>
		<ToggleButton
		id="consoleLonWestBtn"
		value="PositiveWest"
		sx={styledToggleButton}>
		<AutorenewIcon fontSize="small" />
		<Typography className={classes.buttonText}>West</Typography>
		</StyledToggleButton>
		</StyledToggleButtonGroup>
		<Typography sx={css.buttonText}>West</Typography>
		</ToggleButton>
		</ToggleButtonGroup>
		</div>
		</StyledTooltip>
		</Tooltip>
		</div>
		<StyledDivider orientation="vertical" />
		<Divider sx={styledDivider} orientation="vertical" />

		<div className="flexbar-item">
		<StyledTooltip
		<Tooltip
		sx={styledTooltip}
		title={
		<Typography variant="subtitle1">
		Switch to either a planetocentric or planetographic coordinate
		@@ -191,34 +224,38 @@ export default function ConsoleLonLatSelects() {
		TransitionComponent={Zoom}
		>
		<div id="lonLatType">
		<StyledToggleButtonGroup
		<ToggleButtonGroup
		exclusive
		size="small"
		value={coordSystem}
		onChange={handleCoordSystem}
		sx={styledToggleButton}
		>
		<StyledToggleButton
		<ToggleButton
		value="Planetocentric"
		id="consoleLatTypeOcentric"
		sx={styledToggleButton}
		>
		<i className={classes.circle} />
		<Typography className={classes.buttonText}>centric</Typography>
		</StyledToggleButton>
		<StyledToggleButton
		<i style={css.circle} />
		<Typography sx={css.buttonText}>centric</Typography>
		</ToggleButton>
		<ToggleButton
		id="consoleLatTypeOgraphic"
		value="Planetographic"
		sx={styledToggleButton}
		>
		<i className={classes.oval} />
		<Typography className={classes.buttonText}>graphic</Typography>
		</StyledToggleButton>
		</StyledToggleButtonGroup>
		<i style={css.oval} />
		<Typography sx={css.buttonText}>graphic</Typography>
		</ToggleButton>
		</ToggleButtonGroup>
		</div>
		</StyledTooltip>
		</Tooltip>
		</div>
		<StyledDivider orientation="vertical" />
		<Divider orientation="vertical" sx={styledDivider} />

		<div className="flexbar-item">
		<StyledTooltip
		<Tooltip
		sx={styledTooltip}
		title={
		<Typography variant="subtitle1">
		Switch to either -180° to 180° or 0° to 360°
		@@ -231,23 +268,24 @@ export default function ConsoleLonLatSelects() {
		TransitionComponent={Zoom}
		>
		<div id="lonLatRange">
		<StyledToggleButtonGroup
		<ToggleButtonGroup
		exclusive
		size="small"
		value={lonRange}
		onChange={handleLonRange}
		sx={styledToggleButtonGroup}
		>
		<StyledToggleButton id="consoleLon180Btn" value={180}>
		<ToggleButton sx={styledToggleButton} id="consoleLon180Btn" value={180}>
		<ExposureIcon fontSize="small" />
		<Typography className={classes.buttonText}>180°</Typography>
		</StyledToggleButton>
		<StyledToggleButton id="consoleLon360Btn" value={360}>
		<Typography sx={css.buttonText}>180°</Typography>
		</ToggleButton>
		<ToggleButton sx={styledToggleButton} id="consoleLon360Btn" value={360}>
		<AddBoxIcon fontSize="small" />
		<Typography className={classes.buttonText}>360°</Typography>
		</StyledToggleButton>
		</StyledToggleButtonGroup>
		<Typography sx={css.buttonText}>360°</Typography>
		</ToggleButton>
		</ToggleButtonGroup>
		</div>
		</StyledTooltip>
		</Tooltip>
		</div>
		</div>
		);

app/src/components/presentational/ConsoleProjectionButtons.jsx

+14 −15

Original line number	Diff line number	Diff line
		import React from "react";
		import { makeStyles, withStyles, alpha } from "@material-ui/core/styles";
		import { alpha } from "@mui/material/styles";
		import Grid from "@mui/material/Grid";
		import ButtonBase from "@mui/material/ButtonBase";
		import Typography from "@mui/material/Typography";
		@@ -12,7 +12,7 @@ import StyledTooltip from "./StyledTooltip.jsx";
		/**
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles({
		let css = {
		img: {
		width: "100%",
		height: "100%"
		@@ -50,7 +50,7 @@ const useStyles = makeStyles({
		height: "100%"
		},
		focusVisible: {}
		});
		};

		/**
		* Component used only in this file, passed in to the Tooltip to
		@@ -107,7 +107,6 @@ function SouthDisabled() {
		* @component
		*/
		export default function ConsoleProjectionButtons() {
		const classes = useStyles();

		const [active, setActive] = React.useState("cylindrical");

		@@ -129,7 +128,7 @@ export default function ConsoleProjectionButtons() {

		return (
		<Grid
		className={classes.grid}
		sx={css.grid}
		id="projContainer"
		container
		item
		@@ -151,11 +150,11 @@ export default function ConsoleProjectionButtons() {
		<ButtonBase
		id="projectionNorthPole"
		focusRipple
		className={active == "north" ? classes.activeBtn : classes.button}
		focusVisibleClassName={classes.focusVisible}
		sx={active == "north" ? css.activeBtn : css.button}
		//focusVisibleClassName={classes.focusVisible}
		onClick={handleNorthClick}
		>
		<img className={classes.img} src={northPolar} />
		<img style={css.img} src={northPolar} />
		</ButtonBase>
		</div>
		</StyledTooltip>
		@@ -177,14 +176,14 @@ export default function ConsoleProjectionButtons() {
		<ButtonBase
		id="projectionCylindrical"
		focusRipple
		className={
		active == "cylindrical" ? classes.activeBtn : classes.button
		sx={
		active == "cylindrical" ? css.activeBtn : css.button
		}
		focusVisibleClassName={classes.focusVisible}
		//focusVisibleClassName={classes.focusVisible}
		value="cylindrical"
		onClick={() => setActive("cylindrical")}
		>
		<img className={classes.img} src={simpleCylindrical} />
		<img style={css.img} src={simpleCylindrical} />
		</ButtonBase>
		</div>
		</StyledTooltip>
		@@ -202,11 +201,11 @@ export default function ConsoleProjectionButtons() {
		<ButtonBase
		id="projectionSouthPole"
		focusRipple
		className={active == "south" ? classes.activeBtn : classes.button}
		focusVisibleClassName={classes.focusVisible}
		sx={active == "south" ? css.activeBtn : css.button}
		//focusVisibleClassName={classes.focusVisible}
		onClick={handleSouthClick}
		>
		<img className={classes.img} src={southPolar} />
		<img style={css.img} src={southPolar} />
		</ButtonBase>
		</div>
		</StyledTooltip>