Merge pull request #276 from jupytercalpoly/dev

0.7.3

Author: loganamcnichols

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-tabular-data-editor",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "EXPERIMENTAL: JupyterLab Tabular Data Editor for CSV files",
   "keywords": [
     "jupyter",

src/index.ts

@@ -503,13 +503,48 @@ function buildContextMenu(
 
 export default [extension];
 
+export const SIZES = {
+  rowHeight: 21,
+  columnWidth: 100,
+  rowHeaderWidth: 60,
+  columnHeaderHeight: 24
+};
+
+const DATATYPE_ICON_SIZE = 15;
+
 const DATATYPE_ICON = {
   colorLight: '#1e88e5',
   colorDark: '#2196f3',
   position: {
-    size: 16,
+    size: DATATYPE_ICON_SIZE,
     left: 2,
-    top: 10
+    top: SIZES.columnHeaderHeight / 2 - DATATYPE_ICON_SIZE / 2 + 1 / 2
+  }
+};
+
+const GHOST_COLUMN_ICON_SIZE = 16;
+
+const GHOST_COLUMN_ICON = {
+  colorLight: '#616161',
+  colorDark: '#bdbdbd',
+  position: {
+    size: GHOST_COLUMN_ICON_SIZE,
+    // To center.
+    left: SIZES.columnWidth / 2 - GHOST_COLUMN_ICON_SIZE / 2,
+    top: SIZES.columnHeaderHeight / 2 - GHOST_COLUMN_ICON_SIZE / 2
+  }
+};
+
+const GHOST_ROW_ICON_SIZE = 12;
+
+const GHOST_ROW_ICON = {
+  colorLight: '#616161',
+  colorDark: '#bdbdbd',
+  position: {
+    size: GHOST_ROW_ICON_SIZE,
+    // To center.
+    left: SIZES.rowHeaderWidth / 2 - GHOST_ROW_ICON_SIZE / 2,
+    top: SIZES.rowHeight / 2 - GHOST_ROW_ICON_SIZE / 2
   }
 };
 
@@ -519,17 +554,13 @@ export const LIGHT_EXTRA_STYLE: PaintedGrid.ExtraStyle = {
   icons: {
     'ghost-column': {
       icon: addIcon,
-      color: '#616161',
-      size: 18,
-      left: 63 /* set to columnWidth / 2 - size / 2 to make centered */,
-      top: 9 /* set to columnHeaderHeight / 2 - size / 2 to make centered */
+      color: GHOST_COLUMN_ICON.colorLight,
+      ...GHOST_COLUMN_ICON.position
     },
     'ghost-row': {
       icon: addIcon,
-      color: '#616161',
-      size: 12,
-      left: 26 /* set to rowHeaderWidth / 2 - size / 2 to make centered */,
-      top: 6 /* set to rowHeight / 2 - size / 2 to make centered. */
+      color: GHOST_ROW_ICON.colorLight,
+      ...GHOST_ROW_ICON.position
     },
     string: {
       icon: new LabIcon({ name: 'tde:string', svgstr: stringSvgString }),
@@ -567,17 +598,13 @@ export const DARK_EXTRA_STYLE: PaintedGrid.ExtraStyle = {
   icons: {
     'ghost-column': {
       icon: addIcon,
-      color: '#bdbdbd',
-      size: 18,
-      left: 63 /* set to columnWidth / 2 - size / 2 to make centered */,
-      top: 9 /* set to columnHeaderHeight / 2 - size / 2 to make centered */
+      color: GHOST_COLUMN_ICON.colorDark,
+      ...GHOST_COLUMN_ICON.position
     },
     'ghost-row': {
       icon: addIcon,
-      color: '#bdbdbd',
-      size: 12,
-      left: 26 /* set to rowHeaderWidth / 2 - size / 2 to make centered */,
-      top: 6 /* set to rowHeight / 2 - size / 2 to make centered. */
+      color: GHOST_ROW_ICON.colorDark,
+      ...GHOST_ROW_ICON.position
     },
     string: {
       icon: new LabIcon({ name: 'tde:string', svgstr: stringSvgString }),
@@ -649,7 +676,7 @@ namespace Private {
     textColor: '#111111',
     matchBackgroundColor: '#FAE480',
     currentMatchBackgroundColor: '#F5C800',
-    horizontalAlignment: 'center'
+    horizontalAlignment: 'left'
   };
 
   /**
@@ -659,7 +686,7 @@ namespace Private {
     textColor: '#F5F5F5',
     matchBackgroundColor: 'rgba(0, 84, 168, 0.5)',
     currentMatchBackgroundColor: '#0055AA',
-    horizontalAlignment: 'center'
+    horizontalAlignment: 'left'
   };
 }
 

src/widget.ts

@@ -66,16 +66,15 @@ export class DSVEditor extends Widget {
     // Initialize the data grid.
     this._grid = new PaintedGrid({
       defaultSizes: {
-        rowHeight: 24,
-        columnWidth: 144,
-        rowHeaderWidth: 64,
-        columnHeaderHeight: 36
+        rowHeight: 21,
+        columnWidth: 100,
+        rowHeaderWidth: 60,
+        columnHeaderHeight: 24
       },
       headerVisibility: 'all'
     });
 
     this._grid.addClass(CSV_GRID_CLASS);
-    this._grid.headerVisibility = 'all';
     const keyHandler = new BasicKeyHandler();
     this._grid.keyHandler = keyHandler;
 
@@ -453,14 +452,24 @@ export class DSVEditor extends Widget {
         : rendererConfig.horizontalAlignment,
       backgroundColor: this._searchService.cellBackgroundColorRendererFunc(
         rendererConfig
-      )
+      ),
+      font: '11px sans-serif'
+    });
+    const rowHeaderRenderer = new TextRenderer({
+      textColor: rendererConfig.textColor,
+      horizontalAlignment: 'center',
+      backgroundColor: this._searchService.cellBackgroundColorRendererFunc(
+        rendererConfig
+      ),
+      font: '11px sans-serif'
     });
     const headerRenderer = new HeaderTextRenderer({
       textColor: rendererConfig.textColor,
       horizontalAlignment: isDataFormatted ? 'left' : 'center',
       backgroundColor: this._searchService.cellBackgroundColorRendererFunc(
         rendererConfig
       ),
+      font: '11px sans-serif',
       indent: 25,
       dataDetection: isDataFormatted
     });
@@ -469,7 +478,7 @@ export class DSVEditor extends Widget {
       body: renderer,
       'column-header': headerRenderer,
       'corner-header': renderer,
-      'row-header': renderer
+      'row-header': rowHeaderRenderer
     });
   }
 

style/index.css

@@ -127,6 +127,7 @@ input[type='checkbox'] {
 .jp-Toolbar-item .bp3-button-text .jp-ToolbarButtonComponent-label {
   color: var(--jp-ui-font-color3);
   padding-right: 10px;
+  font-size: var(--jp-ui-font-size1);
 }
 
 /* Default styles for the toggle switch */