Skip to content

Commit 98dd5e6

Browse files
rchiodorchiodo
authored
Make input box more visible. (#6605)
* Make input box more visible. * Update text for watermark * Fix color if input box color is turned off * Update background on changes
1 parent f300767 commit 98dd5e6

11 files changed

Lines changed: 46 additions & 26 deletions

File tree

‎news/1 Enhancements/6381.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Make the input box more visible to new users.

‎package-lock.json‎

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1412,6 +1412,12 @@
14121412
"description": "Limit the amount of text in Python Interactive cell text output to this value. 0 to allow any amount of characters.",
14131413
"scope": "resource"
14141414
},
1415+
"python.dataScience.colorizeInputBox": {
1416+
"type": "boolean",
1417+
"default": true,
1418+
"description": "Whether or not to use the theme's peek color as the background for the input box.",
1419+
"scope": "resource"
1420+
},
14151421
"python.dataScience.stopOnError": {
14161422
"type": "boolean",
14171423
"default": true,

‎package.nls.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
"DataScience.pythonRestartHeader": "Restarted kernel:",
149149
"DataScience.pythonNewHeader": "Started new kernel:",
150150
"DataScience.executingCodeFailure": "Executing code failed : {0}",
151-
"DataScience.inputWatermark": "Shift-enter to run",
151+
"DataScience.inputWatermark": "Type code here and press shift-enter to run",
152152
"DataScience.deleteButtonTooltip": "Remove cell",
153153
"DataScience.gotoCodeButtonTooltip": "Go to code",
154154
"DataScience.copyBackToSourceButtonTooltip": "Paste code into file",

‎src/client/common/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,7 @@ export interface IDataScienceSettings {
330330
magicCommandsAsComments?: boolean;
331331
stopOnError?: boolean;
332332
remoteDebuggerPort?: number;
333+
colorizeInputBox?: boolean;
333334
}
334335

335336
export const IConfigurationService = Symbol('IConfigurationService');

‎src/client/common/utils/localize.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export namespace DataScience {
181181
export const pythonInterruptFailedHeader = localize('DataScience.pythonInterruptFailedHeader', 'Keyboard interrupt crashed the kernel. Kernel restarted.');
182182
export const sysInfoURILabel = localize('DataScience.sysInfoURILabel', 'Jupyter Server URI: ');
183183
export const executingCodeFailure = localize('DataScience.executingCodeFailure', 'Executing code failed : {0}');
184-
export const inputWatermark = localize('DataScience.inputWatermark', 'Shift-enter to run');
184+
export const inputWatermark = localize('DataScience.inputWatermark', 'Type code here and press shift-enter to run');
185185
export const liveShareConnectFailure = localize('DataScience.liveShareConnectFailure', 'Cannot connect to host jupyter session. URI not found.');
186186
export const liveShareCannotSpawnNotebooks = localize('DataScience.liveShareCannotSpawnNotebooks', 'Spawning jupyter notebooks is not supported over a live share connection');
187187
export const liveShareCannotImportNotebooks = localize('DataScience.liveShareCannotImportNotebooks', 'Importing notebooks is not currently supported over a live share connection');

‎src/datascience-ui/history-react/MainPanel.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,9 +308,10 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
308308
const maxOutputSize = getSettings().maxOutputSize;
309309
const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
310310
const executionCount = this.getInputExecutionCount();
311+
const editPanelClass = getSettings().colorizeInputBox ? 'edit-panel-colorized' : 'edit-panel';
311312

312313
return (
313-
<div className='edit-panel'>
314+
<div className={editPanelClass}>
314315
<ErrorBoundary>
315316
<Cell
316317
editorOptions={this.state.editorOptions}
@@ -322,7 +323,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
322323
submitNewCode={this.submitInput}
323324
baseTheme={baseTheme}
324325
codeTheme={this.props.codeTheme}
325-
showWatermark={!this.state.submittedText}
326+
showWatermark={true}
326327
ref={this.saveEditCellRef}
327328
gotoCode={noop}
328329
copyCode={noop}

‎src/datascience-ui/history-react/cell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export class Cell extends React.Component<ICellProps> {
269269

270270
private renderInputs = () => {
271271
if (this.showInputs()) {
272-
const backgroundColor = this.props.cellVM.cell.type === 'preview' ?
272+
const backgroundColor = this.props.cellVM.cell.type === 'preview' || (getSettings().colorizeInputBox && this.props.cellVM.editable) ?
273273
'var(--override-peek-background, var(--vscode-peekViewEditor-background))'
274274
: undefined;
275275

‎src/datascience-ui/history-react/code.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
122122
}
123123

124124
private getWatermarkString = () : string => {
125-
return getLocString('DataScience.inputWatermark', 'Shift-enter to run');
125+
return getLocString('DataScience.inputWatermark', 'Type code here and press shift-enter to run');
126126
}
127127

128128
private editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor) => {
@@ -147,8 +147,8 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
147147
if (this.state.model) {
148148
this.props.onChange(e.changes, this.state.model.id);
149149
}
150-
if (!this.props.readOnly) {
151-
this.setState({allowWatermark: false});
150+
if (!this.props.readOnly && this.state.model) {
151+
this.setState({allowWatermark: this.state.model.getValueLength() === 0});
152152
}
153153
}
154154

‎src/datascience-ui/history-react/mainPanel.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,24 @@ body, html {
5050
}
5151

5252
.invisible {
53-
visibility: hidden;
53+
visibility: hidden;
5454
}
5555

5656
.edit-panel {
5757
min-height:50px;
5858
padding: 10px 0px 10px 0px;
5959
width: 100%;
60-
border-top-color: var(--override-widget-background, var(--vscode-editorGroupHeader-tabsBackground));
60+
border-top-color: var(--override-badge-background, var(--vscode-badge-background));
6161
border-top-style: solid;
62-
border-top-width: 1px;
63-
}
62+
border-top-width: 2px;
63+
}
64+
65+
.edit-panel-colorized {
66+
min-height:50px;
67+
padding: 10px 0px 10px 0px;
68+
width: 100%;
69+
border-top-color: var(--override-badge-background, var(--vscode-badge-background));
70+
border-top-style: solid;
71+
border-top-width: 2px;
72+
background-color: var(--override-peek-background, var(--vscode-peekViewEditor-background));
73+
}

0 commit comments

Comments
 (0)