mirror of
https://github.com/jeffvli/feishin.git
synced 2026-06-18 01:14:22 +02:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
@@ -1,14 +1,17 @@
|
||||
import { Divider, Group, Stack } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import isElectron from 'is-electron';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
|
||||
|
||||
import { Button, Text, TimeoutButton } from '/@/renderer/components';
|
||||
import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
|
||||
import { ServerSection } from '/@/renderer/features/servers/components/server-section';
|
||||
import { useAuthStoreActions } from '/@/renderer/store';
|
||||
import { Button, TimeoutButton } from '/@/shared/components/button/button';
|
||||
import { Divider } from '/@/shared/components/divider/divider';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { Table } from '/@/shared/components/table/table';
|
||||
import { ServerListItem as ServerItem } from '/@/shared/types/domain-types';
|
||||
|
||||
const localSettings = isElectron() ? window.api.localSettings : null;
|
||||
@@ -54,17 +57,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<ServerSection
|
||||
title={
|
||||
<Group position="apart">
|
||||
<Text>
|
||||
{t('page.manageServers.serverDetails', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Text>
|
||||
</Group>
|
||||
}
|
||||
>
|
||||
<ServerSection title={null}>
|
||||
{edit ? (
|
||||
<EditServerForm
|
||||
onCancel={() => editHandlers.toggle()}
|
||||
@@ -73,36 +66,41 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
|
||||
/>
|
||||
) : (
|
||||
<Stack>
|
||||
<Group noWrap>
|
||||
<Stack>
|
||||
<Text>
|
||||
{t('page.manageServers.url', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Text>
|
||||
<Text>
|
||||
{t('page.manageServers.username', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Text>{server.url}</Text>
|
||||
<Text>{server.username}</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Table
|
||||
layout="fixed"
|
||||
variant="vertical"
|
||||
withTableBorder
|
||||
>
|
||||
<Table.Tbody>
|
||||
<Table.Tr>
|
||||
<Table.Th>
|
||||
{t('page.manageServers.url', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Table.Th>
|
||||
<Table.Td>{server.url}</Table.Td>
|
||||
</Table.Tr>
|
||||
<Table.Tr>
|
||||
<Table.Th>
|
||||
{t('page.manageServers.username', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Table.Th>
|
||||
<Table.Td>{server.username}</Table.Td>
|
||||
</Table.Tr>
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
<Group grow>
|
||||
<Button
|
||||
leftIcon={<RiEdit2Fill />}
|
||||
leftSection={<Icon icon="edit" />}
|
||||
onClick={() => handleEdit()}
|
||||
tooltip={{
|
||||
label: t('page.manageServers.editServerDetailsTooltip', {
|
||||
postProcess: 'sentenceCase',
|
||||
}),
|
||||
}}
|
||||
variant="subtle"
|
||||
>
|
||||
{t('common.edit')}
|
||||
{t('common.edit', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
@@ -110,9 +108,9 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
|
||||
</ServerSection>
|
||||
<Divider my="sm" />
|
||||
<TimeoutButton
|
||||
leftIcon={<RiDeleteBin2Line />}
|
||||
leftSection={<Icon icon="delete" />}
|
||||
timeoutProps={{ callback: handleDeleteServer, duration: 1000 }}
|
||||
variant="subtle"
|
||||
variant="state-error"
|
||||
>
|
||||
{t('page.manageServers.removeServer', { postProcess: 'sentenceCase' })}
|
||||
</TimeoutButton>
|
||||
|
||||
Reference in New Issue
Block a user