MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update styles of handles and edges

This commit is contained in:
Andrew Kingston 2024-09-12 15:53:25 +01:00
parent 6f9175168b
commit d80d38196f
No known key found for this signature in database
3 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
View File

@ -5,7 +5,7 @@
EdgeLabelRenderer, EdgeLabelRenderer,
useSvelteFlow, useSvelteFlow,
} from "@xyflow/svelte" } from "@xyflow/svelte"
import { Icon } from "@budibase/bbui" import { Icon, ActionButton } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount } from "svelte"
export let sourceX export let sourceX
@ -104,6 +104,9 @@
background: var(--background-color); background: var(--background-color);
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
} }
.edge-label :global(svg) {
padding: 8px;
}
:global(.svelte-flow__edge:hover .svelte-flow__edge-path), :global(.svelte-flow__edge:hover .svelte-flow__edge-path),
:global(.svelte-flow__edge-path.hovered) { :global(.svelte-flow__edge-path.hovered) {
stroke: var(--spectrum-global-color-blue-400); stroke: var(--spectrum-global-color-blue-400);

3
packages/builder/src/components/backend/RoleEditor/RoleEditor.svelte
View File

@ -70,6 +70,8 @@
--handle-color: var(--spectrum-global-color-gray-600); --handle-color: var(--spectrum-global-color-gray-600);
--selected-color: var(--spectrum-global-color-blue-400); --selected-color: var(--spectrum-global-color-blue-400);
} }
/* Customise svelte-flow theme */
.flow :global(.svelte-flow) { .flow :global(.svelte-flow) {
/* Panel */ /* Panel */
--xy-background-color: var(--background-color); --xy-background-color: var(--background-color);
@ -87,5 +89,6 @@
/* Edges */ /* Edges */
--xy-edge-stroke: var(--edge-color); --xy-edge-stroke: var(--edge-color);
--xy-edge-stroke-selected: var(--edge-color); --xy-edge-stroke-selected: var(--edge-color);
--xy-edge-stroke-width: 2px;
} }
</style> </style>

5
packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
View File

@ -212,6 +212,11 @@
.node:hover .buttons { .node:hover .buttons {
display: flex; display: flex;
} }
.node :global(.svelte-flow__handle) {
width: 6px;
height: 6px;
border-width: 2px;
}
.node :global(.svelte-flow__handle.target) { .node :global(.svelte-flow__handle.target) {
background: var(--background-color); background: var(--background-color);
} }