Fix menu.

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

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

View File

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

View File

@ -8,10 +8,10 @@ import IconButton from '@material-ui/core/IconButton';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
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 { Button, Link, ListItemSecondaryAction, Menu, MenuItem, Tooltip } from '@material-ui/core';
import { MapsList } from './maps-list';
import { MapsList } from './maps-list';
import { FormattedMessage } from 'react-intl';
const logoIcon = require('../../images/logo-small.svg')
const poweredByIcon = require('../../images/pwrdby-white.svg')
@ -183,8 +183,22 @@ const ProfileToobarButton = () => {
horizontal: 'right',
}}
>
<MenuItem onClick={handleClose}>Account</MenuItem>
<MenuItem onClick={handleClose}>Sign Out</MenuItem>
<MenuItem onClick={handleClose}>
<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>
</span>);
}
@ -222,11 +236,41 @@ const HelpToobarButton = () => {
vertical: 'top',
horizontal: 'right',
}}>
<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 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>
</Menu>
</span>);

View File

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