refactor(webui): LabelBorder uses Svelte transitions, tidy CSS
This commit is contained in:
parent
405f9e9886
commit
9df708ba11
1 changed files with 21 additions and 23 deletions
|
@ -1,4 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { slide } from 'svelte/transition';
|
||||||
|
|
||||||
export let hide = false;
|
export let hide = false;
|
||||||
let hidden = true;
|
let hidden = true;
|
||||||
</script>
|
</script>
|
||||||
|
@ -6,28 +8,33 @@
|
||||||
<section class="labelborder" class:hide class:hidden>
|
<section class="labelborder" class:hide class:hidden>
|
||||||
<header
|
<header
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
if (hide) {
|
if (hide) hidden = !hidden;
|
||||||
hidden = !hidden;
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
on:keydown={(ev) => {
|
on:keydown={(ev) => {
|
||||||
if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden;
|
if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden;
|
||||||
}}
|
}}
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<slot name="header-full">
|
<slot name="header-full">
|
||||||
<h3><slot name="header" /></h3>
|
<h3>
|
||||||
|
<slot name="header" />
|
||||||
|
</h3>
|
||||||
</slot>
|
</slot>
|
||||||
</header>
|
</header>
|
||||||
<div class="content">
|
{#if !hide || !hidden}
|
||||||
<slot />
|
<div class="content" transition:slide>
|
||||||
</div>
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
section.labelborder {
|
section.labelborder {
|
||||||
margin-top: 0.66rem;
|
margin-top: 0.66rem;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
|
||||||
header {
|
& header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -36,28 +43,19 @@
|
||||||
padding-bottom: 0.33rem;
|
padding-bottom: 0.33rem;
|
||||||
margin-bottom: 0.33rem;
|
margin-bottom: 0.33rem;
|
||||||
|
|
||||||
h3 {
|
& h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hide {
|
&.hide {
|
||||||
header {
|
& header {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
&.hide.hidden {
|
||||||
&.hidden {
|
opacity: 0.66;
|
||||||
opacity: 0.66;
|
|
||||||
|
|
||||||
header {
|
|
||||||
border-bottom-width: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue