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

fix(editor): collapsed page block visibility (#10097)

Browse Source 
This PR fixed that doc title is not hidden when page block is collapsed
This commit is contained in:
L-Sun
2025-02-11 14:29:24 +00:00
parent 42bdae16fb
commit 0b3c7a578e
3 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
blocksuite/affine/block-note/src/note-edgeless-block.css.ts
View File

@@ -58,7 +58,7 @@ export const noteBackground = style({
}, },
}); });
export const pageContent = style({ export const clipContainer = style({
width: '100%', width: '100%',
height: '100%', height: '100%',
}); });

27
blocksuite/affine/block-note/src/note-edgeless-block.ts
View File

@@ -49,7 +49,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
const width = bound.w / scale + extraPadding * 2 + extraBorder; const width = bound.w / scale + extraPadding * 2 + extraBorder;
const height = bound.h / scale; const height = bound.h / scale;
const rect = this._notePageContent?.getBoundingClientRect(); const rect = this._noteContent?.getBoundingClientRect();
if (!rect) return nothing; if (!rect) return nothing;
const zoom = this.gfx.viewport.zoom; const zoom = this.gfx.viewport.zoom;
@@ -159,14 +159,14 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
); );
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
const rect = this._notePageContent?.getBoundingClientRect(); const rect = this._noteContent?.getBoundingClientRect();
if (!rect) return; if (!rect) return;
const zoom = this.gfx.viewport.zoom; const zoom = this.gfx.viewport.zoom;
const scale = this.model.edgeless.scale ?? 1; const scale = this.model.edgeless.scale ?? 1;
this._noteFullHeight = this._noteFullHeight =
rect.height / scale / zoom + 2 * EDGELESS_BLOCK_CHILD_PADDING; rect.height / scale / zoom + 2 * EDGELESS_BLOCK_CHILD_PADDING;
}); });
if (this._notePageContent) { if (this._noteContent) {
observer.observe(this, { childList: true, subtree: true }); observer.observe(this, { childList: true, subtree: true });
_disposables.add(() => observer.disconnect()); _disposables.add(() => observer.disconnect());
} }
@@ -235,19 +235,20 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
.note=${this.model} .note=${this.model}
></edgeless-note-background> ></edgeless-note-background>
<edgeless-page-block-title
.note=${this.model}
></edgeless-page-block-title>
<div <div
class="edgeless-note-page-content" class=${styles.clipContainer}
style=${styleMap({ style=${styleMap({
width: '100%',
height: '100%',
'overflow-y': this._isShowCollapsedContent ? 'initial' : 'clip', 'overflow-y': this._isShowCollapsedContent ? 'initial' : 'clip',
})} })}
> >
${this.renderPageContent()} <div>
<edgeless-page-block-title
.note=${this.model}
></edgeless-page-block-title>
<div class="edgeless-note-page-content">
${this.renderPageContent()}
</div>
</div>
</div> </div>
<edgeless-note-mask <edgeless-note-mask
@@ -291,8 +292,8 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
@state() @state()
private accessor _noteFullHeight = 0; private accessor _noteFullHeight = 0;
@query('.edgeless-note-page-content .affine-note-block-container') @query(`.${styles.clipContainer} > div`)
private accessor _notePageContent: HTMLElement | null = null; private accessor _noteContent: HTMLElement | null = null;
@query('doc-title') @query('doc-title')
private accessor _docTitle: DocTitle | null = null; private accessor _docTitle: DocTitle | null = null;

6
tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
View File

@@ -150,11 +150,9 @@ test.describe('edgeless page block', () => {
await expect(infoButton).toBeHidden(); await expect(infoButton).toBeHidden();
}); });
test('page title should show in note when page block is not collapsed', async ({ test('page title should be editable', async ({ page }) => {
page,
}) => {
const note = page.locator('affine-edgeless-note'); const note = page.locator('affine-edgeless-note');
const docTitle = note.locator('doc-title'); const docTitle = note.locator('edgeless-page-block-title');
await expect(docTitle).toBeVisible(); await expect(docTitle).toBeVisible();
await expect(docTitle).toHaveText(title); await expect(docTitle).toHaveText(title);