left side nav bar (microsoft#7438)

IanMatthewHuff · web-flow · commit d355d28007ce · 2019-09-17T10:55:25.000-07:00
diff --git a/news/1 Enhancements/7377.md b/news/1 Enhancements/7377.md
@@ -0,0 +1 @@
+Add left side navigation bar to native editor
diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/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 = () => {
diff --git a/src/datascience-ui/native-editor/nativeEditor.less b/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;
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Add left side navigation bar to native editor`