diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js
index cbe4bee..6422788 100644
--- a/app/src/components/Controls/TopBar.js
+++ b/app/src/components/Controls/TopBar.js
@@ -16,11 +16,13 @@ import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
+import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Avatar from '@material-ui/core/Avatar';
import Badge from '@material-ui/core/Badge';
+import Paper from '@material-ui/core/Paper';
import ExtensionIcon from '@material-ui/icons/Extension';
import AccountCircle from '@material-ui/icons/AccountCircle';
import FullScreenIcon from '@material-ui/icons/Fullscreen';
@@ -33,6 +35,7 @@ import LockOpenIcon from '@material-ui/icons/LockOpen';
import VideoCallIcon from '@material-ui/icons/VideoCall';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
+import MoreIcon from '@material-ui/icons/MoreVert';
const styles = (theme) =>
({
@@ -77,9 +80,17 @@ const styles = (theme) =>
display : 'block'
}
},
- actionButtons :
- {
- display : 'flex'
+ sectionDesktop : {
+ display : 'none',
+ [theme.breakpoints.up('md')] : {
+ display : 'flex'
+ }
+ },
+ sectionMobile : {
+ display : 'flex',
+ [theme.breakpoints.up('md')] : {
+ display : 'none'
+ }
},
actionButton :
{
@@ -96,7 +107,7 @@ const styles = (theme) =>
},
moreAction :
{
- margin : theme.spacing(0, 0, 0, 1)
+ margin : theme.spacing(0.5, 0, 0.5, 1.5)
}
});
@@ -135,16 +146,36 @@ const TopBar = (props) =>
{
const intl = useIntl();
- const [ moreActionsElement, setMoreActionsElement ] = useState(null);
+ const [ mobileMoreAnchorEl, setMobileMoreAnchorEl ] = useState(null);
+ const [ anchorEl, setAnchorEl ] = useState(null);
+ const [ currentMenu, setCurrentMenu ] = useState(null);
- const handleMoreActionsOpen = (event) =>
+ const handleExited = () =>
{
- setMoreActionsElement(event.currentTarget);
+ setCurrentMenu(null);
};
- const handleMoreActionsClose = () =>
+ const handleMobileMenuOpen = (event) =>
{
- setMoreActionsElement(null);
+ setMobileMoreAnchorEl(event.currentTarget);
+ };
+
+ const handleMobileMenuClose = () =>
+ {
+ setMobileMoreAnchorEl(null);
+ };
+
+ const handleMenuOpen = (event, menu) =>
+ {
+ setAnchorEl(event.currentTarget);
+ setCurrentMenu(menu);
+ };
+
+ const handleMenuClose = () =>
+ {
+ setAnchorEl(null);
+
+ handleMobileMenuClose();
};
const {
@@ -171,7 +202,8 @@ const TopBar = (props) =>
classes
} = props;
- const isMoreActionsMenuOpen = Boolean(moreActionsElement);
+ const isMenuOpen = Boolean(anchorEl);
+ const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
const lockTooltip = room.locked ?
intl.formatMessage({
@@ -239,10 +271,15 @@ const TopBar = (props) =>
{ window.config.title ? window.config.title : 'Multiparty meeting' }
-
+
handleMenuOpen(event, 'moreActions')}
color='inherit'
>
@@ -386,52 +423,253 @@ const TopBar = (props) =>
}
-
-
+
+
+
+
+
+
+
-