fix(editor): figma block ui issues (#10167)

This commit is contained in:
Flrande
2025-02-13 13:56:18 +00:00
parent 3ada4bee0d
commit 4e488a1ba1
2 changed files with 14 additions and 7 deletions
@@ -132,7 +132,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme); const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
const titleIcon = loading ? LoadingIcon : YoutubeIcon; const titleIcon = loading ? LoadingIcon : YoutubeIcon;
const titleText = loading ? 'Loading...' : title; const titleText = loading ? 'Loading...' : title;
const descriptionText = loading ? '' : description; const descriptionText = loading ? null : description;
const bannerImage = const bannerImage =
!loading && image !loading && image
? html`<object type="image/webp" data=${image} draggable="false"> ? html`<object type="image/webp" data=${image} draggable="false">
@@ -216,9 +216,15 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
</div> </div>
</div> </div>
<div class="affine-embed-youtube-content-description"> ${loading
${descriptionText} ? html`<div
</div> class="affine-embed-youtube-content-description"
></div>`
: descriptionText
? html`<div class="affine-embed-youtube-content-description">
${descriptionText}
</div>`
: nothing}
<div class="affine-embed-youtube-content-url" @click=${this.open}> <div class="affine-embed-youtube-content-url" @click=${this.open}>
<span>www.youtube.com</span> <span>www.youtube.com</span>
@@ -2,6 +2,7 @@ import {
EMBED_CARD_HEIGHT, EMBED_CARD_HEIGHT,
EMBED_CARD_WIDTH, EMBED_CARD_WIDTH,
} from '@blocksuite/affine-shared/consts'; } from '@blocksuite/affine-shared/consts';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit'; import { css, html } from 'lit';
export const styles = css` export const styles = css`
@@ -194,7 +195,7 @@ export const styles = css`
white-space: normal; white-space: normal;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--affine-text-secondary-color); color: ${unsafeCSSVarV2('icon/primary')};
font-family: var(--affine-font-family); font-family: var(--affine-font-family);
font-size: var(--affine-font-xs); font-size: var(--affine-font-xs);
@@ -216,10 +217,10 @@ export const styles = css`
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
.affine-embed-youtube-content-url-icon .open-icon { .affine-embed-youtube-content-url-icon svg {
height: 12px; height: 12px;
width: 12px; width: 12px;
fill: var(--affine-text-secondary-color); fill: ${unsafeCSSVarV2('icon/primary')};
} }
.affine-embed-youtube-block.loading { .affine-embed-youtube-block.loading {