Skip to content

Commit a998a7d

Browse files
SeptiasSeptias
committed
Make sidebar collabsile & fix scrolling
1 parent b68d5bd commit a998a7d

File tree

6 files changed

+68
-58
lines changed

6 files changed

+68
-58
lines changed

‎frontend/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const App: Component = () => {
5454
<Tab>Main</Tab>
5555
<Tab>Info</Tab>
5656
</TabList>
57-
<TabPanel flexGrow="1" maxHeight="calc(100vh - 40px)">
57+
<TabPanel flexGrow="1" display="flex" justifyContent="center" maxHeight="calc(100vh - 40px)">
5858
<AppRoutes />
5959
</TabPanel>
6060
<TabPanel>

‎frontend/Filters.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Filters: Component<{
1515
onChange: (search: Search) => void;
1616
}> = (props) => {
1717
return (
18-
<Flex justifyContent="flex-start" gap="$5">
18+
<Flex justifyContent="flex-start" gap="$5" mb="$1">
1919
<Filter
2020
label="instanceId"
2121
entries={instanceIdEntries()}

‎frontend/InstancesButtons.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Component } from "solid-js";
1+
import { Component, Show } from "solid-js";
22
import { Button, notificationService, Flex, Tooltip } from "@hope-ui/solid";
33

44
import type { Instance } from "../types/instance";
@@ -10,6 +10,8 @@ This wipes out any localStorage and sessionStorage on each client, and reloads t
1010

1111
const InstancesButtons: Component<{
1212
onAfterAdd?: (instanceId: string) => void;
13+
show_messages_button: boolean;
14+
onOpenMessages: () => void;
1315
}> = (props) => {
1416
const handleAddInstance = async () => {
1517
const instanceData: Instance = await (
@@ -44,6 +46,9 @@ const InstancesButtons: Component<{
4446
<Tooltip label={CLEAR_INFO}>
4547
<Button colorScheme="neutral" size="xs" onClick={handleClear}>Reset</Button>
4648
</Tooltip>
49+
<Show when={props.show_messages_button} >
50+
<Button colorScheme="neutral" size="xs" onClick={props.onOpenMessages}>Open Messages</Button>
51+
</Show>
4752
</Flex>
4853
);
4954
};

‎frontend/Main.tsx

+56-26
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { Component, For, createSignal, Setter } from "solid-js";
1+
import { Component, For, createSignal, Setter, Show } from "solid-js";
22
import {
33
Flex,
44
Box,
55
createDisclosure,
66
Heading,
7+
Button,
78
} from "@hope-ui/solid";
89

910
import { instances } from "./store";
@@ -23,38 +24,67 @@ const Main: Component = () => {
2324
onOpen();
2425
return setSearch(value);
2526
};
26-
2727
const { isOpen, onOpen, onClose } = createDisclosure({ defaultIsOpen: true });
2828

2929
return (
3030
<>
3131
{
32-
<SplitView>
33-
<Flex flexDirection="column">
34-
<Flex mb="$1" justifyContent="space-between">
35-
<Heading level="1">Devices</Heading>
36-
<InstancesButtons
37-
onAfterAdd={(instanceId) => {
38-
scrollToInstance(instanceId);
39-
}}
40-
/>
32+
<Show when={isOpen()} fallback={
33+
<Flex>
34+
<Flex flexDirection="column">
35+
<Flex mb="$1" justifyContent="space-between">
36+
<Heading level="1">Devices</Heading>
37+
<InstancesButtons
38+
onAfterAdd={(instanceId) => {
39+
scrollToInstance(instanceId);
40+
}}
41+
show_messages_button={true}
42+
onOpenMessages={onOpen}
43+
/>
44+
</Flex>
45+
<Box overflow="auto" >
46+
<Flex flexWrap="wrap" gap="$5" justifyContent="center">
47+
<For each={instances()}>
48+
{(instance: InstanceData) => (
49+
<Instance instance={instance} setSearch={setSearchAndOpen} />
50+
)}
51+
</For>
52+
</Flex>
53+
</Box>
54+
</Flex>
4155
</Flex>
42-
<Box overflow="auto" >
43-
<Flex flexWrap="wrap" gap="$5" justifyContent="center">
44-
<For each={instances()}>
45-
{(instance: InstanceData) => (
46-
<Instance instance={instance} setSearch={setSearchAndOpen} />
47-
)}
48-
</For>
56+
}>
57+
<SplitView>
58+
<Flex flexDirection="column">
59+
<Flex mb="$1" justifyContent="space-between">
60+
<Heading level="1">Devices</Heading>
61+
<InstancesButtons
62+
onAfterAdd={(instanceId) => {
63+
scrollToInstance(instanceId);
64+
}}
65+
show_messages_button={false}
66+
onOpenMessages={() => {}}
67+
/>
4968
</Flex>
50-
</Box>
51-
</Flex>
52-
<Box overflow="auto">
53-
<Heading level="1" mb="1">Messages</Heading>
54-
<Sidebar search={search} setSearch={setSearchAndOpen} />
55-
</Box>
56-
</SplitView>
57-
69+
<Box overflow="auto" >
70+
<Flex flexWrap="wrap" gap="$5" justifyContent="center">
71+
<For each={instances()}>
72+
{(instance: InstanceData) => (
73+
<Instance instance={instance} setSearch={setSearchAndOpen} />
74+
)}
75+
</For>
76+
</Flex>
77+
</Box>
78+
</Flex>
79+
<Flex direction="column">
80+
<Flex justifyContent="space-between" marginBottom="$1">
81+
<Heading display="inline-block" level="1" mb="1">Messages</Heading>
82+
<Button colorScheme="neutral" size="xs" onClick={onClose}> Close Messages </Button>
83+
</Flex>
84+
<Sidebar search={search} setSearch={setSearchAndOpen} />
85+
</Flex>
86+
</SplitView>
87+
</Show>
5888
}
5989
</>
6090
);

‎frontend/Sidebar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, createSignal, Show, Accessor, Setter } from "solid-js";
2-
import { Flex, Box, Tabs, TabList, Tab, TabPanel } from "@hope-ui/solid";
2+
import { Flex, Tabs, TabList, Tab, TabPanel } from "@hope-ui/solid";
33

44
import { Message } from "../types/message";
55
import MessageDetails from "./MessageDetails";
@@ -22,7 +22,7 @@ const Sidebar: Component<{
2222
return (
2323
<Flex height="100%" flexDirection="column" overflow="auto">
2424
<Filters value={props.search()} onChange={props.setSearch} />
25-
<Tabs>
25+
<Tabs overflow="auto">
2626
<TabList>
2727
<Tab>Messages</Tab>
2828
<Tab>Chat</Tab>

‎frontend/SplitView.tsx

+2-27
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,9 @@
11

2-
import { Box, IconButton, Tooltip } from "@hope-ui/solid";
2+
import { Box } from "@hope-ui/solid";
33
import { Accessor } from "solid-js";
44
import { createMemo, ParentComponent, Component, JSX, createSignal, children } from "solid-js";
55
import { ResolvedJSXElement } from "solid-js/types/reactive/signal";
66

7-
8-
const SidebarButton: Component<{
9-
label: string;
10-
onClick: () => void;
11-
icon: JSX.Element;
12-
top: string;
13-
right: string;
14-
}> = (props) => {
15-
return (
16-
<Tooltip label={props.label}>
17-
<IconButton
18-
variant="ghost"
19-
size="sm"
20-
position="relative"
21-
top={props.top}
22-
right={props.right}
23-
onClick={props.onClick}
24-
aria-label={props.label}
25-
backgroundColor="white"
26-
icon={props.icon}
27-
/>
28-
</Tooltip>
29-
);
30-
};
31-
327
let x = 0;
338
let initialLeftWidth = 0;
349
const SplitView: ParentComponent<{
@@ -88,7 +63,7 @@ const SplitView: ParentComponent<{
8863
<div class="splitview-container-left" style={leftStyleGet()} ref={leftSide}>{resolvedChildren()[0]}</div>
8964
<div class="splitview-resizer" style={resizerStyleGet()} ref={resizer} onMouseDown={mouseDownHandler}></div>
9065
<div class="splitview-container-right" style={rightStyleGet()} ref={rightSide}>{resolvedChildren()[1]}</div>
91-
</Box>
66+
</Box>
9267
);
9368
};
9469

0 commit comments

Comments
 (0)