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

small css updates

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

28
packages/builder/assets/slack.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?> <?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" <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"> <style type="text/css">
.st0{fill:#E01E5A;} .st0{fill:#E01E5A;}
.st1{fill:#36C5F0;} .st1{fill:#36C5F0;}
@ -10,24 +10,24 @@
</style> </style>
<g> <g>
<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="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="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 <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
s-12.9-5.8-12.9-12.9V151.2z"/> C36.9,114.5,36.9,82.2,36.9,82.2z"/>
</g> </g>
<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="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="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 <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
s5.8-12.9,12.9-12.9H118.8z"/> C17.5,36.9,49.8,36.9,49.8,36.9z"/>
</g> </g>
<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="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="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 <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.9V118.8z"/> c7.1,0,12.9,5.8,12.9,12.9V49.8z"/>
</g> </g>
<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="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="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 <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.9H151.2z"/> c0,7.1-5.8,12.9-12.9,12.9H82.2z"/>
</g> </g>
</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" class="splitHeader"
> >
<div style="display: flex;"> <div class="center-items">
{#if externalActions[block.stepId]} {#if externalActions[block.stepId]}
<img <img
alt={externalActions[block.stepId].name} alt={externalActions[block.stepId].name}
width="35px" width="28px"
height="35px" height="28px"
src={externalActions[block.stepId].icon} src={externalActions[block.stepId].icon}
/> />
{:else} {:else}
<svg <svg
width="35px" width="28px"
height="35px" height="28px"
class="spectrum-Icon" class="spectrum-Icon"
style="color:grey;" style="color:grey;"
focusable="false" focusable="false"
@ -118,7 +118,7 @@
on:click|stopPropagation={() => { on:click|stopPropagation={() => {
setupToggled = !setupToggled setupToggled = !setupToggled
}} }}
class="toggle" class="center-items"
> >
{#if setupToggled} {#if setupToggled}
<Icon size="M" name="ChevronDown" /> <Icon size="M" name="ChevronDown" />
@ -142,7 +142,7 @@
/> />
{#if lastStep} {#if lastStep}
<Button on:click={() => testDataModal.show()} cta <Button on:click={() => testDataModal.show()} cta
>Continue and test automation</Button >Finish and test automation</Button
> >
{/if} {/if}
<Button <Button
@ -173,7 +173,7 @@
</div> </div>
<style> <style>
.toggle { .center-items {
display: flex; display: flex;
align-items: center; align-items: center;
} }

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

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

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

@ -48,23 +48,41 @@
cancelText="Cancel" cancelText="Cancel"
> >
<Tabs selected="Form" quiet <Tabs selected="Form" quiet
><Tab icon="Form" title="Form" ><Tab icon="Form" title="Form">
><AutomationBlockSetup <div class="tab-content-padding">
bind:testData <AutomationBlockSetup
{schemaProperties} bind:testData
block={trigger} {schemaProperties}
/></Tab block={trigger}
/>
</div></Tab
> >
<Tab icon="FileJson" title="JSON"> <Tab icon="FileJson" title="JSON">
<Label>JSON</Label><TextArea <div class="tab-content-padding">
value={JSON.stringify( <Label>JSON</Label>
$automationStore.selectedAutomation.automation.testData, <div class="text-area-container">
null, <TextArea
2 value={JSON.stringify(
)} $automationStore.selectedAutomation.automation.testData,
error={failedParse} null,
on:change={e => parseTestJSON(e)} 2
/> )}
error={failedParse}
on:change={e => parseTestJSON(e)}
/>
</div>
</div>
</Tab> </Tab>
</Tabs> </Tabs>
</ModalContent> </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 { automationStore } from "builderStore"
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte" import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.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] $: automation = $automationStore.automations[0]
let modal let modal
let webhookModal let webhookModal