vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 12:30:12 +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/components/query-builder/index.tsx
+35 -26
View File
@@ -1,12 +1,13 @@
import { Group, Stack } from '@mantine/core';
import { AnimatePresence, motion } from 'framer-motion';
import { RiAddFill, RiAddLine, RiDeleteBinFill, RiMore2Line, RiRestartLine } from 'react-icons/ri';
import { AnimatePresence, motion } from 'motion/react';
import i18n from '/@/i18n/i18n';
import { Button } from '/@/renderer/components/button';
import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
import { Select } from '/@/renderer/components/select';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Select } from '/@/shared/components/select/select';
import { Stack } from '/@/shared/components/stack/stack';
import { QueryBuilderGroup, QueryBuilderRule } from '/@/shared/types/types';
const FILTER_GROUP_OPTIONS_DATA = [
@@ -99,10 +100,10 @@ export const QueryBuilder = ({
return (
<Stack
gap="sm"
ml={`${level * 10}px`}
spacing="sm"
>
<Group spacing="sm">
<Group gap="sm">
<Select
data={FILTER_GROUP_OPTIONS_DATA}
maxWidth={175}
@@ -111,28 +112,26 @@ export const QueryBuilder = ({
value={data.type}
width="20%"
/>
<Button
<ActionIcon
icon="add"
onClick={handleAddRule}
px={5}
size="sm"
tooltip={{ label: 'Add rule' }}
variant="default"
>
<RiAddLine size={20} />
</Button>
variant="subtle"
/>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p={0}
<ActionIcon
icon="ellipsisVertical"
size="sm"
style={{
padding: 0,
}}
variant="subtle"
>
<RiMore2Line size={20} />
</Button>
/>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item
icon={<RiAddFill />}
leftSection={<Icon icon="add" />}
onClick={handleAddRuleGroup}
>
Add rule group
@@ -140,7 +139,7 @@ export const QueryBuilder = ({
{level > 0 && (
<DropdownMenu.Item
icon={<RiDeleteBinFill />}
leftSection={<Icon icon="delete" />}
onClick={handleDeleteRuleGroup}
>
Remove rule group
@@ -150,15 +149,25 @@ export const QueryBuilder = ({
<>
<DropdownMenu.Divider />
<DropdownMenu.Item
$danger
icon={<RiRestartLine color="var(--danger-color)" />}
isDanger
leftSection={
<Icon
color="error"
icon="refresh"
/>
}
onClick={onResetFilters}
>
Reset to default
</DropdownMenu.Item>
<DropdownMenu.Item
$danger
icon={<RiDeleteBinFill color="var(--danger-color)" />}
isDanger
leftSection={
<Icon
color="error"
icon="delete"
/>
}
onClick={onClearFilters}
>
Clear filters
src/renderer/components/query-builder/query-builder-option.tsx
+13 -15
View File
@@ -1,10 +1,10 @@
import { Group } from '@mantine/core';
import { useState } from 'react';
import { RiSubtractLine } from 'react-icons/ri';
import { Button } from '/@/renderer/components/button';
import { NumberInput, TextInput } from '/@/renderer/components/input';
import { Select } from '/@/renderer/components/select';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { Select } from '/@/shared/components/select/select';
import { TextInput } from '/@/shared/components/text-input/text-input';
import { QueryBuilderRule } from '/@/shared/types/types';
type DeleteArgs = {
@@ -33,7 +33,7 @@ interface QueryOptionProps {
}
const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
const [numberRange, setNumberRange] = useState([0, 0]);
const [numberRange, setNumberRange] = useState<number[]>([0, 0]);
switch (type) {
case 'boolean':
@@ -63,7 +63,7 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
maxWidth={81}
onChange={(e) => {
const newRange = [e || 0, numberRange[1]];
const newRange = [Number(e) || 0, numberRange[1]];
setNumberRange(newRange);
onChange(newRange);
}}
@@ -74,7 +74,7 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
maxWidth={81}
onChange={(e) => {
const newRange = [numberRange[0], e || 0];
const newRange = [numberRange[0], Number(e) || 0];
setNumberRange(newRange);
onChange(newRange);
}}
@@ -189,8 +189,8 @@ export const QueryBuilderOption = ({
return (
<Group
gap="sm"
ml={ml}
spacing="sm"
>
<Select
data={filters}
@@ -231,16 +231,14 @@ export const QueryBuilderOption = ({
width="25%"
/>
)}
<Button
<ActionIcon
disabled={noRemove}
icon="remove"
onClick={handleDeleteRule}
px={5}
size="sm"
tooltip={{ label: 'Remove rule' }}
variant="default"
>
<RiSubtractLine size={20} />
</Button>
variant="subtle"
/>
</Group>
);
};