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

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

@ -10,6 +10,6 @@
<style>
svg {
margin: 8px 0;
margin: var(--spacing-m) 0;
}
</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>
section {
position: absolute;
padding: 20px 40px;
padding: 40px;
display: flex;
align-items: center;
flex-direction: column;

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

@ -46,22 +46,18 @@
flex-direction: column;
}
i {
color: #adaec4;
}
i:hover {
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
margin: var(--spacing-xl) 0 0 0;
flex: 1;
}
.live {
color: var(--primary);
i {
color: var(--grey-6);
}
i.live {
color: var(--purple);
}
li {
@ -70,51 +66,23 @@
.automation-item {
display: flex;
border-radius: 5px;
padding-left: 12px;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 36px;
margin-bottom: 4px;
border-radius: var(--border-radius-m);
padding: var(--spacing-s) var(--spacing-m);
margin-bottom: var(--spacing-xs);
color: var(--ink);
}
.automation-item i {
font-size: 24px;
margin-right: 10px;
margin-right: var(--spacing-m);
}
.automation-item:hover {
cursor: pointer;
background: var(--grey-1);
}
.automation-item.selected {
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>

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

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

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

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

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

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

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

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

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

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