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