left side nav bar (microsoft#7438)

Author: IanMatthewHuff

news/1 Enhancements/7377.md

@@ -0,0 +1 @@
+Add left side navigation bar to native editor

src/datascience-ui/native-editor/nativeCell.tsx

@@ -153,6 +153,7 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
  return (
  <div className={cellWrapperClass} role={this.props.role} ref={this.wrapperRef} tabIndex={0} onKeyDown={this.onOuterKeyDown} onClick={this.onMouseClick} onDoubleClick={this.onMouseDoubleClick}>
  <div className={cellOuterClass}>
+ {this.renderNavbar()}
  {this.renderControls()}
  <div className='content-div'>
  {content}
@@ -473,6 +474,35 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
  }
  }
 
+ private renderNavbar = () => {
+ const cellId = this.props.cellVM.cell.id;
+
+ const moveUp = () => {
+ this.moveCellUp();
+ this.props.stateController.sendCommand(NativeCommandType.MoveCellUp, 'mouse');
+ };
+ const moveDown = () => {
+ this.moveCellDown();
+ this.props.stateController.sendCommand(NativeCommandType.MoveCellDown, 'mouse');
+ };
+ const canMoveUp = this.props.stateController.canMoveUp(cellId);
+ const canMoveDown = this.props.stateController.canMoveDown(cellId);
+
+ return (
+ <div className='navbar-div'>
+ <div>
+ <ImageButton baseTheme={this.props.baseTheme} onClick={moveUp} disabled={!canMoveUp} tooltip={getLocString('DataScience.moveCellUp', 'Move cell up')}>
+ <Image baseTheme={this.props.baseTheme} class='image-button-image' image={ImageName.Up} />
+ </ImageButton>
+ </div>
+ <div>
+ <ImageButton baseTheme={this.props.baseTheme} onClick={moveDown} disabled={!canMoveDown} tooltip={getLocString('DataScience.moveCellDown', 'Move cell down')}>
+ <Image baseTheme={this.props.baseTheme} class='image-button-image' image={ImageName.Down} />
+ </ImageButton>
+ </div>
+ </div>
+ );
+ }
  private renderMiddleToolbar = () => {
  const cellId = this.props.cellVM.cell.id;
  const deleteCell = () => {

src/datascience-ui/native-editor/nativeEditor.less

@@ -61,7 +61,14 @@
  overflow-x: scroll;
 }
 
+.cell-outer {
+ display:grid;
+ grid-template-columns:auto auto 1fr;
+}
+
 .cell-outer-editable {
+ display:grid;
+ grid-template-columns:auto auto 1fr;
  margin-top: 0px;
 }
 
@@ -108,15 +115,24 @@
  background: var(--override-widget-background, var(--vscode-notifications-background));
 }
 
+.content-div {
+ grid-column: 3;
+}
+
 .controls-div {
- grid-column: 1;
+ grid-column: 2;
  grid-template-columns: max-content min-content ;
  justify-content: end;
  display: grid;
  min-width: 50px;
  grid-template-rows: min-content max-content;
 }
 
+.navbar-div {
+ grid-column: 1;
+ visibility: hidden;
+}
+
 .execution-count {
  justify-self: end;
 }
@@ -135,6 +151,14 @@
  visibility: collapse;
 }
 
+.cell-wrapper-selected .navbar-div {
+ visibility: visible;
+}
+
+.cell-wrapper-focused .navbar-div {
+ visibility: visible;
+}
+
 .cell-wrapper-selected .native-editor-celltoolbar-middle {
  visibility: visible;
 }