Fixup ui

Author: rchiodo

package-lock.json

@@ -2219,7 +2219,7 @@
  "onigasm": "^2.2.2",
  "pdfkit": "^0.10.0",
  "pidusage": "^1.2.0",
- "react-select": "^3.0.4",
+ "react-dropdown": "^1.6.4",
  "react-svg-pan-zoom": "^3.1.0",
  "react-svgmt": "^1.1.8",
  "react-virtualized": "^9.21.1",
@@ -2295,7 +2295,6 @@
  "@types/react": "^16.8.21",
  "@types/react-dom": "^16.0.8",
  "@types/react-json-tree": "^0.6.8",
- "@types/react-select": "^2.0.19",
  "@types/react-virtualized": "^9.21.2",
  "@types/request": "^2.47.0",
  "@types/semver": "^5.5.0",

package.json

@@ -62,7 +62,7 @@ export function generateTestState(inputBlockToggled : (id: string) => void, file
  tokenizerLoaded: true,
  editorOptions: {},
  currentExecutionCount: 0,
- runnableVersions: [{ name: 'My Jupyter', type: 'local' }],
+ runnableVersions: [{ name: 'My Jupyter', type: 'local' }, { name: 'My Jupyter Too', type: 'local'}],
  currentRunnableVersion: 0
  };
 }

src/datascience-ui/history-react/mainPanelState.ts

@@ -0,0 +1,17 @@
+.kernel {
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ text-align:center;
+}
+
+.kernel-prefix {
+ font-size: var(--code-font-size);
+ font-family: var(--code-font-family);
+ display: inline-block;
+ vertical-align: middle;
+ line-height: normal;
+ margin: 2px;
+ padding: 2px;
+}

src/datascience-ui/history-react/toolbarPanel.css

@@ -46,7 +46,10 @@ export class ToolbarPanel extends React.Component<IToolbarPanelProps> {
  return(
  <div id='toolbar-panel'>
  <MenuBar baseTheme={this.props.baseTheme}>
- <ComboBox values={runnableVersions} currentValue={currentVersion} onChange={this.changeRunnable} />
+ <div className='kernel'>
+ <span className='kernel-prefix'>{getLocString('DataScience.kernelDropdownHeader', 'Kernel: ')}</span>
+ <ComboBox values={runnableVersions} currentValue={currentVersion} onChange={this.changeRunnable} />
+ </div>
  <ImageButton baseTheme={this.props.baseTheme} onClick={this.props.clearAll} tooltip={getLocString('DataScience.clearAll', 'Remove All Cells')}>
  <Image baseTheme={this.props.baseTheme} class='image-button-image' image={ImageName.Cancel}/>
  </ImageButton>

src/datascience-ui/history-react/toolbarPanel.tsx

@@ -1,15 +1,52 @@
 .combobox-container {
- background-color: var(--vscode-editor-background);
+ background-color: var(--override-background, var(--vscode-editor-background));
+ position: relative;
+ text-align:center;
+ margin: 2px;
 }
 
-.combobox__control {
- background-color: var(--vscode-editor-background);
+.combobox {
+ border-color: var(--override-badge-background, var(--vscode-badge-background));
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0;
+ color: var(--override-foreground, var(--vscode-editor-foreground));
+ padding-top: 1px;
+ padding-bottom: 1px;
+ display: inline-block;
+ vertical-align: middle;
+ line-height: normal;
 }
 
-.combobox__value-indicator {
- background-color: var(--vscode-editor-background);
+.combobox-arrow {
+ border-top-color: var(--override-badge-background, var(--vscode-badge-background));
+ top: 5px;
 }
 
-.combobox__indicators {
- background-color: var(--vscode-editor-background);
+.is-open .combobox-arrow {
+ border-top-color: var(--override-badge-background, var(--vscode-badge-background));
+ top: 5px;
+}
+
+.combobox-menu {
+ border-color: var(--override-badge-background, var(--vscode-badge-background));
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0;
+ text-align:left;
+}
+
+.Dropdown-option {
+ color: var(--override-foreground, var(--vscode-editor-foreground));
+ background-color: var(--override-background, var(--vscode-editor-background));
+}
+
+.Dropdown-option:hover {
+ color: var(--override-foreground, var(--vscode-editor-foreground));
+ background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
+}
+
+.Dropdown-option.is-selected {
+ color: var(--override-foreground, var(--vscode-editor-foreground));
+ background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
 }

src/datascience-ui/react-common/comboBox.css

@@ -5,15 +5,16 @@
 
 import * as React from 'react';
 // tslint:disable-next-line: import-name match-default-export-name
-import Select from 'react-select';
-import { ValueType } from 'react-select/lib/types';
+import Dropdown from 'react-dropdown';
+import 'react-dropdown/style.css';
 
 import './comboBox.css';
 
 interface IComboBoxProps {
  values: { value: string; label: string }[];
  currentValue: number;
- onChange(selected: ValueType<{value: string; label: string}>): void;
+ // tslint:disable-next-line: no-any
+ onChange(selected: any): void;
 }
 
 export class ComboBox extends React.Component<IComboBoxProps> {
@@ -24,9 +25,11 @@ export class ComboBox extends React.Component<IComboBoxProps> {
  public render() {
  const currentValue = this.props.values.length > this.props.currentValue ? this.props.values[this.props.currentValue] : undefined ;
  return (
- <Select
- classNamePrefix='combobox'
+ <Dropdown
+ controlClassName='combobox'
+ arrowClassName='combobox-arrow'
  className='combobox-container'
+ menuClassName='combobox-menu'
  value={currentValue}
  options={this.props.values}
  onChange={this.props.onChange}/>