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

fix(editor): width and height of embed block (#10223)

Browse Source
This commit is contained in:
Flrande
2025-02-17 10:37:04 +00:00
parent e4f2223a2a
commit 5748591bc5
9 changed files with 23 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
blocksuite/affine/block-attachment/src/styles.ts
View File

@@ -1,7 +1,3 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css } from 'lit';
export const styles = css`
@@ -12,7 +8,7 @@ export const styles = css`
gap: 12px;
width: 100%;
height: ${EMBED_CARD_HEIGHT.horizontalThin}px;
height: 100%;
padding: 12px;
border-radius: 8px;
@@ -121,9 +117,6 @@ export const styles = css`
}
.affine-attachment-card.cubeThick {
width: ${EMBED_CARD_WIDTH.cubeThick}px;
height: ${EMBED_CARD_HEIGHT.cubeThick}px;
flex-direction: column-reverse;
.affine-attachment-content {

6
blocksuite/affine/block-bookmark/src/bookmark-edgeless-block.ts
View File

@@ -3,7 +3,7 @@ import {
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { toGfxBlockComponent } from '@blocksuite/block-std';
import { styleMap } from 'lit/directives/style-map.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { BookmarkBlockComponent } from './bookmark-block.js';
@@ -43,7 +43,9 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
return this.renderPageContent();
}
protected override accessor blockContainerStyles = {};
protected override accessor blockContainerStyles: StyleInfo = {
height: '100%',
};
}
declare global {

19
blocksuite/affine/block-bookmark/src/styles.ts
View File

@@ -1,19 +1,20 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
import { baseTheme } from '@toeverything/theme';
import { css, unsafeCSS } from 'lit';
export const styles = css`
bookmark-card {
display: block;
height: 100%;
width: 100%;
}
.affine-bookmark-card {
container: affine-bookmark-card / inline-size;
margin: 0 auto;
box-sizing: border-box;
display: flex;
width: 100%;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
@@ -187,8 +188,6 @@ export const styles = css`
}
.affine-bookmark-card.list {
height: ${EMBED_CARD_HEIGHT.list}px;
.affine-bookmark-content {
width: 100%;
flex-direction: row;
@@ -215,9 +214,8 @@ export const styles = css`
}
.affine-bookmark-card.vertical {
width: ${EMBED_CARD_WIDTH.vertical}px;
height: ${EMBED_CARD_HEIGHT.vertical}px;
flex-direction: column-reverse;
height: 100%;
.affine-bookmark-content {
width: 100%;
@@ -248,9 +246,6 @@ export const styles = css`
}
.affine-bookmark-card.cube {
width: ${EMBED_CARD_WIDTH.cube}px;
height: ${EMBED_CARD_HEIGHT.cube}px;
.affine-bookmark-content {
width: 100%;
flex-direction: column;

9
blocksuite/affine/block-embed/src/embed-figma-block/styles.ts
View File

@@ -1,17 +1,14 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-figma-block {
width: ${EMBED_CARD_WIDTH.figma}px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 12px;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
@@ -19,8 +16,6 @@ export const styles = css`
opacity: var(--add, 1);
background: var(--affine-background-primary-color);
user-select: none;
aspect-ratio: ${EMBED_CARD_WIDTH.figma} / ${EMBED_CARD_HEIGHT.figma};
}
.affine-embed-figma {

19
blocksuite/affine/block-embed/src/embed-github-block/styles.ts
View File

@@ -1,7 +1,3 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css, html } from 'lit';
export const styles = css`
@@ -9,7 +5,7 @@ export const styles = css`
box-sizing: border-box;
display: flex;
width: 100%;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
@@ -243,9 +239,6 @@ export const styles = css`
}
.affine-embed-github-block.list {
height: ${EMBED_CARD_HEIGHT.list}px;
width: ${EMBED_CARD_WIDTH.list}px;
.affine-embed-github-content {
width: 100%;
flex-direction: row;
@@ -279,14 +272,7 @@ export const styles = css`
}
}
.affine-embed-github-block.horizontal {
width: ${EMBED_CARD_WIDTH.horizontal}px;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
}
.affine-embed-github-block.vertical {
width: ${EMBED_CARD_WIDTH.vertical}px;
height: ${EMBED_CARD_HEIGHT.vertical}px;
flex-direction: column;
.affine-embed-github-content {
@@ -357,9 +343,6 @@ export const styles = css`
}
.affine-embed-github-block.cube {
width: ${EMBED_CARD_WIDTH.cube}px;
height: ${EMBED_CARD_HEIGHT.cube}px;
.affine-embed-github-content {
width: 100%;
flex-direction: column;

26
blocksuite/affine/block-embed/src/embed-linked-doc-block/styles.ts
View File

@@ -1,8 +1,3 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_MIN_WIDTH,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css, html } from 'lit';
import { embedNoteContentStyles } from '../common/embed-note-content-styles.js';
@@ -11,7 +6,8 @@ export const styles = css`
.affine-embed-linked-doc-block {
box-sizing: border-box;
display: flex;
width: ${EMBED_CARD_WIDTH.horizontal}px;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
opacity: var(--add, 1);
@@ -20,11 +16,6 @@ export const styles = css`
position: relative;
}
.affine-embed-linked-doc-block.horizontal {
width: ${EMBED_CARD_WIDTH.horizontal}px;
height: ${EMBED_CARD_HEIGHT.horizontal}px;
}
.affine-embed-linked-doc-content {
flex-grow: 1;
height: 100%;
@@ -184,11 +175,6 @@ export const styles = css`
border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
}
.affine-embed-linked-doc-block:not(.in-canvas) {
width: 100%;
min-width: calc(min(${EMBED_CARD_MIN_WIDTH}px, 100%));
}
.affine-embed-linked-doc-block.loading {
.affine-embed-linked-doc-content-date {
display: none;
@@ -243,8 +229,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.horizontalThin {
height: ${EMBED_CARD_HEIGHT.horizontalThin}px;
.affine-embed-linked-doc-banner {
height: 66px;
}
@@ -260,7 +244,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.list {
height: ${EMBED_CARD_HEIGHT.list}px;
.affine-embed-linked-doc-content {
width: 100%;
flex-direction: row;
@@ -286,8 +269,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.vertical {
width: ${EMBED_CARD_WIDTH.vertical}px;
height: ${EMBED_CARD_HEIGHT.vertical}px;
flex-direction: column-reverse;
.affine-embed-linked-doc-content {
@@ -329,9 +310,6 @@ export const styles = css`
}
}
.affine-embed-linked-doc-block.cube {
width: ${EMBED_CARD_WIDTH.cube}px;
height: ${EMBED_CARD_HEIGHT.cube}px;
.affine-embed-linked-doc-content {
width: 100%;
flex-direction: column;

10
blocksuite/affine/block-embed/src/embed-loom-block/styles.ts
View File

@@ -1,26 +1,22 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-loom-block {
box-sizing: border-box;
width: ${EMBED_CARD_WIDTH.video}px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 12px;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
opacity: var(--add, 1);
background: var(--affine-background-primary-color);
user-select: none;
aspect-ratio: ${EMBED_CARD_WIDTH.video} / ${EMBED_CARD_HEIGHT.video};
}
.affine-embed-loom-video {

10
blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts
View File

@@ -1,15 +1,11 @@
import {
EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-youtube-block {
box-sizing: border-box;
width: ${EMBED_CARD_WIDTH.video}px;
max-width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
@@ -22,8 +18,6 @@ export const styles = css`
opacity: var(--add, 1);
background: var(--affine-background-primary-color);
user-select: none;
aspect-ratio: ${EMBED_CARD_WIDTH.video} / ${EMBED_CARD_HEIGHT.video};
}
.affine-embed-youtube-video {

2
blocksuite/tests-legacy/bookmark.spec.ts
View File

@@ -263,7 +263,7 @@ test.describe('embed card toolbar', () => {
const listStyleBookmarkBox = await bookmark.boundingBox();
assertExists(listStyleBookmarkBox);
assertAlmostEqual(listStyleBookmarkBox.width, 752, 2);
assertAlmostEqual(listStyleBookmarkBox.height, 46, 2);
assertAlmostEqual(listStyleBookmarkBox.height, 48, 2);
await openCardStyleMenu();
await cardStyleHorizontalButton.click();