Fix command prompt to look like Spyder (microsoft#5744)

rchiodo · web-flow · commit c905fc784ee9 · 2019-05-23T15:28:24.000-07:00
* Fix command prompt to look like Spyder

* Add news entry
diff --git a/news/2 Fixes/5729.md b/news/2 Fixes/5729.md
@@ -0,0 +1 @@
+Adjust input box prompt to look more an IPython console prompt.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
@@ -290,6 +290,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         const errorBackgroundColor = getSettings().errorBackgroundColor;
         const actualErrorBackgroundColor = errorBackgroundColor ? errorBackgroundColor : '#FFFFFF';
         const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
+        const executionCount = this.getInputExecutionCount(this.state.cellVMs);
 
         return (
             <div className='edit-panel'>
@@ -309,6 +310,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                         ref={this.saveEditCellRef}
                         gotoCode={noop}
                         delete={noop}
+                        editExecutionCount={executionCount}
                         onCodeCreated={this.editableCodeCreated}
                         onCodeChange={this.codeChange}
                         monacoTheme={this.state.monacoTheme}
diff --git a/src/datascience-ui/history-react/cell.tsx b/src/datascience-ui/history-react/cell.tsx
@@ -21,7 +21,6 @@ import './cell.css';
 import { CellButton } from './cellButton';
 import { Code } from './code';
 import { CollapseButton } from './collapseButton';
-import { CommandPrompt } from './commandPrompt';
 import { ExecutionCount } from './executionCount';
 import { Image, ImageName } from './image';
 import { InputHistory } from './inputHistory';
@@ -41,6 +40,7 @@ interface ICellProps {
     errorBackgroundColor: string;
     monacoTheme: string | undefined;
     editorOptions: monacoEditor.editor.IEditorOptions;
+    editExecutionCount: number;
     gotoCode(): void;
     delete(): void;
     submitNewCode(code: string): void;
@@ -187,7 +187,7 @@ export class Cell extends React.Component<ICellProps> {
             return this.props.cellVM.editable ?
                 (
                     <div className='controls-div'>
-                        <CommandPrompt />
+                        <ExecutionCount isBusy={busy} count={this.props.editExecutionCount.toString()} visible={this.isCodeCell()} />
                     </div>
                 ) : (
                     <div className='controls-div'>
diff --git a/src/datascience-ui/history-react/code.css b/src/datascience-ui/history-react/code.css
@@ -3,6 +3,7 @@
     position: relative;
     width:100%;
     margin-bottom:16px;
+    top: -2px; /* Account for spacing removed from the monaco editor */
 }
 
 .code-area-editable {
diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
@@ -75,6 +75,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
                     baseTheme={baseTheme}
                     codeTheme={this.props.codeTheme}
                     showWatermark={false}
+                    editExecutionCount={0}
                     errorBackgroundColor={actualErrorBackgroundColor}
                     gotoCode={() => this.props.gotoCellCode(index)}
                     delete={() => this.props.deleteCell(index)}
diff --git a/src/datascience-ui/history-react/executionCount.css b/src/datascience-ui/history-react/executionCount.css
@@ -3,6 +3,7 @@
     font-weight: bold;
     display:flex;
     color: var(--code-comment-color);
+    font-family: var(--code-font-family);
  }
 
  .execution-count-busy-outer {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Adjust input box prompt to look more an IPython console prompt.`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`position: relative;`
`4`	`4`	`width:100%;`
`5`	`5`	`margin-bottom:16px;`
	`6`	`+ top: -2px; /* Account for spacing removed from the monaco editor */`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.code-area-editable {`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`font-weight: bold;`
`4`	`4`	`display:flex;`
`5`	`5`	`color: var(--code-comment-color);`
	`6`	`+ font-family: var(--code-font-family);`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.execution-count-busy-outer {`