Display options

This commit is contained in:
Adria Navarro 2025-03-13 17:39:46 +01:00
parent bcc40e5b35
commit bee89b287c
1 changed files with 19 additions and 1 deletions

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { import {
ActionButton, ActionButton,
ActionGroup,
ActionMenu, ActionMenu,
Body, Body,
Button, Button,
@ -55,10 +56,18 @@
</div> </div>
</Layout> </Layout>
<Divider /> <Divider />
<Layout> <Layout gap="S">
<Body size="S" color="var(--spectrum-global-color-gray-700)"> <Body size="S" color="var(--spectrum-global-color-gray-700)">
Basic (Username & Password Authentication) Basic (Username & Password Authentication)
</Body> </Body>
<div class="auth-options">
<ActionGroup vertical compact>
{#each authConfigs as config}
<ActionButton>{config.label}</ActionButton>
{/each}
</ActionGroup>
</div>
<div> <div>
<Button secondary icon="Add" on:click={addBasicConfiguration} <Button secondary icon="Add" on:click={addBasicConfiguration}
>Add Basic</Button >Add Basic</Button
@ -73,4 +82,13 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.auth-options :global(.spectrum-ActionGroup) {
width: 100%;
}
.auth-options :global(.spectrum-ActionButton) {
justify-content: start;
cursor: pointer;
pointer-events: auto;
}
</style> </style>