GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make wraps a passable prop to EditorToolbar

Browse source 
Can be set to nowrap via document.getElementByID("editorToolbar").component.$set({ wraps: false })
This commit is contained in:
Henrik Giesel 2021-04-08 17:26:30 +02:00
parent bf33397855
commit 59884df70b
3 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ts/editor-toolbar/ButtonGroup.svelte
View file

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

3
ts/editor-toolbar/EditorToolbar.svelte
View file

@ -29,6 +29,7 @@
export let nightMode: boolean; export let nightMode: boolean;
export let size: number = 30; export let size: number = 30;
export let wraps: boolean = true;
setContext(nightModeKey, nightMode); setContext(nightModeKey, nightMode);
setContext(disabledKey, disabled); setContext(disabledKey, disabled);
@ -65,6 +66,6 @@
</div> </div>
<nav> <nav>
<ButtonGroup buttons={_buttons} /> <ButtonGroup buttons={_buttons} {wraps} />
</nav> </nav>
</div> </div>

8
ts/sveltelib/dynamicComponent.ts
View file

@ -6,12 +6,16 @@ export interface DynamicSvelteComponent<
component: T; component: T;
} }
export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(component: Comp) => < export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(
component: Comp
) => <
Props extends NonNullable<ConstructorParameters<Comp>[0]["props"]>, Props extends NonNullable<ConstructorParameters<Comp>[0]["props"]>,
Lazy extends string = never Lazy extends string = never
>( >(
props: Omit<Props, Lazy>, props: Omit<Props, Lazy>,
lazyProps: { [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property] } lazyProps: {
[Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property];
}
): DynamicSvelteComponent<Comp> & Props => { ): DynamicSvelteComponent<Comp> & Props => {
const dynamicComponent = { component, ...props }; const dynamicComponent = { component, ...props };