Updated GUI styling (3eab66a3) · Commits · aflab / astrogeology / Asc Geostac

app/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -79,6 +79,7 @@
		"@material-ui/core": "^4.9.0",
		"@material-ui/icons": "^4.5.1",
		"@material-ui/lab": "^4.0.0-alpha.41",
		"@svgr/webpack": "^5.3.1",
		"@tarekraafat/autocomplete.js": "^7.2.0",
		"jquery": "^3.4.1",
		"leaflet": "^1.6.0",

app/src/assets/img/cartocosmos-logo.svg

0 → 100644

+27 −0

Original line number	Diff line number	Diff line
		<?xml version="1.0" encoding="utf-8"?>
		<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
		<path d="M987.2,484.61l-59.95-11.1c-6.47-105.81-51.74-204.92-127.71-279.34C725.73,121.86,629.17,79.04,526.49,72.75l-11.1-59.95
		C514.02,5.38,507.55,0,500,0s-14.02,5.38-15.39,12.8l-11.09,59.93C367.39,79.22,268,124.78,193.55,201.1
		c-71.92,73.73-114.53,170.06-120.8,272.41l-59.95,11.1C5.38,485.98,0,492.45,0,500c0,7.55,5.38,14.02,12.8,15.39l59.93,11.09
		c6.48,106.13,52.04,205.52,128.37,279.98c73.73,71.92,170.05,114.52,272.4,120.79l11.1,59.95c1.37,7.42,7.85,12.8,15.39,12.8
		s14.02-5.38,15.39-12.8l11.1-59.95c105.74-6.46,204.76-51.65,279.17-127.54c72.41-73.84,115.3-170.45,121.59-273.22l59.95-11.1
		c7.42-1.37,12.8-7.85,12.8-15.39C1000,492.45,994.62,485.98,987.2,484.61z M775.86,218.36c67.94,66.55,109.22,154.54,117.01,248.79
		l-36.11-6.68c-9.02-82.15-46.47-159.08-105.86-217.14c-57.41-56.13-132-91.34-211.36-100.08l-6.68-36.11
		C624.25,114.7,709.9,153.75,775.86,218.36z M542.52,159.36c72.84,9.05,141.22,41.45,194.6,92.45L579.74,360.45L542.52,159.36z
		M711.46,288.54L589.09,410.91l-6.22-33.6L711.46,288.54z M748.2,262.89c50.92,53.31,83.41,121.67,92.45,194.6l-200.58-37.13
		L748.2,262.89z M217.78,224.74c66.59-68.26,154.83-109.81,249.37-117.61l-6.69,36.13c-82.28,9.04-159.33,46.6-217.41,106.14
		c-55.97,57.37-91.08,131.86-99.81,211.08l-36.11,6.68C114.68,376.05,153.53,290.6,217.78,224.74z M377.32,417.13l-88.76-128.58
		l0.02,0.01l122.34,122.34L377.32,417.13z M159.36,457.48c9.05-72.83,41.45-141.23,92.45-194.6l108.64,157.37L159.36,457.48z
		M420.25,360.49L262.88,251.81c53.3-50.91,121.67-83.42,194.6-92.46L420.25,360.49z M15.65,500L15.65,500 M224.75,782.23
		c-68.27-66.59-109.82-154.84-117.62-249.38l36.13,6.69c9.03,82.26,46.57,159.28,106.08,217.36c57.38,56,131.89,91.13,211.13,99.86
		l6.68,36.11C376.05,885.32,290.61,846.48,224.75,782.23z M457.48,840.64c-72.83-9.05-141.23-41.45-194.6-92.45l157.37-108.64
		L457.48,840.64z M288.55,711.45l122.37-122.37l6.22,33.6L288.55,711.45z M251.81,737.12c-50.92-53.3-83.42-121.67-92.45-194.6
		l201.04,37.21L251.81,737.12z M424.35,424.35L500,15.65v0V500l75.65-75.65 M575.65,424.35L984.35,500l0,0L500,500l75.65,75.65
		L500,984.35v0V500l-75.65,75.65L15.65,500L500,500l-75.65-75.65 M589.09,589.09L589.09,589.09l33.6-6.22l88.77,128.59L589.09,589.09
		z M579.65,640.07l157.47,108.13c-53.32,50.93-121.67,83.41-194.59,92.45L579.65,640.07z M748.19,737.12L639.55,579.74l201.09-37.22
		C831.59,615.36,799.2,683.74,748.19,737.12z M781.49,776.01c-66.55,67.86-154.46,109.07-248.64,116.85l6.68-36.1
		c82.1-9.02,158.96-46.41,217.01-105.73c56.21-57.44,91.46-132.07,100.21-211.49l36.11-6.68
		C885.3,624.32,846.19,710.03,781.49,776.01z"/>
		</svg>

