webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Lexical: Worked on toolbar styling, got format submenu working

Browse Source
This commit is contained in:
Dan Brown
2024-07-04 16:16:16 +01:00
parent 04c7e680fd
commit 2c96af9aea
6 changed files with 133 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts
View File

@ -7,10 +7,12 @@ export class EditorDropdownButton extends EditorContainerUiElement {
protected button: EditorButton;
protected childItems: EditorUiElement[];
protected open: boolean = false;
protected showOnHover: boolean = false;
constructor(button: EditorBasicButtonDefinition|EditorButton, children: EditorUiElement[]) {
constructor(button: EditorBasicButtonDefinition|EditorButton, showOnHover: boolean, children: EditorUiElement[]) {
super(children);
this.childItems = children
this.childItems = children;
this.showOnHover = showOnHover;
if (button instanceof EditorButton) {
this.button = button;
@ -47,13 +49,15 @@ export class EditorDropdownButton extends EditorContainerUiElement {
class: 'editor-dropdown-menu-container',
}, [button, menu]);
handleDropdown(button, menu, () => {
handleDropdown({toggle : button, menu : menu,
showOnHover: this.showOnHover,
onOpen : () => {
this.open = true;
this.getContext().manager.triggerStateUpdateForElement(this.button);
}, () => {
}, onClose : () => {
this.open = false;
this.getContext().manager.triggerStateUpdateForElement(this.button);
});
}});
return wrapper;
}

11
resources/js/wysiwyg/ui/framework/blocks/format-menu.ts
View File

@ -20,7 +20,7 @@ export class EditorFormatMenu extends EditorContainerUiElement {
class: 'editor-format-menu editor-dropdown-menu-container',
}, [toggle, menu]);
handleDropdown(toggle, menu);
handleDropdown({toggle : toggle, menu : menu});
return wrapper;
}
@ -33,6 +33,15 @@ export class EditorFormatMenu extends EditorContainerUiElement {
this.updateToggleLabel(child.getLabel());
return;
}
if (child instanceof EditorContainerUiElement) {
for (const grandchild of child.getChildren()) {
if (grandchild instanceof EditorButton && grandchild.isActive()) {
this.updateToggleLabel(grandchild.getLabel());
return;
}
}
}
}
this.updateToggleLabel(this.trans('Formats'));

7
resources/js/wysiwyg/ui/framework/blocks/overflow-container.ts
View File

@ -17,13 +17,14 @@ export class EditorOverflowContainer extends EditorContainerUiElement {
this.overflowButton = new EditorDropdownButton({
label: 'More',
icon: moreHorizontal,
}, []);
}, false, []);
this.addChildren(this.overflowButton);
}
protected buildDOM(): HTMLElement {
const visibleChildren = this.content.slice(0, this.size);
const invisibleChildren = this.content.slice(this.size);
const slicePosition = this.content.length > this.size ? this.size - 1 : this.size;
const visibleChildren = this.content.slice(0, slicePosition);
const invisibleChildren = this.content.slice(slicePosition);
const visibleElements = visibleChildren.map(child => child.getDOMElement());
if (invisibleChildren.length > 0) {