From c49ad009d0f796405ab6b332aba94a205c307a17 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Thu, 27 May 2021 15:50:49 +0200 Subject: [PATCH] Add Section and SectionItem for the deckoptions --- ts/components/ButtonGroup.svelte | 10 +++-- ts/components/ButtonToolbar.svelte | 10 +++-- ts/components/Section.svelte | 65 +++++++++++++++++++++++++++ ts/components/identifier.ts | 14 +++--- ts/components/registration.ts | 4 +- ts/deckoptions/ConfigEditor.svelte | 53 +++++++++++++++------- ts/deckoptions/DeckOptionsPage.svelte | 4 +- ts/editor/EditorToolbar.svelte | 6 +-- 8 files changed, 132 insertions(+), 34 deletions(-) create mode 100644 ts/components/Section.svelte diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte index 41c03267a..d6577d958 100644 --- a/ts/components/ButtonGroup.svelte +++ b/ts/components/ButtonGroup.svelte @@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { writable } from "svelte/store"; import { buttonGroupKey } from "./contextKeys"; import type { Identifier } from "./identifier"; - import { insert, add } from "./identifier"; + import { insertElement, appendElement } from "./identifier"; import type { ButtonRegistration } from "./buttons"; import { ButtonPosition } from "./buttons"; import type { SvelteComponent } from "./registration"; @@ -62,9 +62,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html getDynamicInterface(buttonGroupRef); const insertButton = (button: SvelteComponent, position: Identifier = 0) => - addComponent(button, (added, parent) => insert(added, parent, position)); + addComponent(button, (added, parent) => + insertElement(added, parent, position) + ); const appendButton = (button: SvelteComponent, position: Identifier = -1) => - addComponent(button, (added, parent) => add(added, parent, position)); + addComponent(button, (added, parent) => + appendElement(added, parent, position) + ); const showButton = (id: Identifier) => updateRegistration(({ detach }) => detach.set(false), id); diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte index 19ce423bd..d2e387e55 100644 --- a/ts/components/ButtonToolbar.svelte +++ b/ts/components/ButtonToolbar.svelte @@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import SectionItem from "./SectionItem.svelte"; import { sectionKey } from "./contextKeys"; import type { Identifier } from "./identifier"; - import { insert, add } from "./identifier"; + import { insertElement, appendElement } from "./identifier"; import type { SvelteComponent, Registration } from "./registration"; import { makeInterface } from "./registration"; @@ -47,9 +47,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html getDynamicInterface(buttonToolbarRef); const insertGroup = (group: SvelteComponent, position: Identifier = 0) => - addComponent(group, (added, parent) => insert(added, parent, position)); + addComponent(group, (added, parent) => + insertElement(added, parent, position) + ); const appendGroup = (group: SvelteComponent, position: Identifier = -1) => - addComponent(group, (added, parent) => add(added, parent, position)); + addComponent(group, (added, parent) => + appendElement(added, parent, position) + ); const showGroup = (id: Identifier) => updateRegistration(({ detach }) => detach.set(false), id); diff --git a/ts/components/Section.svelte b/ts/components/Section.svelte new file mode 100644 index 000000000..d3c5ff391 --- /dev/null +++ b/ts/components/Section.svelte @@ -0,0 +1,65 @@ + + + +
+ + {#each $dynamicItems as item} + + + + {/each} +
diff --git a/ts/components/identifier.ts b/ts/components/identifier.ts index deee14436..977d69a89 100644 --- a/ts/components/identifier.ts +++ b/ts/components/identifier.ts @@ -2,7 +2,7 @@ // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export type Identifier = string | number; -export function find( +export function findElement( collection: HTMLCollection, idOrIndex: Identifier ): [number, Element] | null { @@ -34,12 +34,12 @@ export function find( return result; } -export function insert( +export function insertElement( element: Element, collection: Element, idOrIndex: Identifier ): number { - const match = find(collection.children, idOrIndex); + const match = findElement(collection.children, idOrIndex); if (match) { const [index, reference] = match; @@ -51,12 +51,12 @@ export function insert( return -1; } -export function add( +export function appendElement( element: Element, collection: Element, idOrIndex: Identifier ): number { - const match = find(collection.children, idOrIndex); + const match = findElement(collection.children, idOrIndex); if (match) { const [index, before] = match; @@ -69,12 +69,12 @@ export function add( return -1; } -export function update( +export function updateElement( f: (element: Element) => void, collection: Element, idOrIndex: Identifier ): number { - const match = find(collection.children, idOrIndex); + const match = findElement(collection.children, idOrIndex); if (match) { const [index, element] = match; diff --git a/ts/components/registration.ts b/ts/components/registration.ts index bf3b3dfac..5b03b5f02 100644 --- a/ts/components/registration.ts +++ b/ts/components/registration.ts @@ -4,7 +4,7 @@ import type { SvelteComponentTyped } from "svelte/internal"; import type { Writable, Readable } from "svelte/store"; import { writable } from "svelte/store"; import type { Identifier } from "./identifier"; -import { find } from "./identifier"; +import { findElement } from "./identifier"; export interface SvelteComponent { component: SvelteComponentTyped; @@ -98,7 +98,7 @@ export function makeInterface( update: (registration: T) => void, position: Identifier ): void { - const match = find(elementRef.children, position); + const match = findElement(elementRef.children, position); if (match) { const [index] = match; diff --git a/ts/deckoptions/ConfigEditor.svelte b/ts/deckoptions/ConfigEditor.svelte index 8f3c143a2..582a57ca0 100644 --- a/ts/deckoptions/ConfigEditor.svelte +++ b/ts/deckoptions/ConfigEditor.svelte @@ -3,6 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> -
- - - - +
+ + + + + + + + + + + + + + {#if state.v3Scheduler} - + + + {/if} - - - -
+ + + + + + + + + + + diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte index 520335f69..93a474e90 100644 --- a/ts/deckoptions/DeckOptionsPage.svelte +++ b/ts/deckoptions/DeckOptionsPage.svelte @@ -31,7 +31,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html }, ]; } + + export const options = {}; - + diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte index d87d02c59..a330f5052 100644 --- a/ts/editor/EditorToolbar.svelte +++ b/ts/editor/EditorToolbar.svelte @@ -41,15 +41,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import ColorButtons from "./ColorButtons.svelte"; import TemplateButtons from "./TemplateButtons.svelte"; + export let size = isApplePlatform() ? 1.6 : 2.0; + export let wrap = true; + export const toolbar = {}; export const notetypeButtons = {}; export const formatInlineButtons = {}; export const formatBlockButtons = {}; export const colorButtons = {}; export const templateButtons = {}; - - export let size = isApplePlatform() ? 1.6 : 2.0; - export let wrap = true;