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

Fix edge issue

This commit is contained in:
Andrew Kingston 2024-09-16 13:47:57 +01:00
parent e7916c55f7
commit 518f29030f
No known key found for this signature in database
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
View File

@ -241,8 +241,6 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
--background-color: var(--spectrum-global-color-gray-50); --background-color: var(--spectrum-global-color-gray-50);
--node-background: var(--spectrum-global-color-gray-100);
--node-background-hover: var(--spectrum-global-color-gray-300);
--border-color: var(--spectrum-global-color-gray-300); --border-color: var(--spectrum-global-color-gray-300);
--edge-color: var(--spectrum-global-color-gray-500); --edge-color: var(--spectrum-global-color-gray-500);
--handle-color: var(--spectrum-global-color-gray-600); --handle-color: var(--spectrum-global-color-gray-600);
@ -255,8 +253,6 @@
--xy-background-color: var(--background-color); --xy-background-color: var(--background-color);
/* Controls */ /* Controls */
--xy-controls-button-background-color: var(--node-background);
--xy-controls-button-background-color-hover: var(--node-background-hover);
--xy-controls-button-border-color: var(--border-color); --xy-controls-button-border-color: var(--border-color);
/* Handles */ /* Handles */

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

@ -1,5 +1,5 @@
<script> <script>
import { Handle, Position, useSvelteFlow, NodeToolbar } from "@xyflow/svelte" import { Handle, Position, useSvelteFlow } from "@xyflow/svelte"
import { import {
Icon, Icon,
Input, Input,
@ -9,9 +9,8 @@
FieldLabel, FieldLabel,
} from "@budibase/bbui" } from "@budibase/bbui"
import { Roles } from "constants/backend" import { Roles } from "constants/backend"
import { NodeWidth, NodeHeight, MaxAutoZoom, ZoomDuration } from "./constants" import { NodeWidth, NodeHeight } from "./constants"
import { getContext } from "svelte" import { getContext } from "svelte"
import { autoLayout } from "./layout"
import { roles } from "stores/builder" import { roles } from "stores/builder"
export let data export let data
@ -31,6 +30,7 @@
$: descriptionError = validateDescription(tempDescription) $: descriptionError = validateDescription(tempDescription)
$: invalid = nameError || descriptionError $: invalid = nameError || descriptionError
$: targetClasses = `target${$dragging ? "" : " hidden"}` $: targetClasses = `target${$dragging ? "" : " hidden"}`
$: sourceClasses = `source${selected ? "" : " hidden"}`
const validateName = (name, roles) => { const validateName = (name, roles) => {
if (!name?.length) { if (!name?.length) {
@ -102,8 +102,8 @@
isConnectable={$dragging} isConnectable={$dragging}
/> />
{/if} {/if}
{#if id !== Roles.ADMIN && selected} {#if id !== Roles.ADMIN}
<Handle type="source" position={Position.Right} /> <Handle type="source" position={Position.Right} class={sourceClasses} />
{/if} {/if}
</div> </div>
@ -136,7 +136,7 @@
<style> <style>
.node { .node {
position: relative; position: relative;
background: var(--node-background); background: var(--spectrum-global-color-gray-100);
border-radius: 4px; border-radius: 4px;
width: var(--width); width: var(--width);
height: var(--height); height: var(--height);
@ -145,6 +145,10 @@
gap: 12px; gap: 12px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
transition: background 130ms ease-out;
}
.node:hover {
background: var(--spectrum-global-color-gray-200);
} }
.node.selected { .node.selected {
background: var(--spectrum-global-color-blue-100); background: var(--spectrum-global-color-blue-100);