mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-27 02:42:25 +08:00
fix(core): copy more button style (#10196)
[AF-2228](https://linear.app/affine-design/issue/AF-2228/ui-bug-retry-和-copy-的按钮颜色不一致)
This commit is contained in:
@@ -7,14 +7,15 @@ import {
|
|||||||
createButtonPopper,
|
createButtonPopper,
|
||||||
NotificationProvider,
|
NotificationProvider,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
|
unsafeCSSVarV2,
|
||||||
} from '@blocksuite/affine/blocks';
|
} from '@blocksuite/affine/blocks';
|
||||||
import { noop, WithDisposable } from '@blocksuite/affine/global/utils';
|
import { noop, WithDisposable } from '@blocksuite/affine/global/utils';
|
||||||
|
import { CopyIcon, MoreHorizontalIcon, ResetIcon } from '@blocksuite/icons/lit';
|
||||||
import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
|
import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
|
||||||
import { property, query, state } from 'lit/decorators.js';
|
import { property, query, state } from 'lit/decorators.js';
|
||||||
import { repeat } from 'lit/directives/repeat.js';
|
import { repeat } from 'lit/directives/repeat.js';
|
||||||
|
|
||||||
import { type ChatAction } from '../../_common/chat-actions-handle';
|
import { type ChatAction } from '../../_common/chat-actions-handle';
|
||||||
import { CopyIcon, MoreIcon, RetryIcon } from '../../_common/icons';
|
|
||||||
import { copyText } from '../../utils/editor-actions';
|
import { copyText } from '../../utils/editor-actions';
|
||||||
|
|
||||||
noop(Tooltip);
|
noop(Tooltip);
|
||||||
@@ -39,8 +40,15 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
|
|||||||
background-color: var(--affine-hover-color);
|
background-color: var(--affine-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
.button {
|
||||||
color: var(--affine-icon-color);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: ${unsafeCSSVarV2('icon/primary')};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -89,7 +97,7 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
|
|||||||
@state()
|
@state()
|
||||||
private accessor _showMoreMenu = false;
|
private accessor _showMoreMenu = false;
|
||||||
|
|
||||||
@query('.more-button')
|
@query('.button.more')
|
||||||
private accessor _moreButton!: HTMLDivElement;
|
private accessor _moreButton!: HTMLDivElement;
|
||||||
|
|
||||||
@query('.more-menu')
|
@query('.more-menu')
|
||||||
@@ -167,6 +175,7 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
|
|||||||
<div class="copy-more">
|
<div class="copy-more">
|
||||||
${content
|
${content
|
||||||
? html`<div
|
? html`<div
|
||||||
|
class="button copy"
|
||||||
@click=${async () => {
|
@click=${async () => {
|
||||||
const success = await copyText(host, content);
|
const success = await copyText(host, content);
|
||||||
if (success) {
|
if (success) {
|
||||||
@@ -175,23 +184,24 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
|
|||||||
}}
|
}}
|
||||||
data-testid="action-copy-button"
|
data-testid="action-copy-button"
|
||||||
>
|
>
|
||||||
${CopyIcon}
|
${CopyIcon({ width: '20px', height: '20px' })}
|
||||||
<affine-tooltip>Copy</affine-tooltip>
|
<affine-tooltip>Copy</affine-tooltip>
|
||||||
</div>`
|
</div>`
|
||||||
: nothing}
|
: nothing}
|
||||||
${isLast
|
${isLast
|
||||||
? html`<div
|
? html`<div
|
||||||
|
class="button retry"
|
||||||
@click=${() => this.retry()}
|
@click=${() => this.retry()}
|
||||||
data-testid="action-retry-button"
|
data-testid="action-retry-button"
|
||||||
>
|
>
|
||||||
${RetryIcon}
|
${ResetIcon({ width: '20px', height: '20px' })}
|
||||||
<affine-tooltip>Retry</affine-tooltip>
|
<affine-tooltip>Retry</affine-tooltip>
|
||||||
</div>`
|
</div>`
|
||||||
: nothing}
|
: nothing}
|
||||||
${isLast
|
${isLast
|
||||||
? nothing
|
? nothing
|
||||||
: html`<div class="more-button" @click=${this._toggle}>
|
: html`<div class="button more" @click=${this._toggle}>
|
||||||
${MoreIcon}
|
${MoreHorizontalIcon({ width: '20px', height: '20px' })}
|
||||||
</div> `}
|
</div> `}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user