vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 05:36:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to Mantine v8 and Design Changes (#961)

Browse Source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff
2025-06-24 00:04:36 -07:00
committed by GitHub
parent bea55d48a8
commit c1330d92b2
473 changed files with 12469 additions and 11607 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/sidebar/components/action-bar.tsx
+61 -122
View File
@@ -1,24 +1,17 @@
import { Grid, Group } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { RiArrowLeftSLine, RiArrowRightSLine, RiMenuFill, RiSearchLine } from 'react-icons/ri';
import { useNavigate } from 'react-router';
import styled from 'styled-components';
import { Button, DropdownMenu, TextInput } from '/@/renderer/components';
import styles from './action-bar.module.css';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { useContainerQuery } from '/@/renderer/hooks';
import { useCommandPalette } from '/@/renderer/store';
const ActionsContainer = styled.div`
display: flex;
align-items: center;
height: 70px;
-webkit-app-region: drag;
input {
-webkit-app-region: no-drag;
}
`;
import { Button } from '/@/shared/components/button/button';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Grid } from '/@/shared/components/grid/grid';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { TextInput } from '/@/shared/components/text-input/text-input';
export const ActionBar = () => {
const { t } = useTranslation();
@@ -27,114 +20,60 @@ export const ActionBar = () => {
const { open } = useCommandPalette();
return (
<ActionsContainer ref={cq.ref}>
{cq.isMd ? (
<Grid
display="flex"
gutter="sm"
px="1rem"
w="100%"
>
<Grid.Col span={6}>
<TextInput
icon={<RiSearchLine />}
onClick={open}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
open();
}
}}
placeholder={t('common.search', { postProcess: 'titleCase' })}
readOnly
size="md"
/>
</Grid.Col>
<Grid.Col span={6}>
<Group
grow
noWrap
spacing="sm"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p="0.5rem"
size="md"
variant="default"
>
<RiMenuFill size="1rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
onClick={() => navigate(-1)}
p="0.5rem"
size="md"
variant="default"
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
onClick={() => navigate(1)}
p="0.5rem"
size="md"
variant="default"
>
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
</Grid.Col>
</Grid>
) : (
<Group
grow
px="1rem"
spacing="sm"
w="100%"
>
<Button
<div
className={styles.container}
ref={cq.ref}
>
<Grid
display="flex"
gutter="sm"
px="1rem"
w="100%"
>
<Grid.Col span={6}>
<TextInput
leftSection={<Icon icon="search" />}
onClick={open}
p="0.5rem"
size="md"
variant="default"
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
open();
}
}}
placeholder={t('common.search', { postProcess: 'titleCase' })}
readOnly
/>
</Grid.Col>
<Grid.Col span={6}>
<Group
gap="sm"
grow
wrap="nowrap"
>
<RiSearchLine size="1rem" />
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p="0.5rem"
size="md"
variant="default"
>
<RiMenuFill size="1rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
onClick={() => navigate(-1)}
p="0.5rem"
size="md"
variant="default"
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
onClick={() => navigate(1)}
p="0.5rem"
size="md"
variant="default"
>
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
)}
</ActionsContainer>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button p="0.5rem">
<Icon icon="menu" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
onClick={() => navigate(-1)}
p="0.5rem"
>
<Icon icon="arrowLeftS" />
</Button>
<Button
onClick={() => navigate(1)}
p="0.5rem"
>
<Icon icon="arrowRightS" />
</Button>
</Group>
</Grid.Col>
</Grid>
</div>
);
};