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:
donteatfriedrice
2025-02-14 13:22:27 +00:00
parent e6b570e613
commit 5a42edf076

View File

@@ -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>