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> </div>
{/if} {/if}
</div> </div>
{:else} {:else if showHeader}
<div class="flex-col"> <div class="flex-col">
{#if showHeader}
<Label label={attribute.label} /> <Label label={attribute.label} />
{/if}
<div class="value"><svelte:component this={instance} label={attribute?.label} placeholder={attribute?.label} {maxWidth} bind:value={object[key]} {onChange} {focus}/></div> <div class="value"><svelte:component this={instance} label={attribute?.label} placeholder={attribute?.label} {maxWidth} bind:value={object[key]} {onChange} {focus}/></div>
</div> </div>
{:else}
<svelte:component this={instance} {maxWidth} bind:value={object[key]} {onChange} {focus}/>
{/if} {/if}
{/await} {/await}

View File

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

View File

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