Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 07:54:22 +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

145
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}>
</Text> Workspaces
<ScrollArea.Autosize mah={400} mb="md" offsetScrollbars> </Text>
<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;
key={workspace.id} return (
onClick={() => {
switchWorkspace(workspace.id);
setPopoverOpened(false);
}}
>
<Paper <Paper
key={workspace.id}
p="xs" p="xs"
withBorder={workspace.id === currentWorkspace?.id} withBorder
bg={ style={{
workspace.id === currentWorkspace?.id backgroundColor: isSelected
? 'var(--mantine-color-blue-light)' ? theme.colors.blue[
: undefined theme.colorScheme === 'dark' ? 8 : 1
} ]
: undefined,
borderColor: isSelected
? theme.colors.blue[
theme.colorScheme === 'dark' ? 7 : 5
]
: undefined,
}}
> >
<Group justify="space-between" wrap="nowrap"> <Group justify="space-between" wrap="nowrap">
<Box> <UnstyledButton
<Text size="sm" fw={500} truncate> style={{ flex: 1 }}
{workspace.name} onClick={() => {
</Text> switchWorkspace(workspace.id);
<Text size="xs" c="dimmed"> setPopoverOpened(false);
{new Date(workspace.createdAt).toLocaleDateString()} }}
</Text> >
</Box> <Box>
{workspace.id === currentWorkspace?.id && ( <Text
<ActionIcon size="sm"
variant="subtle" fw={500}
size="sm" truncate
onClick={(e) => { c={
e.stopPropagation(); isSelected
setSettingsModalVisible(true); ? theme.colors.blue[
setPopoverOpened(false); theme.colorScheme === 'dark' ? 0 : 9
}} ]
> : undefined
<IconSettings size={14} /> }
</ActionIcon> >
{workspace.name}
</Text>
<Text
size="xs"
c={
isSelected
? theme.colorScheme === 'dark'
? theme.colors.blue[2]
: theme.colors.blue[7]
: 'dimmed'
}
>
{new Date(
workspace.createdAt
).toLocaleDateString()}
</Text>
</Box>
</UnstyledButton>
{isSelected && (
<Tooltip label="Workspace Settings">
<ActionIcon
variant="subtle"
size="lg"
color={
theme.colorScheme === 'dark'
? 'blue.2'
: 'blue.7'
}
onClick={(e) => {
e.stopPropagation();
setSettingsModalVisible(true);
setPopoverOpened(false);
}}
>
<IconSettings size={18} />
</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} />