Pass wraps more similiar to how size is passed via CSS variables

This commit is contained in:
Henrik Giesel 2021-04-08 18:13:50 +02:00
parent 59884df70b
commit d3e1bfa841
3 changed files with 5 additions and 10 deletions

View File

@ -6,12 +6,12 @@
export let props: Record<string, string> = {};
export let buttons: Buttons;
export let wraps: boolean;
</script>
<style lang="scss">
ul {
display: flex;
flex-wrap: var(--toolbar-wrap);
overflow-y: auto;
padding-inline-start: 0;
@ -23,10 +23,6 @@
}
}
.wraps {
flex-flow: wrap;
}
li {
display: inline-block;
margin-bottom: calc(var(--toolbar-size) / 15);
@ -54,11 +50,11 @@
}
</style>
<ul {id} class={className} {...props} class:wraps>
<ul {id} class={className} {...props}>
{#each buttons as button}
<li>
{#if Array.isArray(button)}
<svelte:self buttons={button} {wraps} />
<svelte:self buttons={button} />
{:else}
<svelte:component this={button.component} {...button} />
{/if}

View File

@ -58,7 +58,7 @@
}
</style>
<div style={`--toolbar-size: ${size}px`}>
<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
<div>
{#each _menus as menu}
<svelte:component this={menu.component} {...menu} />
@ -66,6 +66,6 @@
</div>
<nav>
<ButtonGroup buttons={_buttons} {wraps} />
<ButtonGroup buttons={_buttons} />
</nav>
</div>

View File

@ -26,7 +26,6 @@ class EditorToolbar extends HTMLElement {
connectedCallback(): void {
setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
console.log(this.buttons);
this.component = new EditorToolbarSvelte({
target: this,
props: {