-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #72 from sheodox/modlog
Modlog
- Loading branch information
Showing
33 changed files
with
1,346 additions
and
110 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <!-- we shouldn't be showing enough to wrap if our calculations work, | ||
| but using f-wrap so the element doesn't overflow the container | ||
| and make us show every button all the time --> | ||
| <div class="chain-buttons f-row f-1 gap-2 f-wrap" use:observeContainer> | ||
| {#each outside as action, index} | ||
| <div use:observeOutside={{ index }}> | ||
| <ExtraActionButton {cl} {action} /> | ||
| </div> | ||
| {/each} | ||
| <!-- if we haven't measured its width yet show the overflow anyway --> | ||
| {#if overflowWidth === null || collapsed.length} | ||
| <div class="chain-overflow" use:observeOverflow> | ||
| <!-- when we don't know the size yet, give it all actions so it shows instead of hiding itself --> | ||
| <ExtraActions actions={overflowWidth !== null ? collapsed : actions} {cl} /> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <script lang="ts"> | ||
| import type { ExtraAction } from './utils'; | ||
| import ExtraActions from './ExtraActions.svelte'; | ||
| import ExtraActionButton from './ExtraActionButton.svelte'; | ||
| export let actions: ExtraAction[]; | ||
| export let cl = ''; | ||
| let outsideAmount = Infinity; | ||
| let availableWidth: number | null = null; | ||
| let overflowWidth: number | null = null; | ||
| // map of action indexes to button widths | ||
| const actionSizes = new Map<number, number>(); | ||
| $: outside = actions.slice(0, outsideAmount); | ||
| $: collapsed = actions.slice(outsideAmount); | ||
| const buttonGap = 8; //.gap-2 is 8px wide, this is the spacing between buttons | ||
| function fit() { | ||
| let outsideWidth = 0, | ||
| canFit = -1; | ||
| if (availableWidth === null || overflowWidth === null) { | ||
| return; | ||
| } | ||
| for (let i = 0; i < actions.length; i++) { | ||
| outsideWidth += (actionSizes.get(i) ?? 0) + (i > 0 ? buttonGap : 0); | ||
| const hasMoreActionsAfterThis = i + 1 < actions.length; | ||
| if (outsideWidth + (hasMoreActionsAfterThis ? overflowWidth + buttonGap : 0) < availableWidth) { | ||
| canFit = i; | ||
| } else { | ||
| break; | ||
| } | ||
| } | ||
| outsideAmount = canFit + 1; | ||
| } | ||
| function watchSize(el: HTMLElement, updateFn: (width: number) => void) { | ||
| const obs = new ResizeObserver((entries) => { | ||
| const width = entries[0].borderBoxSize[0].inlineSize; | ||
| updateFn(width); | ||
| fit(); | ||
| }); | ||
| obs.observe(el); | ||
| return { | ||
| destroy: () => { | ||
| obs.disconnect(); | ||
| } | ||
| }; | ||
| } | ||
| function observeContainer(el: HTMLElement) { | ||
| return watchSize(el, (width) => { | ||
| availableWidth = width; | ||
| }); | ||
| } | ||
| function observeOutside(el: HTMLElement, { index }: { index: number }) { | ||
| return watchSize(el, (width) => { | ||
| actionSizes.set(index, width); | ||
| }); | ||
| } | ||
| function observeOverflow(el: HTMLElement) { | ||
| return watchSize(el, (width) => { | ||
| overflowWidth = width; | ||
| }); | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <style> | ||
| .spinner { | ||
| /* match the width of icons in dropdown menus from sheodox-ui */ | ||
| width: 1.5rem; | ||
| } | ||
| </style> | ||
|
|
||
| {#if action.href} | ||
| <a href={action.href} class="button m-0 ws-nowrap {cl}"><Icon icon={action.icon} {variant} /> {action.text}</a> | ||
| {:else if action.click} | ||
| <button on:click={action.click} class="button m-0 ws-nowrap {cl}" disabled={action.busy ?? false} use:ripple> | ||
| <div class="f-row gap-1"> | ||
| {#if action.busy} | ||
| <div class="spinner"> | ||
| <Spinner /> | ||
| </div> | ||
| {:else} | ||
| <Icon icon={action.icon} {variant} /> | ||
| {/if} | ||
| <span>{action.text}</span> | ||
| </div> | ||
| </button> | ||
| {/if} | ||
|
|
||
| <script lang="ts"> | ||
| import type { ExtraAction } from './utils'; | ||
| import Spinner from './Spinner.svelte'; | ||
| import { Icon, ripple } from 'sheodox-ui'; | ||
| export let action: ExtraAction; | ||
| export let cl = ''; | ||
| $: variant = action.variant || 'solid'; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.