75 lines
1.9 KiB
Svelte
75 lines
1.9 KiB
Svelte
<script>
|
|
import { Button, ActionButton } from "@budibase/bbui"
|
|
import { useSvelteFlow } from "@xyflow/svelte"
|
|
import { getContext } from "svelte"
|
|
import { ZoomDuration } from "./constants"
|
|
|
|
const { createRole, layoutAndFit } = getContext("flow")
|
|
const flow = useSvelteFlow()
|
|
</script>
|
|
|
|
<div class="control top-left">
|
|
<div class="group">
|
|
<ActionButton
|
|
icon="Add"
|
|
quiet
|
|
on:click={() => flow.zoomIn({ duration: ZoomDuration })}
|
|
/>
|
|
<ActionButton
|
|
icon="Remove"
|
|
quiet
|
|
on:click={() => flow.zoomOut({ duration: ZoomDuration })}
|
|
/>
|
|
</div>
|
|
<Button secondary on:click={layoutAndFit}>Auto layout</Button>
|
|
</div>
|
|
<div class="control bottom-right">
|
|
<Button icon="Add" cta on:click={createRole}>Add role</Button>
|
|
</div>
|
|
|
|
<style>
|
|
.control {
|
|
position: absolute;
|
|
z-index: 999;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.top-left {
|
|
top: 20px;
|
|
left: 20px;
|
|
}
|
|
.bottom-right {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
}
|
|
.top-left :global(.spectrum-Button),
|
|
.top-left :global(.spectrum-ActionButton),
|
|
.top-left :global(.spectrum-Icon) {
|
|
color: var(--spectrum-global-color-gray-900) !important;
|
|
}
|
|
.top-left :global(.spectrum-Button),
|
|
.top-left :global(.spectrum-ActionButton) {
|
|
background: var(--spectrum-global-color-gray-200) !important;
|
|
}
|
|
.top-left :global(.spectrum-Button:hover),
|
|
.top-left :global(.spectrum-ActionButton:hover) {
|
|
background: var(--spectrum-global-color-gray-300) !important;
|
|
}
|
|
.group {
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.group :global(> *:not(:first-child)) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left: 2px solid var(--spectrum-global-color-gray-300);
|
|
}
|
|
.group :global(> *:not(:last-child)) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
</style>
|