CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-13 16:05:06 +12:00
Code Issues Projects Releases Wiki Activity

Refactoring of the button actions layout, updating the padding of the action categories to better separate them.

Browse source
This commit is contained in:
Dean 2022-07-13 16:53:08 +01:00
parent 6594d27de6
commit 3a8c62d04f
1 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
View file

@ -115,28 +115,32 @@
<DrawerContent>
<Layout noPadding gap="S" slot="sidebar">
{#if showAvailableActions || !actions?.length}
{#if actions?.length > 0}
<div>
<ActionButton
secondary
icon={"ArrowLeft"}
on:click={toggleActionList}
>
Back
</ActionButton>
<div class="actions-list">
{#if actions?.length > 0}
<div>
<ActionButton
secondary
icon={"ArrowLeft"}
on:click={toggleActionList}
>
Back
</ActionButton>
</div>
{/if}
<div class="search-wrap">
<Search placeholder="Search" bind:value={actionQuery} />
</div>
{/if}
<Search placeholder="Search" bind:value={actionQuery} />
{#each Object.entries(mappedActionTypes) as [categoryId, category]}
<div class="heading">{categoryId}</div>
<ul>
{#each category as actionType}
<li on:click={onAddAction(actionType)}>
<span class="binding__label">{actionType.name}</span>
</li>
{/each}
</ul>
{/each}
{#each Object.entries(mappedActionTypes) as [categoryId, category], idx}
<div class="heading" class:top-entry={idx === 0}>{categoryId}</div>
<ul>
{#each category as actionType}
<li on:click={onAddAction(actionType)}>
<span class="action-name">{actionType.name}</span>
</li>
{/each}
</ul>
{/each}
</div>
{/if}
{#if actions && actions.length > 0 && !showAvailableActions}
@ -226,6 +230,19 @@
color: var(--spectrum-global-color-gray-900);
}
.actions-list > * {
padding-bottom: var(--spectrum-global-dimension-static-size-200);
}
.actions-list .heading {
padding-bottom: var(--spectrum-global-dimension-static-size-100);
padding-top: var(--spectrum-global-dimension-static-size-50);
}
.actions-list .heading.top-entry {
padding-top: 0px;
}
ul {
list-style: none;
padding: 0;
@ -236,7 +253,7 @@
font-size: var(--font-size-s);
padding: var(--spacing-m);
border-radius: 4px;
border: var(--border-light);
background-color: var(--spectrum-global-color-gray-200);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
word-wrap: break-word;
@ -250,13 +267,10 @@
li:hover {
color: var(--spectrum-global-color-gray-900);
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-global-color-gray-500);
cursor: pointer;
}
li:hover :global(*) {
color: var(--spectrum-global-color-gray-900) !important;
}
.binding__label {
.action-name {
font-weight: 600;
text-transform: capitalize;
}