Skip to content

Commit 8818c8e

Browse files
kastovkastov
committed
feat: enhance UI components
- Updated the HostCardWidget and NodeCardWidget to improve layout and responsiveness using Grid components. - Incorporated Container components in HostsTableWidget and NodesTableWidget for better structure.
1 parent 77f016a commit 8818c8e

File tree

6 files changed

+202
-150
lines changed

6 files changed

+202
-150
lines changed

‎public/locales/en/remnawave.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@
332332
"limit": "Limit",
333333
"reset-day": "Reset day",
334334
"e-g-1-31": "e.g. 1-31",
335-
"notify-percent": "Notification threshold (%)",
335+
"notify-percent": "Notification %",
336336
"e-g-50": "e.g. 50",
337337
"select-active-inbounds-for-this-node": "Select active inbounds for this node",
338338
"inbounds": "Inbounds",
@@ -833,4 +833,4 @@
833833
"updated-at": "Updated At"
834834
}
835835
}
836-
}
836+
}

‎src/widgets/dashboard/hosts/host-card/host-card.widget.tsx‎

Lines changed: 87 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { ActionIcon, Badge, Box, Checkbox, Grid, Group, Text } from '@mantine/core'
12
import { PiDotsSixVertical, PiLock, PiProhibit, PiPulse } from 'react-icons/pi'
2-
import { ActionIcon, Badge, Box, Checkbox, Group, Text } from '@mantine/core'
33
import { Draggable } from '@hello-pangea/dnd'
44
import ColorHash from 'color-hash'
55
import { useState } from 'react'
@@ -29,7 +29,7 @@ export function HostCardWidget(props: IProps) {
2929
const isFiltered = selectedInboundTag !== 'ALL' && inbound.tag !== selectedInboundTag
3030
const isHostActive = !item.isDisabled
3131

32-
const ch = new ColorHash()
32+
const ch = new ColorHash({ lightness: [0.65, 0.65, 0.65] })
3333

3434
const handleEdit = () => {
3535
actions.setHost(item)
@@ -53,66 +53,101 @@ export function HostCardWidget(props: IProps) {
5353
ref={provided.innerRef}
5454
{...provided.draggableProps}
5555
>
56-
<Group gap="xs">
57-
<Checkbox checked={isSelected} onChange={onSelect} size="md" />
58-
59-
<div {...provided.dragHandleProps} className={classes.dragHandle}>
60-
{!isFiltered && <PiDotsSixVertical color="white" size="2rem" />}
61-
{isFiltered && (
62-
<PiLock color="white" size="2rem" style={{ opacity: 0.5 }} />
63-
)}
64-
</div>
65-
</Group>
56+
<Grid align="center" gutter="md">
57+
<Grid.Col span={{ base: 2, xs: 2, sm: 1 }}>
58+
<Group gap="xs" wrap="nowrap">
59+
<Checkbox checked={isSelected} onChange={onSelect} size="md" />
6660

61+
<Box {...provided.dragHandleProps} className={classes.dragHandle}>
62+
{!isFiltered && <PiDotsSixVertical color="white" size="2rem" />}
63+
{isFiltered && (
64+
<PiLock
65+
color="white"
66+
size="2rem"
67+
style={{ opacity: 0.5 }}
68+
/>
69+
)}
70+
</Box>
71+
</Group>
72+
</Grid.Col>
73+
</Grid>
6774
<Box
6875
onClick={handleEdit}
6976
onMouseEnter={() => setIsHovered(true)}
7077
onMouseLeave={() => setIsHovered(false)}
71-
style={{ cursor: 'pointer' }}
78+
style={{ cursor: 'pointer', width: '100%' }}
7279
>
73-
<Group gap="xs">
74-
<ActionIcon
75-
color={isHostActive ? 'teal' : 'gray'}
76-
radius="md"
77-
variant="light"
78-
>
79-
{isHostActive ? (
80-
<PiPulse
81-
size={18}
82-
style={{
83-
color: 'var(--mantine-color-teal-6)'
84-
}}
85-
/>
86-
) : (
87-
<PiProhibit
88-
size={18}
80+
<Grid align="center" gutter="md">
81+
<Grid.Col span={{ base: 12, xs: 12, sm: 6, md: 4 }}>
82+
<Group>
83+
<ActionIcon
84+
color={isHostActive ? 'teal' : 'gray'}
85+
radius="md"
86+
variant="light"
87+
>
88+
{isHostActive ? (
89+
<PiPulse
90+
size={18}
91+
style={{
92+
color: 'var(--mantine-color-teal-6)'
93+
}}
94+
/>
95+
) : (
96+
<PiProhibit
97+
size={18}
98+
style={{
99+
color: 'var(--mantine-color-gray-6)'
100+
}}
101+
/>
102+
)}
103+
</ActionIcon>
104+
105+
<Badge
106+
autoContrast
107+
color={ch.hex(item.inboundUuid)}
108+
radius="md"
109+
size="lg"
89110
style={{
90-
color: 'var(--mantine-color-gray-6)'
111+
width: '100%',
112+
maxWidth: '200px',
113+
overflow: 'hidden',
114+
textOverflow: 'ellipsis'
91115
}}
92-
/>
93-
)}
94-
</ActionIcon>
95-
96-
<Badge
97-
autoContrast
98-
color={ch.hex(item.inboundUuid)}
99-
miw={'15ch'}
100-
radius="md"
101-
size="lg"
102-
variant="light"
103-
>
104-
{inbound.tag}
105-
</Badge>
116+
variant="light"
117+
>
118+
{inbound.tag}
119+
</Badge>
120+
</Group>
121+
</Grid.Col>
106122

107-
<Text className={classes.label} fw={400} miw={'40ch'}>
108-
{item.remark}
109-
</Text>
123+
<Grid.Col span={{ base: 12, xs: 12, sm: 6, md: 4 }}>
124+
<Text
125+
className={classes.label}
126+
fw={400}
127+
style={{
128+
overflow: 'hidden',
129+
textOverflow: 'ellipsis',
130+
whiteSpace: 'nowrap'
131+
}}
132+
>
133+
{item.remark}
134+
</Text>
135+
</Grid.Col>
110136

111-
<Text className={classes.hostInfoLabel} miw={'40ch'}>
112-
{item.address}
113-
{item.port ? `:${item.port}` : ''}
114-
</Text>
115-
</Group>
137+
<Grid.Col span={{ base: 12, xs: 12, sm: 12, md: 3 }}>
138+
<Text
139+
className={classes.hostInfoLabel}
140+
style={{
141+
overflow: 'hidden',
142+
textOverflow: 'ellipsis',
143+
whiteSpace: 'nowrap'
144+
}}
145+
>
146+
{item.address}
147+
{item.port ? `:${item.port}` : ''}
148+
</Text>
149+
</Grid.Col>
150+
</Grid>
116151
</Box>
117152
</Box>
118153
)}

‎src/widgets/dashboard/hosts/hosts-table/hosts-table.widget.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd'
22
import { useListState } from '@mantine/hooks'
3+
import { Container } from '@mantine/core'
34
import { useEffect } from 'react'
45

56
import { HostCardWidget } from '@widgets/dashboard/hosts/host-card'
@@ -64,7 +65,12 @@ export function HostsTableWidget(props: IProps) {
6465
<DragDropContext onDragEnd={handleDragEnd}>
6566
<Droppable direction="vertical" droppableId="dnd-list">
6667
{(provided) => (
67-
<div {...provided.droppableProps} ref={provided.innerRef}>
68+
<Container
69+
p={0}
70+
size={'lg'}
71+
{...provided.droppableProps}
72+
ref={provided.innerRef}
73+
>
6874
{state.map((item, index) => (
6975
<div key={item.uuid} style={{ position: 'relative' }}>
7076
<HostCardWidget
@@ -77,7 +83,7 @@ export function HostsTableWidget(props: IProps) {
7783
</div>
7884
))}
7985
{provided.placeholder}
80-
</div>
86+
</Container>
8187
)}
8288
</Droppable>
8389
</DragDropContext>

‎src/widgets/dashboard/nodes/node-card/NodeCard.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
.hostInfoLabel {
3030
font-family: var(--mantine-font-family-monospace);
31+
font-weight: 300;
3132
font-size: var(--mantine-font-size-sm);
3233
line-height: 1.3;
3334
color: var(--mantine-color-dimmed);

0 commit comments

Comments
 (0)