Final styling changes. (20ef816d) · Commits · aflab / astrogeology / Asc Geostac

app/src/components/container/App.jsx

+1 −3

Original line number	Diff line number	Diff line
		@@ -59,10 +59,8 @@ export default function App() {
		Sort and Filter
		<ArrowLeftIcon/>
		</div>
		<div className={sortBarStyle}>
		<div style={sortBarStyle}>
		<SearchAndFilterInput target={targetPlanet}/>
		{/* instead of styled surrounding div: { showSortBar ? <SearchAndFilterInput /> : null }
		^ simpler but might break things if another part of the program is looking for it and it's not there? */}
		</div>
		</div>
		</div>

app/src/components/presentational/ConsoleCoordinates.jsx

+8 −17

Original line number	Diff line number	Diff line
		@@ -4,7 +4,7 @@ import Typography from "@mui/material/Typography";
		import Zoom from "@mui/material/Zoom";
		import Paper from "@mui/material/Paper";
		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
		@@ -18,13 +18,15 @@ let css = {
		title: {
		color: "#343a40",
		lineHeight: "1rem",
		paddingBottom: 1,
		fontWeight: 600
		padding: 1,
		fontWeight: 600,
		textAlign: "center"
		},
		coords: {
		color: "#343a40",
		lineHeight: "1.4rem",
		fontSize: "13px"
		fontSize: "13px",
		textAlign: "center"
		},
		container: {
		display: "flex",
		@@ -33,16 +35,6 @@ let css = {
		height: 40,
		marginTop: 5,
		verticalAlign: "middle",
		"& > *": {
		margin: 0,
		padding: 0,
		width: "50%",
		height: "100%",
		maxHeight: "3rem",
		maxWidth: "50%",
		backgroundColor: "#f8f9fa",
		textAlign: "center"
		}
		}
		};

		@@ -55,7 +47,7 @@ let css = {
		export default function ConsoleCoordinates() {

		return (
		<StyledTooltip
		<Tooltip
		title={
		<Typography variant="subtitle1">
		Displays the longitude and latitude of the area on the map
		@@ -64,7 +56,6 @@ export default function ConsoleCoordinates() {
		}
		enterDelay={800}
		leaveDelay={0}
		arrow
		TransitionComponent={Zoom}
		>
		<div id="coordContainer" style={css.container}>
		@@ -103,6 +94,6 @@ export default function ConsoleCoordinates() {
		/>
		</Paper>
		</div>
		</StyledTooltip>
		</Tooltip>
		);
		}

app/src/components/presentational/ConsoleLonLatSelects.jsx

+15 −97

Original line number	Diff line number	Diff line
		@@ -48,95 +48,10 @@ import Tooltip from "@mui/material/Tooltip";
		border: `1px solid` & alpha("#1971c2", 0.7),
		flexWrap: "wrap",
		backgroundColor: alpha("#1971c2", 0.7)
		}
		};


		/**
		* Custom Component that uses ToggleButton with modified css styling
		*/
		const styledToggleButton = {
		root: {
		height: 30,
		color: alpha("#f8f9fa", 0.8),
		backgroundColor: "transparent", //alpha("#1971c2", 0.7),
		border: "none",
		borderRadius: 0,
		"&:hover": {
		backgroundColor: "transparent"
		},
		"&$selected": {
		cursor: "not-allowed",
		pointerEvents: "none",
		color: "#f8f9fa",
		backgroundColor: "#1971c2",
		"&:hover": {
		backgroundColor: "#1971c2"
		}
		}
		},
		selected: {
		cursor: "not-allowed",
		pointerEvents: "none",
		color: "#343a40",
		backgroundColor: "#e9ecef"
		}
		};

		const styledToggleButtonGroup = {
		root: {
		backgroundColor: alpha("#1971c2", 0.7),
		border: `1px solid black`,
		height: 37
		},
		grouped: {
		margin: "4px",
		border: "none",
		padding: "0, 6px",
		"&:not(:first-of-type)": {
		borderRadius: "4px"
		},
		"&:first-of-type": {
		borderRadius: "4px"
		}
		}
		};

		const styledDivider = {
		root: {
		alignSelf: "stretch",
		height: "auto",
		margin: "8px, 4px",
		backgroundColor: alpha("#f8f9fa", 0.8),
		width: 1
		}
		};

		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
		@@ -187,19 +102,20 @@ export default function ConsoleLonLatSelects() {
		size="small"
		value={posEastWest}
		onChange={handlePosEastWest}
		sx={styledToggleButtonGroup}
		>
		<ToggleButton
		color="primary"
		id="consoleLonEastBtn"
		value="PositiveEast"
		style={styledToggleButton}>
		>
		<AutorenewIcon fontSize="small" sx={css.flip} />
		<Typography sx={css.buttonText}>East</Typography>
		</ToggleButton>
		<ToggleButton
		color="primary"
		id="consoleLonWestBtn"
		value="PositiveWest"
		sx={styledToggleButton}>
		>
		<AutorenewIcon fontSize="small" />
		<Typography sx={css.buttonText}>West</Typography>
		</ToggleButton>
		@@ -207,11 +123,9 @@ export default function ConsoleLonLatSelects() {
		</div>
		</Tooltip>
		</div>
		<Divider sx={styledDivider} orientation="vertical" />

		<div className="flexbar-item">
		<Tooltip
		sx={styledTooltip}
		title={
		<Typography variant="subtitle1">
		Switch to either a planetocentric or planetographic coordinate
		@@ -229,12 +143,11 @@ export default function ConsoleLonLatSelects() {
		size="small"
		value={coordSystem}
		onChange={handleCoordSystem}
		sx={styledToggleButton}
		>
		<ToggleButton
		value="Planetocentric"
		id="consoleLatTypeOcentric"
		sx={styledToggleButton}
		color="primary"
		>
		<i style={css.circle} />
		<Typography sx={css.buttonText}>centric</Typography>
		@@ -242,7 +155,7 @@ export default function ConsoleLonLatSelects() {
		<ToggleButton
		id="consoleLatTypeOgraphic"
		value="Planetographic"
		sx={styledToggleButton}
		color="primary"
		>
		<i style={css.oval} />
		<Typography sx={css.buttonText}>graphic</Typography>
		@@ -251,7 +164,7 @@ export default function ConsoleLonLatSelects() {
		</div>
		</Tooltip>
		</div>
		<Divider orientation="vertical" sx={styledDivider} />
		<Divider orientation="vertical" />

		<div className="flexbar-item">
		<Tooltip
		@@ -273,13 +186,18 @@ export default function ConsoleLonLatSelects() {
		size="small"
		value={lonRange}
		onChange={handleLonRange}
		sx={styledToggleButtonGroup}
		>
		<ToggleButton sx={styledToggleButton} id="consoleLon180Btn" value={180}>
		<ToggleButton
		id="consoleLon180Btn"
		value={180}
		color="primary">
		<ExposureIcon fontSize="small" />
		<Typography sx={css.buttonText}>180°</Typography>
		</ToggleButton>
		<ToggleButton sx={styledToggleButton} id="consoleLon360Btn" value={360}>
		<ToggleButton
		id="consoleLon360Btn"
		value={360}
		color="primary">
		<AddBoxIcon fontSize="small" />
		<Typography sx={css.buttonText}>360°</Typography>
		</ToggleButton>

app/src/components/presentational/ConsoleProjectionButtons.jsx

+11 −12

Original line number	Diff line number	Diff line
		@@ -7,7 +7,8 @@ import northPolar from "../../assets/img/NorthPolar.png";
		import simpleCylindrical from "../../assets/img/SimpleCylindrical.png";
		import southPolar from "../../assets/img/SouthPolar.png";
		import Zoom from "@mui/material/Zoom";
		import StyledTooltip from "./StyledTooltip.jsx";
		import Tooltip from "@mui/material/Tooltip";


		/**
		* Controls css styling for this component using js to css
		@@ -52,6 +53,7 @@ let css = {
		focusVisible: {}
		};


		/**
		* Component used only in this file, passed in to the Tooltip to
		* determine which tooltip to use if north polar projection is disabled
		@@ -138,12 +140,11 @@ export default function ConsoleProjectionButtons() {
		xs
		>
		<Grid item>
		<StyledTooltip
		<Tooltip
		title={<NorthDisabled />}
		enterDelay={800}
		leaveDelay={0}
		placement="bottom"
		arrow
		TransitionComponent={Zoom}
		>
		<div>
		@@ -151,16 +152,16 @@ export default function ConsoleProjectionButtons() {
		id="projectionNorthPole"
		focusRipple
		sx={active == "north" ? css.activeBtn : css.button}
		//focusVisibleClassName={classes.focusVisible}
		focusVisibleClassName={css.focusVisible}
		onClick={handleNorthClick}
		>
		<img style={css.img} src={northPolar} />
		</ButtonBase>
		</div>
		</StyledTooltip>
		</Tooltip>
		</Grid>
		<Grid item>
		<StyledTooltip
		<Tooltip
		title={
		<Typography variant="subtitle1">
		Switch to a cylindrical projection for the target body.
		@@ -169,7 +170,6 @@ export default function ConsoleProjectionButtons() {
		enterDelay={800}
		leaveDelay={0}
		placement="bottom"
		arrow
		TransitionComponent={Zoom}
		>
		<div>
		@@ -179,22 +179,21 @@ export default function ConsoleProjectionButtons() {
		sx={
		active == "cylindrical" ? css.activeBtn : css.button
		}
		//focusVisibleClassName={classes.focusVisible}
		focusVisibleClassName={css.focusVisible}
		value="cylindrical"
		onClick={() => setActive("cylindrical")}
		>
		<img style={css.img} src={simpleCylindrical} />
		</ButtonBase>
		</div>
		</StyledTooltip>
		</Tooltip>
		</Grid>
		<Grid item>
		<StyledTooltip
		<Tooltip
		title={<SouthDisabled />}
		enterDelay={800}
		leaveDelay={0}
		placement="bottom"
		arrow
		TransitionComponent={Zoom}
		>
		<div>
		@@ -208,7 +207,7 @@ export default function ConsoleProjectionButtons() {
		<img style={css.img} src={southPolar} />
		</ButtonBase>
		</div>
		</StyledTooltip>
		</Tooltip>
		</Grid>
		</Grid>
		);

app/src/components/presentational/StyledTooltip.jsx

deleted100644 → 0

+0 −37

Original line number	Diff line number	Diff line
		import React from "react";
		import Tooltip from "@mui/material/Tooltip";

		let css = {
		tooltip: {
		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"
		}
		};

		export default function StyledTooltip(props) {

		return (
		<Tooltip
		sx={css}
		{...props} />
		);
		}