talksik/nirvana-v4
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
talksik
2022-05-28 12:29:43 -05:00
parent 6f55b573e1
commit 7b29360f8f
3 changed files with 275 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/components/Conversations.tsx
+115
View File
@@ -0,0 +1,115 @@
import React from 'react';
import {
Avatar,
Badge,
Divider,
List,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemText,
ListSubheader,
Typography,
} from '@mui/material';
import { blueGrey } from '@mui/material/colors';
import { FiActivity, FiInbox } from 'react-icons/fi';
import NirvanaAvatar from './NirvanaAvatar';
const Conversations = () => {
return (
<>
<List
sx={{
pt: 2,
}}
subheader={
<ListSubheader>
<FiActivity />
<Typography variant="subtitle2"> Priority</Typography>
</ListSubheader>
}
>
<ListItem>
<ListItemButton selected={true}>
<ListItemAvatar>
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
</ListItemAvatar>
<ListItemText primary="Viet" />
<Typography variant={'caption'}>20 sec</Typography>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemAvatar>
<NirvanaAvatar
avatars={[
{ alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
]}
/>
</ListItemAvatar>
<ListItemText primary="Agnes" />
<Typography variant={'caption'}>34 min ago</Typography>
</ListItemButton>
</ListItem>
</List>
<Divider />
<List
sx={{
pt: 2,
}}
subheader={
<ListSubheader>
<FiInbox />
<Typography variant="subtitle2"> Inbox</Typography>
</ListSubheader>
}
>
<ListItem>
<ListItemButton sx={{ opacity: 0.5 }}>
<ListItemAvatar>
<Avatar
sx={{
filter: `grayscale(1)`,
}}
alt={'Arjun Patel'}
src="https://mui.com/static/images/avatar/5.jpg"
/>
</ListItemAvatar>
<ListItemText secondary="Jeremy Leon" sx={{ color: blueGrey[300] }} />
<Badge color="primary" badgeContent=" " variant="dot"></Badge>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton sx={{ opacity: 0.5 }}>
<ListItemAvatar>
<Avatar
sx={{
filter: `grayscale(1)`,
}}
alt={'Arjun Patel'}
src="https://mui.com/static/images/avatar/4.jpg"
/>
</ListItemAvatar>
<ListItemText secondary="James Lin" sx={{ color: blueGrey[300] }} />
<Typography variant={'caption'}>2 hours ago</Typography>
</ListItemButton>
</ListItem>
</List>
</>
);
};
export default Conversations;
packages/desktop/src/components/Navbar.tsx
+158
View File
@@ -0,0 +1,158 @@
import React, { useCallback, useRef } from 'react';
import { Container } from '@mui/system';
import {
Avatar,
Box,
Divider,
Fab,
Grid,
IconButton,
Input,
ListItemIcon,
Menu,
Paper,
Stack,
Tooltip,
Typography,
} from '@mui/material';
import NirvanaLogo from './NirvanaLogo';
import { blueGrey } from '@mui/material/colors';
import {
FiHeadphones,
FiLogOut,
FiMonitor,
FiMoreVertical,
FiPlay,
FiSearch,
FiSun,
FiWind,
} from 'react-icons/fi';
import KeyboardShortcutLabel from './KeyboardShortcutLabel';
import { useSnackbar } from 'notistack';
import { useKey } from 'react-use';
import MenuItem from '@mui/material/MenuItem';
import useAuth from '../providers/AuthProvider';
import Conversations from './Conversations';
const Navbar = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const { logout, user } = useAuth();
return (
<>
<Stack
direction="row"
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
WebkitAppRegion: 'drag',
cursor: 'pointer',
pb: 1,
}}
>
<NirvanaLogo />
<Stack
spacing={1}
direction={'row'}
alignItems={'center'}
sx={{
ml: 'auto',
mr: 1,
color: 'GrayText',
}}
>
<Tooltip title="Sound configuration">
<IconButton color="inherit" size="small">
<FiHeadphones />
</IconButton>
</Tooltip>
<Tooltip title="Desktop modes">
<IconButton color="inherit" size="small">
<FiMonitor />
</IconButton>
</Tooltip>
<Tooltip title="Flow state">
<IconButton color="inherit" size="small">
<FiWind />
</IconButton>
</Tooltip>
</Stack>
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2, borderRadius: 1 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<Avatar alt={user.displayName} src={user.photoURL} />
</IconButton>
</Stack>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
},
}}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem>
<Avatar /> Profile
</MenuItem>
<MenuItem>
<Avatar /> My account
</MenuItem>
<Divider />
<MenuItem onClick={logout}>
<ListItemIcon>
<FiLogOut />
</ListItemIcon>
<Typography color="warning">Logout</Typography>
</MenuItem>
</Menu>
</>
);
};
export default Navbar;
packages/desktop/src/components/Terminal.tsx
+2 -225
View File
@@ -3,20 +3,13 @@ import React, { useCallback, useRef } from 'react';
import { Container } from '@mui/system'; import { Container } from '@mui/system';
import { import {
Avatar, Avatar,
Badge,
Box, Box,
Divider, Divider,
Fab, Fab,
Grid, Grid,
IconButton, IconButton,
Input, Input,
List,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText,
ListSubheader,
Menu, Menu,
Paper, Paper,
Stack, Stack,
@@ -26,9 +19,7 @@ import {
import NirvanaLogo from './NirvanaLogo'; import NirvanaLogo from './NirvanaLogo';
import { blueGrey } from '@mui/material/colors'; import { blueGrey } from '@mui/material/colors';
import { import {
FiActivity,
FiHeadphones, FiHeadphones,
FiInbox,
FiLogOut, FiLogOut,
FiMonitor, FiMonitor,
FiMoreVertical, FiMoreVertical,
@@ -40,10 +31,11 @@ import {
import KeyboardShortcutLabel from './KeyboardShortcutLabel'; import KeyboardShortcutLabel from './KeyboardShortcutLabel';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
import { useKey } from 'react-use'; import { useKey } from 'react-use';
import NirvanaAvatar from './NirvanaAvatar';
import MenuItem from '@mui/material/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import useAuth from '../providers/AuthProvider'; import useAuth from '../providers/AuthProvider';
import Conversations from './Conversations';
import Navbar from './Navbar';
export default function Terminal() { export default function Terminal() {
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
@@ -223,125 +215,6 @@ export default function Terminal() {
); );
} }
const Navbar = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const { logout, user } = useAuth();
return (
<>
<Stack
direction="row"
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
WebkitAppRegion: 'drag',
cursor: 'pointer',
pb: 1,
}}
>
<NirvanaLogo />
<Stack
spacing={1}
direction={'row'}
alignItems={'center'}
sx={{
ml: 'auto',
mr: 1,
color: 'GrayText',
}}
>
<Tooltip title="Sound configuration">
<IconButton color="inherit" size="small">
<FiHeadphones />
</IconButton>
</Tooltip>
<Tooltip title="Desktop modes">
<IconButton color="inherit" size="small">
<FiMonitor />
</IconButton>
</Tooltip>
<Tooltip title="Flow state">
<IconButton color="inherit" size="small">
<FiWind />
</IconButton>
</Tooltip>
</Stack>
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2, borderRadius: 1 }}
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<Avatar alt={user.displayName} src={user.photoURL} />
</IconButton>
</Stack>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
},
}}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem>
<Avatar /> Profile
</MenuItem>
<MenuItem>
<Avatar /> My account
</MenuItem>
<Divider />
<MenuItem onClick={logout}>
<ListItemIcon>
<FiLogOut />
</ListItemIcon>
<Typography color="warning">Logout</Typography>
</MenuItem>
</Menu>
</>
);
};
const searchShortcut = 'Shift'; const searchShortcut = 'Shift';
const SecondNavbar = () => { const SecondNavbar = () => {
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
@@ -378,99 +251,3 @@ const SecondNavbar = () => {
</Stack> </Stack>
); );
}; };
const Conversations = () => {
return (
<>
<List
sx={{
pt: 2,
}}
subheader={
<ListSubheader>
<FiActivity />
<Typography variant="subtitle2"> Priority</Typography>
</ListSubheader>
}
>
<ListItem>
<ListItemButton selected={true}>
<ListItemAvatar>
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
</ListItemAvatar>
<ListItemText primary="Viet" />
<Typography variant={'caption'}>20 sec</Typography>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemAvatar>
<NirvanaAvatar
avatars={[
{ alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
]}
/>
</ListItemAvatar>
<ListItemText primary="Agnes" />
<Typography variant={'caption'}>34 min ago</Typography>
</ListItemButton>
</ListItem>
</List>
<Divider />
<List
sx={{
pt: 2,
}}
subheader={
<ListSubheader>
<FiInbox />
<Typography variant="subtitle2"> Inbox</Typography>
</ListSubheader>
}
>
<ListItem>
<ListItemButton sx={{ opacity: 0.5 }}>
<ListItemAvatar>
<Avatar
sx={{
filter: `grayscale(1)`,
}}
alt={'Arjun Patel'}
src="https://mui.com/static/images/avatar/5.jpg"
/>
</ListItemAvatar>
<ListItemText secondary="Jeremy Leon" sx={{ color: blueGrey[300] }} />
<Badge color="primary" badgeContent=" " variant="dot"></Badge>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton sx={{ opacity: 0.5 }}>
<ListItemAvatar>
<Avatar
sx={{
filter: `grayscale(1)`,
}}
alt={'Arjun Patel'}
src="https://mui.com/static/images/avatar/4.jpg"
/>
</ListItemAvatar>
<ListItemText secondary="James Lin" sx={{ color: blueGrey[300] }} />
<Typography variant={'caption'}>2 hours ago</Typography>
</ListItemButton>
</ListItem>
</List>
</>
);
};