chore(editor): improve bookmark UI&UX (#11525)

Close [BS-2804](https://linear.app/affine-design/issue/BS-2804/[ui-bug]-link-card-view-ui-布局错了,url-应该是-text-secondary-color)
Close [BS-3034](https://linear.app/affine-design/issue/BS-3034/link-card-view-链接需要-fix-在底部)

### What Changes
- remove url selected color
- improve url click area by moving `@click` callback to inner small url container
- improve layout
This commit is contained in:
L-Sun
2025-04-08 10:34:36 +00:00
parent a2125787c2
commit 7d4bb5150e
2 changed files with 9 additions and 8 deletions

View File

@@ -2,7 +2,7 @@ import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
import { WebIcon16 } from '@blocksuite/affine-components/icons';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import { getHostName } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { OpenInNewIcon } from '@blocksuite/icons/lit';
import { BlockSelection, ShadowlessElement } from '@blocksuite/std';
import { html } from 'lit';
@@ -12,7 +12,9 @@ import { classMap } from 'lit/directives/class-map.js';
import type { BookmarkBlockComponent } from '../bookmark-block.js';
import { styles } from '../styles.js';
export class BookmarkCard extends WithDisposable(ShadowlessElement) {
export class BookmarkCard extends SignalWatcher(
WithDisposable(ShadowlessElement)
) {
static override styles = styles;
private _handleClick(event: MouseEvent) {
@@ -125,11 +127,11 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
<div class="affine-bookmark-content-description">
${descriptionText}
</div>
<div
class="affine-bookmark-content-url-wrapper"
@click=${this.bookmark.open}
>
<div class="affine-bookmark-content-url">
<div class="affine-bookmark-content-url-wrapper">
<div
class="affine-bookmark-content-url"
@click=${this.bookmark.open}
>
<span>${getHostName(url)}</span>
<div class="affine-bookmark-content-url-icon">
${OpenInNewIcon({ width: '12', height: '12' })}

View File

@@ -26,7 +26,6 @@ export const styles = css`
.affine-bookmark-content {
width: calc(100% - 204px);
height: 100%;
display: flex;
flex-direction: column;
align-self: stretch;