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

Improve responsiveness, handle scrolling and tidy up CSS in automations page

This commit is contained in:
Andrew Kingston 2020-09-23 12:24:57 +01:00
parent 1c2d90fe3d
commit e3fdd1ee46
9 changed files with 125 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
View File

@ -61,7 +61,7 @@
footer { footer {
position: absolute; position: absolute;
bottom: 20px; bottom: var(--spacing-xl);
right: 30px; right: 30px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -80,7 +80,7 @@
justify-content: center; justify-content: center;
} }
footer > button:first-child { footer > button:first-child {
margin-right: 20px; margin-right: var(--spacing-m);
} }
.play-button.highlighted { .play-button.highlighted {

2
packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
View File

@ -10,6 +10,6 @@
<style> <style>
svg { svg {
margin: 8px 0; margin: var(--spacing-m) 0;
} }
</style> </style>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 B

After

Width:  |  Height:  |  Size: 303 B

2
packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
View File

@ -37,7 +37,7 @@
<style> <style>
section { section {
position: absolute; position: absolute;
padding: 20px 40px; padding: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;

56
packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
View File

@ -46,22 +46,18 @@
flex-direction: column; flex-direction: column;
} }
i {
color: #adaec4;
}
i:hover {
cursor: pointer;
}
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: var(--spacing-xl) 0 0 0;
flex: 1; flex: 1;
} }
.live { i {
color: var(--primary); color: var(--grey-6);
}
i.live {
color: var(--purple);
} }
li { li {
@ -70,51 +66,23 @@
.automation-item { .automation-item {
display: flex; display: flex;
border-radius: 5px; flex-direction: row;
padding-left: 12px; justify-content: flex-start;
align-items: center; align-items: center;
height: 36px; border-radius: var(--border-radius-m);
margin-bottom: 4px; padding: var(--spacing-s) var(--spacing-m);
margin-bottom: var(--spacing-xs);
color: var(--ink); color: var(--ink);
} }
.automation-item i { .automation-item i {
font-size: 24px; font-size: 24px;
margin-right: 10px; margin-right: var(--spacing-m);
} }
.automation-item:hover { .automation-item:hover {
cursor: pointer; cursor: pointer;
background: var(--grey-1); background: var(--grey-1);
} }
.automation-item.selected { .automation-item.selected {
background: var(--grey-2); background: var(--grey-2);
} }
.new-automation-button {
cursor: pointer;
border: 1px solid var(--grey-4);
border-radius: 3px;
width: 100%;
padding: 8px 16px;
display: flex;
justify-content: center;
align-items: center;
background: white;
color: var(--ink);
font-size: 14px;
font-weight: 500;
transition: all 2ms;
}
.new-automation-button:hover {
background: var(--grey-1);
}
.icon {
color: var(--ink);
font-size: 16px;
margin-right: 4px;
}
</style> </style>

79
packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
View File

@ -22,67 +22,74 @@
} }
</script> </script>
<header> <div class="container">
<i class="ri-stackshare-line" /> <header>
Create Automation <i class="ri-stackshare-line" />
</header> Create Automation
<div> </header>
<Input bind:value={name} label="Name" /> <div class="content">
<Input bind:value={name} label="Name" />
</div>
<footer>
<a href="https://docs.budibase.com">
<i class="ri-information-line" />
<span>Learn about automations</span>
</a>
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!valid} on:click={createAutomation}>
Save
</ActionButton>
</footer>
</div> </div>
<footer>
<a href="https://docs.budibase.com">
<i class="ri-information-line" />
Learn about automations
</a>
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!valid} on:click={createAutomation}>Save</ActionButton>
</footer>
<style> <style>
.container {
padding: var(--spacing-xl);
}
header { header {
font-size: 24px; font-size: var(--font-size-xl);
color: var(--ink); color: var(--ink);
font-weight: bold; font-weight: bold;
padding: 30px; display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
} }
header i { header i {
margin-right: 10px; margin-right: var(--spacing-m);
font-size: 20px; font-size: 20px;
background: var(--blue-light); background: var(--purple);
color: var(--grey-4); color: var(--white);
padding: 8px; padding: var(--spacing-s);
border-radius: var(--border-radius-m);
display: inline-block;
} }
div { .content {
padding: 0 30px 30px 30px; padding: var(--spacing-xl) 0;
}
label {
font-size: 18px;
font-weight: 500;
} }
footer { footer {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-gap: 5px; grid-gap: var(--spacing-m);
grid-auto-columns: 3fr 1fr 1fr; grid-auto-columns: 3fr 1fr 1fr;
padding: 20px;
background: var(--grey-1);
border-radius: 0.5rem;
} }
footer a { footer a {
color: var(--primary); color: var(--ink);
font-size: 14px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none;
}
footer a span {
text-decoration: underline;
} }
footer i { footer i {
font-size: 20px; font-size: 20px;
margin-right: 10px; margin-right: var(--spacing-m);
text-decoration: none;
} }
</style> </style>

6
packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
View File

