mirror of
https://github.com/Microsoft/vscode
synced 2024-11-05 18:29:38 +00:00
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:
parent
8a7aecc3b9
commit
83cfe01787
4 changed files with 15 additions and 17 deletions
|
@ -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'
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in a new issue