Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-26 10:45:57 +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%',
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 height = bound.h / scale;
const rect = this._notePageContent?.getBoundingClientRect();
const rect = this._noteContent?.getBoundingClientRect();
if (!rect) return nothing;
const zoom = this.gfx.viewport.zoom;
@@ -159,14 +159,14 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
);
const observer = new MutationObserver(() => {
const rect = this._notePageContent?.getBoundingClientRect();
const rect = this._noteContent?.getBoundingClientRect();
if (!rect) return;
const zoom = this.gfx.viewport.zoom;
const scale = this.model.edgeless.scale ?? 1;
this._noteFullHeight =
rect.height / scale / zoom + 2 * EDGELESS_BLOCK_CHILD_PADDING;
});
if (this._notePageContent) {
if (this._noteContent) {
observer.observe(this, { childList: true, subtree: true });
_disposables.add(() => observer.disconnect());
}
@@ -235,19 +235,20 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
.note=${this.model}
></edgeless-note-background>
<edgeless-page-block-title
.note=${this.model}
></edgeless-page-block-title>
<div
class="edgeless-note-page-content"
class=${styles.clipContainer}
style=${styleMap({
width: '100%',
height: '100%',
'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>
<edgeless-note-mask
@@ -291,8 +292,8 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
@state()
private accessor _noteFullHeight = 0;
@query('.edgeless-note-page-content .affine-note-block-container')
private accessor _notePageContent: HTMLElement | null = null;
@query(`.${styles.clipContainer} > div`)
private accessor _noteContent: HTMLElement | null = null;
@query('doc-title')
private accessor _docTitle: DocTitle | null = null;