From 43aea1c94137c6409e2fe4557245dc14ade92e40 Mon Sep 17 00:00:00 2001 From: "qingyi.xjh" Date: Fri, 20 Dec 2024 14:53:59 +0800 Subject: [PATCH] style: improve inline diff partial edit --- .../inline-stream-diff.module.less | 15 ++++++++++++--- .../inline-stream-diff/live-preview.component.tsx | 8 +++++--- packages/i18n/src/common/en-US.lang.ts | 3 ++- packages/i18n/src/common/zh-CN.lang.ts | 3 ++- .../theme/src/common/color-tokens/ai-native.ts | 6 +++--- 5 files changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.module.less b/packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.module.less index 058fa27a35..e909d31ef2 100644 --- a/packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.module.less +++ b/packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.module.less @@ -42,21 +42,30 @@ .content { float: right; display: flex; - border-radius: 4px; + flex-direction: row; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; overflow: hidden; margin-right: 12px; max-height: @line-height; height: @line-height; align-items: center; + opacity: 0.8; } .btn { + display: flex; pointer-events: auto; border: none; - font-size: 12px; + font-size: 10px; cursor: pointer; padding: 2px 6px; - height: @line-height; + align-items: center; + gap: 4px; + + > span { + opacity: 1; + } &.accept_btn { background-color: var(--aiNative-inlineDiffAcceptPartialEdit); diff --git a/packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.component.tsx b/packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.component.tsx index 7df8c8b1e4..6fefc76454 100644 --- a/packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.component.tsx +++ b/packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.component.tsx @@ -5,7 +5,7 @@ import ReactDOMClient from 'react-dom/client'; import { Autowired, Injectable } from '@opensumi/di'; import { KeybindingRegistry, useDisposable } from '@opensumi/ide-core-browser'; import { AI_INLINE_DIFF_PARTIAL_EDIT } from '@opensumi/ide-core-browser/lib/ai-native/command'; -import { Emitter, Event, IPosition, isDefined, isUndefined, uuid } from '@opensumi/ide-core-common'; +import { Emitter, Event, IPosition, isDefined, isUndefined, localize, uuid } from '@opensumi/ide-core-common'; import { ICodeEditor, IEditorDecorationsCollection, @@ -114,10 +114,12 @@ const PartialEditComponent = (props: { >
- {keyStrings.acceptSequence} + {localize('aiNative.inline.diff.accept')} + {keyStrings.acceptSequence} - {keyStrings.discardSequence} + {localize('aiNative.inline.diff.reject')} + {keyStrings.discardSequence}
diff --git a/packages/i18n/src/common/en-US.lang.ts b/packages/i18n/src/common/en-US.lang.ts index 798c99498d..eafd0e3b62 100644 --- a/packages/i18n/src/common/en-US.lang.ts +++ b/packages/i18n/src/common/en-US.lang.ts @@ -1457,8 +1457,9 @@ export const localizationBundle = { 'aiNative.inline.chat.operate.loading.cancel': 'Esc to cancel', 'aiNative.inline.chat.input.placeholder.default': 'Ask Copilot（shift + enter newline）', 'aiNative.inline.hint.widget.placeholder': '{0} to inline chat', - 'aiNative.inline.problem.fix.title': 'Fix with AI', + 'aiNative.inline.diff.accept': 'Accept', + 'aiNative.inline.diff.reject': 'Reject', 'aiNative.resolve.conflict.dialog.afresh': 'Are you sure you want to regenerate?', 'aiNative.resolve.conflict.dialog.detection': diff --git a/packages/i18n/src/common/zh-CN.lang.ts b/packages/i18n/src/common/zh-CN.lang.ts index 7733f0cd0f..448ee1513a 100644 --- a/packages/i18n/src/common/zh-CN.lang.ts +++ b/packages/i18n/src/common/zh-CN.lang.ts @@ -1223,8 +1223,9 @@ export const localizationBundle = { 'aiNative.inline.chat.operate.loading.cancel': '按 ESC 取消', 'aiNative.inline.chat.input.placeholder.default': '可以问我任何问题，支持 shift + 回车换行', 'aiNative.inline.hint.widget.placeholder': '按 {0} 唤起 Inline Chat', - 'aiNative.inline.problem.fix.title': 'AI 修复', + 'aiNative.inline.diff.accept': '采纳', + 'aiNative.inline.diff.reject': '拒绝', 'aiNative.resolve.conflict.dialog.afresh': '你确定要重新生成吗？', 'aiNative.resolve.conflict.dialog.detection': diff --git a/packages/theme/src/common/color-tokens/ai-native.ts b/packages/theme/src/common/color-tokens/ai-native.ts index 8e2142aa0f..42298fe663 100644 --- a/packages/theme/src/common/color-tokens/ai-native.ts +++ b/packages/theme/src/common/color-tokens/ai-native.ts @@ -18,21 +18,21 @@ export const designInlineDiffRemovedRange = registerColor( export const designInlineDiffAcceptPartialEdit = registerColor( 'aiNative.inlineDiffAcceptPartialEdit', - { dark: transparent(defaultInsertColor, 3), light: transparent(defaultInsertColor, 3), hcDark: null, hcLight: null }, + { dark: '#89d185', light: '#89d185', hcDark: null, hcLight: null }, '', true, ); export const designInlineDiffAcceptPartialEditForeground = registerColor( 'aiNative.inlineDiffAcceptPartialEdit.foreground', - { dark: '#fff', light: '#fff', hcDark: null, hcLight: null }, + { dark: '#1f1f1f', light: '#1f1f1f', hcDark: null, hcLight: null }, '', true, ); export const designInlineDiffDiscardPartialEdit = registerColor( 'aiNative.inlineDiffDiscardPartialEdit', - { dark: transparent(defaultRemoveColor, 3), light: transparent(defaultRemoveColor, 3), hcDark: null, hcLight: null }, + { dark: '#f14c4c', light: '#f14c4c', hcDark: null, hcLight: null }, '', true, );