Don't show toggle when field is collapsed

This commit is contained in:
Matthias Metelka 2022-08-03 20:39:51 +02:00
parent 37c74e4fca
commit cf90c71e59
2 changed files with 14 additions and 9 deletions

View file

@ -362,6 +362,8 @@ the AddCards dialog) should be implemented in the user of this component.
</RichTextInput>
<PlainTextBadge
collapsed={richTextsHidden[index] &&
plainTextsHidden[index]}
bind:off={plainTextsHidden[index]}
on:toggle={() => {
plainTextsHidden[index] = !plainTextsHidden[index];

View file

@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dispatch = createEventDispatcher();
export let off = false;
export let collapsed = false;
function toggle() {
dispatch("toggle");
@ -26,15 +27,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let width = 0;
</script>
<div class="clickable" style="--width: {width}px" on:click|stopPropagation={toggle}>
<span
class:off
class:on={!off}
class="plain-text-badge"
class:highlighted={!off}
bind:clientWidth={width}
/>
</div>
{#if !collapsed}
<div class="clickable" style="--width: {width}px" on:click|stopPropagation={toggle}>
<span
class:off
class:on={!off}
class="plain-text-badge"
class:highlighted={!off}
bind:clientWidth={width}
/>
</div>
{/if}
<style lang="scss">
.clickable {