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

initial styling and input updates for naming

This commit is contained in:
Peter Clement 2023-10-17 11:51:23 +01:00
parent 26cecf2543
commit 5f2b4f3ef9
2 changed files with 133 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
View File

@ -104,13 +104,19 @@
} }
</script> </script>
<div class={`block ${block.type} hoverable`} class:selected on:click={() => {}}> <div
class={`block ${block.type} hoverable`}
class:selected
on:keydown={() => {}}
on:click={() => {}}
>
{#if loopBlock} {#if loopBlock}
<div class="blockSection"> <div class="blockSection">
<div <div
on:click={() => { on:click={() => {
showLooping = !showLooping showLooping = !showLooping
}} }}
on:keydown={() => {}}
class="splitHeader" class="splitHeader"
> >
<div class="center-items"> <div class="center-items">
@ -129,7 +135,11 @@
</div> </div>
<div class="blockTitle"> <div class="blockTitle">
<div style="margin-left: 10px;" on:click={() => {}}> <div
style="margin-left: 10px;"
on:keydown={() => {}}
on:click={() => {}}
>
<Icon hoverable name={showLooping ? "ChevronDown" : "ChevronUp"} /> <Icon hoverable name={showLooping ? "ChevronDown" : "ChevronUp"} />
</div> </div>
</div> </div>

130
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { automationStore } from "builderStore" import { automationStore, selectedAutomation } from "builderStore"
import { Icon, Body, Detail, StatusLight } from "@budibase/bbui" import { Icon, Body, StatusLight, AbsTooltip } from "@budibase/bbui"
import { externalActions } from "./ExternalActions" import { externalActions } from "./ExternalActions"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
@ -11,6 +11,13 @@
export let isTrigger export let isTrigger
export let idx export let idx
$: console.log($selectedAutomation)
let validRegex = /^[A-Za-z0-9_\s]+$/
let typing = false
let automationName = block?.name || ""
$: automationNameError = getAutomationNameError(automationName)
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
$: { $: {
@ -21,6 +28,7 @@
} }
} }
$: isTrigger = isTrigger || block.type === "TRIGGER" $: isTrigger = isTrigger || block.type === "TRIGGER"
$: status = updateStatus(testResult, isTrigger) $: status = updateStatus(testResult, isTrigger)
async function onSelect(block) { async function onSelect(block) {
@ -43,10 +51,26 @@
return { negative: true, message: "Error" } return { negative: true, message: "Error" }
} }
} }
const getAutomationNameError = name => {
let invalidRoleName = !validRegex.test(name)
if (invalidRoleName) {
return "Please enter a role name consisting of only alphanumeric symbols and underscores"
}
return null
}
const startTyping = async () => {
typing = true
}
</script> </script>
<div class="blockSection"> <div
<div on:click={() => dispatch("toggle")} class="splitHeader"> class:typing={typing && !automationNameError}
class:typing-error={automationNameError}
class="blockSection"
>
<div class="splitHeader">
<div class="center-items"> <div class="center-items">
{#if externalActions[block.stepId]} {#if externalActions[block.stepId]}
<img <img
@ -69,12 +93,29 @@
<div class="iconAlign"> <div class="iconAlign">
{#if isTrigger} {#if isTrigger}
<Body size="XS"><b>Trigger</b></Body> <Body size="XS"><b>Trigger</b></Body>
<Body size="XS">When this happens:</Body>
{:else} {:else}
<Body size="XS"><b>Step {idx}</b></Body> <Body size="XS"><b>Step {idx}</b></Body>
<Body size="XS">Do this:</Body>
{/if} {/if}
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail> <input
placeholder="Enter some text"
name="name"
on:input={e => {
automationNameError = getAutomationNameError(e.target.value)
automationName = e.target.value
if (!automationNameError) {
automationNameError = false // Reset the error when input is valid
}
}}
value={automationName}
on:click={startTyping}
on:blur={() => {
typing = false
if (automationNameError) {
automationName = block?.name
automationNameError = null
}
}}
/>
</div> </div>
</div> </div>
<div class="blockTitle"> <div class="blockTitle">
@ -89,18 +130,46 @@
</div> </div>
{/if} {/if}
<div <div
style="margin-left: 10px; margin-bottom: var(--spacing-xs);" class="context-actions"
class:hide-context-actions={typing}
on:click={() => { on:click={() => {
onSelect(block) onSelect(block)
}} }}
> >
<Icon hoverable name={open ? "ChevronUp" : "ChevronDown"} /> {#if !showTestStatus}
<AbsTooltip type="info" text="Add looping">
<Icon hoverable name="RotateCW" />
</AbsTooltip>
<AbsTooltip type="negative" text="Delete step">
<Icon hoverable name="DeleteOutline" />
</AbsTooltip>
{/if}
<Icon
on:click={() => dispatch("toggle")}
hoverable
name={open ? "ChevronUp" : "ChevronDown"}
/>
</div> </div>
{#if automationNameError}
<div class="error-container">
<AbsTooltip type="negative" text={automationNameError}>
<div class="error-icon">
<Icon size="S" name="Alert" />
</div>
</AbsTooltip>
</div>
{/if}
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.context-actions {
display: flex;
gap: var(--spacing-l);
margin-left: 10px;
margin-bottom: var(--spacing-xs);
}
.center-items { .center-items {
display: flex; display: flex;
align-items: center; align-items: center;
@ -123,4 +192,47 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.hide-context-actions {
display: none;
}
input {
font-family: var(--font-sans);
color: var(--ink);
background-color: transparent;
border: none;
font-size: var(--spectrum-alias-font-size-default);
width: 260px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
input:focus {
outline: none;
}
/* Hide arrows for number fields */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.typing {
border: 0.5px solid var(--spectrum-global-color-static-blue-500);
}
.typing-error {
border: 0.5px solid var(--spectrum-global-color-static-red-500);
}
.error-icon :global(.spectrum-Icon) {
fill: var(--spectrum-global-color-red-400);
}
.error-container {
padding-top: var(--spacing-xl);
}
</style> </style>