More change on main dialog

This commit is contained in:
Paulo Gustavo Veiga 2021-01-30 00:51:02 -08:00
parent 1b7f172518
commit 13d7a5d8ee
11 changed files with 271 additions and 165 deletions

View File

@ -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';

View File

@ -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;

View File

@ -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 (
<div className={classes.root}>
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}>
})}
variant='outlined'
elevation={0}
>
<Toolbar variant="regular">
<IconButton color="inherit" onClick={handleDrawerOpen} edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}>
<MenuIcon />
</IconButton>
<Tooltip title="Create a New Map">
<Button color="primary" size="medium" variant="contained" type="button"
disableElevation={true} startIcon={<AddTwoTone />} className={classes.newMapButton}>
disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}>
New Map
</Button>
</Tooltip>
<Tooltip title="Import from other mindmap tools">
<Tooltip title="Import from external tools">
<Button color="primary" size="medium" variant="outlined" type="button"
disableElevation={true} startIcon={<PublishTwoTone />} className={classes.importButton}>
disableElevation={true} startIcon={<CloudUploadTwoTone />} className={classes.importButton}>
Import
</Button>
</Button>
</Tooltip>
<Tooltip title="Use labels to organize your maps">
<Button color="primary" size="medium" variant="outlined" type="button"
disableElevation={true} startIcon={<LabelTwoTone />} className={classes.importButton}>
Label
</Button>
</Tooltip>
<div className={classes.rightButtonGroup}>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
// onClick={handleMenu}
>
<AccountCircle fontSize="large" />
</IconButton>
<HelpToobarButton />
<ProfileToobarButton />
</div>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
@ -101,12 +81,10 @@ const MapsPage = (props: any) => {
[classes.drawerClose]: !open,
}),
}}>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{<ChevronLeftIcon />}
</IconButton>
<div style={{textAlign: 'center',margin:"20px 0px"}}>
<img src={logo} alt="logo"/>
</div>
<Divider />
<List component="nav">
@ -167,4 +145,86 @@ const MapsPage = (props: any) => {
);
}
const ProfileToobarButton = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<span>
<IconButton
aria-haspopup="true"
onClick={handleMenu}>
<AccountCircle fontSize="large" />
</IconButton >
<Menu id="appbar-profile"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem onClick={handleClose}>Account</MenuItem>
<MenuItem onClick={handleClose}>Sign Out</MenuItem>
</Menu>
</span>);
}
const HelpToobarButton = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<span>
<IconButton
aria-haspopup="true"
onClick={handleMenu}>
<Help />
</IconButton>
<Menu id="appbar-profile"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}>
<MenuItem onClick={handleClose}>
<a href="https://www.wisemapping.com/termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /></a>
</MenuItem>
<MenuItem onClick={handleClose}>
<a href="mailto:team@wisemapping.com"> <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" /> </a>
</MenuItem>
</Menu>
</span>);
}
export default MapsPage;

View File

@ -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<T>(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 (
<Toolbar>
{numSelected > 0 ? (
<Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
{numSelected} selected
</Typography>
) : (
<Typography className={classes.title} variant="h6" id="tableTitle" component="div">
All
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</Toolbar>
);
};
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 (
<div className={classes.root}>
<Paper className={classes.paper} elevation={0}>
<EnhancedTableToolbar numSelected={selected.length} />
<Toolbar className={classes.toolbar} variant="dense">
<div className={classes.toolbarActions}>
{selected.length > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
) : null}
</div>
<div className={classes.toolbarListActions}>
<TablePagination
style={{ float: 'right', border: "0", paddingBottom: "5px" }}
rowsPerPageOptions={[50]}
count={mapsInfo.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
component="div"
/>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.searchInputRoot,
input: classes.searchInputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
</div>
</Toolbar>
<TableContainer>
<Table
@ -345,9 +332,9 @@ export const MapsList = () => {
tabIndex={-1}
key={row.id}
selected={isItemSelected}
style={{ border: "0" }}
>
<TableCell padding="checkbox">
<TableCell padding="checkbox" style={{ border: "0" }}>
<Checkbox
checked={isItemSelected}
inputProps={{ 'aria-labelledby': String(labelId) }}
@ -362,13 +349,14 @@ export const MapsList = () => {
</Tooltip>
</TableCell>
<Tooltip title="Open for edition" placement="bottom-start">
<TableCell>
<TableCell>
<Tooltip title="Open for edition" placement="bottom-start">
<Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always">
{row.name}
</Link>
</TableCell>
</Tooltip>
</Tooltip>
</TableCell>
<TableCell>{row.labels}</TableCell>
<TableCell>{row.creator}</TableCell>
@ -385,23 +373,10 @@ export const MapsList = () => {
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 33 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={mapsInfo.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
{/* Action Dialog */}

View File

@ -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);
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',
},
},
}
})
);

