Move csv viewer toolbar over to document widget toolbar.

packages/apputils/style/toolbar.css

@@ -18,12 +18,14 @@
   box-shadow: var(--jp-toolbar-box-shadow);
   background: var(--jp-toolbar-background);
   min-height: var(--jp-toolbar-micro-height);
+  padding: 2px;
   z-index: 1;
 }
 
 
 .jp-Toolbar > .jp-Toolbar-item {
   flex: 0 0 auto;
+  display: flex;
   padding-left: 8px;
   padding-right: 8px;
   font-size: var(--jp-ui-font-size1);

packages/csvviewer/src/toolbar.ts

@@ -30,33 +30,33 @@ const DELIMITERS = [',', ';', '\t'];
 /**
  * The labels for each delimiter as they appear in the dropdown menu.
  */
-const LABELS = [',', ';', '\\t'];
+const LABELS = [',', ';', 'tab'];
 
 /**
  * The class name added to a csv toolbar widget.
  */
-const CSV_TOOLBAR_CLASS = 'jp-CSVToolbar';
+const CSV_DELIMITER_CLASS = 'jp-CSVDelimiter';
 
-const CSV_TOOLBAR_LABEL_CLASS = 'jp-CSVToolbar-label';
+const CSV_DELIMITER_LABEL_CLASS = 'jp-CSVDelimiter-label';
 
 /**
  * The class name added to a csv toolbar's dropdown element.
  */
-const CSV_TOOLBAR_DROPDOWN_CLASS = 'jp-CSVToolbar-dropdown';
+const CSV_DELIMITER_DROPDOWN_CLASS = 'jp-CSVDelimiter-dropdown';
 
 
 
 /**
- * A widget for CSV widget toolbars.
+ * A widget for selecting a delimiter.
  */
 export
-class CSVToolbar extends Widget {
+class CSVDelimiter extends Widget {
   /**
    * Construct a new csv table widget.
    */
   constructor(options: CSVToolbar.IOptions) {
     super({ node: Private.createNode(options.selected) });
-    this.addClass(CSV_TOOLBAR_CLASS);
+    this.addClass(CSV_DELIMITER_CLASS);
   }
 
   /**
@@ -142,7 +142,7 @@ namespace Private {
     let label = document.createElement('span');
     let select = document.createElement('select');
     label.textContent = 'Delimiter: ';
-    label.className = CSV_TOOLBAR_LABEL_CLASS;
+    label.className = CSV_DELIMITER_LABEL_CLASS;
     each(zip(DELIMITERS, LABELS), ([delimiter, label]) => {
       let option = document.createElement('option');
       option.value = delimiter;
@@ -154,7 +154,7 @@ namespace Private {
     });
     div.appendChild(label);
     let node = Styling.wrapSelect(select);
-    node.classList.add(CSV_TOOLBAR_DROPDOWN_CLASS);
+    node.classList.add(CSV_DELIMITER_DROPDOWN_CLASS);
     div.appendChild(node);
     return div;
   }

packages/csvviewer/src/widget.ts

@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  ActivityMonitor, PathExt
+  ActivityMonitor
 } from '@jupyterlab/coreutils';
 
 import {
@@ -26,7 +26,7 @@ import {
 } from '@phosphor/widgets';
 
 import {
-  CSVToolbar
+  CSVDelimiter
 } from './toolbar';
 
 import {
@@ -38,11 +38,6 @@ import {
  */
 const CSV_CLASS = 'jp-CSVViewer';
 
-/**
- * The class name added to a CSV viewer toolbar.
- */
-const CSV_VIEWER_CLASS = 'jp-CSVViewer-toolbar';
-
 /**
  * The class name added to a CSV viewer datagrid.
  */
@@ -73,16 +68,8 @@ class CSVViewer extends Widget {
     this._grid = new DataGrid();
     this._grid.addClass(CSV_GRID_CLASS);
     this._grid.headerVisibility = 'all';
-
-    this._toolbar = new CSVToolbar({ selected: this._delimiter });
-    this._toolbar.delimiterChanged.connect(this._onDelimiterChanged, this);
-    this._toolbar.addClass(CSV_VIEWER_CLASS);
-    layout.addWidget(this._toolbar);
     layout.addWidget(this._grid);
 
-    context.pathChanged.connect(this._onPathChanged, this);
-    this._onPathChanged();
-
     this._context.ready.then(() => {
       this._updateGrid();
       this._ready.resolve(undefined);
@@ -109,6 +96,20 @@ class CSVViewer extends Widget {
     return this._ready.promise;
   }
 
+  /**
+   * The delimiter for the file.
+   */
+  get delimiter(): string {
+    return this._delimiter;
+  }
+  set delimiter(value: string) {
+    if (value === this._delimiter) {
+      return;
+    }
+    this._delimiter = value;
+    this._updateGrid();
+  }
+
   /**
    * Dispose of the resources used by the widget.
    */
@@ -127,21 +128,6 @@ class CSVViewer extends Widget {
     this.node.focus();
   }
 
-  /**
-   * Handle a change in delimiter.
-   */
-  private _onDelimiterChanged(sender: CSVToolbar, delimiter: string): void {
-    this._delimiter = delimiter;
-    this._updateGrid();
-  }
-
-  /**
-   * Handle a change in path.
-   */
-  private _onPathChanged(): void {
-    this.title.label = PathExt.basename(this._context.localPath);
-  }
-
   /**
    * Create the model for the grid.
    */
@@ -157,7 +143,6 @@ class CSVViewer extends Widget {
 
   private _context: DocumentRegistry.Context;
   private _grid: DataGrid;
-  private _toolbar: CSVToolbar;
   private _monitor: ActivityMonitor<any, any> | null = null;
   private _delimiter = ',';
   private _ready = new PromiseDelegate<void>();
@@ -192,7 +177,10 @@ class CSVViewerFactory extends ABCWidgetFactory<IDocumentWidget<CSVViewer>> {
    */
   protected createNewWidget(context: DocumentRegistry.Context): IDocumentWidget<CSVViewer> {
     const content = new CSVViewer({ context });
-    const widget = new DocumentWidget({ content, context });
+    const widget = new DocumentWidget({ content, context, ready: content.ready });
+    const csvDelimiter = new CSVDelimiter({ selected: content.delimiter });
+    widget.toolbar.addItem('delimiter', csvDelimiter);
+    csvDelimiter.delimiterChanged.connect((sender: CSVDelimiter, delimiter: string) => { content.delimiter = delimiter; });
     return widget;
   }
 }

packages/csvviewer/style/index.css

@@ -3,11 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-
-:root {
-  --jp-private-csvviewer-toolbar-height: 24px;
-}
-
 .jp-CSVViewer {
   display: flex;
   flex-direction: column;
@@ -17,40 +12,40 @@
   font-size: var(--jp-ui-font-size1);
 }
 
-.jp-CSVToolbar {
+.jp-CSVDelimiter {
     display: flex;
     flex: 0 0 auto;
     flex-direction: row;
     border: none;
-    height: var(--jp-private-csvviewer-toolbar-height);
+    min-height: 24px;
     background: var(--jp-toolbar-background);
     z-index: 1;
 }
 
-.jp-CSVToolbar .jp-CSVToolbar-label {
+.jp-CSVDelimiter .jp-CSVDelimiter-label {
     color: var(--jp-ui-font-color1);
     font-size: var(--jp-ui-font-size1);
-    line-height: var(--jp-private-csvviewer-toolbar-height);
     padding-left: 8px;
     padding-right: 8px;
 }
 
 
-.jp-CSVToolbar .jp-CSVToolbar-dropdown {
+.jp-CSVDelimiter .jp-CSVDelimiter-dropdown {
     flex: 0 0 auto;
     vertical-align: middle;
-    border: var(--jp-border-width) solid var(--jp-border-color1);
     border-radius: 0;
     outline: none;
-    width: 40px;
     height: 20px;
     margin-top: 2px;
     margin-bottom: 2px;
 }
 
 
-.jp-CSVToolbar .jp-CSVToolbar-dropdown select.jp-mod-styled {
+.jp-CSVDelimiter .jp-CSVDelimiter-dropdown select.jp-mod-styled {
   font-size: var(--jp-ui-font-size1);
+  background-color: transparent;
+  height: 20px;
+  padding-right: 20px;
 }