From 13d7a5d8ee6592cd223dbc03e6aba5c42aa9e844 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 30 Jan 2021 00:51:02 -0800 Subject: [PATCH] More change on main dialog --- .../src/components/layout/header/index.tsx | 2 +- .../src/components/layout/header/styled.ts | 6 +- .../webapp/src/components/maps-page/index.tsx | 150 ++++++++++++------ .../components/maps-page/maps-list/index.tsx | 129 ++++++--------- .../components/maps-page/maps-list/styled.ts | 79 +++++++-- .../webapp/src/components/maps-page/style.ts | 5 - packages/webapp/src/images/logo-icon.svg | 29 ++-- packages/webapp/src/images/logo-medium.svg | 16 ++ .../images/{header-logo.png => logo-old.png} | Bin packages/webapp/src/images/logo-small.svg | 16 ++ packages/webapp/src/theme/index.ts | 4 +- 11 files changed, 271 insertions(+), 165 deletions(-) create mode 100644 packages/webapp/src/images/logo-medium.svg rename packages/webapp/src/images/{header-logo.png => logo-old.png} (100%) create mode 100644 packages/webapp/src/images/logo-small.svg diff --git a/packages/webapp/src/components/layout/header/index.tsx b/packages/webapp/src/components/layout/header/index.tsx index e468d77c..1bb3dddf 100644 --- a/packages/webapp/src/components/layout/header/index.tsx +++ b/packages/webapp/src/components/layout/header/index.tsx @@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl' import { Link } from 'react-router-dom' import { Button } from '@material-ui/core'; -const logo = require('../../../images/header-logo.png') +const logo = require('../../../images/logo-small.svg') interface HeaderProps { type: 'only-signup' | 'only-signin' | 'none'; diff --git a/packages/webapp/src/components/layout/header/styled.ts b/packages/webapp/src/components/layout/header/styled.ts index 8abbcf4c..dd0486e1 100644 --- a/packages/webapp/src/components/layout/header/styled.ts +++ b/packages/webapp/src/components/layout/header/styled.ts @@ -69,11 +69,7 @@ grid-template-columns: 150px 1fr 130px 160px 50px; export const Logo = styled.span` grid-column-start: 1; margin-left: 50px; -margin-top: 5px; - -.header-logo img { - height: 50px; -} +margin-top: 0px; .header-logo a { padding: 0px; diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx index a4509db6..1bfdeab9 100644 --- a/packages/webapp/src/components/maps-page/index.tsx +++ b/packages/webapp/src/components/maps-page/index.tsx @@ -4,17 +4,16 @@ import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import List from '@material-ui/core/List'; -import Divider from '@material-ui/core/Divider'; import IconButton from '@material-ui/core/IconButton'; -import MenuIcon from '@material-ui/icons/Menu'; -import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import { ListItemTextStyled, useStyles } from './style'; -import { AccountCircle, AddTwoTone, BlurCircular, DeleteOutlineTwoTone, LabelTwoTone, PublicTwoTone, PublishTwoTone, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons'; +import { AccountCircle, AddCircleTwoTone, BlurCircular, CloudUploadTwoTone, DeleteOutlineTwoTone, Help, LabelTwoTone, PublicTwoTone, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons'; import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone'; -import { Button, ListItemSecondaryAction, Tooltip } from '@material-ui/core'; +import { Button, ListItemSecondaryAction, Menu, MenuItem, Tooltip } from '@material-ui/core'; import { MapsList } from './maps-list'; +import { FormattedMessage } from 'react-intl'; +const logo = require('../../images/logo-small.svg') type FilterType = 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned' @@ -28,67 +27,48 @@ interface LabelFinter extends Filter { const MapsPage = (props: any) => { const classes = useStyles(); - const [open, setOpen] = React.useState(true); - - const handleDrawerOpen = () => { - setOpen(true); - }; - - const handleDrawerClose = () => { - setOpen(false); - }; - useEffect(() => { document.title = 'Maps | WiseMapping'; }, []); - return (
+ })} + variant='outlined' + elevation={0} + > - - - - - + + + + +
- - - + +
- - - - { [classes.drawerClose]: !open, }), }}> -
- - {} - + +
+ logo
- @@ -167,4 +145,86 @@ const MapsPage = (props: any) => { ); } +const ProfileToobarButton = () => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + + Account + Sign Out + + ); +} + +const HelpToobarButton = () => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + + + + + + + + + ); +} export default MapsPage; \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx index 108fcea1..60c6fca3 100644 --- a/packages/webapp/src/components/maps-page/maps-list/index.tsx +++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx @@ -1,7 +1,6 @@ import React from 'react' import { useStyles } from './styled'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; @@ -11,13 +10,11 @@ import TablePagination from '@material-ui/core/TablePagination'; import TableRow from '@material-ui/core/TableRow'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; import Paper from '@material-ui/core/Paper'; import Checkbox from '@material-ui/core/Checkbox'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; import DeleteIcon from '@material-ui/icons/Delete'; -import FilterListIcon from '@material-ui/icons/FilterList'; import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded'; import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; import { CSSProperties } from 'react'; @@ -26,9 +23,9 @@ import { activeInstance } from '../../../reducers/serviceSlice'; import { useMutation, useQuery, useQueryClient } from 'react-query'; import { ErrorInfo, MapInfo, Service } from '../../../services/Service'; import ActionChooser, { ActionType } from '../action-chooser'; -import ActionDispatcher, { handleOnMutationSuccess } from '../action-dispatcher'; -import { Link } from '@material-ui/core'; - +import ActionDispatcher from '../action-dispatcher'; +import { InputBase, Link } from '@material-ui/core'; +import SearchIcon from '@material-ui/icons/Search'; function descendingComparator(a: T, b: T, orderBy: keyof T) { @@ -135,55 +132,6 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } -const useToolbarStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - }, - title: { - flex: '1 1 100%', - }, - }), -); - -interface EnhancedTableToolbarProps { - numSelected: number; -} - -const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => { - const classes = useToolbarStyles(); - const { numSelected } = props; - - return ( - - {numSelected > 0 ? ( - - {numSelected} selected - - ) : ( - - All - - )} - {numSelected > 0 ? ( - - - - - - ) : ( - - - - - - )} - - ); -}; - - type ActionPanelState = { el: HTMLElement | undefined, mapId: number @@ -304,13 +252,52 @@ export const MapsList = () => { }; const isSelected = (id: number) => selected.indexOf(id) !== -1; - const emptyRows = rowsPerPage - Math.min(rowsPerPage, mapsInfo.length - page * rowsPerPage); return (
- + + + +
+ {selected.length > 0 ? ( + + + + + + + ) : null} +
+ +
+ +
+
+ +
+ +
+
+ + { tabIndex={-1} key={row.id} selected={isItemSelected} + style={{ border: "0" }} > - - + { - - + + + {row.name} - - + + {row.labels}{row.creator} @@ -385,23 +373,10 @@ export const MapsList = () => { ); })} - {emptyRows > 0 && ( - - - - )}
- + {/* Action Dialog */} diff --git a/packages/webapp/src/components/maps-page/maps-list/styled.ts b/packages/webapp/src/components/maps-page/maps-list/styled.ts index b2f4896b..740143ef 100644 --- a/packages/webapp/src/components/maps-page/maps-list/styled.ts +++ b/packages/webapp/src/components/maps-page/maps-list/styled.ts @@ -1,5 +1,4 @@ -import { MenuItem, TableCell } from '@material-ui/core'; -import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'; +import { createStyles, fade, makeStyles, Theme } from '@material-ui/core/styles'; export const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -12,19 +11,22 @@ export const useStyles = makeStyles((theme: Theme) => }, table: { minWidth: 750, - border: 0, '& tr:nth-child(even)': { background: 'white' }, '& tr:nth-child(odd)': { background: 'rgba(221, 221, 221, 0.35)' - } + } }, headerCell: { background: 'white', fontWeight: 'bold', - color: 'rgba(0, 0, 0, 0.44)' + color: 'rgba(0, 0, 0, 0.44)', + border: 0 + }, + bodyCell: { + border: 0 }, visuallyHidden: { border: 0, @@ -37,14 +39,59 @@ export const useStyles = makeStyles((theme: Theme) => top: 20, width: 1, }, - }), -); - -// export const StyledTableCell = withStyles({ -// root: { -// color: 'black', -// padding: '0px', -// cursor: 'pointer', -// border: '0' -// } -// })(TableCell); \ No newline at end of file + toolbar: { + display: 'flex', + borderBottom: '1px solid #cccccc', + padding: '0', + marging: '0' + }, + toolbarActions: { + flexGrow: 1 + }, + toolbarListActions: { + flexGrow: 1 + }, + search: { + borderRadius: 9, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing(1), + width: 'auto', + }, + float: 'right' + }, + searchIcon: { + padding: '5px 0 0 8px', + height: '100%', + position: 'absolute', + pointerEvents: 'none', + alignItems: 'center', + justifyContent: 'center', + }, + searchInputRoot: { + color: 'inherit', + }, toolbalLeft: { + float: 'right' + }, + searchInputInput: { + // padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + border: '1px solid #ffa800', + borderRadius: 4, + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: '12ch', + '&:focus': { + width: '20ch', + }, + }, + } + }) +); \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/style.ts b/packages/webapp/src/components/maps-page/style.ts index 9da860ef..abac72b0 100644 --- a/packages/webapp/src/components/maps-page/style.ts +++ b/packages/webapp/src/components/maps-page/style.ts @@ -25,9 +25,6 @@ export const useStyles = makeStyles((theme: Theme) => duration: theme.transitions.duration.enteringScreen, }), }, - menuButton: { - marginRight: 36, - }, newMapButton: { marginRight: 10, }, @@ -68,9 +65,7 @@ export const useStyles = makeStyles((theme: Theme) => }, toolbar: { display: 'flex', - alignItems: 'center', justifyContent: 'flex-end', - padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, }, diff --git a/packages/webapp/src/images/logo-icon.svg b/packages/webapp/src/images/logo-icon.svg index dfd4d38b..0d663cc0 100644 --- a/packages/webapp/src/images/logo-icon.svg +++ b/packages/webapp/src/images/logo-icon.svg @@ -1,14 +1,15 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/webapp/src/images/logo-medium.svg b/packages/webapp/src/images/logo-medium.svg new file mode 100644 index 00000000..fae99531 --- /dev/null +++ b/packages/webapp/src/images/logo-medium.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/webapp/src/images/header-logo.png b/packages/webapp/src/images/logo-old.png similarity index 100% rename from packages/webapp/src/images/header-logo.png rename to packages/webapp/src/images/logo-old.png diff --git a/packages/webapp/src/images/logo-small.svg b/packages/webapp/src/images/logo-small.svg new file mode 100644 index 00000000..fae99531 --- /dev/null +++ b/packages/webapp/src/images/logo-small.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts index a78c878f..8b969f13 100644 --- a/packages/webapp/src/theme/index.ts +++ b/packages/webapp/src/theme/index.ts @@ -15,9 +15,9 @@ const theme = createMuiTheme({ MuiCssBaseline: { '@global': { body: { - backgroundColor: 'white', + backgroundColor: 'white', }, - }, + }, }, MuiOutlinedInput: { root: {