mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
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:
@@ -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' })}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user