Align panel chat input to inline input (#190107)

* Align panel chat input to inline input

* Tweak inline styles

* Fix placeholder colors

* Use inline color for inline placeholder foreground

* Revert height change for now
This commit is contained in:
David Dossett 2023-08-10 09:57:37 -07:00 committed by GitHub
parent 8a7aecc3b9
commit 83cfe01787
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 17 deletions

View file

@ -15,7 +15,7 @@ import { ITextModel } from 'vs/editor/common/model';
import { ILanguageFeaturesService } from 'vs/editor/common/services/languageFeatures';
import { localize } from 'vs/nls';
import { Registry } from 'vs/platform/registry/common/platform';
import { editorForeground } from 'vs/platform/theme/common/colorRegistry';
import { inputPlaceholderForeground } from 'vs/platform/theme/common/colorRegistry';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IChatWidget, IChatWidgetService } from 'vs/workbench/contrib/chat/browser/chat';
import { ChatWidget } from 'vs/workbench/contrib/chat/browser/chatWidget';
@ -74,7 +74,7 @@ class InputEditorDecorations extends Disposable {
private getPlaceholderColor(): string | undefined {
const theme = this.themeService.getColorTheme();
const transparentForeground = theme.getColor(editorForeground)?.transparent(0.4);
const transparentForeground = theme.getColor(inputPlaceholderForeground);
return transparentForeground?.toString();
}
@ -126,7 +126,6 @@ class InputEditorDecorations extends Disposable {
after: {
contentText: shouldRenderFollowupPlaceholder ? command.followupPlaceholder : command.detail,
color: this.getPlaceholderColor(),
padding: '0 0 0 3px'
}
}
}];

View file

@ -184,13 +184,14 @@
box-sizing: border-box;
cursor: text;
margin: 0px 12px;
background-color: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border, transparent);
border-radius: 4px;
border-radius: 2px;
position: relative;
padding-left: 8px;
padding: 0 4px;
margin-bottom: 4px;
align-items: center;
justify-content: space-between;
}
.interactive-session .interactive-input-and-toolbar.focused {
@ -207,10 +208,7 @@
}
.interactive-session .interactive-input-part .interactive-execute-toolbar {
position: absolute;
height: 22px;
right: 6px;
bottom: 6px;
}
.interactive-session .interactive-input-part .interactive-execute-toolbar .codicon-debug-stop {

View file

@ -29,8 +29,9 @@
.monaco-editor .inline-chat .body .content {
display: flex;
box-sizing: border-box;
outline: 1px solid var(--vscode-inlineChatInput-border);
outline-offset: -1px;
border-radius: 2px;
border: 1px solid var(--vscode-inlineChatInput-border);
}
.monaco-editor .inline-chat .body .content.synthetic-focus {
@ -38,9 +39,10 @@
}
.monaco-editor .inline-chat .body .content .input {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 2px 2px 4px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
background-color: var(--vscode-inlineChatInput-background);
cursor: text;
}
@ -52,7 +54,6 @@
.monaco-editor .inline-chat .body .content .input .editor-placeholder {
position: absolute;
z-index: 1;
padding: 3px 0 0 0;
color: var(--vscode-inlineChatInput-placeholderForeground);
white-space: nowrap;
overflow: hidden;
@ -98,14 +99,14 @@
/* status */
.monaco-editor .inline-chat .status {
margin-top: 3px;
margin-top: 2px;
display: flex;
justify-content: space-between;
align-items: center;
}
.monaco-editor .inline-chat .status.actions {
margin-top: 6px;
margin-top: 2px;
}
.monaco-editor .inline-chat .status .actions.hidden {

View file

@ -58,7 +58,7 @@ import { AccessibilityCommandId } from 'vs/workbench/contrib/accessibility/commo
const defaultAriaLabel = localize('aria-label', "Inline Chat Input");
const _inputEditorOptions: IEditorConstructionOptions = {
padding: { top: 3, bottom: 2 },
padding: { top: 2, bottom: 2 },
overviewRulerLanes: 0,
glyphMargin: false,
lineNumbers: 'off',
@ -99,7 +99,7 @@ const _inputEditorOptions: IEditorConstructionOptions = {
ariaLabel: defaultAriaLabel,
fontFamily: DEFAULT_FONT_FAMILY,
fontSize: 13,
lineHeight: 20,
lineHeight: 20
};
const _previewEditorEditorOptions: IDiffEditorConstructionOptions = {