langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ButtonDropdown

Browse Source
This commit is contained in:
Henrik Giesel 2021-05-06 23:04:38 +02:00
parent 193e2f9e60
commit 2112b419f9
6 changed files with 141 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
qt/aqt/browser/browser.py
View File

@ -68,7 +68,6 @@ from aqt.utils import (
saveGeom, saveGeom,
saveSplitter, saveSplitter,
saveState, saveState,
shortcut,
showInfo, showInfo,
showWarning, showWarning,
skip_if_selection_is_empty, skip_if_selection_is_empty,
@ -383,7 +382,7 @@ class Browser(QMainWindow):
editor._links["preview"] = lambda _editor: self.onTogglePreview() editor._links["preview"] = lambda _editor: self.onTogglePreview()
editor.web.eval( 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) gui_hooks.editor_did_init.append(add_preview_button)

26
ts/components/ButtonDropdown.svelte
View File

@ -6,22 +6,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { setContext } from "svelte"; import { setContext } from "svelte";
import { dropdownKey } from "./contextKeys"; import { dropdownKey } from "./contextKeys";
import ButtonGroup from "./ButtonGroup.svelte"; import WithTheming from "./WithTheming.svelte";
import ButtonToolbar from "./ButtonToolbar.svelte";
export let id: string | undefined; export let id: string | undefined;
let className = ""; let className = "";
export { className as class }; export { className as class };
export let api = {}; export let api: Record<string, unknown> | undefined = undefined;
setContext(dropdownKey, null); setContext(dropdownKey, null);
</script> </script>
<style> <style lang="scss">
:global(.dropdown-menu.btn-dropdown-menu) { :global(.dropdown-menu.btn-dropdown-menu) {
display: none; display: none;
min-width: 0;
padding: calc(var(--toolbar-size) / 10) 0;
background-color: var(--window-bg); background-color: var(--window-bg);
border-color: var(--medium-border); border-color: var(--medium-border);
:global(.btn-group) {
position: static;
}
} }
:global(.dropdown-menu.btn-dropdown-menu.show) { :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> </style>
<ButtonGroup {id} class={`dropdown-menu btn-dropdown-menu ${className}`} {api}> <WithTheming style="--toolbar-wrap: nowrap; ">
<slot /> <ButtonToolbar
</ButtonGroup> {id}
class={`dropdown-menu btn-dropdown-menu ${className}`}
nowrap={true}
{api}>
<slot />
</ButtonToolbar>
</WithTheming>

4
ts/editor/BUILD.bazel
View File

@ -74,7 +74,7 @@ ts_library(
"//ts/html-filter", "//ts/html-filter",
"//ts:image_module_support", "//ts:image_module_support",
"@npm//svelte", "@npm//svelte",
], ] + svelte_names,
) )
copy_bootstrap_icons( copy_bootstrap_icons(
@ -173,7 +173,7 @@ svelte_check(
]) + [ ]) + [
"//ts/sass:button_mixins_lib", "//ts/sass:button_mixins_lib",
"//ts/sass/bootstrap", "//ts/sass/bootstrap",
"@npm//@types/bootstrap",
"//ts/components:svelte_components", "//ts/components:svelte_components",
"@npm//@types/bootstrap",
], ],
) )

21
ts/editor/EditorToolbar.svelte
View File

