vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix menu.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-01-31 02:40:21 -08:00
parent 68ebc404c4
commit db934afed8
4 changed files with 111 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/webapp/src/components/maps-page/action-chooser/index.tsx
View File

@ -1,4 +1,4 @@
import { Divider, Menu, MenuItem } from '@material-ui/core'; import { Divider, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
import React from 'react'; import React from 'react';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined'; import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
@ -9,10 +9,10 @@ import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined'; import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined';
import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined'; import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined';
import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined'; import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
import { StyledMenuItem } from './styled';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { LabelOutlined } from '@material-ui/icons';
export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | 'history'| undefined; export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'label' | 'rename' | 'print' | 'info' | 'publish' | 'history' | undefined;
interface ActionProps { interface ActionProps {
onClose: (action: ActionType) => void; onClose: (action: ActionType) => void;
@ -36,46 +36,86 @@ const ActionChooser = (props: ActionProps) => {
keepMounted keepMounted
open={Boolean(anchor)} open={Boolean(anchor)}
onClose={handleOnClose(undefined)} onClose={handleOnClose(undefined)}
> >
<StyledMenuItem onClick={handleOnClose('open')}> <MenuItem onClick={handleOnClose('open')} style={{width:"220px"}}>
<DescriptionOutlinedIcon /><FormattedMessage id="action.open" defaultMessage="Open" /> <ListItemIcon>
</StyledMenuItem> <DescriptionOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.open" defaultMessage="Open" />
</MenuItem>
<Divider /> <Divider />
<MenuItem onClick={handleOnClose('duplicate')}> <MenuItem onClick={handleOnClose('duplicate')}>
<FileCopyOutlinedIcon /><FormattedMessage id="action.duplicate" defaultMessage="Duplicate" /> <ListItemIcon>
<FileCopyOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.duplicate" defaultMessage="Duplicate" />
</MenuItem> </MenuItem>
<MenuItem onClick={handleOnClose('rename')}> <MenuItem onClick={handleOnClose('rename')}>
<EditOutlinedIcon /> <FormattedMessage id="action.rename" defaultMessage="Rename" /> <ListItemIcon>
<EditOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.rename" defaultMessage="Rename" />
</MenuItem> </MenuItem>
<MenuItem onClick={handleOnClose('label')}>
<ListItemIcon>
<LabelOutlined />
</ListItemIcon>
<FormattedMessage id="action.label" defaultMessage="Add Label" />
</MenuItem>
<MenuItem onClick={handleOnClose('delete')}> <MenuItem onClick={handleOnClose('delete')}>
<DeleteOutlinedIcon /><FormattedMessage id="action.delete" defaultMessage="Delete" /> <ListItemIcon>
<DeleteOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.delete" defaultMessage="Delete" />
</MenuItem> </MenuItem>
<Divider /> <Divider />
<MenuItem onClick={handleOnClose('export')}> <MenuItem onClick={handleOnClose('export')}>
<CloudDownloadOutlinedIcon /><FormattedMessage id="action.export" defaultMessage="Export" /> <ListItemIcon>
<CloudDownloadOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.export" defaultMessage="Export" />
</MenuItem> </MenuItem>
<MenuItem onClick={handleOnClose('print')}> <MenuItem onClick={handleOnClose('print')}>
<PrintOutlinedIcon /><FormattedMessage id="action.print" defaultMessage="Print" /> <ListItemIcon>
<PrintOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.print" defaultMessage="Print" />
</MenuItem> </MenuItem>
<MenuItem onClick={handleOnClose('publish')}> <MenuItem onClick={handleOnClose('publish')}>
<PublicOutlinedIcon /><FormattedMessage id="action.publish" defaultMessage="Publish" /> <ListItemIcon>
<PublicOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.publish" defaultMessage="Publish" />
</MenuItem> </MenuItem>
<MenuItem onClick={handleOnClose('share')}> <MenuItem onClick={handleOnClose('share')}>
<ShareOutlinedIcon /><FormattedMessage id="action.share" defaultMessage="Share" /> <ListItemIcon>
<ShareOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.share" defaultMessage="Share" />
</MenuItem> </MenuItem>
<Divider /> <Divider />
<MenuItem onClick={handleOnClose('info')}> <MenuItem onClick={handleOnClose('info')}>
<InfoOutlinedIcon /><FormattedMessage id="action.info" defaultMessage="Info" /> <ListItemIcon>
<InfoOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.info" defaultMessage="Info" />
</MenuItem> </MenuItem>
<MenuItem onClick={handleOnClose('history')}> <MenuItem onClick={handleOnClose('history')}>
<DeleteOutlinedIcon /><FormattedMessage id="action.delete" defaultMessage="History" /> <ListItemIcon>
<DeleteOutlinedIcon />
</ListItemIcon>
<FormattedMessage id="action.delete" defaultMessage="History" />
</MenuItem> </MenuItem>
</Menu>); </Menu>);
} }

