From 604f9363ce7b23f9a8482f823860d2fac4ac4209 Mon Sep 17 00:00:00 2001 From: Rich Chiodo Date: Tue, 16 Jul 2019 08:38:57 -0700 Subject: [PATCH 1/4] Make input box more visible. --- news/1 Enhancements/6381.md | 1 + package-lock.json | 70 +++++++++---------- package.json | 6 ++ package.nls.json | 2 +- src/client/common/types.ts | 1 + src/client/common/utils/localize.ts | 2 +- .../history-react/MainPanel.tsx | 2 +- src/datascience-ui/history-react/cell.tsx | 2 +- src/datascience-ui/history-react/code.tsx | 6 +- .../history-react/mainPanel.css | 9 +-- 10 files changed, 55 insertions(+), 46 deletions(-) create mode 100644 news/1 Enhancements/6381.md diff --git a/news/1 Enhancements/6381.md b/news/1 Enhancements/6381.md new file mode 100644 index 000000000000..9d542602e77f --- /dev/null +++ b/news/1 Enhancements/6381.md @@ -0,0 +1 @@ +Make the input box more visible to new users. diff --git a/package-lock.json b/package-lock.json index bad7d22b6e08..d0d0db2f8745 100644 --- a/package-lock.json +++ b/package-lock.json @@ -168,9 +168,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -227,9 +227,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -306,9 +306,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -338,9 +338,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -693,9 +693,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -1243,9 +1243,9 @@ } }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true }, "ms": { @@ -1268,9 +1268,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -5900,9 +5900,9 @@ }, "dependencies": { "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.14", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==", "dev": true } } @@ -14014,7 +14014,7 @@ }, "convert-source-map": { "version": "1.6.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==", "dev": true, "requires": { @@ -14023,7 +14023,7 @@ }, "execa": { "version": "1.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { @@ -14049,7 +14049,7 @@ }, "find-up": { "version": "3.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", "dev": true, "requires": { @@ -14064,7 +14064,7 @@ }, "get-stream": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", "dev": true, "requires": { @@ -14087,7 +14087,7 @@ }, "locate-path": { "version": "3.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", "dev": true, "requires": { @@ -14107,7 +14107,7 @@ }, "os-locale": { "version": "3.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", "dev": true, "requires": { @@ -14118,7 +14118,7 @@ }, "path-exists": { "version": "3.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", "dev": true }, @@ -14130,7 +14130,7 @@ }, "pkg-dir": { "version": "3.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", "dev": true, "requires": { @@ -14139,7 +14139,7 @@ }, "pump": { "version": "3.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", "dev": true, "requires": { @@ -14155,13 +14155,13 @@ }, "resolve-from": { "version": "4.0.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "dev": true }, "rimraf": { "version": "2.6.3", - "resolved": "", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "requires": { diff --git a/package.json b/package.json index 2eae9ae73a58..0f8098eee4a1 100644 --- a/package.json +++ b/package.json @@ -1412,6 +1412,12 @@ "description": "Limit the amount of text in Python Interactive cell text output to this value. 0 to allow any amount of characters.", "scope": "resource" }, + "python.dataScience.colorizeInputBox": { + "type": "boolean", + "default": true, + "description": "Whether or not to use the theme's peek color as the background for the input box.", + "scope": "resource" + }, "python.disableInstallationCheck": { "type": "boolean", "default": false, diff --git a/package.nls.json b/package.nls.json index f2253cadf4ed..d9648d6822c1 100644 --- a/package.nls.json +++ b/package.nls.json @@ -148,7 +148,7 @@ "DataScience.pythonRestartHeader": "Restarted kernel:", "DataScience.pythonNewHeader": "Started new kernel:", "DataScience.executingCodeFailure": "Executing code failed : {0}", - "DataScience.inputWatermark": "Shift-enter to run", + "DataScience.inputWatermark": "Type code here and hit shift-enter to run", "DataScience.deleteButtonTooltip": "Remove cell", "DataScience.gotoCodeButtonTooltip": "Go to code", "DataScience.copyBackToSourceButtonTooltip": "Paste code into file", diff --git a/src/client/common/types.ts b/src/client/common/types.ts index 44a47fcce10c..94b3040576df 100644 --- a/src/client/common/types.ts +++ b/src/client/common/types.ts @@ -329,6 +329,7 @@ export interface IDataScienceSettings { textOutputLimit?: number; magicCommandsAsComments?: boolean; remoteDebuggerPort?: number; + colorizeInputBox?: boolean; } export const IConfigurationService = Symbol('IConfigurationService'); diff --git a/src/client/common/utils/localize.ts b/src/client/common/utils/localize.ts index 34af2680d655..a98e6226c0bd 100644 --- a/src/client/common/utils/localize.ts +++ b/src/client/common/utils/localize.ts @@ -181,7 +181,7 @@ export namespace DataScience { export const pythonInterruptFailedHeader = localize('DataScience.pythonInterruptFailedHeader', 'Keyboard interrupt crashed the kernel. Kernel restarted.'); export const sysInfoURILabel = localize('DataScience.sysInfoURILabel', 'Jupyter Server URI: '); export const executingCodeFailure = localize('DataScience.executingCodeFailure', 'Executing code failed : {0}'); - export const inputWatermark = localize('DataScience.inputWatermark', 'Shift-enter to run'); + export const inputWatermark = localize('DataScience.inputWatermark', 'Type code here and hit shift-enter to run'); export const liveShareConnectFailure = localize('DataScience.liveShareConnectFailure', 'Cannot connect to host jupyter session. URI not found.'); export const liveShareCannotSpawnNotebooks = localize('DataScience.liveShareCannotSpawnNotebooks', 'Spawning jupyter notebooks is not supported over a live share connection'); export const liveShareCannotImportNotebooks = localize('DataScience.liveShareCannotImportNotebooks', 'Importing notebooks is not currently supported over a live share connection'); diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx index f8c326bfb8be..5a282791caec 100644 --- a/src/datascience-ui/history-react/MainPanel.tsx +++ b/src/datascience-ui/history-react/MainPanel.tsx @@ -322,7 +322,7 @@ export class MainPanel extends React.Component submitNewCode={this.submitInput} baseTheme={baseTheme} codeTheme={this.props.codeTheme} - showWatermark={!this.state.submittedText} + showWatermark={true} ref={this.saveEditCellRef} gotoCode={noop} copyCode={noop} diff --git a/src/datascience-ui/history-react/cell.tsx b/src/datascience-ui/history-react/cell.tsx index 87df65524bdc..659f3f456ebd 100644 --- a/src/datascience-ui/history-react/cell.tsx +++ b/src/datascience-ui/history-react/cell.tsx @@ -269,7 +269,7 @@ export class Cell extends React.Component { private renderInputs = () => { if (this.showInputs()) { - const backgroundColor = this.props.cellVM.cell.type === 'preview' ? + const backgroundColor = this.props.cellVM.cell.type === 'preview' || (getSettings().colorizeInputBox && this.props.cellVM.editable) ? 'var(--override-peek-background, var(--vscode-peekViewEditor-background))' : undefined; diff --git a/src/datascience-ui/history-react/code.tsx b/src/datascience-ui/history-react/code.tsx index 8cb117a06ef1..e0ff6dd3f348 100644 --- a/src/datascience-ui/history-react/code.tsx +++ b/src/datascience-ui/history-react/code.tsx @@ -122,7 +122,7 @@ export class Code extends React.Component { } private getWatermarkString = () : string => { - return getLocString('DataScience.inputWatermark', 'Shift-enter to run'); + return getLocString('DataScience.inputWatermark', 'Type code here and hit shift-enter to run'); } private editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor) => { @@ -147,8 +147,8 @@ export class Code extends React.Component { if (this.state.model) { this.props.onChange(e.changes, this.state.model.id); } - if (!this.props.readOnly) { - this.setState({allowWatermark: false}); + if (!this.props.readOnly && this.state.model) { + this.setState({allowWatermark: this.state.model.getValueLength() === 0}); } } diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css index 6657611f76dc..54390ec489eb 100644 --- a/src/datascience-ui/history-react/mainPanel.css +++ b/src/datascience-ui/history-react/mainPanel.css @@ -50,14 +50,15 @@ body, html { } .invisible { - visibility: hidden; + visibility: hidden; } .edit-panel { min-height:50px; padding: 10px 0px 10px 0px; width: 100%; - border-top-color: var(--override-widget-background, var(--vscode-editorGroupHeader-tabsBackground)); + border-top-color: var(--override-badge-background, var(--vscode-badge-background)); border-top-style: solid; - border-top-width: 1px; -} \ No newline at end of file + border-top-width: 2px; + background-color: var(--override-peek-background, var(--vscode-peekViewEditor-background)); +} From 219fae9a4293d47ef43089ff06a23d43ad40ab1e Mon Sep 17 00:00:00 2001 From: Rich Chiodo Date: Tue, 16 Jul 2019 10:32:44 -0700 Subject: [PATCH 2/4] Update text for watermark --- package.nls.json | 2 +- src/client/common/utils/localize.ts | 2 +- src/datascience-ui/history-react/code.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.nls.json b/package.nls.json index d9648d6822c1..2fdc29a21d88 100644 --- a/package.nls.json +++ b/package.nls.json @@ -148,7 +148,7 @@ "DataScience.pythonRestartHeader": "Restarted kernel:", "DataScience.pythonNewHeader": "Started new kernel:", "DataScience.executingCodeFailure": "Executing code failed : {0}", - "DataScience.inputWatermark": "Type code here and hit shift-enter to run", + "DataScience.inputWatermark": "Type code here and press shift-enter to run", "DataScience.deleteButtonTooltip": "Remove cell", "DataScience.gotoCodeButtonTooltip": "Go to code", "DataScience.copyBackToSourceButtonTooltip": "Paste code into file", diff --git a/src/client/common/utils/localize.ts b/src/client/common/utils/localize.ts index a98e6226c0bd..0132a0f7934c 100644 --- a/src/client/common/utils/localize.ts +++ b/src/client/common/utils/localize.ts @@ -181,7 +181,7 @@ export namespace DataScience { export const pythonInterruptFailedHeader = localize('DataScience.pythonInterruptFailedHeader', 'Keyboard interrupt crashed the kernel. Kernel restarted.'); export const sysInfoURILabel = localize('DataScience.sysInfoURILabel', 'Jupyter Server URI: '); export const executingCodeFailure = localize('DataScience.executingCodeFailure', 'Executing code failed : {0}'); - export const inputWatermark = localize('DataScience.inputWatermark', 'Type code here and hit shift-enter to run'); + export const inputWatermark = localize('DataScience.inputWatermark', 'Type code here and press shift-enter to run'); export const liveShareConnectFailure = localize('DataScience.liveShareConnectFailure', 'Cannot connect to host jupyter session. URI not found.'); export const liveShareCannotSpawnNotebooks = localize('DataScience.liveShareCannotSpawnNotebooks', 'Spawning jupyter notebooks is not supported over a live share connection'); export const liveShareCannotImportNotebooks = localize('DataScience.liveShareCannotImportNotebooks', 'Importing notebooks is not currently supported over a live share connection'); diff --git a/src/datascience-ui/history-react/code.tsx b/src/datascience-ui/history-react/code.tsx index e0ff6dd3f348..432ae09e8310 100644 --- a/src/datascience-ui/history-react/code.tsx +++ b/src/datascience-ui/history-react/code.tsx @@ -122,7 +122,7 @@ export class Code extends React.Component { } private getWatermarkString = () : string => { - return getLocString('DataScience.inputWatermark', 'Type code here and hit shift-enter to run'); + return getLocString('DataScience.inputWatermark', 'Type code here and press shift-enter to run'); } private editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor) => { From 94870b33c9fa2ca59e3510791ed546c2618132ce Mon Sep 17 00:00:00 2001 From: Rich Chiodo Date: Tue, 16 Jul 2019 12:52:09 -0700 Subject: [PATCH 3/4] Fix color if input box color is turned off --- src/datascience-ui/history-react/MainPanel.tsx | 3 ++- src/datascience-ui/history-react/mainPanel.css | 9 +++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx index 5a282791caec..4bc9b002cba9 100644 --- a/src/datascience-ui/history-react/MainPanel.tsx +++ b/src/datascience-ui/history-react/MainPanel.tsx @@ -308,9 +308,10 @@ export class MainPanel extends React.Component const maxOutputSize = getSettings().maxOutputSize; const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined; const executionCount = this.getInputExecutionCount(); + const editPanelClass = getSettings().colorizeInputBox ? 'edit-panel-colorized' : 'edit-panel'; return ( -
+
Date: Tue, 16 Jul 2019 13:04:50 -0700 Subject: [PATCH 4/4] Update background on changes --- src/datascience-ui/react-common/monacoEditor.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/datascience-ui/react-common/monacoEditor.tsx b/src/datascience-ui/react-common/monacoEditor.tsx index 22917cd6f431..f21e91e1defc 100644 --- a/src/datascience-ui/react-common/monacoEditor.tsx +++ b/src/datascience-ui/react-common/monacoEditor.tsx @@ -197,7 +197,8 @@ export class MonacoEditor extends React.Component { - if (this.state.editor && this.containerRef.current && this.props.forceBackground) { + if (this.state.editor && this.containerRef.current) { const nodes = this.containerRef.current.getElementsByClassName('monaco-editor-background'); if (nodes && nodes.length > 0) { const backgroundNode = nodes[0] as HTMLDivElement; if (backgroundNode && backgroundNode.style) { - backgroundNode.style.backgroundColor = this.props.forceBackground; + backgroundNode.style.backgroundColor = this.props.forceBackground ? this.props.forceBackground : 'transparent'; } } }