@ -4,19 +4,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script context="module" lang="typescript"> <script context="module" lang="typescript">
import "./legacy.css"; 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"; import { updateAllState, resetAllState } from "components/WithState.svelte";
export function updateActiveButtons(event: Event) { 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>
<script lang="typescript"> <script lang="typescript">
import { setContext } from "svelte";
import { disabledKey, nightModeKey } from "components/contextKeys";
import WithTheming from "components/WithTheming.svelte"; import WithTheming from "components/WithTheming.svelte";
import StickyBar from "components/StickyBar.svelte"; import StickyBar from "components/StickyBar.svelte";
import ButtonToolbar from "components/ButtonToolbar.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 colorButtons = {};
export const templateButtons = {}; export const templateButtons = {};
export let nightMode: boolean;
setContext(nightModeKey, nightMode);
setContext(disabledKey, disabled);
export let size: number = 30; export let size: number = 30;
export let wraps: boolean = true; export let wraps: boolean = true;

187
ts/editor/FormatBlockButtons.svelte
View File

@ -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 ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte"; import IconButton from "components/IconButton.svelte";
import ButtonDropdown from "components/ButtonDropdown.svelte"; import ButtonDropdown from "components/ButtonDropdown.svelte";
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
import WithState from "components/WithState.svelte"; import WithState from "components/WithState.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.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> </WithState>
</ButtonGroupItem> </ButtonGroupItem>
<WithDropdownMenu let:createDropdown let:menuId> <ButtonGroupItem>
<ButtonGroupItem> <WithDropdownMenu let:createDropdown let:menuId>
<IconButton on:mount={createDropdown}> <IconButton on:mount={createDropdown}>
{@html listOptionsIcon} {@html listOptionsIcon}
</IconButton> </IconButton>
</ButtonGroupItem>
<ButtonDropdown id={menuId}> <ButtonDropdown id={menuId}>
<ButtonGroup id="justify" {api}> <ButtonToolbarItem id="justify">
<ButtonGroupItem> <ButtonGroup>
<WithState <ButtonGroupItem>
key="justifyLeft" <WithState
update={() => document.queryCommandState('justifyLeft')} key="justifyLeft"
let:state={active} update={() => document.queryCommandState('justifyLeft')}
let:updateState> let:state={active}
<IconButton let:updateState>
tooltip={tr.editingAlignLeft()} <IconButton
{active} tooltip={tr.editingAlignLeft()}
on:click={(event) => { {active}
document.execCommand('justifyLeft'); on:click={(event) => {
updateState(event); document.execCommand('justifyLeft');
}}> updateState(event);
{@html justifyLeftIcon} }}>
</IconButton> {@html justifyLeftIcon}
</WithState> </IconButton>
</ButtonGroupItem> </WithState>
</ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <WithState
key="justifyCenter" key="justifyCenter"
update={() => document.queryCommandState('justifyCenter')} update={() => document.queryCommandState('justifyCenter')}
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={tr.editingCenter()} tooltip={tr.editingCenter()}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('justifyCenter'); document.execCommand('justifyCenter');
updateState(event); updateState(event);
}}> }}>
{@html justifyCenterIcon} {@html justifyCenterIcon}
</IconButton> </IconButton>
</WithState> </WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <WithState
key="justifyRight" key="justifyRight"
update={() => document.queryCommandState('justifyRight')} update={() => document.queryCommandState('justifyRight')}
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={tr.editingAlignRight()} tooltip={tr.editingAlignRight()}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('justifyRight'); document.execCommand('justifyRight');
updateState(event); updateState(event);
}}> }}>
{@html justifyRightIcon} {@html justifyRightIcon}
</IconButton> </IconButton>
</WithState> </WithState>
</ButtonGroupItem> </ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<WithState <WithState
key="justifyFull" key="justifyFull"
update={() => document.queryCommandState('justifyFull')} update={() => document.queryCommandState('justifyFull')}
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={tr.editingJustify()} tooltip={tr.editingJustify()}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('justifyFull'); document.execCommand('justifyFull');
updateState(event); updateState(event);
}}> }}>
{@html justifyFullIcon} {@html justifyFullIcon}
</IconButton> </IconButton>
</WithState> </WithState>
</ButtonGroupItem> </ButtonGroupItem>
</ButtonGroup> </ButtonGroup>
</ButtonToolbarItem>
<ButtonGroup id="indentation" {api}> <ButtonToolbarItem id="indentation">
<ButtonGroupItem> <ButtonGroup>
<IconButton <ButtonGroupItem>
on:click={outdentListItem} <IconButton
tooltip={tr.editingOutdent()}> on:click={outdentListItem}
{@html outdentIcon} tooltip={tr.editingOutdent()}>
</IconButton> {@html outdentIcon}
</ButtonGroupItem> </IconButton>
</ButtonGroupItem>
<ButtonGroupItem> <ButtonGroupItem>
<IconButton on:click={indentListItem} tooltip={tr.editingIndent()}> <IconButton
{@html indentIcon} on:click={indentListItem}
</IconButton> tooltip={tr.editingIndent()}>
</ButtonGroupItem> {@html indentIcon}
</ButtonGroup> </IconButton>
</ButtonDropdown> </ButtonGroupItem>
</WithDropdownMenu> </ButtonGroup>
</ButtonToolbarItem>
</ButtonDropdown>
</WithDropdownMenu>
</ButtonGroupItem>
</ButtonGroup> </ButtonGroup>

40
ts/editor/toolbar.ts
View File

@ -1,9 +1,14 @@
// Copyright: Ankitects Pty Ltd and contributors // Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // 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 EditorToolbar from "./EditorToolbar.svelte";
import "./bootstrap.css"; import "./bootstrap.css";
const disabled = writable(false);
export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> { export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
let toolbarResolve: (value: EditorToolbar) => void; let toolbarResolve: (value: EditorToolbar) => void;
const toolbarPromise = new Promise<EditorToolbar>((resolve) => { const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
@ -15,33 +20,30 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
const target = document.body; const target = document.body;
const anchor = document.getElementById("fields")!; const anchor = document.getElementById("fields")!;
toolbarResolve( const context = new Map();
new EditorToolbar({ context.set(disabledKey, disabled);
target, context.set(
anchor, nightModeKey,
props: { document.documentElement.classList.contains("night-mode")
nightMode: document.documentElement.classList.contains(
"night-mode"
),
},
})
); );
toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
}); });
}); });
return toolbarPromise; return toolbarPromise;
} }
/* Exports for editor */ export function enableButtons(): void {
disabled.set(false);
}
export function disableButtons(): void {
disabled.set(true);
}
export { 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, updateActiveButtons,
// @ts-expect-error insufficient typing of svelte modules
clearActiveButtons, clearActiveButtons,
editorToolbar,
} from "./EditorToolbar.svelte"; } from "./EditorToolbar.svelte";