improvement: better popover menu styles

This commit is contained in:
canove
2020-10-18 16:56:45 -03:00
parent 5e769e5f8e
commit 1c8f86fd44
3 changed files with 10 additions and 7 deletions

View File

@@ -7,7 +7,7 @@ import MenuItem from "@material-ui/core/MenuItem";
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n";
import api from "../../services/api"; import api from "../../services/api";
import ConfirmationModal from "../ConfirmationModal"; import ConfirmationModal from "../ConfirmationModal";
import { Popover } from "@material-ui/core"; import { Menu } from "@material-ui/core";
const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => { const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
const [confirmationOpen, setConfirmationOpen] = useState(false); const [confirmationOpen, setConfirmationOpen] = useState(false);
@@ -44,8 +44,9 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
> >
{i18n.t("messageOptionsMenu.confirmationModal.message")} {i18n.t("messageOptionsMenu.confirmationModal.message")}
</ConfirmationModal> </ConfirmationModal>
<Popover <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ anchorOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "right", horizontal: "right",
@@ -61,7 +62,7 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
{i18n.t("messageOptionsMenu.delete")} {i18n.t("messageOptionsMenu.delete")}
</MenuItem> </MenuItem>
<MenuItem disabled> {i18n.t("messageOptionsMenu.reply")}</MenuItem> <MenuItem disabled> {i18n.t("messageOptionsMenu.reply")}</MenuItem>
</Popover> </Menu>
</> </>
); );
}; };

View File

@@ -39,8 +39,9 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
<Menu <Menu
id="menu-appbar" id="menu-appbar"
anchorEl={anchorEl} anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ anchorOrigin={{
vertical: "top", vertical: "bottom",
horizontal: "right", horizontal: "right",
}} }}
keepMounted keepMounted

View File

@@ -2,7 +2,6 @@ import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { import {
Popover,
makeStyles, makeStyles,
Drawer, Drawer,
AppBar, AppBar,
@@ -12,6 +11,7 @@ import {
Divider, Divider,
MenuItem, MenuItem,
IconButton, IconButton,
Menu,
} from "@material-ui/core"; } from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu"; import MenuIcon from "@material-ui/icons/Menu";
@@ -215,9 +215,10 @@ const LoggedInLayout = ({ appTitle, children }) => {
> >
<AccountCircle /> <AccountCircle />
</IconButton> </IconButton>
<Popover <Menu
id="menu-appbar" id="menu-appbar"
anchorEl={anchorEl} anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{ anchorOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "right", horizontal: "right",
@@ -235,7 +236,7 @@ const LoggedInLayout = ({ appTitle, children }) => {
<MenuItem onClick={handleLogout}> <MenuItem onClick={handleLogout}>
{i18n.t("mainDrawer.appBar.user.logout")} {i18n.t("mainDrawer.appBar.user.logout")}
</MenuItem> </MenuItem>
</Popover> </Menu>
</div> </div>
</Toolbar> </Toolbar>
</AppBar> </AppBar>