Commit 03cdec0d authored by Scott Ames's avatar Scott Ames
Browse files

wkt textbox styling complete

parent a43d0674

app/src/components/container/App.jsx

+3 −3
Original line number Diff line number Diff line
@@ -8,9 +8,8 @@ import MenuItem from "@material-ui/core/MenuItem"; 
import Select from "@material-ui/core/Select";

import ConsoleContainer from "./ConsoleContainer.jsx";

import MapContainer from "./MapContainer.jsx";

import "proj4leaflet";

import "proj4";

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

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

import WellKnownTextInput from "../presentational/WellKnownTextInput.jsx";



const useStyles = makeStyles(theme => ({

  formControl: {
@@ -72,6 +71,7 @@ export default function App() { 
      <Paper elevation={10}>

        <ConsoleContainer target={targetPlanet} />

        <MapContainer target={targetPlanet} />

        <WellKnownTextInput />

      </Paper>

    </div>

  );

app/src/components/container/MapContainer.jsx

+5 −6
Original line number Diff line number Diff line
@@ -5,7 +5,6 @@ import MousePosition from "../../js/MousePosition"; 
import Draw from "../../js/Draw";

import "leaflet";





export default class MapContainer extends Component {

  constructor(props) {

    super(props);
@@ -67,7 +66,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,

app/src/components/presentational/ConsoleAppBar.jsx

+3 −3
Original line number Diff line number Diff line
@@ -15,9 +15,9 @@ const useStyles = makeStyles(theme => ({ 
    width: "100%"

  },

  appbar: {

    background: "#f6f6f2"

    //background: "-webkit-linear-gradient(to right, #fefefe, #faf5e6)",

    //background: "linear-gradient(to right, #fefefe, #faf5e6)"

    background: "#f6f6f4"

    //background: "-webkit-linear-gradient(to right, #f6f6f2, #badfe7)",

    //background: "linear-gradient(to right, #f6f6f2, #badfe7)"

  },

  toolbar: {

    height: 100,

app/src/components/presentational/WellKnownTextInput.jsx

0 → 100644
+66 −0
Original line number Diff line number Diff line 
import React from "react";

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

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

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

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

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



const useStyles = makeStyles(theme => ({

  root: {

    textAlign: "center",

    maxHeight: 100,

    height: 100,

    backgroundColor: "#f6f6f4",

    overflow: "hidden"

  },

  container: {

    padding: "0.2rem",

    height: 50,

    width: "75%",

    display: "flex",

    justifyContent: "space-between",

    alignItems: "center",

    margin: "auto"

  },

  textbox: {

    flex: "3 1 auto",

    paddingRight: "0.5rem"

  },

  button: {

    height: 40,

    backgroundColor: "#c2edce",

    width: "9rem",

    paddingLeft: "0.5rem",

    alignSelf: "center"

  },

  title: {

    padding: "0.2rem",

    fontSize: 18,

    fontWeight: 600

  }

}));



export default function WellKnownTextInput() {

  const classes = useStyles();



  return (

    <div className={classes.root}>

      <Typography className={classes.title} variant="subtitle1">

        Well-Known Text Input

      </Typography>

      <div className={classes.container}>

        <TextField

          className={classes.textbox}

          variant="outlined"

          label="Enter WKT String"

          id="wktTextBox"

          name="fname"

          type="text"

        />

        <Button variant="contained" className={classes.button} id="wktButton">

          Draw On Map

        </Button>

      </div>

    </div>

  );

}

app/src/index.html

+0 −6
Original line number Diff line number Diff line
@@ -10,10 +10,4 @@ 
</head>

<body>

    <div id="map"></div>

    <br><br><br>

    <br>

    Well-known Text Box

    <br>

    <input type="text" id= "wktTextBox" name="fname"><br>

    <button id= "wktButton" type="button">Map Me!</button>

</body>