@ -20,7 +20,7 @@
class="hoverable" class="hoverable"
class:selected={selectedTab === 'ADD'} class:selected={selectedTab === 'ADD'}
on:click={() => (selectedTab = 'ADD')}> on:click={() => (selectedTab = 'ADD')}>
Add step Steps
</span> </span>
{/if} {/if}
</header> </header>
@ -37,11 +37,11 @@
background: none; background: none;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: var(--spacing-xl);
} }
.automation-header { .automation-header {
margin-right: 20px; margin-right: var(--spacing-xl);
} }
span:not(.selected) { span:not(.selected) {

27
packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
View File

@ -33,26 +33,15 @@
display: grid; display: grid;
grid-template-columns: 20px auto; grid-template-columns: 20px auto;
align-items: center; align-items: center;
margin-top: 16px; margin-top: var(--spacing-s);
padding: 12px; padding: var(--spacing-m);
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
} }
.automation-block:hover { .automation-block:hover {
background-color: var(--grey-1); background-color: var(--grey-1);
} }
.automation-block:first-child {
.automation-text { margin-top: 0;
margin-left: 16px;
}
.icon {
height: 40px;
width: 40px;
background: var(--blue-light);
display: flex;
align-items: center;
justify-content: center;
} }
i { i {
@ -60,14 +49,16 @@
font-size: 20px; font-size: 20px;
} }
h4 { .automation-text {
margin-left: 16px;
}
.automation-text h4 {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 0; margin-top: 0;
} }
.automation-text p {
p {
font-size: 12px; font-size: 12px;
color: var(--grey-7); color: var(--grey-7);
margin: 0; margin: 0;

109
packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
View File

@ -24,7 +24,9 @@
} }
function deleteAutomationBlock() { function deleteAutomationBlock() {
automationStore.actions.deleteAutomationBlock($automationStore.selectedBlock) automationStore.actions.deleteAutomationBlock(
$automationStore.selectedBlock
)
} }
async function testAutomation() { async function testAutomation() {
@ -56,10 +58,24 @@
Setup Setup
</span> </span>
</header> </header>
{#if $automationStore.selectedBlock} <div class="content">
<AutomationBlockSetup bind:block={$automationStore.selectedBlock} /> {#if $automationStore.selectedBlock}
<div class="buttons"> <AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
<Button green wide data-cy="save-automation-setup" on:click={saveAutomation}> {:else if $automationStore.selectedAutomation}
<div class="block-label">
Automation
<b>{automation.name}</b>
</div>
<Button secondary wide on:click={testAutomation}>Test Automation</Button>
{/if}
</div>
<div class="buttons">
{#if $automationStore.selectedBlock}
<Button
green
wide
data-cy="save-automation-setup"
on:click={saveAutomation}>
Save Automation Save Automation
</Button> </Button>
<Button <Button
@ -67,30 +83,20 @@
red red
wide wide
on:click={deleteAutomationBlock}> on:click={deleteAutomationBlock}>
Delete Block Delete Step
</Button> </Button>
</div> {:else if $automationStore.selectedAutomation}
{:else if $automationStore.selectedAutomation} <Button
<div class="panel"> green
<div class="panel-body"> wide
<div class="block-label"> data-cy="save-automation-setup"
Automation on:click={saveAutomation}>
<b>{automation.name}</b> Save Automation
</div> </Button>
</div> <Button red wide on:click={deleteAutomation}>Delete Automation</Button>
<Button secondary wide on:click={testAutomation}>Test Automation</Button> {/if}
<div class="buttons"> </div>
<Button
green
wide
data-cy="save-automation-setup"
on:click={saveAutomation}>
Save Automation
</Button>
<Button red wide on:click={deleteAutomation}>Delete Automation</Button>
</div>
</div>
{/if}
</section> </section>
<style> <style>
@ -98,29 +104,24 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
justify-content: space-between; justify-content: flex-start;
} align-items: stretch;
.panel-body {
flex: 1;
}
.panel {
display: flex;
flex-direction: column;
justify-content: space-between;
} }
header { header {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
font-family: inter; font-family: inter, sans-serif;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: var(--spacing-xl);
color: var(--ink); color: var(--ink);
} }
header > span {
color: var(--grey-5);
margin-right: var(--spacing-xl);
cursor: pointer;
}
.selected { .selected {
color: var(--ink); color: var(--ink);
} }
@ -129,31 +130,15 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: var(--grey-7); color: var(--grey-7);
margin-bottom: 20px; margin-bottom: var(--spacing-xl);
} }
header > span { .content {
color: var(--grey-5); flex: 1 0 auto;
margin-right: 20px;
cursor: pointer;
}
label {
font-weight: 500;
font-size: 14px;
color: var(--ink);
} }
.buttons { .buttons {
position: absolute;
bottom: 20px;
display: grid; display: grid;
width: 260px; gap: var(--spacing-m);
gap: 12px;
}
.access-level label {
font-weight: normal;
color: var(--ink);
} }
</style> </style>

27
packages/builder/src/pages/[application]/automate/_layout.svelte
View File

@ -1,23 +1,19 @@
<!-- routify:options index=3 -->
<script> <script>
import { automationStore } from "builderStore" import { automationStore } from "builderStore"
import { AutomationPanel, SetupPanel } from "components/automation" import { AutomationPanel, SetupPanel } from "components/automation"
</script> </script>
<!-- routify:options index=3 -->
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<div class="inner"> <AutomationPanel />
<AutomationPanel />
</div>
</div> </div>
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>
{#if $automationStore.selectedAutomation} {#if $automationStore.selectedAutomation}
<div class="nav"> <div class="nav">
<div class="inner"> <SetupPanel />
<SetupPanel />
</div>
</div> </div>
{/if} {/if}
</div> </div>
@ -25,28 +21,19 @@
<style> <style>
.content { .content {
position: relative; position: relative;
background: var(--grey-1);
} }
.root { .root {
height: 100%; height: calc(100% - 60px);
display: grid; display: grid;
grid-template-columns: 300px minmax(0, 1fr) 300px; grid-template-columns: 300px minmax(510px, 1fr) 300px;
background: var(--grey-1); background: var(--grey-1);
line-height: 1; line-height: 1;
} }
.content {
flex: 1 1 auto;
}
.nav { .nav {
overflow: auto; overflow-y: auto;
width: 300px;
background: var(--white); background: var(--white);
} padding: var(--spacing-xl);
.inner {
padding: 20px;
} }
</style> </style>