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,
NotificationProvider,
Tooltip,
unsafeCSSVarV2,
} from '@blocksuite/affine/blocks';
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 { property, query, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { type ChatAction } from '../../_common/chat-actions-handle';
import { CopyIcon, MoreIcon, RetryIcon } from '../../_common/icons';
import { copyText } from '../../utils/editor-actions';
noop(Tooltip);
@@ -39,8 +40,15 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
background-color: var(--affine-hover-color);
}
svg {
color: var(--affine-icon-color);
.button {
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()
private accessor _showMoreMenu = false;
@query('.more-button')
@query('.button.more')
private accessor _moreButton!: HTMLDivElement;
@query('.more-menu')
@@ -167,6 +175,7 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
<div class="copy-more">
${content
? html`<div
class="button copy"
@click=${async () => {
const success = await copyText(host, content);
if (success) {
@@ -175,23 +184,24 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
}}
data-testid="action-copy-button"
>
${CopyIcon}
${CopyIcon({ width: '20px', height: '20px' })}
<affine-tooltip>Copy</affine-tooltip>
</div>`
: nothing}
${isLast
? html`<div
class="button retry"
@click=${() => this.retry()}
data-testid="action-retry-button"
>
${RetryIcon}
${ResetIcon({ width: '20px', height: '20px' })}
<affine-tooltip>Retry</affine-tooltip>
</div>`
: nothing}
${isLast
? nothing
: html`<div class="more-button" @click=${this._toggle}>
${MoreIcon}
: html`<div class="button more" @click=${this._toggle}>
${MoreHorizontalIcon({ width: '20px', height: '20px' })}
</div> `}
</div>