admin/flowgram.ai
1
0
Fork 0
mirror of https://gitee.com/ByteDance/flowgram.ai.git synced 2025-07-07 17:43:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(free-demo): beautify tools style

Browse Source
This commit is contained in:
liuyangxing 2025-02-21 16:10:52 +08:00
parent 3c625c0e9a
commit 08f8fe335f
5 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/demo-free-layout/src/components/add-node/index.tsx
View File

@ -12,7 +12,7 @@ export const AddNode = (props: { disabled: boolean }) => {
return ( return (
<Popover <Popover
visible={visible} visible={visible}
onVisibleChange={props.disabled ? () => {} : setVisible} onVisibleChange={props.disabled ? () => { } : setVisible}
content={!props.disabled && <NodeList />} content={!props.disabled && <NodeList />}
placement="right" placement="right"
trigger="click" trigger="click"
@ -21,7 +21,7 @@ export const AddNode = (props: { disabled: boolean }) => {
padding: 0, padding: 0,
}} }}
> >
<Button icon={<IconPlus />} color="highlight" disabled={props.disabled}> <Button icon={<IconPlus />} color="highlight" style={{ backgroundColor: "rgba(171,181,255,0.3)", borderRadius: "8px" }} disabled={props.disabled}>
Add Node Add Node
</Button> </Button>
</Popover> </Popover>

4
apps/demo-free-layout/src/components/tools/auto-layout.tsx
View File

@ -26,7 +26,9 @@ export const AutoLayout = () => {
return ( return (
<Tooltip content={'Auto Layout'}> <Tooltip content={'Auto Layout'}>
<IconButton onClick={autoLayout} icon={icon} /> <IconButton
type="tertiary"
theme="borderless" onClick={autoLayout} icon={icon} />
</Tooltip> </Tooltip>
); );
}; };

5
apps/demo-free-layout/src/components/tools/index.tsx
View File

@ -49,6 +49,8 @@ export const DemoTools = () => {
<Readonly /> <Readonly />
<Tooltip content="Undo"> <Tooltip content="Undo">
<IconButton <IconButton
type="tertiary"
theme="borderless"
icon={<IconUndo />} icon={<IconUndo />}
disabled={!canUndo} disabled={!canUndo}
onClick={() => history.undo()} onClick={() => history.undo()}
@ -56,6 +58,8 @@ export const DemoTools = () => {
</Tooltip> </Tooltip>
<Tooltip content="Redo"> <Tooltip content="Redo">
<IconButton <IconButton
type="tertiary"
theme="borderless"
icon={<IconRedo />} icon={<IconRedo />}
disabled={!canRedo} disabled={!canRedo}
onClick={() => history.redo()} onClick={() => history.redo()}
@ -63,6 +67,7 @@ export const DemoTools = () => {
</Tooltip> </Tooltip>
<Divider layout="vertical" style={{ height: '16px' }} margin={3} /> <Divider layout="vertical" style={{ height: '16px' }} margin={3} />
<AddNode disabled={playground.config.readonly} /> <AddNode disabled={playground.config.readonly} />
<Divider layout="vertical" style={{ height: '16px' }} margin={3} />
<Save disabled={playground.config.readonly} /> <Save disabled={playground.config.readonly} />
</ToolSection> </ToolSection>
</ToolContainer> </ToolContainer>

2
apps/demo-free-layout/src/components/tools/minimap-switch.tsx
View File

@ -11,6 +11,8 @@ export const MinimapSwitch = (props: {
return ( return (
<Tooltip content="Minimap"> <Tooltip content="Minimap">
<IconButton <IconButton
type="tertiary"
theme="borderless"
icon={<UIIconGridRectangle visible={minimapVisible} />} icon={<UIIconGridRectangle visible={minimapVisible} />}
onClick={() => setMinimapVisible(!minimapVisible)} onClick={() => setMinimapVisible(!minimapVisible)}
/> />

4
apps/demo-free-layout/src/components/tools/save.tsx
View File

@ -42,14 +42,14 @@ export function Save(props: { disabled: boolean }) {
if (errorCount === 0) { if (errorCount === 0) {
return ( return (
<Button disabled={props.disabled} onClick={onSave}> <Button disabled={props.disabled} onClick={onSave} style={{ backgroundColor: "rgba(171,181,255,0.3)", borderRadius: "8px" }}>
Save Save
</Button> </Button>
); );
} }
return ( return (
<Badge count={errorCount} position="rightTop" type="danger"> <Badge count={errorCount} position="rightTop" type="danger">
<Button type="danger" disabled={props.disabled} onClick={onSave}> <Button type="danger" disabled={props.disabled} onClick={onSave} style={{ backgroundColor: "rgba(255, 179, 171, 0.3)", borderRadius: "8px" }} > 
Save Save
</Button> </Button>
</Badge> </Badge>