app/src/components/presentational/ConsoleAppBar.jsx

+4 −3

Original line number	Diff line number	Diff line
		import React from "react";
		import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";
		import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";
		import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";
		import NewConsoleLonLatSelects from "../presentational/NewConsoleLonLatSelects.jsx";
		//import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";
		import AppBar from "@material-ui/core/AppBar";
		import Toolbar from "@material-ui/core/Toolbar";
		import Grid from "@material-ui/core/Grid";
		@@ -60,8 +61,8 @@ export default function ConsoleAppBar(props) {
		<Divider orientation="vertical" />
		<Grid container item direction="column" xs>
		<ConsoleTargetInfo target={props.target} />
		<Grid container item xs justify="center" wrap="nowrap">
		<ConsoleLonLatSelects />
		<Grid container item xs justify="space-around" wrap="nowrap">
		<NewConsoleLonLatSelects />
		<ConsoleCoordinates />
		</Grid>
		</Grid>

app/src/components/presentational/ConsoleCoordinates.jsx

+23 −11

Original line number	Diff line number	Diff line
		@@ -17,27 +17,29 @@ const useStyles = makeStyles({
		},
		title: {
		color: "#343a40",
		fontSize: "0.7rem",
		//fontSize: "12px",
		lineHeight: "1rem",
		paddingBottom: 1,
		fontWeight: 600
		},
		coords: {
		color: "#343a40",
		lineHeight: "1.5rem"
		//fontSize: "0.7rem"
		lineHeight: "1.5rem",
		fontSize: "13px"
		},
		container: {
		display: "flex",
		flexWrap: "noWrap",
		//maxHeight: 60,
		width: "85%",
		margin: "auto",
		"& > *": {
		margin: 0,
		padding: 0,
		width: "47.5%",
		width: "50%",
		height: "100%",
		maxHeight: "3rem",
		maxWidth: "47.5%",
		backgroundColor: "#f1f3f5",
		maxWidth: "50%",
		backgroundColor: "#f8f9fa",
		textAlign: "center"
		}
		}
		@@ -69,10 +71,10 @@ export default function ConsoleCoordinates() {
		<Grid
		container
		className={classes.grid}
		justify="flex-end"
		justify="center"
		alignItems="center"
		item
		xs={3}
		xs={4}
		>
		<Grid item xs>
		<StyledTooltip
		@@ -88,7 +90,10 @@ export default function ConsoleCoordinates() {
		TransitionComponent={Zoom}
		>
		<div className={classes.container}>
		<Paper variant="outlined" square>
		<Paper
		style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
		variant="outlined"
		>
		<Typography variant="overline" className={classes.title}>
		Longitude
		</Typography>
		@@ -100,7 +105,14 @@ export default function ConsoleCoordinates() {
		variant="subtitle2"
		/>
		</Paper>
		<Paper variant="outlined" square>
		<Paper
		style={{
		borderLeft: 0,
		borderTopLeftRadius: 0,
		borderBottomLeftRadius: 0
		}}
		variant="outlined"
		>
		<Typography variant="overline" className={classes.title}>
		Latitude
		</Typography>

app/src/components/presentational/ConsoleLonLatSelects.jsx

+81 −50

Original line number	Diff line number	Diff line
		@@ -9,6 +9,8 @@ import ToggleButton from "@material-ui/lab/ToggleButton";
		import Typography from "@material-ui/core/Typography";
		import Tooltip from "@material-ui/core/Tooltip";
		import Zoom from "@material-ui/core/Zoom";
		import Divider from "@material-ui/core/Divider";
		import { Paper } from "@material-ui/core";

		/**
		* Controls css styling for this component using js to css
		@@ -23,20 +25,31 @@ const useStyles = makeStyles(theme => ({
		transform: "scaleY(-1)"
		},
		oval: {
		width: 18,
		height: 12,
		width: 16,
		height: 10,
		borderRadius: "50%",
		border: "2px solid",
		background: "transparent",
		marginBottom: 2
		marginBottom: 2,
		marginRight: 2
		},
		circle: {
		width: 12,
		height: 12,
		width: 10,
		height: 10,
		borderRadius: "50%",
		border: "2px solid",
		background: "transparent",
		marginBottom: 2
		marginBottom: 2,
		marginRight: 2
		},
		buttonText: {
		fontSize: 13
		},
		paper: {
		display: "flex",
		border: `1px solid ${theme.palette.divider}`,
		flexWrap: "wrap",
		backgroundColor: "#f8f9fa"
		}
		}));

		@@ -58,33 +71,59 @@ const StyledTooltip = withStyles(theme => ({
		*/
		const StyledToggleButton = withStyles(theme => ({
		root: {
		height: 32,
		minHeight: 32,
		maxHeight: 32,
		color: "#fff",
		background: fade("#1971c2", 0.6),
		height: 30,
		minHeight: 30,
		maxHeight: 30,
		color: fade("#343a40", 0.8),
		backgroundColor: "#f8f9fa",
		border: "none",
		borderRadius: 0,
		"&:hover": {
		backgroundColor: fade("#1971c2", 0.8)
		backgroundColor: "transparent"
		},
		"&$selected": {
		cursor: "not-allowed",
		pointerEvents: "none",
		color: "#fff",
		backgroundColor: "#1971c2",
		color: "#343a40",
		backgroundColor: fade("#dee2e6", 0.75),
		"&:hover": {
		backgroundColor: "#1971c2"
		backgroundColor: "transparent"
		}
		}
		},
		selected: {
		cursor: "not-allowed",
		pointerEvents: "none",
		color: "#fff",
		backgroundColor: "#1971c2"
		color: "#343a40",
		backgroundColor: "#e9ecef"
		}
		}))(ToggleButton);

		const StyledToggleButtonGroup = withStyles(theme => ({
		root: {
		backgroundColor: "#f8f9fa"
		},
		grouped: {
		margin: theme.spacing(0.5),
		border: "none",
		padding: theme.spacing(0, 0.75),
		"&:not(:first-child)": {
		borderRadius: theme.shape.borderRadius
		},
		"&:first-child": {
		borderRadius: theme.shape.borderRadius
		}
		}
		}))(ToggleButtonGroup);

		const StyledDivider = withStyles(theme => ({
		root: {
		alignSelf: "stretch",
		height: "auto",
		margin: theme.spacing(1, 0.5),
		width: 1
		}
		}))(Divider);
		/**
		* Main component which controls and displays the console's longitude and latitude
		* selectors and handles user click events.
		@@ -97,26 +136,20 @@ export default function ConsoleLonLatSelects() {
		const [lonRange, setLonRange] = React.useState(180);

		const handlePosEastWest = (event, newPosEastWest) => {
		if (newPosEastWest != null) {
		if (newPosEastWest !== null) {
		setPosEastWest(newPosEastWest);
		} else {
		event.stopPropagation();
		}
		};

		const handleCoordSystem = (event, newCoordSystem) => {
		if (newCoordSystem != null) {
		if (newCoordSystem !== null) {
		setCoordSystem(newCoordSystem);
		} else {
		event.stopPropagation();
		}
		};

		const handleLonRange = (event, newLonRange) => {
		if (newLonRange != null) {
		if (newLonRange !== null) {
		setLonRange(newLonRange);
		} else {
		event.stopPropagation();
		}
		};

		@@ -127,12 +160,12 @@ export default function ConsoleLonLatSelects() {
		container
		item
		wrap="nowrap"
		justify="space-evenly"
		justify="center"
		alignItems="center"
		className={classes.grid}
		xs={9}
		xs={8}
		>
		<Grid item>
		<Paper variant="outlined" className={classes.paper}>
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -146,25 +179,24 @@ export default function ConsoleLonLatSelects() {
		TransitionComponent={Zoom}
		>
		<div>
		<ToggleButtonGroup
		<StyledToggleButtonGroup
		exclusive
		size="small"
		value={posEastWest}
		onChange={handlePosEastWest}
		>
		<StyledToggleButton id="consoleLonEastBtn" value="PositiveEast">
		<AutorenewIcon className={classes.flip} />
		<Typography>East</Typography>
		<AutorenewIcon fontSize="small" className={classes.flip} />
		<Typography className={classes.buttonText}>East</Typography>
		</StyledToggleButton>
		<StyledToggleButton id="consoleLonWestBtn" value="PositiveWest">
		<AutorenewIcon />
		<Typography>West</Typography>
		<AutorenewIcon fontSize="small" />
		<Typography className={classes.buttonText}>West</Typography>
		</StyledToggleButton>
		</ToggleButtonGroup>
		</StyledToggleButtonGroup>
		</div>
		</StyledTooltip>
		</Grid>
		<Grid item>
		<StyledDivider orientation="vertical" />
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -178,7 +210,7 @@ export default function ConsoleLonLatSelects() {
		TransitionComponent={Zoom}
		>
		<div>
		<ToggleButtonGroup
		<StyledToggleButtonGroup
		exclusive
		size="small"
		value={coordSystem}
		@@ -189,20 +221,19 @@ export default function ConsoleLonLatSelects() {
		id="consoleLatTypeOcentric"
		>
		<i className={classes.circle} />
		<Typography>centric</Typography>
		<Typography className={classes.buttonText}>centric</Typography>
		</StyledToggleButton>
		<StyledToggleButton
		id="consoleLatTypeOgraphic"
		value="Planetographic"
		>
		<i className={classes.oval} />
		<Typography>graphic</Typography>
		<Typography className={classes.buttonText}>graphic</Typography>
		</StyledToggleButton>
		</ToggleButtonGroup>
		</StyledToggleButtonGroup>
		</div>
		</StyledTooltip>
		</Grid>
		<Grid item>
		<StyledDivider orientation="vertical" />
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -216,24 +247,24 @@ export default function ConsoleLonLatSelects() {
		TransitionComponent={Zoom}
		>
		<div>
		<ToggleButtonGroup
		<StyledToggleButtonGroup
		exclusive
		size="small"
		value={lonRange}
		onChange={handleLonRange}
		>
		<StyledToggleButton id="consoleLon180Btn" value={180}>
		<ExposureIcon />
		<Typography>180°</Typography>
		<ExposureIcon fontSize="small" />
		<Typography className={classes.buttonText}>180°</Typography>
		</StyledToggleButton>
		<StyledToggleButton id="consoleLon360Btn" value={360}>
		<AddBoxIcon />
		<Typography>360°</Typography>
		<AddBoxIcon fontSize="small" />
		<Typography className={classes.buttonText}>360°</Typography>
		</StyledToggleButton>
		</ToggleButtonGroup>
		</StyledToggleButtonGroup>
		</div>
		</StyledTooltip>
		</Grid>
		</Paper>
		</Grid>
		);
		}