Update StatesPopup layout, fix AttributeBarEditor (#476)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-02 12:05:37 +03:00 committed by GitHub
parent 809a654cab
commit bdd5429238
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 13 deletions

View File

@ -67,13 +67,13 @@
</div>
{/if}
</div>
{:else}
{:else if showHeader}
<div class="flex-col">
{#if showHeader}
<Label label={attribute.label} />
{/if}
<Label label={attribute.label} />
<div class="value"><svelte:component this={instance} label={attribute?.label} placeholder={attribute?.label} {maxWidth} bind:value={object[key]} {onChange} {focus}/></div>
</div>
{:else}
<svelte:component this={instance} {maxWidth} bind:value={object[key]} {onChange} {focus}/>
{/if}
{/await}

View File

@ -34,7 +34,7 @@
</script>
{#if state}
<div class="flex-row-center" bind:this={container}
<div class="flex-row-center cursor-pointer" bind:this={container}
on:click|preventDefault={() => {
if (!opened) {
opened = true

View File

@ -27,9 +27,9 @@
</script>
<div class="container">
<div class="flex-col statuses-container">
{#each states as state}
<div class="state flex" on:click={() => { dispatch('close', state) }}>
<div class="flex-row-center state" on:click={() => { dispatch('close', state) }}>
<div class="color" style="background-color: {state.color}"></div>
{state.title}
</div>
@ -37,23 +37,23 @@
</div>
<style lang="scss">
.container {
display: flex;
flex-direction: column;
padding: 1rem;
.statuses-container {
padding: .5rem;
max-height: 100%;
min-width: 10rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-hovered);
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-button-border-enabled);
border-radius: .75rem;
user-select: none;
filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35));
.state {
margin: 1rem;
padding: .5rem;
border-radius: .5rem;
cursor: pointer;
&:hover { background-color: var(--theme-button-bg-hovered); }
.color {
margin-right: .75rem;
width: 1rem;