Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 16:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update WorkspaceSwitcher ui

Browse Source
This commit is contained in:
Matúš Námešný
2024-10-27 14:50:21 +01:00
parent eaad78730e
commit ab7b018f88
1 changed files with 95 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/src/components/WorkspaceSwitcher.js
View File

@@ -10,8 +10,9 @@ import {
Text, Text,
Loader, Loader,
Center, Center,
Button,
ActionIcon, ActionIcon,
Tooltip,
useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react'; import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
import { useWorkspace } from '../contexts/WorkspaceContext'; import { useWorkspace } from '../contexts/WorkspaceContext';
@@ -26,6 +27,7 @@ const WorkspaceSwitcher = () => {
const [workspaces, setWorkspaces] = useState([]); const [workspaces, setWorkspaces] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [popoverOpened, setPopoverOpened] = useState(false); const [popoverOpened, setPopoverOpened] = useState(false);
const theme = useMantineTheme();
const loadWorkspaces = async () => { const loadWorkspaces = async () => {
setLoading(true); setLoading(true);
@@ -77,71 +79,114 @@ const WorkspaceSwitcher = () => {
</UnstyledButton> </UnstyledButton>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown p="xs">
<Text size="sm" fw={600} mb="md"> <Group justify="space-between" mb="md" px="xs">
Switch Workspace <Text size="sm" fw={600}>
Workspaces
</Text> </Text>
<ScrollArea.Autosize mah={400} mb="md" offsetScrollbars> <Tooltip label="Create New Workspace">
<ActionIcon
variant="default"
size="md"
onClick={handleCreateWorkspace}
>
<IconFolderPlus size={16} />
</ActionIcon>
</Tooltip>
</Group>
<ScrollArea.Autosize mah={400} offsetScrollbars>
<Stack gap="xs"> <Stack gap="xs">
{loading ? ( {loading ? (
<Center p="md"> <Center p="md">
<Loader size="sm" /> <Loader size="sm" />
</Center> </Center>
) : ( ) : (
workspaces.map((workspace) => ( workspaces.map((workspace) => {
<UnstyledButton const isSelected = workspace.id === currentWorkspace?.id;
return (
<Paper
key={workspace.id} key={workspace.id}
p="xs"
withBorder
style={{
backgroundColor: isSelected
? theme.colors.blue[
theme.colorScheme === 'dark' ? 8 : 1
]
: undefined,
borderColor: isSelected
? theme.colors.blue[
theme.colorScheme === 'dark' ? 7 : 5
]
: undefined,
}}
>
<Group justify="space-between" wrap="nowrap">
<UnstyledButton
style={{ flex: 1 }}
onClick={() => { onClick={() => {
switchWorkspace(workspace.id); switchWorkspace(workspace.id);
setPopoverOpened(false); setPopoverOpened(false);
}} }}
> >
<Paper <Box>
p="xs" <Text
withBorder={workspace.id === currentWorkspace?.id} size="sm"
bg={ fw={500}
workspace.id === currentWorkspace?.id truncate
? 'var(--mantine-color-blue-light)' c={
isSelected
? theme.colors.blue[
theme.colorScheme === 'dark' ? 0 : 9
]
: undefined : undefined
} }
> >
<Group justify="space-between" wrap="nowrap">
<Box>
<Text size="sm" fw={500} truncate>
{workspace.name} {workspace.name}
</Text> </Text>
<Text size="xs" c="dimmed"> <Text
{new Date(workspace.createdAt).toLocaleDateString()} size="xs"
c={
isSelected
? theme.colorScheme === 'dark'
? theme.colors.blue[2]
: theme.colors.blue[7]
: 'dimmed'
}
>
{new Date(
workspace.createdAt
).toLocaleDateString()}
</Text> </Text>
</Box> </Box>
{workspace.id === currentWorkspace?.id && ( </UnstyledButton>
{isSelected && (
<Tooltip label="Workspace Settings">
<ActionIcon <ActionIcon
variant="subtle" variant="subtle"
size="sm" size="lg"
color={
theme.colorScheme === 'dark'
? 'blue.2'
: 'blue.7'
}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSettingsModalVisible(true); setSettingsModalVisible(true);
setPopoverOpened(false); setPopoverOpened(false);
}} }}
> >
<IconSettings size={14} /> <IconSettings size={18} />
</ActionIcon> </ActionIcon>
</Tooltip>
)} )}
</Group> </Group>
</Paper> </Paper>
</UnstyledButton> );
)) })
)} )}
</Stack> </Stack>
</ScrollArea.Autosize> </ScrollArea.Autosize>
<Button
variant="light"
leftSection={<IconFolderPlus size={14} />}
fullWidth
onClick={handleCreateWorkspace}
>
Create Workspace
</Button>
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
<CreateWorkspaceModal onWorkspaceCreated={handleWorkspaceCreated} /> <CreateWorkspaceModal onWorkspaceCreated={handleWorkspaceCreated} />