mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-13 16:16:46 +08:00
fix(editor): update color of deleted banner of surface-ref (#12393)
Close [BS-3504](https://linear.app/affine-design/issue/BS-3504/linked-card-ui调整) Close [BS-3377](https://linear.app/affine-design/issue/BS-3377/surface-ref在page-mode下的dark颜色不对，垃圾桶也不对) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - The "not found" placeholder now adapts its appearance to match light or dark themes for a more cohesive visual experience. - **Style** - Updated placeholder icons to use distinct designs for light and dark themes, providing improved clarity and consistency. - **Chores** - Theme information is now more accurately passed to placeholder components for proper rendering. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
L-Sun
@@ -1,3 +1,4 @@
|
||||
import { ColorScheme } from '@blocksuite/affine-model';
|
||||
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
|
||||
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
|
||||
import { DeleteIcon } from '@blocksuite/icons/lit';
|
||||
@@ -7,7 +8,7 @@ import { css, html, nothing } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
|
||||
import { SurfaceRefNotFoundBackground } from '../icons';
|
||||
import { DarkDeletedSmallBanner, LightDeletedSmallBanner } from '../icons';
|
||||
import { getReferenceModelTitle, TYPE_ICON_MAP } from '../utils';
|
||||
|
||||
export class SurfaceRefPlaceHolder extends SignalWatcher(
|
||||
@@ -70,6 +71,9 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
|
||||
@property({ attribute: false })
|
||||
accessor inEdgeless = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor theme: ColorScheme = ColorScheme.Light;
|
||||
|
||||
override render() {
|
||||
const { referenceModel, refFlavour, inEdgeless } = this;
|
||||
|
||||
@@ -83,6 +87,11 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
|
||||
(referenceModel && getReferenceModelTitle(referenceModel)) ??
|
||||
matchedType.name;
|
||||
|
||||
const notFoundBackground =
|
||||
this.theme === ColorScheme.Light
|
||||
? LightDeletedSmallBanner
|
||||
: DarkDeletedSmallBanner;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class=${classMap({
|
||||
@@ -92,7 +101,7 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
|
||||
>
|
||||
${modelNotFound
|
||||
? html`<div class="surface-ref-not-found-background">
|
||||
${SurfaceRefNotFoundBackground}
|
||||
${notFoundBackground}
|
||||
</div>`
|
||||
: nothing}
|
||||
<div class="surface-ref-placeholder-heading">
|
||||
|
||||
@@ -1,105 +1,211 @@
|
||||
import { html } from 'lit';
|
||||
|
||||
export const SurfaceRefNotFoundBackground = html`
|
||||
<svg
|
||||
width="204"
|
||||
height="66"
|
||||
viewBox="0 0 204 66"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g filter="url(#filter0_d_877_26)">
|
||||
<rect width="53" height="66" transform="translate(49 22)" fill="white" />
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="30.8"
|
||||
width="26.0545"
|
||||
height="3.85"
|
||||
rx="1.925"
|
||||
fill="black"
|
||||
fill-opacity="0.07"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="38.5"
|
||||
width="36.9664"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.07"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="44"
|
||||
width="19.5409"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.07"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="49.5"
|
||||
width="36.9664"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.07"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="55"
|
||||
width="19.5409"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.07"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M157.341 17.6783L144.153 14.356L144.708 12.2671C145.628 8.80598 143.153 5.18897 139.18 4.18815L129.589 1.77198C125.616 0.771163 121.65 2.76557 120.73 6.22669L120.175 8.31563L106.987 4.99341C103.676 4.15942 100.371 5.82148 99.6048 8.70566L98.4947 12.8835C98.1881 14.0373 99.0131 15.2429 100.337 15.5765L157.885 30.0735C159.209 30.4071 160.531 29.7424 160.837 28.5886L161.948 24.4107C162.714 21.5266 160.651 18.5123 157.341 17.6783ZM125.526 7.43477C125.831 6.28324 127.157 5.61689 128.478 5.94987L138.07 8.36603C139.391 8.69901 140.218 9.90749 139.912 11.059L139.357 13.148L124.97 9.52372L125.526 7.43477Z"
|
||||
fill="#E6E6E6"
|
||||
export const LightDeletedSmallBanner = html`<svg
|
||||
width="204"
|
||||
height="66"
|
||||
viewBox="0 0 204 66"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g filter="url(#filter0_d_3075_418)">
|
||||
<rect width="53" height="66" transform="translate(49 22)" fill="white" />
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="30.8"
|
||||
width="26.0545"
|
||||
height="3.85"
|
||||
rx="1.925"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<path
|
||||
d="M98.6798 34.2638C98.2253 34.2631 97.8625 34.6108 97.8834 35.0271L99.9152 75.4671C100.103 79.2097 103.451 82.1461 107.536 82.1527L146.222 82.216C150.307 82.2226 153.665 79.2973 153.866 75.5552L156.037 35.1221C156.06 34.7059 155.698 34.357 155.243 34.3563L98.6798 34.2638ZM137.141 40.1651C137.143 38.8748 138.285 37.8316 139.693 37.8339C141.1 37.8362 142.238 38.8831 142.236 40.1734L142.183 70.5327C142.181 71.8229 141.039 72.8661 139.632 72.8638C138.225 72.8615 137.086 71.8146 137.089 70.5244L137.141 40.1651ZM124.404 40.1442C124.406 38.854 125.548 37.8108 126.956 37.8131C128.363 37.8154 129.501 38.8623 129.499 40.1526L129.447 70.5119C129.444 71.8021 128.303 72.8453 126.895 72.843C125.488 72.8407 124.349 71.7938 124.352 70.5035L124.404 40.1442ZM111.667 40.1234C111.669 38.8331 112.811 37.7899 114.219 37.7922C115.626 37.7945 116.764 38.8415 116.762 40.1317L116.71 70.491C116.707 71.7813 115.566 72.8245 114.158 72.8222C112.751 72.8199 111.613 71.773 111.615 70.4827L111.667 40.1234Z"
|
||||
fill="#E6E6E6"
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="38.5"
|
||||
width="36.9664"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_877_26"
|
||||
x="46"
|
||||
y="19"
|
||||
width="59"
|
||||
height="72"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="1.5" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_877_26"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_877_26"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="44"
|
||||
width="19.5409"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="49.5"
|
||||
width="36.9664"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="55"
|
||||
width="19.5409"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="black"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M157.341 17.6783L144.153 14.3561L144.708 12.2671C145.628 8.80601 143.153 5.189 139.18 4.18818L129.588 1.77201C125.616 0.771194 121.65 2.7656 120.73 6.22672L120.175 8.31566L106.987 4.99344C103.676 4.15945 100.371 5.82152 99.6047 8.70569L98.4946 12.8836C98.188 14.0373 99.013 15.2429 100.337 15.5766L157.885 30.0735C159.209 30.4072 160.531 29.7424 160.837 28.5886L161.948 24.4108C162.714 21.5266 160.651 18.5123 157.341 17.6783ZM125.525 7.4348C125.831 6.28327 127.157 5.61692 128.478 5.9499L138.07 8.36606C139.391 8.69904 140.218 9.90752 139.912 11.059L139.357 13.148L124.97 9.52375L125.525 7.4348Z"
|
||||
fill="#E6E6E6"
|
||||
/>
|
||||
<path
|
||||
d="M98.6798 34.2639C98.2253 34.2631 97.8625 34.6108 97.8834 35.0271L99.9152 75.4671C100.103 79.2098 103.451 82.1461 107.536 82.1528L146.222 82.216C150.307 82.2227 153.665 79.2973 153.866 75.5553L156.037 35.1222C156.06 34.7059 155.698 34.3571 155.243 34.3563L98.6798 34.2639ZM137.141 40.1651C137.143 38.8748 138.285 37.8316 139.693 37.8339C141.1 37.8362 142.238 38.8831 142.236 40.1734L142.183 70.5327C142.181 71.823 141.039 72.8662 139.632 72.8639C138.225 72.8616 137.086 71.8147 137.089 70.5244L137.141 40.1651ZM124.404 40.1443C124.406 38.854 125.548 37.8108 126.956 37.8131C128.363 37.8154 129.501 38.8623 129.499 40.1526L129.447 70.5119C129.444 71.8022 128.303 72.8454 126.895 72.8431C125.488 72.8408 124.349 71.7938 124.352 70.5036L124.404 40.1443ZM111.667 40.1234C111.669 38.8332 112.811 37.79 114.219 37.7923C115.626 37.7946 116.764 38.8415 116.762 40.1318L116.71 70.4911C116.707 71.7813 115.566 72.8245 114.158 72.8222C112.751 72.8199 111.613 71.773 111.615 70.4827L111.667 40.1234Z"
|
||||
fill="#E6E6E6"
|
||||
/>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_3075_418"
|
||||
x="46"
|
||||
y="19"
|
||||
width="59"
|
||||
height="72"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="1.5" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_3075_418"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_3075_418"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
export const DarkDeletedSmallBanner = html`<svg
|
||||
width="204"
|
||||
height="66"
|
||||
viewBox="0 0 204 66"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g filter="url(#filter0_d_3075_12843)">
|
||||
<rect
|
||||
width="53"
|
||||
height="66"
|
||||
transform="translate(49 22)"
|
||||
fill="white"
|
||||
fill-opacity="0.08"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="30.8"
|
||||
width="26.0545"
|
||||
height="3.85"
|
||||
rx="1.925"
|
||||
fill="white"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="38.5"
|
||||
width="36.9664"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="white"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="44"
|
||||
width="19.5409"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="white"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="49.5"
|
||||
width="36.9664"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="white"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="57.0168"
|
||||
y="55"
|
||||
width="19.5409"
|
||||
height="2.2"
|
||||
rx="1.1"
|
||||
fill="white"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M157.341 17.6783L144.153 14.3561L144.708 12.2671C145.628 8.80601 143.153 5.189 139.18 4.18818L129.588 1.77201C125.616 0.771194 121.65 2.7656 120.73 6.22672L120.175 8.31566L106.987 4.99344C103.676 4.15945 100.371 5.82152 99.6048 8.70569L98.4946 12.8836C98.1881 14.0373 99.013 15.2429 100.337 15.5766L157.885 30.0735C159.209 30.4072 160.531 29.7424 160.837 28.5886L161.948 24.4108C162.714 21.5266 160.651 18.5123 157.341 17.6783ZM125.525 7.4348C125.831 6.28327 127.157 5.61692 128.478 5.9499L138.07 8.36606C139.391 8.69904 140.218 9.90752 139.912 11.059L139.357 13.148L124.97 9.52375L125.525 7.4348Z"
|
||||
fill="#646464"
|
||||
/>
|
||||
<path
|
||||
d="M98.6798 34.2639C98.2253 34.2631 97.8625 34.6108 97.8834 35.0271L99.9152 75.4671C100.103 79.2098 103.451 82.1461 107.536 82.1528L146.222 82.216C150.307 82.2227 153.665 79.2973 153.866 75.5553L156.037 35.1222C156.06 34.7059 155.698 34.3571 155.243 34.3563L98.6798 34.2639ZM137.141 40.1651C137.143 38.8748 138.285 37.8316 139.693 37.8339C141.1 37.8362 142.238 38.8831 142.236 40.1734L142.183 70.5327C142.181 71.823 141.04 72.8662 139.632 72.8639C138.225 72.8616 137.086 71.8147 137.089 70.5244L137.141 40.1651ZM124.404 40.1443C124.406 38.854 125.548 37.8108 126.956 37.8131C128.363 37.8154 129.501 38.8623 129.499 40.1526L129.447 70.5119C129.444 71.8022 128.303 72.8454 126.895 72.8431C125.488 72.8408 124.35 71.7938 124.352 70.5036L124.404 40.1443ZM111.667 40.1234C111.669 38.8332 112.811 37.79 114.219 37.7923C115.626 37.7946 116.764 38.8415 116.762 40.1318L116.71 70.4911C116.707 71.7813 115.566 72.8245 114.158 72.8222C112.751 72.8199 111.613 71.773 111.615 70.4827L111.667 40.1234Z"
|
||||
fill="#646464"
|
||||
/>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_3075_12843"
|
||||
x="46"
|
||||
y="19"
|
||||
width="59"
|
||||
height="72"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="1.5" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_3075_12843"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_3075_12843"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg> `;
|
||||
|
||||
@@ -374,6 +374,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
|
||||
const { w, h } = Bound.deserialize(this._referenceXYWH$.value);
|
||||
const aspectRatio = h !== 0 ? w / h : 1;
|
||||
const _previewSpec = this._previewSpec.concat(this._runtimePreviewExt);
|
||||
const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value;
|
||||
|
||||
return html`<div class="ref-content">
|
||||
<div
|
||||
@@ -381,6 +382,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
|
||||
style=${styleMap({
|
||||
aspectRatio: `${aspectRatio}`,
|
||||
})}
|
||||
data-theme=${edgelessTheme}
|
||||
>
|
||||
${guard(this._previewDoc, () => {
|
||||
return this._previewDoc
|
||||
@@ -440,13 +442,14 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
|
||||
|
||||
const { _referencedModel, model } = this;
|
||||
const isEmpty = !_referencedModel || !_referencedModel.xywh;
|
||||
const theme = this.std.get(ThemeProvider).theme$.value;
|
||||
const content = isEmpty
|
||||
? html`<surface-ref-placeholder
|
||||
.referenceModel=${_referencedModel}
|
||||
.refFlavour=${model.props.refFlavour$.value}
|
||||
.theme=${theme}
|
||||
></surface-ref-placeholder>`
|
||||
: this._renderRefContent();
|
||||
const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value;
|
||||
|
||||
return html`
|
||||
<div
|
||||
@@ -454,7 +457,6 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
|
||||
'affine-surface-ref': true,
|
||||
focused: this.selected$.value,
|
||||
})}
|
||||
data-theme=${edgelessTheme}
|
||||
@click=${this._handleClick}
|
||||
>
|
||||
${content}
|
||||
|
||||
Reference in New Issue
Block a user