2
packages/webapp/src/components/maps-page/action-chooser/styled.ts
View File

@ -3,8 +3,6 @@ import { MenuItem, withStyles } from "@material-ui/core";
export const StyledMenuItem = withStyles({ export const StyledMenuItem = withStyles({
root: { root: {
width: '300px', width: '300px',
padding: '10px 20px',
marging: '0px 20px'
} }
})(MenuItem) })(MenuItem)

54
packages/webapp/src/components/maps-page/index.tsx
View File

@ -8,7 +8,7 @@ import IconButton from '@material-ui/core/IconButton';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import { ListItemTextStyled, useStyles } from './style'; import { ListItemTextStyled, useStyles } from './style';
import { AccountCircle, AddCircleTwoTone, BlurCircular, CloudUploadTwoTone, DeleteOutlineTwoTone, Help, LabelTwoTone, PublicTwoTone, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons'; import { AccountCircle, AddCircleTwoTone, BlurCircular, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, LabelTwoTone, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone'; import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
import { Button, Link, ListItemSecondaryAction, Menu, MenuItem, Tooltip } from '@material-ui/core'; import { Button, Link, ListItemSecondaryAction, Menu, MenuItem, Tooltip } from '@material-ui/core';
import { MapsList } from './maps-list'; import { MapsList } from './maps-list';
@ -183,8 +183,22 @@ const ProfileToobarButton = () => {
horizontal: 'right', horizontal: 'right',
}} }}
> >
<MenuItem onClick={handleClose}>Account</MenuItem> <MenuItem onClick={handleClose}>
<MenuItem onClick={handleClose}>Sign Out</MenuItem> <ListItemIcon>
<SettingsApplicationsOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.account" defaultMessage="Account" />
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="/c/logout">
<ListItemIcon>
<ExitToAppOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.signout" defaultMessage="Sign Out" />
</Link>
</MenuItem>
</Menu> </Menu>
</span>); </span>);
} }
@ -222,11 +236,41 @@ const HelpToobarButton = () => {
vertical: 'top', vertical: 'top',
horizontal: 'right', horizontal: 'right',
}}> }}>
<MenuItem onClick={handleClose}> <MenuItem onClick={handleClose}>
<a href="https://www.wisemapping.com/termsofuse.html"> <FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" /></a> <Link color="textSecondary" href="https://www.wisemapping.com/termsofuse.html">
<ListItemIcon>
<PolicyOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
</Link>
</MenuItem> </MenuItem>
<MenuItem onClick={handleClose}> <MenuItem onClick={handleClose}>
<a href="mailto:team@wisemapping.com"> <FormattedMessage id="footer.contactus" defaultMessage="Contact Us" /> </a> <Link color="textSecondary" href="mailto:team@wisemapping.com">
<ListItemIcon>
<EmailOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.contactus" defaultMessage="Contact Us" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="feedback@wisemapping.com">
<ListItemIcon>
<FeedbackOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.feedback" defaultMessage="Feedback" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="https://www.wisemapping.com/aboutus.html">
<ListItemIcon>
<EmojiPeopleOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.aboutus" defaultMessage="About Us" />
</Link>
</MenuItem> </MenuItem>
</Menu> </Menu>
</span>); </span>);

5
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -356,7 +356,6 @@ export const MapsList = () => {
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<Tooltip title="Open for edition" placement="bottom-start"> <Tooltip title="Open for edition" placement="bottom-start">
<Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always"> <Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always">
{row.name} {row.name}
</Link> </Link>
@ -372,8 +371,8 @@ export const MapsList = () => {
</TableCell> </TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<Tooltip title={moment("20200704T120854").format("lll")} placement="bottom-start"> <Tooltip title={moment(row.modified).format("lll")} placement="bottom-start">
<span>{moment("20200704T120854").fromNow()}</span> <span>{moment(row.modified).fromNow()}</span>
</Tooltip> </Tooltip>
</TableCell> </TableCell>