Fix ButtonDropdown
This commit is contained in:
Henrik Giesel
parent
193e2f9e60
commit
2112b419f9
@ -68,7 +68,6 @@ from aqt.utils import (
|
||||
saveGeom,
|
||||
saveSplitter,
|
||||
saveState,
|
||||
shortcut,
|
||||
showInfo,
|
||||
showWarning,
|
||||
skip_if_selection_is_empty,
|
||||
@ -383,7 +382,7 @@ class Browser(QMainWindow):
|
||||
|
||||
editor._links["preview"] = lambda _editor: self.onTogglePreview()
|
||||
editor.web.eval(
|
||||
f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
|
||||
"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
|
||||
)
|
||||
|
||||
gui_hooks.editor_did_init.append(add_preview_button)
|
||||
|
||||
@ -6,22 +6,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
import { setContext } from "svelte";
|
||||
import { dropdownKey } from "./contextKeys";
|
||||
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import WithTheming from "./WithTheming.svelte";
|
||||
import ButtonToolbar from "./ButtonToolbar.svelte";
|
||||
|
||||
export let id: string | undefined;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
export let api = {};
|
||||
export let api: Record<string, unknown> | undefined = undefined;
|
||||
|
||||
setContext(dropdownKey, null);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
:global(.dropdown-menu.btn-dropdown-menu) {
|
||||
display: none;
|
||||
min-width: 0;
|
||||
padding: calc(var(--toolbar-size) / 10) 0;
|
||||
|
||||
background-color: var(--window-bg);
|
||||
border-color: var(--medium-border);
|
||||
|
||||
:global(.btn-group) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dropdown-menu.btn-dropdown-menu.show) {
|
||||
@ -29,6 +37,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
}
|
||||
</style>
|
||||
|
||||
<ButtonGroup {id} class={`dropdown-menu btn-dropdown-menu ${className}`} {api}>
|
||||
<slot />
|
||||
</ButtonGroup>
|
||||
<WithTheming style="--toolbar-wrap: nowrap; ">
|
||||
<ButtonToolbar
|
||||
{id}
|
||||
class={`dropdown-menu btn-dropdown-menu ${className}`}
|
||||
nowrap={true}
|
||||
{api}>
|
||||
<slot />
|
||||
</ButtonToolbar>
|
||||
</WithTheming>
|
||||
|
||||
@ -74,7 +74,7 @@ ts_library(
|
||||
"//ts/html-filter",
|
||||
"//ts:image_module_support",
|
||||
"@npm//svelte",
|
||||
],
|
||||
] + svelte_names,
|
||||
)
|
||||
|
||||
copy_bootstrap_icons(
|
||||
@ -173,7 +173,7 @@ svelte_check(
|
||||
]) + [
|
||||
"//ts/sass:button_mixins_lib",
|
||||
"//ts/sass/bootstrap",
|
||||
"@npm//@types/bootstrap",
|
||||
"//ts/components:svelte_components",
|
||||
"@npm//@types/bootstrap",
|
||||
],
|
||||
)
|
||||
|
||||
@ -4,19 +4,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
-->
|
||||
<script context="module" lang="typescript">
|
||||
import "./legacy.css";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
const disabled = writable(false);
|
||||
|
||||
export function enableButtons(): void {
|
||||
disabled.set(false);
|
||||
}
|
||||
|
||||
export function disableButtons(): void {
|
||||
disabled.set(true);
|
||||
}
|
||||
|
||||
// @ts-expect-error insufficient typing of svelte modules
|
||||
import { updateAllState, resetAllState } from "components/WithState.svelte";
|
||||
|
||||
export function updateActiveButtons(event: Event) {
|
||||
@ -42,9 +29,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
</script>
|
||||
|
||||
<script lang="typescript">
|
||||
import { setContext } from "svelte";
|
||||
import { disabledKey, nightModeKey } from "components/contextKeys";
|
||||
|
||||
import WithTheming from "components/WithTheming.svelte";
|
||||
import StickyBar from "components/StickyBar.svelte";
|
||||
import ButtonToolbar from "components/ButtonToolbar.svelte";
|
||||
@ -63,11 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
export const colorButtons = {};
|
||||
export const templateButtons = {};
|
||||
|
||||
export let nightMode: boolean;
|
||||
|
||||
setContext(nightModeKey, nightMode);
|
||||
setContext(disabledKey, disabled);
|
||||
|
||||
export let size: number = 30;
|
||||
export let wraps: boolean = true;
|
||||
|
||||
|
||||
@ -10,6 +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 WithState from "components/WithState.svelte";
|
||||
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
|
||||
|
||||
@ -80,103 +81,109 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<WithDropdownMenu let:createDropdown let:menuId>
|
||||
<ButtonGroupItem>
|
||||
<ButtonGroupItem>
|
||||
<WithDropdownMenu let:createDropdown let:menuId>
|
||||
<IconButton on:mount={createDropdown}>
|
||||
{@html listOptionsIcon}
|
||||
</IconButton>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonDropdown id={menuId}>
|
||||
<ButtonGroup id="justify" {api}>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyLeft"
|
||||
update={() => document.queryCommandState('justifyLeft')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingAlignLeft()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyLeft');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyLeftIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
<ButtonDropdown id={menuId}>
|
||||
<ButtonToolbarItem id="justify">
|
||||
<ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyLeft"
|
||||
update={() => document.queryCommandState('justifyLeft')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingAlignLeft()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyLeft');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyLeftIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyCenter"
|
||||
update={() => document.queryCommandState('justifyCenter')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingCenter()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyCenter');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyCenterIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyCenter"
|
||||
update={() => document.queryCommandState('justifyCenter')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingCenter()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyCenter');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyCenterIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyRight"
|
||||
update={() => document.queryCommandState('justifyRight')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingAlignRight()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyRight');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyRightIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyRight"
|
||||
update={() => document.queryCommandState('justifyRight')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingAlignRight()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyRight');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyRightIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyFull"
|
||||
update={() => document.queryCommandState('justifyFull')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingJustify()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyFull');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyFullIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<WithState
|
||||
key="justifyFull"
|
||||
update={() => document.queryCommandState('justifyFull')}
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingJustify()}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('justifyFull');
|
||||
updateState(event);
|
||||
}}>
|
||||
{@html justifyFullIcon}
|
||||
</IconButton>
|
||||
</WithState>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
|
||||
<ButtonGroup id="indentation" {api}>
|
||||
<ButtonGroupItem>
|
||||
<IconButton
|
||||
on:click={outdentListItem}
|
||||
tooltip={tr.editingOutdent()}>
|
||||
{@html outdentIcon}
|
||||
</IconButton>
|
||||
</ButtonGroupItem>
|
||||
<ButtonToolbarItem id="indentation">
|
||||
<ButtonGroup>
|
||||
<ButtonGroupItem>
|
||||
<IconButton
|
||||
on:click={outdentListItem}
|
||||
tooltip={tr.editingOutdent()}>
|
||||
{@html outdentIcon}
|
||||
</IconButton>
|
||||
</ButtonGroupItem>
|
||||
|
||||
<ButtonGroupItem>
|
||||
<IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
|
||||
{@html indentIcon}
|
||||
</IconButton>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonDropdown>
|
||||
</WithDropdownMenu>
|
||||
<ButtonGroupItem>
|
||||
<IconButton
|
||||
on:click={indentListItem}
|
||||
tooltip={tr.editingIndent()}>
|
||||
{@html indentIcon}
|
||||
</IconButton>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
</ButtonToolbarItem>
|
||||
</ButtonDropdown>
|
||||
</WithDropdownMenu>
|
||||
</ButtonGroupItem>
|
||||
</ButtonGroup>
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
// Copyright: Ankitects Pty Ltd and contributors
|
||||
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
|
||||
import { disabledKey, nightModeKey } from "components/contextKeys";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
import EditorToolbar from "./EditorToolbar.svelte";
|
||||
import "./bootstrap.css";
|
||||
|
||||
const disabled = writable(false);
|
||||
|
||||
export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
|
||||
let toolbarResolve: (value: EditorToolbar) => void;
|
||||
const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
|
||||
@ -15,33 +20,30 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
|
||||
const target = document.body;
|
||||
const anchor = document.getElementById("fields")!;
|
||||
|
||||
toolbarResolve(
|
||||
new EditorToolbar({
|
||||
target,
|
||||
anchor,
|
||||
props: {
|
||||
nightMode: document.documentElement.classList.contains(
|
||||
"night-mode"
|
||||
),
|
||||
},
|
||||
})
|
||||
const context = new Map();
|
||||
context.set(disabledKey, disabled);
|
||||
context.set(
|
||||
nightModeKey,
|
||||
document.documentElement.classList.contains("night-mode")
|
||||
);
|
||||
|
||||
toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
|
||||
});
|
||||
});
|
||||
|
||||
return toolbarPromise;
|
||||
}
|
||||
|
||||
/* Exports for editor */
|
||||
export function enableButtons(): void {
|
||||
disabled.set(false);
|
||||
}
|
||||
|
||||
export function disableButtons(): void {
|
||||
disabled.set(true);
|
||||
}
|
||||
|
||||
export {
|
||||
// @ts-expect-error insufficient typing of svelte modules
|
||||
editorToolbar,
|
||||
// @ts-expect-error insufficient typing of svelte modules
|
||||
enableButtons,
|
||||
// @ts-expect-error insufficient typing of svelte modules
|
||||
disableButtons,
|
||||
// @ts-expect-error insufficient typing of svelte modules
|
||||
updateActiveButtons,
|
||||
// @ts-expect-error insufficient typing of svelte modules
|
||||
clearActiveButtons,
|
||||
editorToolbar,
|
||||
} from "./EditorToolbar.svelte";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user