feat(free-demo): beautify tools style

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

View File

@ -21,7 +21,7 @@ export const AddNode = (props: { disabled: boolean }) => {
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
</Button>
</Popover>

View File

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

View File

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

View File

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

View File

@ -42,14 +42,14 @@ export function Save(props: { disabled: boolean }) {
if (errorCount === 0) {
return (
<Button disabled={props.disabled} onClick={onSave}>
<Button disabled={props.disabled} onClick={onSave} style={{ backgroundColor: "rgba(171,181,255,0.3)", borderRadius: "8px" }}>
Save
</Button>
);
}
return (
<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
</Button>
</Badge>