Update components layout, DoneStatesPopup (#906)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2022-02-02 10:05:33 +01:00
committed by GitHub
parent 04efff3b49
commit a8fbdbecde
16 changed files with 281 additions and 346 deletions
@@ -65,14 +65,13 @@
{#if state}
<DoneStatePresenter value={state} showTitle />
{:else}
<div class="color"/>
<div class="color background-card-divider"/>
<Label label={task.string.NoDoneState} />
{/if}
</div>
<style lang="scss">
.color {
border: 0.5px #ffffff55 solid;
margin-right: 0.75rem;
margin-right: .75rem;
width: .5rem;
height: .5rem;
border-radius: .5rem;
@@ -42,58 +42,36 @@
}
</script>
<div class="flex-col statuses-container">
<div class="antiPopup">
<div class="ap-space" />
{#each states as state}
<div
class="flex-row-center state"
<button
class="ap-menuItem ap-woScroll flex-row-center"
on:click={() => {
dispatch('close', state)
}}
>
<div class="color" style="background-color: {getColor(state._class)}" />
{state.title}
</div>
</button>
{/each}
<div
class="flex-row-center state"
on:click={() => {
dispatch('close', null)
}}
>
<div class="color" style="border: 0.5px #ffffff55 solid"/>
<Label label={task.string.NoDoneState}/>
</div>
<button
class="ap-menuItem ap-woScroll flex-row-center"
on:click={() => {
dispatch('close', null)
}}
>
<div class="color background-card-divider" />
<Label label={task.string.NoDoneState}/>
</button>
<div class="ap-space" />
</div>
<style lang="scss">
.statuses-container {
padding: 0.5rem;
max-height: 100%;
min-width: 10rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-button-border-enabled);
border-radius: 0.75rem;
user-select: none;
filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
.state {
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
&:hover {
background-color: var(--theme-button-bg-hovered);
}
.color {
margin-right: 0.75rem;
width: .5rem;
height: .5rem;
border-radius: .5rem;
}
}
}
.not-done {
margin-left: 1.25rem;
.color {
margin-right: .75rem;
width: .5rem;
height: .5rem;
border-radius: .5rem;
}
</style>