mirror of
https://github.com/ankitects/anki.git
synced 2025-09-23 08:22:24 -04:00
Generalize ButtonToolbarItem to SectionItem
This commit is contained in:
Henrik Giesel
parent
4ab0820bbc
commit
da076aa48e
8 changed files with 46 additions and 47 deletions
|
|
@ -5,12 +5,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
<script lang="typescript">
|
||||
import { setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import ButtonToolbarItem from "./ButtonToolbarItem.svelte";
|
||||
import type { ButtonGroupRegistration } from "./buttons";
|
||||
import { buttonToolbarKey } from "./contextKeys";
|
||||
import SectionItem from "./SectionItem.svelte";
|
||||
import { sectionKey } from "./contextKeys";
|
||||
import type { Identifier } from "./identifier";
|
||||
import { insert, add } from "./identifier";
|
||||
import type { SvelteComponent } from "./registration";
|
||||
import type { SvelteComponent, Registration } from "./registration";
|
||||
import { makeInterface } from "./registration";
|
||||
|
||||
export let id: string | undefined = undefined;
|
||||
|
|
@ -30,7 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
|
||||
$: style = buttonSize + buttonWrap;
|
||||
|
||||
function makeRegistration(): ButtonGroupRegistration {
|
||||
function makeRegistration(): Registration {
|
||||
const detach = writable(false);
|
||||
return { detach };
|
||||
}
|
||||
|
|
@ -38,7 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
const { registerComponent, dynamicItems, getDynamicInterface } =
|
||||
makeInterface(makeRegistration);
|
||||
|
||||
setContext(buttonToolbarKey, registerComponent);
|
||||
setContext(sectionKey, registerComponent);
|
||||
|
||||
export let api: Record<string, unknown> | undefined = undefined;
|
||||
let buttonToolbarRef: HTMLDivElement;
|
||||
|
|
@ -81,9 +80,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
>
|
||||
<slot />
|
||||
{#each $dynamicItems as item}
|
||||
<ButtonToolbarItem id={item[0].id} registration={item[1]}>
|
||||
<SectionItem id={item[0].id} registration={item[1]}>
|
||||
<svelte:component this={item[0].component} {...item[0].props} />
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,23 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
<script lang="typescript">
|
||||
import Detachable from "components/Detachable.svelte";
|
||||
|
||||
import type { ButtonGroupRegistration } from "./buttons";
|
||||
import type { Register } from "./registration";
|
||||
import type { Register, Registration } from "./registration";
|
||||
|
||||
import { getContext, hasContext } from "svelte";
|
||||
import { buttonToolbarKey } from "./contextKeys";
|
||||
import { sectionKey } from "./contextKeys";
|
||||
|
||||
export let id: string | undefined = undefined;
|
||||
export let registration: ButtonGroupRegistration | undefined = undefined;
|
||||
export let registration: Registration | undefined = undefined;
|
||||
|
||||
let detached: boolean;
|
||||
|
||||
if (registration) {
|
||||
const { detach } = registration;
|
||||
detach.subscribe((value: boolean) => (detached = value));
|
||||
} else if (hasContext(buttonToolbarKey)) {
|
||||
const registerComponent =
|
||||
getContext<Register<ButtonGroupRegistration>>(buttonToolbarKey);
|
||||
} else if (hasContext(sectionKey)) {
|
||||
const registerComponent = getContext<Register<Registration>>(sectionKey);
|
||||
const { detach } = registerComponent();
|
||||
detach.subscribe((value: boolean) => (detached = value));
|
||||
} else {
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { Writable } from "svelte/store";
|
||||
import type { Registration } from "./registration";
|
||||
|
||||
export enum ButtonPosition {
|
||||
Standalone,
|
||||
|
|
@ -9,11 +10,6 @@ export enum ButtonPosition {
|
|||
Rightmost,
|
||||
}
|
||||
|
||||
export interface ButtonRegistration {
|
||||
detach: Writable<boolean>;
|
||||
export interface ButtonRegistration extends Registration {
|
||||
position: Writable<ButtonPosition>;
|
||||
}
|
||||
|
||||
export interface ButtonGroupRegistration {
|
||||
detach: Writable<boolean>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
export const nightModeKey = Symbol("nightMode");
|
||||
export const disabledKey = Symbol("disabled");
|
||||
|
||||
export const buttonToolbarKey = Symbol("buttonToolbar");
|
||||
export const sectionKey = Symbol("section");
|
||||
export const buttonGroupKey = Symbol("buttonGroup");
|
||||
export const dropdownKey = Symbol("dropdown");
|
||||
export const modalsKey = Symbol("modals");
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import type { SvelteComponentTyped } from "svelte/internal";
|
||||
import type { Readable } from "svelte/store";
|
||||
import type { Writable, Readable } from "svelte/store";
|
||||
import { writable } from "svelte/store";
|
||||
import type { Identifier } from "./identifier";
|
||||
import { find } from "./identifier";
|
||||
|
|
@ -12,9 +12,13 @@ export interface SvelteComponent {
|
|||
props: Record<string, unknown> | undefined;
|
||||
}
|
||||
|
||||
export type Register<T> = (index?: number, registration?: T) => T;
|
||||
export interface Registration {
|
||||
detach: Writable<boolean>;
|
||||
}
|
||||
|
||||
export interface RegistrationAPI<T> {
|
||||
export type Register<T extends Registration> = (index?: number, registration?: T) => T;
|
||||
|
||||
export interface RegistrationAPI<T extends Registration> {
|
||||
registerComponent: Register<T>;
|
||||
items: Readable<T[]>;
|
||||
dynamicItems: Readable<[SvelteComponent, T][]>;
|
||||
|
|
@ -36,7 +40,9 @@ export function nodeIsElement(node: Node): node is Element {
|
|||
return node.nodeType === Node.ELEMENT_NODE;
|
||||
}
|
||||
|
||||
export function makeInterface<T>(makeRegistration: () => T): RegistrationAPI<T> {
|
||||
export function makeInterface<T extends Registration>(
|
||||
makeRegistration: () => T
|
||||
): RegistrationAPI<T> {
|
||||
const registrations: T[] = [];
|
||||
const items = writable(registrations);
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
import TextInputModal from "./TextInputModal.svelte";
|
||||
import StickyBar from "components/StickyBar.svelte";
|
||||
import ButtonToolbar from "components/ButtonToolbar.svelte";
|
||||
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
|
||||
import SectionItem from "components/SectionItem.svelte";
|
||||
import ButtonGroup from "components/ButtonGroup.svelte";
|
||||
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
|
||||
<StickyBar>
|
||||
<ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
|
||||
<ButtonToolbarItem>
|
||||
<SectionItem>
|
||||
<ButtonGroup class="flex-grow-1">
|
||||
<ButtonGroupItem>
|
||||
<SelectButton class="flex-grow-1" on:change={blur}>
|
||||
|
|
@ -104,15 +104,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
</SelectButton>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
|
||||
<ButtonToolbarItem>
|
||||
<SectionItem>
|
||||
<SaveButton
|
||||
{state}
|
||||
on:add={promptToAdd}
|
||||
on:clone={promptToClone}
|
||||
on:rename={promptToRename}
|
||||
/>
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
</ButtonToolbar>
|
||||
</StickyBar>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
import { isApplePlatform } from "lib/platform";
|
||||
import StickyBar from "components/StickyBar.svelte";
|
||||
import ButtonToolbar from "components/ButtonToolbar.svelte";
|
||||
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
|
||||
import SectionItem from "components/SectionItem.svelte";
|
||||
|
||||
import NoteTypeButtons from "./NoteTypeButtons.svelte";
|
||||
import FormatInlineButtons from "./FormatInlineButtons.svelte";
|
||||
|
|
@ -54,24 +54,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
|
||||
<StickyBar>
|
||||
<ButtonToolbar {size} {wrap} api={toolbar}>
|
||||
<ButtonToolbarItem id="notetype">
|
||||
<SectionItem id="notetype">
|
||||
<NoteTypeButtons api={notetypeButtons} />
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
|
||||
<ButtonToolbarItem id="inlineFormatting">
|
||||
<SectionItem id="inlineFormatting">
|
||||
<FormatInlineButtons api={formatInlineButtons} />
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
|
||||
<ButtonToolbarItem id="blockFormatting">
|
||||
<SectionItem id="blockFormatting">
|
||||
<FormatBlockButtons api={formatBlockButtons} />
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
|
||||
<ButtonToolbarItem id="color">
|
||||
<SectionItem id="color">
|
||||
<ColorButtons api={colorButtons} />
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
|
||||
<ButtonToolbarItem id="template">
|
||||
<SectionItem id="template">
|
||||
<TemplateButtons api={templateButtons} />
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
</ButtonToolbar>
|
||||
</StickyBar>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
|
||||
import IconButton from "components/IconButton.svelte";
|
||||
import ButtonDropdown from "components/ButtonDropdown.svelte";
|
||||
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
|
||||
import SectionItem from "components/SectionItem.svelte";
|
||||
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
|
||||
import OnlyEditable from "./OnlyEditable.svelte";
|
||||
import CommandIconButton from "./CommandIconButton.svelte";
|
||||
|
|
@ -71,7 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
</OnlyEditable>
|
||||
|
||||
<ButtonDropdown id={menuId}>
|
||||
<ButtonToolbarItem id="justify">
|
||||
<SectionItem id="justify">
|
||||
<ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<CommandIconButton
|
||||
|
|
@ -109,9 +109,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
|
||||
<ButtonToolbarItem id="indentation">
|
||||
<SectionItem id="indentation">
|
||||
<ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<OnlyEditable let:disabled>
|
||||
|
|
@ -137,7 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
</OnlyEditable>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
</SectionItem>
|
||||
</ButtonDropdown>
|
||||
</WithDropdownMenu>
|
||||
</ButtonGroupItem>
|
||||
|
|
|
|||
Loading…
Reference in a new issue