Merge pull request #65 from prefeitura-rio/new-styles

refactoring + new features

src/components/map/Map.js

@@ -41,7 +41,8 @@ const Map = ({
  subprefeituraNome,
  realizacaoId,
  rota,
- setRota
+ setRota,
+ underSearchBar
 }) => {
  const [map, setMap] = useState(null);
  const [filtered, setFiltered] = useState([]);
@@ -55,10 +56,21 @@ const Map = ({
  useEffect(() => {
  console.log("ROTAROTA " + JSON.stringify(rota.rota))
  if (rota.rota == null && map) {
+ const coords = [-22.9200, -43.3250];
+ map.flyTo(coords, 11)
+ }
+ }, [rota]);
+
+ useEffect(() => {
+ console.log("underSearchBar " + underSearchBar)
+ if (map && !underSearchBar) {
  const coords = [-22.9200, -43.4250];
  map.flyTo(coords, 12)
+ }else if (map && underSearchBar) {
+ const coords = [-22.9200, -43.3250];
+ map.flyTo(coords, 11)
  }
- }, [rota]);
+ }, [underSearchBar])
 
  useEffect(() => {
  if (map && bairroNome) {
@@ -217,8 +229,8 @@ const Map = ({
  </Alert>
  </Snackbar>
  <MapContainer
- center={isDesktopDevice ? [-22.9200, -43.4250] : [-22.8800, -43.4200]} // Coordenadas para o Rio de Janeiro
- zoom={11.50}
+ center={isDesktopDevice ? [-22.9200, -43.3250] : [-22.8800, -43.4200]} // Coordenadas para o Rio de Janeiro
+ zoom={11}
  scrollWheelZoom={true}
  zoomControl={false}
  whenCreated={setMap}

src/components/map/MapContainer.js

@@ -42,6 +42,7 @@ const MapContainer = (props) => {
  realizacaoId = {id}
  rota = {props.rota}
  setRota = {props.setRota}
+ underSearchBar = {props.underSearchBar}
  />
  );
 };
@@ -55,7 +56,8 @@ const mapStateToProps = (state) => {
  filtros: state.filtros.filtros,
  bairroNome: state.bairros.descriptionData,
  subprefeituraNome: state.subprefeituras.content,
- rota: state.rota
+ rota: state.rota,
+ underSearchBar: state.active.underSearchBar
  };
 };
 

src/components/sidebars/mainUnderSearch/MainUnderSearchBar.js

@@ -60,7 +60,7 @@ const useStyles = makeStyles((theme) => ({
 
  textTransform: "none",
  border: "1px solid #dadce0",
- boxShadow: "0 1px 6px rgb(60 64 67 / 28%)",
+ boxShadow: "0 1px 6px #007E7D",
 
  "&:hover": {
  borderColor: " #DADCE0",
@@ -167,7 +167,6 @@ const MainUnderSearchBar = forwardRef(
  }}
  >
  <ExpandLessIcon className={classes.extendedIcon} />
- <div style={{ marginRight: "8px", color: "#3C4043" }}>Ocultar</div>
  </Fab>
  </div>
  </div>

src/components/sidebars/wrapper/UnderSearchBar.js

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
  position: "fixed",
  top: "30px",
  bottom: "30px",
- left: "30px",
+ right: "15px",
  width: "423px",
  borderRadius: "15px",
  overflowY: "scroll",

src/components/sidebars/wrapper/UnderSearchContainer.js

@@ -12,7 +12,7 @@ const UnderSearchContainer = (props) => {
  }, [props.placesData]);
 
  return (
- <Slide direction="right" timeout={1000} in={props.underSearchBar} mountOnEnter unmountOnExit >
+ <Slide direction="left" timeout={1000} in={props.underSearchBar} mountOnEnter unmountOnExit >
  <UnderSearchBar
  underSearchBar={props.underSearchBar}
  activeBar={props.activeBar}

src/components/widgets/Widgets.js

@@ -50,7 +50,7 @@ const useStyles = makeStyles({
 
  tools: {
  position: "absolute",
- right: "20px",
+ left: "20px",
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-end",
@@ -60,7 +60,7 @@ const useStyles = makeStyles({
 
  bottomWidgets: {
  bottom: 0,
- width: (props) => (props.underSearchBar ? "calc(100vw - 423px)" : "100vw"),
+ width: (props) => (props.underSearchBar ? "calc(99vw)" : "100vw"),
  right: 0,
  position: "absolute",
  transition: "width 200ms cubic-bezier(0, 0, 0.2, 1)",

src/components/widgets/searchBar/SearchBar.js

@@ -33,10 +33,21 @@ const useStyles = makeStyles((theme) => {
  top: "40px",
  },
  paper: {
- width: "395px",
+ width: "400px",
  padding: "0 4px",
  display: "flex",
  alignItems: "center",
+ borderRadius: '40px',
+ // paddingRight: "-50px",
+ },
+
+ buttonStyle : {
+ backgroundColor: 'white',
+ color: 'black',
+ borderRadius: '20px',
+ paddingLeft: '20px',
+ paddingRight: '20px',
+ textTransform: 'none'
  },
 
  bottomRound: {
@@ -163,6 +174,7 @@ const SearchBar = ({
  };
 
  const onDirectionsClick = () => {
+ handleClearInput();
  setBairroData(null);
  setContent(null);
  setPlacesData(null);
@@ -183,7 +195,10 @@ const SearchBar = ({
  const [bairrosSubSubprefeituras, setBairrosSubprefeituras] = useState([]);
  const [prefeituras, setSubprefeituras] = useState([]);
  const [bairros, setBairros] = useState([]);
-
+ const handleClearInput = () => {
+ setInputValue('');
+ };
+
  useEffect(() => {
  const loadBairros = async () => {
  try {
@@ -231,22 +246,16 @@ const SearchBar = ({
  <div className={classes.searchbar}>
  <Paper
  component="form"
- variant={underSearchBar ? "outlined" : "elevation"}
+ variant="elevation"
  className={
  searchPrompt && historyItems?.length
  ? clsx(classes.paper, classes.bottomRound)
  : classes.paper
  }
- elevation={searchPrompt ? 1 : 2}
+ elevation={searchPrompt ? 1 : 3}
  onFocus={handleSearchPrompt}
  >
- <IconButton
- className={classes.iconButton}
- aria-label="menu"
- onClick={handleMenuSidebar}
- >
- <MenuIcon />
- </IconButton>
+
 
  <Autocomplete
  freeSolo
@@ -259,38 +268,41 @@ const SearchBar = ({
  <TextField
  {...params}
  onFocus={activeBar == MAIN_UNDERSEARCH_BAR ? handleOnfocus : () => {}}
- placeholder="Busque por bairro/subprefeitura"
+ placeholder="Busque por Bairro, Subprefeitura ou AP"
  sx={{
  "& fieldset": { border: 'none' },
  }}
  />
  )}
  />
+
+ <Divider className={classes.divider} orientation="vertical" />
  <IconButton
  type="submit"
  color="secondary"
  classes={{ colorSecondary: classes.colorSecondary }}
  aria-label="search"
+ onClick={
+ activeBar !== MAIN_UNDERSEARCH_BAR ? onDirectionsClick : () => {}
+ }
  >
- <SearchIcon />
+ {anyLoading ? (
+ <CircularProgress classes={{ colorPrimary: classes.colorLoading }} size={20} />
+ ) : activeBar == MAIN_UNDERSEARCH_BAR ? <SearchIcon /> : <CloseIcon />
+
+ }
+
  </IconButton>
- <Divider className={classes.divider} orientation="vertical" />
- <IconButton
+ {/* <IconButton
  color="primary"
  classes={{ colorPrimary: classes.colorInfo }}
  aria-label="right btn"
  onClick={
  activeBar !== MAIN_UNDERSEARCH_BAR ? onDirectionsClick : () => {}
  }
- >
- {anyLoading ? (
- <CircularProgress classes={{ colorPrimary: classes.colorLoading }} size={20} />
- ) : activeBar !== MAIN_UNDERSEARCH_BAR ? (
- <CloseIcon />
- ) : (
- null
- )}
- </IconButton>
+ > */}
+
+ {/* </IconButton> */}
  </Paper>
  </div>
  </ClickAwayListener>

src/components/widgets/verticalWidget/VerticalContainer.js

@@ -1,17 +1,21 @@
 import { connect } from "react-redux";
 import VerticalWidget from "./VerticalWidget";
 import { setZoomDelta } from "../../../redux/actions";
+import { setMenuSidebar } from "./../../../redux/active/actions";
 
 const VerticalContainer = (props) => {
- return <VerticalWidget setZoomDelta={props.setZoomDelta} />;
+ return <VerticalWidget setZoomDelta={props.setZoomDelta}
+ menuSidebar={props.menuSidebar}
+ setMenuSidebar={props.setMenuSidebar}/>;
 };
 
 const mapStateToProps = (state) => {
- return {};
+ return { menuSidebar: state.app.menuSidebar,};
 };
 
 const mapDispatchToProps = {
  setZoomDelta,
+ setMenuSidebar,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(VerticalContainer);

src/components/widgets/verticalWidget/VerticalWidget.js

@@ -4,6 +4,7 @@ import MyLocationIcon from "@material-ui/icons/MyLocation";
 import RemoveIcon from "@material-ui/icons/Remove";
 import AddIcon from "@material-ui/icons/Add";
 import clsx from "clsx";
+import InfoIcon from '@mui/icons-material/Info';
 
 const useStyles = makeStyles((theme) => ({
  root: {
@@ -20,25 +21,36 @@ const useStyles = makeStyles((theme) => ({
  minWidth: "30px",
  borderRadius: "50%",
  },
- zoom: {
- marginTop: "4px",
- marginRight: "20px",
+ controlButtonInfo: {
+ backgroundColor: "#007E7D",
+ maxHeight: "30px",
+ maxWidth: "30px",
+ minHeight: "30px",
+ minWidth: "30px",
+ borderRadius: "50%",
  },
+ // zoom: {
+ // marginTop: "4px",
+ // marginRight: "20px",
+ // },
  buttons: {
  display: "flex",
  flexDirection: "column", // Make buttons stack vertically
- alignItems: "center", // Center buttons horizontally
+ // alignItems: "flex-start", // Center buttons horizontally
  },
  zoomInButton: {
  width: "100%",
  marginBottom: "5px",
+ marginTop: "5px",
  },
  zoomOutButton: {
  width: "100%",
  },
 }));
 
-const VerticalWidget = ({ setZoomDelta }) => {
+
+
+const VerticalWidget = ({ setZoomDelta,setMenuSidebar,menuSidebar }) => {
  const classes = useStyles();
 
  const zoomIn = () => {
@@ -48,6 +60,10 @@ const VerticalWidget = ({ setZoomDelta }) => {
  setZoomDelta(-1);
  };
 
+ const handleMenuSidebar = () => {
+ setMenuSidebar(!menuSidebar);
+ };
+
  return (
  <div className={classes.root}>
  <div className={classes.zoom}>
@@ -66,6 +82,16 @@ const VerticalWidget = ({ setZoomDelta }) => {
  >
  <RemoveIcon fontSize="small" className={classes.textSecondary} />
  </Button>
+ <Button
+ // variant="contained"
+ aria-label="menu"
+ className={clsx(classes.controlButtonInfo, classes.zoomInButton)}
+ onClick={handleMenuSidebar}
+ >
+ <InfoIcon sx={{ fontSize: 37, color: 'white'}} className={classes.textSecondary} />
+ </Button>
+
+
  </div>
  </div>
  </div>