View File

@ -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,
},

View File

@ -1,14 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="27" fill="none" viewBox="0 0 38 27">
<path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M19 26c-1.5-4-3.5-3.5-9-7h17.5c-4.786 3.127-7.5 3-8.5 7z"/>
<path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M32.34 11.956c0 2.447-1.45 4.745-3.97 6.465-2.514 1.718-6.03 2.804-9.95 2.804-3.92 0-7.436-1.086-9.951-2.804-2.519-1.72-3.97-4.018-3.97-6.465 0-2.446 1.451-4.745 3.97-6.465 2.515-1.717 6.03-2.804 9.95-2.804 3.921 0 7.437 1.087 9.952 2.804 2.518 1.72 3.97 4.019 3.97 6.465z"/>
<mask id="i08j30ef6a" fill="#fff">
<path d="M17 8c0 2.122-.895 4.157-2.49 5.657C12.916 15.157 10.754 16 8.5 16s-4.416-.843-6.01-2.343C.896 12.157 0 10.122 0 8h17z"/>
</mask>
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M17 8c0 2.122-.895 4.157-2.49 5.657C12.916 15.157 10.754 16 8.5 16s-4.416-.843-6.01-2.343C.896 12.157 0 10.122 0 8h17z" mask="url(#i08j30ef6a)"/>
<mask id="1f1ltfoetb" fill="#fff">
<path d="M38 8c0 2.122-.895 4.157-2.49 5.657C33.916 15.157 31.754 16 29.5 16s-4.416-.843-6.01-2.343C21.895 12.157 21 10.122 21 8h17z"/>
</mask>
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M38 8c0 2.122-.895 4.157-2.49 5.657C33.916 15.157 31.754 16 29.5 16s-4.416-.843-6.01-2.343C21.895 12.157 21 10.122 21 8h17z" mask="url(#1f1ltfoetb)"/>
<path stroke="#000" stroke-width="1.5" d="M16 9.125c2-1.5 4-1.5 6 0"/>
<path fill="#FFCB00" d="M19.186 24.75C17.686 20.75 9 19 10.5 18s16-1.5 17-.5-6.857 2.826-8.314 7.25z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="11.222 9.992 47.08 32.567" width="47.08" height="32.567" xmlns="http://www.w3.org/2000/svg">
<mask id="i08j30ef6a" fill="#fff">
<path d="M 32.334 17.911 C 32.334 20.705 31.301 23.382 29.458 25.357 C 27.617 27.332 25.121 28.441 22.517 28.441 C 19.913 28.441 17.417 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z"/>
</mask>
<mask id="1f1ltfoetb" fill="#fff">
<path d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.771 28.441 C 44.167 28.441 41.67 27.332 39.83 25.357 C 37.988 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z"/>
</mask>
<path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M 34.644 41.603 C 32.912 36.337 30.603 36.996 24.25 32.388 L 44.462 32.388 C 38.933 36.505 35.8 36.337 34.644 41.603 Z" style=""/>
<path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M 50.051 23.119 C 50.051 26.338 48.377 29.364 45.467 31.627 C 42.563 33.888 38.503 35.318 33.975 35.318 C 29.446 35.318 25.385 33.888 22.482 31.627 C 19.572 29.364 17.896 26.338 17.896 23.119 C 17.896 19.898 19.572 16.874 22.482 14.61 C 25.385 12.349 29.445 10.918 33.972 10.918 C 38.503 10.918 42.563 12.349 45.467 14.61 C 48.375 16.874 50.053 19.898 50.053 23.119 Z" style=""/>
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 32.334 17.911 C 32.334 20.705 31.3 23.382 29.459 25.357 C 27.618 27.332 25.12 28.441 22.517 28.441 C 19.914 28.441 17.418 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z" mask="url(#i08j30ef6a)" style=""/>
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.772 28.441 C 44.168 28.441 41.671 27.332 39.831 25.357 C 37.989 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z" mask="url(#1f1ltfoetb)" style=""/>
<path stroke="#000" stroke-width="1.5" d="M 31.179 19.393 C 33.489 17.417 35.8 17.417 38.109 19.393" style=""/>
<path fill="#FFCB00" d="M 34.859 39.957 C 33.128 34.692 23.095 32.388 24.827 31.073 C 26.559 29.757 43.307 29.1 44.462 30.415 C 45.618 31.731 36.541 34.134 34.859 39.957 Z" style=""/>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -15,9 +15,9 @@ const theme = createMuiTheme({
MuiCssBaseline: {
'@global': {
body: {
backgroundColor: 'white',
backgroundColor: 'white',
},
},
},
},
MuiOutlinedInput: {
root: {