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

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

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