initially getting it vertical and I kind of like the feel

This commit is contained in:
talksik
2022-06-20 07:38:20 -05:00
parent 8a26212f50
commit 312c09f43d
2 changed files with 82 additions and 109 deletions
+81 -108
View File
@@ -70,13 +70,7 @@ export default function FooterControls() {
return ( return (
<Box <Box
sx={{ sx={{
mt: 'auto', maxWidth: 100,
borderTop: '1px solid',
borderTopColor: blueGrey[100],
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
width: '100%',
zIndex: 10, zIndex: 10,
boxShadow: 10, boxShadow: 10,
@@ -85,7 +79,7 @@ export default function FooterControls() {
}} }}
> >
<Stack <Stack
direction={'row'} direction={'column'}
alignItems={'center'} alignItems={'center'}
justifyContent={'flex-start'} justifyContent={'flex-start'}
sx={{ sx={{
@@ -94,7 +88,7 @@ export default function FooterControls() {
flex: 1, flex: 1,
}} }}
> >
<Stack spacing={1} direction={'row'} alignItems={'center'}> <Stack spacing={1} direction={'column'} alignItems={'center'}>
<IconButton <IconButton
onClick={handleClickProfile} onClick={handleClickProfile}
size="small" size="small"
@@ -127,114 +121,93 @@ export default function FooterControls() {
</Stack> </Stack>
{selectedConversation && ( {selectedConversation && (
<> <Stack direction={'column'} spacing={1}>
<Stack <AvatarGroup
direction={'row'} variant={'rounded'}
sx={{ sx={{
flex: 1, display: 'flex',
mx: 'auto', flexDirection: 'column',
'& >:first-child': {
WebkitAppRegion: 'drag', marginTop: 0,
cursor: 'pointer', },
'& > *': {
marginLeft: '0 !important' as any,
marginTop: -2,
},
}} }}
alignItems={'center'}
justifyContent={'center'}
spacing={1}
> >
<Container {selectedConversation.members?.map((conversationUser, index) => (
maxWidth={'sm'} <Avatar
sx={{ key={`${selectedConversation._id.toString()}-${conversationUser._id.toString()}-convoIcon`}
display: 'flex', alt={conversationUser?.givenName}
justifyContent: 'center', src={conversationUser?.picture}
}} sx={{
> opacity: selectedConversation.tunedInUsers?.includes(
<IconButton color="primary" size="small"> conversationUser._id.toString(),
<FiSun /> )
</IconButton> ? '100%'
: '20%',
<ConversationLabel }}
users={selectedConversation.members ?? []}
conversationName={selectedConversation.name}
isSelected={true}
/> />
</Container> ))}
</Stack> </AvatarGroup>
<Stack sx={{ ml: 'auto' }} direction={'row'} spacing={1}> <Tooltip title="Mark priority or not!">
<AvatarGroup variant={'rounded'}> <IconButton
{selectedConversation.members?.map((conversationUser, index) => ( sx={{
<Avatar color: 'white',
key={`${selectedConversation._id.toString()}-${conversationUser._id.toString()}-convoIcon`} }}
alt={conversationUser?.givenName} size="small"
src={conversationUser?.picture} >
sx={{ <FiActivity />
opacity: selectedConversation.tunedInUsers?.includes( </IconButton>
conversationUser._id.toString(), </Tooltip>
)
? '100%'
: '20%',
}}
/>
))}
</AvatarGroup>
<Tooltip title="Mark priority or not!"> <Tooltip title="Paste image or link!">
<IconButton <IconButton
sx={{ sx={{
color: 'white', color: 'white',
}} }}
size="small" size="small"
> >
<FiActivity /> <FiLink />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip title="Paste image or link!"> <Tooltip title="Show screen!">
<IconButton <IconButton
sx={{ sx={{
color: 'white', color: 'white',
}} }}
size="small" size="small"
> >
<FiLink /> <FiAirplay />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip title="Show screen!"> <Tooltip title="Show video!">
<IconButton <IconButton
sx={{ sx={{
color: 'white', color: 'white',
}} }}
size="small" size="small"
> >
<FiAirplay /> <FiVideoOff />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip title="Show video!"> {/* todo: not speaking mode, speaking mode, locked in mode */}
<IconButton <Tooltip title="Speak or toggle by clicking here!">
sx={{ <IconButton
color: 'white', sx={{
}} color: 'white',
size="small" }}
> size="small"
<FiVideoOff /> >
</IconButton> <FiSun />
</Tooltip> </IconButton>
</Tooltip>
{/* todo: not speaking mode, speaking mode, locked in mode */} </Stack>
<Tooltip title="Speak or toggle by clicking here!">
<IconButton
sx={{
color: 'white',
}}
size="small"
>
<FiSun />
</IconButton>
</Tooltip>
</Stack>
</>
)} )}
</Stack> </Stack>
+1 -1
View File
@@ -22,7 +22,7 @@ export default function Terminal() {
disableGutters={true} disableGutters={true}
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'row',
}} }}
> >
<Grid container spacing={0} sx={{ flex: 1 }}> <Grid container spacing={0} sx={{ flex: 1 }}>