Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 12:55:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): adjust ui of surface-ref inner toolbar (#11129)

Browse Source 
Close [BS-2803](https://linear.app/affine-design/issue/BS-2803/inserted-frame-ui%E8%B0%83%E6%95%B4)
Close [BS-2815](https://linear.app/affine-design/issue/BS-2815/inserted-group-ui调整)

### What Changes
- Add an inner toolbar for hovered `surface-ref-block`
- Simplify viewport related codes of `surface-ref-block`
- Expose popover floating options from `affine-menu-button`

https://github.com/user-attachments/assets/916b0a22-6271-4a6f-b338-6630e0426967
This commit is contained in:
L-Sun
2025-03-25 03:48:12 +00:00
parent 314e5795eb
commit a2e3d318ba
8 changed files with 382 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
blocksuite/affine/components/src/toolbar/menu-button.ts
View File

@@ -25,9 +25,10 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
}
`;
private _popper!: ReturnType<typeof createButtonPopper>;
private _popper: ReturnType<typeof createButtonPopper> | null = null;
override firstUpdated() {
private _updatePopper() {
this._popper?.dispose();
this._popper = createButtonPopper({
reference: this._trigger,
popperElement: this._content,
@@ -48,16 +49,30 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
offsetHeight: 6 * 4,
...this.popperOptions,
});
}
override willUpdate(changedProperties: PropertyValues) {
if (changedProperties.has('contentPadding')) {
this.style.setProperty('--content-padding', this.contentPadding ?? '');
}
if (this.hasUpdated && changedProperties.has('popperOptions')) {
this._updatePopper();
}
}
override firstUpdated() {
this._updatePopper();
this._disposables.addFromEvent(this, 'keydown', (e: KeyboardEvent) => {
e.stopPropagation();
if (e.key === 'Escape') {
this._popper.hide();
this._popper?.hide();
}
});
this._disposables.addFromEvent(this._trigger, 'click', (_: MouseEvent) => {
this._popper.toggle();
this._popper?.toggle();
});
this._disposables.add(this._popper);
this._disposables.add(() => this._popper?.dispose());
}
hide() {
@@ -77,12 +92,6 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
this._popper?.show(force);
}
override willUpdate(changedProperties: PropertyValues) {
if (changedProperties.has('contentPadding')) {
this.style.setProperty('--content-padding', this.contentPadding ?? '');
}
}
@query('editor-menu-content')
private accessor _content!: EditorMenuContent;