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

View File

@ -115,6 +115,7 @@
<DrawerContent> <DrawerContent>
<Layout noPadding gap="S" slot="sidebar"> <Layout noPadding gap="S" slot="sidebar">
{#if showAvailableActions || !actions?.length} {#if showAvailableActions || !actions?.length}
<div class="actions-list">
{#if actions?.length > 0} {#if actions?.length > 0}
<div> <div>
<ActionButton <ActionButton
@ -126,17 +127,20 @@
</ActionButton> </ActionButton>
</div> </div>
{/if} {/if}
<div class="search-wrap">
<Search placeholder="Search" bind:value={actionQuery} /> <Search placeholder="Search" bind:value={actionQuery} />
{#each Object.entries(mappedActionTypes) as [categoryId, category]} </div>
<div class="heading">{categoryId}</div> {#each Object.entries(mappedActionTypes) as [categoryId, category], idx}
<div class="heading" class:top-entry={idx === 0}>{categoryId}</div>
<ul> <ul>
{#each category as actionType} {#each category as actionType}
<li on:click={onAddAction(actionType)}> <li on:click={onAddAction(actionType)}>
<span class="binding__label">{actionType.name}</span> <span class="action-name">{actionType.name}</span>
</li> </li>
{/each} {/each}
</ul> </ul>
{/each} {/each}
</div>
{/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;
} }