Commit 0969157d authored by Scott Ames's avatar Scott Ames
Browse files

tooltip and lon/lat button update

parent 312d3e90

app/src/components/presentational/ConsoleAppBar.jsx

+1 −1
Original line number Diff line number Diff line
@@ -64,7 +64,7 @@ export default function ConsoleAppBar(props) { 
                container

                item

                xs

                justify="space-evenly"

                justify="space-around"

                alignItems="center"

                wrap="nowrap"

              >

app/src/components/presentational/ConsoleCoordinates.jsx

+5 −17
Original line number Diff line number Diff line
@@ -2,10 +2,10 @@ import React from "react"; 
import Grid from "@material-ui/core/Grid";

import Typography from "@material-ui/core/Typography";

import { makeStyles, withStyles } from "@material-ui/core/styles";

import Tooltip from "@material-ui/core/Tooltip";

import Zoom from "@material-ui/core/Zoom";

import Paper from "@material-ui/core/Paper";

import Divider from "@material-ui/core/Divider";

import StyledTooltip from "./StyledTooltip.jsx";



/**

 * Controls css styling for this component using js to css
@@ -13,7 +13,8 @@ import Divider from "@material-ui/core/Divider"; 
const useStyles = makeStyles({

  grid: {

    height: "100%",

    maxHeight: 60

    maxHeight: 60,

    paddingRight: 8

  },

  title: {

    color: "#343a40",
@@ -29,7 +30,7 @@ const useStyles = makeStyles({ 
  container: {

    display: "flex",

    flexWrap: "noWrap",

    width: "90%",

    width: "100%",

    height: 40,

    margin: "auto",

    "& > *": {
@@ -45,19 +46,6 @@ const useStyles = makeStyles({ 
  }

});



/**

 * Custom Component that uses Tooltip with modified css styling

 */

const StyledTooltip = withStyles(theme => ({

  tooltip: {

    backgroundColor: "#f5f5f9",

    color: "rgba(0, 0, 0, 0.87)",

    maxWidth: 250,

    fontSize: 12,

    border: "1px solid #dadde9"

  }

}))(Tooltip);



/**

 * Main component that displays the container for the coordinate display

 * and controls styling.
@@ -74,7 +62,7 @@ export default function ConsoleCoordinates() { 
      justify="center"

      alignItems="center"

      item

      xs={4}

      xs={3}

    >

      <Grid item xs>

        <StyledTooltip

app/src/components/presentational/ConsoleLonLatSelects.jsx

+103 −118
Original line number Diff line number Diff line
@@ -8,9 +8,8 @@ import ExposureIcon from "@material-ui/icons/Exposure"; 
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";

import ToggleButton from "@material-ui/lab/ToggleButton";

import Typography from "@material-ui/core/Typography";

import Tooltip from "@material-ui/core/Tooltip";

import Divider from "@material-ui/core/Divider";

import Paper from "@material-ui/core/Paper";

import StyledTooltip from "./StyledTooltip.jsx";



/**

 * Controls css styling for this component using js to css
@@ -31,7 +30,7 @@ const useStyles = makeStyles(theme => ({ 
    border: "2px solid",

    background: "transparent",

    marginBottom: 2,

    marginRight: 2

    marginRight: 3

  },

  circle: {

    width: 10,
@@ -40,7 +39,7 @@ const useStyles = makeStyles(theme => ({ 
    border: "2px solid",

    background: "transparent",

    marginBottom: 2,

    marginRight: 2

    marginRight: 3

  },

  buttonText: {

    fontSize: 13
@@ -53,19 +52,6 @@ const useStyles = makeStyles(theme => ({ 
  }

}));



/**

 * Custom Component that uses Tooltip with modified css styling

 */

const StyledTooltip = withStyles(theme => ({

  tooltip: {

    backgroundColor: "#f5f5f9",

    color: "rgba(0, 0, 0, 0.87)",

    maxWidth: 250,

    fontSize: 12,

    border: "1px solid #dadde9"

  }

}))(Tooltip);



/**

 * Custom Component that uses ToggleButton with modified css styling

 */
@@ -75,7 +61,7 @@ const StyledToggleButton = withStyles(theme => ({ 
    minHeight: 30,

    maxHeight: 30,

    color: fade("#f8f9fa", 0.8),

    backgroundColor: "transparent",

    backgroundColor: "transparent", //fade("#1971c2", 0.7),

    border: "none",

    borderRadius: 0,

    "&:hover": {
@@ -101,7 +87,9 @@ const StyledToggleButton = withStyles(theme => ({ 


const StyledToggleButtonGroup = withStyles(theme => ({

  root: {

    backgroundColor: "transparent"

    backgroundColor: fade("#1971c2", 0.7),

    border: `1px solid ${theme.palette.divider}`,

    height: 37

  },

  grouped: {

    margin: theme.spacing(0.5),
@@ -164,14 +152,12 @@ export default function ConsoleLonLatSelects() { 
      justify="center"

      alignItems="center"

      className={classes.grid}

      xs={8}

      xs={7}

    >

      <Paper variant="outlined" className={classes.paper}>

      <StyledTooltip

        title={

          <Typography variant="subtitle1">

              Switch to either positive east or positive west longitude

              reporting.

            Switch to either positive east or positive west longitude reporting.

          </Typography>

        }

        enterDelay={800}
@@ -265,7 +251,6 @@ export default function ConsoleLonLatSelects() { 
          </StyledToggleButtonGroup>

        </div>

      </StyledTooltip>

      </Paper>

    </Grid>

  );

}

app/src/components/presentational/ConsoleProjectionButtons.jsx

+1 −14
Original line number Diff line number Diff line
@@ -2,12 +2,12 @@ import React from "react"; 
import Grid from "@material-ui/core/Grid";

import ButtonBase from "@material-ui/core/ButtonBase";

import Typography from "@material-ui/core/Typography";

import Tooltip from "@material-ui/core/Tooltip";

import { makeStyles, withStyles, fade } from "@material-ui/core/styles";

import northPolar from "../../assets/img/NorthPolar.png";

import simpleCylindrical from "../../assets/img/SimpleCylindrical.png";

import southPolar from "../../assets/img/SouthPolar.png";

import Zoom from "@material-ui/core/Zoom";

import StyledTooltip from "./StyledTooltip.jsx";



/**

 * Controls css styling for this component using js to css
@@ -53,19 +53,6 @@ const useStyles = makeStyles({ 
  focusVisible: {}

});



/**

 * Custom Component that uses Tooltip with modified css styling

 */

const StyledTooltip = withStyles(theme => ({

  tooltip: {

    backgroundColor: "#f5f5f9",

    color: "rgba(0, 0, 0, 0.87)",

    maxWidth: 250,

    fontSize: 12,

    border: "1px solid #dadde9"

  }

}))(Tooltip);



/**

 * Component used only in this file, passed in to the Tooltip to

 * determine which tooltip to use if north polar projection is disabled

app/src/components/presentational/ConsoleTargetInfo.jsx

+2 −1
Original line number Diff line number Diff line
@@ -20,7 +20,8 @@ const useStyles = makeStyles({ 
    color: "#343a40",

    fontWeight: 900,

    fontSize: 42,

    letterSpacing: "0rem"

    letterSpacing: "0rem",

    paddingRight: 55

  }

});