Commit 6af10e56 authored by Scott Ames's avatar Scott Ames
Browse files

Fixed tooltip issues

parent a20eb969

app/src/components/container/MapContainer.jsx

+1 −2
Original line number Diff line number Diff line
@@ -38,7 +38,7 @@ export default class MapContainer extends Component { 
    let drawnItems = new L.FeatureGroup();

    map.addLayer(drawnItems);



    let drawControl = new Draw({

    new Draw({

      draw: {

        circle: false,

        marker: false,
@@ -97,7 +97,6 @@ export default class MapContainer extends Component { 
    }).addTo(map);



    new L.Control.Scale({ imperial: false }).addTo(map);

    map.on("fullscreenchange", this.handleFullScreenChange());

  }



  render() {

app/src/components/presentational/ConsoleAppBar.jsx

+2 −2
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ 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";

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

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

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

import ConsoleCoordinates from "./ConsoleCoordinates.jsx";
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({ 
    width: "100%"

  },

  appbar: {

    background: "#f6f6f4"

    background: "#f8f9fa"

  },

  toolbar: {

    height: 100,

app/src/components/presentational/ConsoleCoordinates.jsx

+3 −1
Original line number Diff line number Diff line
@@ -14,7 +14,9 @@ const useStyles = makeStyles({ 
    height: "100%",

    maxHeight: 60

  },

  title: {}

  title: {

    color: "#343a40"

  }

});



/**

app/src/components/presentational/ConsoleLonLatSelects.jsx

+8 −8
Original line number Diff line number Diff line
@@ -61,19 +61,19 @@ const StyledTooltip = withStyles(theme => ({ 
const StyledToggleButton = withStyles(theme => ({

  root: {

    height: 30,

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

    background: fade("#c2edce", 0.2),

    color: "#e7f5ff",

    background: fade("#004170", 0.6),

    border: "none",

    "&:hover": {

      backgroundColor: fade("#f1f1f1", 0.6)

      backgroundColor: fade("#004170", 0.8)

    },

    "&$selected": {

      cursor: "not-allowed",

      pointerEvents: "none",

      color: "#000",

      backgroundColor: "#c2edce",

      color: "#e7f5ff",

      backgroundColor: "#004170",

      "&:hover": {

        backgroundColor: "#c2edce",

        border: `1px solid ${fade(theme.palette.action.active, 0.12)}`

        backgroundColor: "#004170"

      }

    }

  },
@@ -81,7 +81,7 @@ const StyledToggleButton = withStyles(theme => ({ 
    cursor: "not-allowed",

    pointerEvents: "none",

    color: "black",

    backgroundColor: "#6fb3e8"

    backgroundColor: "#004170"

  }

}))(ToggleButton);

app/src/components/presentational/ConsoleProjectionButtons.jsx

+20 −13
Original line number Diff line number Diff line
@@ -3,7 +3,7 @@ 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 } from "@material-ui/core/styles";

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";
@@ -22,15 +22,17 @@ const useStyles = makeStyles({ 
    height: 31,

    "&.disabled": {

      border: "none",

      cursor: "not-allowed",

      pointerEvents: "none",

      "&:hover": {

        border: "none"

      }

    },

    "&:active": {

      background: "yellow"

      background: fade("#004170", 0.5)

    },

    "&:hover, &$focusVisible": {

      border: "2px orange solid",

      border: "2px #004170 solid",

      borderRadius: "15%",

      borderStyle: "outset"

    }
@@ -38,7 +40,7 @@ const useStyles = makeStyles({ 
  activeBtn: {

    width: 31,

    height: 31,

    border: "2px orange solid",

    border: "2px #004170 solid",

    borderRadius: "15%",

    borderStyle: "outset"

  },
@@ -122,11 +124,18 @@ export default function ConsoleProjectionButtons() { 


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



  const handleClick = (event, newValue) => {

  const handleNorthClick = event => {

    if (!event.currentTarget.classList.contains("disabled")) {

      setActive(newValue);

      setActive("north");

    } else {

      event.stopPropagation();

    }

  };



  const handleSouthClick = event => {

    if (!event.currentTarget.classList.contains("disabled")) {

      setActive("south");

    } else {

      setActive(active);

      event.stopPropagation();

    }

  };
@@ -155,8 +164,7 @@ export default function ConsoleProjectionButtons() { 
            focusRipple

            className={active == "north" ? classes.activeBtn : classes.button}

            focusVisibleClassName={classes.focusVisible}

            value="north"

            onClick={handleClick}

            onClick={handleNorthClick}

          >

            <img className={classes.img} src={northPolar} />

          </ButtonBase>
@@ -182,8 +190,8 @@ export default function ConsoleProjectionButtons() { 
              active == "cylindrical" ? classes.activeBtn : classes.button

            }

            focusVisibleClassName={classes.focusVisible}

            value="cylyndrical"

            onClick={handleClick}

            value="cylindrical"

            onClick={() => setActive("cylindrical")}

          >

            <img className={classes.img} src={simpleCylindrical} />

          </ButtonBase>
@@ -203,8 +211,7 @@ export default function ConsoleProjectionButtons() { 
            focusRipple

            className={active == "south" ? classes.activeBtn : classes.button}

            focusVisibleClassName={classes.focusVisible}

            value="south"

            onClick={handleClick}

            onClick={handleSouthClick}

          >

            <img className={classes.img} src={southPolar} />

          </ButtonBase>