CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 01:56:57 +13:00
Code Issues Projects Releases Wiki Activity

small css updates

Browse source
This commit is contained in:
Peter Clement 2021-09-15 11:52:42 +01:00
parent c898c7d8d5
commit 9cd63c2223
5 changed files with 88 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/builder/assets/slack.svg
View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;" xml:space="preserve">
viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E01E5A;}
.st1{fill:#36C5F0;}
@ -10,24 +10,24 @@
</style>
<g>
<g>
<path class="st0" d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
<path class="st0" d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9
s-12.9-5.8-12.9-12.9V151.2z"/>
<path class="st0" d="M30.4,82.2c0,7.1-5.8,12.9-12.9,12.9S4.6,89.3,4.6,82.2c0-7.1,5.8-12.9,12.9-12.9h12.9V82.2z"/>
<path class="st0" d="M36.9,82.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
C36.9,114.5,36.9,82.2,36.9,82.2z"/>
</g>
<g>
<path class="st1" d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
<path class="st1" d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9
s5.8-12.9,12.9-12.9H118.8z"/>
<path class="st1" d="M49.8,30.4c-7.1,0-12.9-5.8-12.9-12.9S42.7,4.6,49.8,4.6s12.9,5.8,12.9,12.9v12.9H49.8z"/>
<path class="st1" d="M49.8,36.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H17.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9
C17.5,36.9,49.8,36.9,49.8,36.9z"/>
</g>
<g>
<path class="st2" d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
<path class="st2" d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
<path class="st2" d="M101.6,49.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V49.8z"/>
<path class="st2" d="M95.1,49.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V17.5c0-7.1,5.8-12.9,12.9-12.9
c7.1,0,12.9,5.8,12.9,12.9V49.8z"/>
</g>
<g>
<path class="st3" d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
<path class="st3" d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
<path class="st3" d="M82.2,101.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H82.2z"/>
<path class="st3" d="M82.2,95.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
c0,7.1-5.8,12.9-12.9,12.9H82.2z"/>
</g>
</g>
</svg>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

16
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
View file

@ -73,18 +73,18 @@
}}
class="splitHeader"
>
<div style="display: flex;">
<div class="center-items">
{#if externalActions[block.stepId]}
<img
alt={externalActions[block.stepId].name}
width="35px"
height="35px"
width="28px"
height="28px"
src={externalActions[block.stepId].icon}
/>
{:else}
<svg
width="35px"
height="35px"
width="28px"
height="28px"
class="spectrum-Icon"
style="color:grey;"
focusable="false"
@ -118,7 +118,7 @@
on:click|stopPropagation={() => {
setupToggled = !setupToggled
}}
class="toggle"
class="center-items"
>
{#if setupToggled}
<Icon size="M" name="ChevronDown" />
@ -142,7 +142,7 @@
/>
{#if lastStep}
<Button on:click={() => testDataModal.show()} cta
>Continue and test automation</Button
>Finish and test automation</Button
>
{/if}
<Button
@ -173,7 +173,7 @@
</div>
<style>
.toggle {
.center-items {
display: flex;
align-items: center;
}

36
packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
View file

@ -1,5 +1,5 @@
<script>
import { ModalContent, Icon, Detail, Badge, TextArea } from "@budibase/bbui"
import { ModalContent, Icon, Detail, TextArea } from "@budibase/bbui"
export let testResult
export let isTrigger
@ -16,9 +16,13 @@
<div slot="header">
<div style="float: right;">
{#if isTrigger || testResult[0].outputs.success}
<Badge green><Icon size="S" name="CheckmarkCircle" /></Badge>
<div class="iconSuccess">
<Icon size="S" name="CheckmarkCircle" />
</div>
{:else}
<Badge red><Icon size="S" name="CloseCircle" /></Badge>
<div class="iconFailure">
<Icon size="S" name="CloseCircle" />
</div>
{/if}
</div>
</div>
@ -45,7 +49,12 @@
</div>
</div>
{#if inputToggled}
<TextArea disabled value={JSON.stringify(testResult[0].inputs, null, 2)} />
<div class="text-area-container">
<TextArea
disabled
value={JSON.stringify(testResult[0].inputs, null, 2)}
/>
</div>
{/if}
<div
@ -70,11 +79,24 @@
</div>
</div>
{#if outputToggled}
<TextArea disabled value={JSON.stringify(testResult[0].outputs, null, 2)} />
<div class="text-area-container">
<TextArea
disabled
value={JSON.stringify(testResult[0].outputs, null, 2)}
/>
</div>
{/if}
</ModalContent>
<style>
.iconSuccess {
color: var(--spectrum-global-color-green-600);
}
.iconFailure {
color: var(--spectrum-global-color-red-600);
}
.splitHeader {
cursor: pointer;
display: flex;
@ -85,4 +107,8 @@
display: flex;
align-items: center;
}
.text-area-container :global(textarea) {
height: 150px;
}
</style>

48
packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
View file

@ -48,23 +48,41 @@
cancelText="Cancel"
>
<Tabs selected="Form" quiet
><Tab icon="Form" title="Form"
><AutomationBlockSetup
bind:testData
{schemaProperties}
block={trigger}
/></Tab
><Tab icon="Form" title="Form">
<div class="tab-content-padding">
<AutomationBlockSetup
bind:testData
{schemaProperties}
block={trigger}
/>
</div></Tab
>
<Tab icon="FileJson" title="JSON">
<Label>JSON</Label><TextArea
value={JSON.stringify(
$automationStore.selectedAutomation.automation.testData,
null,
2
)}
error={failedParse}
on:change={e => parseTestJSON(e)}
/>
<div class="tab-content-padding">
<Label>JSON</Label>
<div class="text-area-container">
<TextArea
value={JSON.stringify(
$automationStore.selectedAutomation.automation.testData,
null,
2
)}
error={failedParse}
on:change={e => parseTestJSON(e)}
/>
</div>
</div>
</Tab>
</Tabs>
</ModalContent>
<style>
.text-area-container :global(textarea) {
min-height: 200px;
height: 200px;
}
.tab-content-padding {
padding: 0 var(--spacing-xl);
}
</style>

2
packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
View file

@ -3,7 +3,7 @@
import { automationStore } from "builderStore"
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
$: automation = $automationStore.automations[0]
let modal
let webhookModal