Merge pull request #80 from martinRenou/jlab_theme

Add Jupyterlab theme support

js/css/custom.css

@@ -0,0 +1,224 @@
+.wtHolder {
+  width: auto !important;
+  height: auto !important;
+}
+
+.handsontable .jupyter-widgets {
+    width: 100%;
+    height: 100%;
+}
+
+.p-Widget .handsontable .table caption + thead tr:first-child th,
+.p-Widget .handsontable .table caption + thead tr:first-child td,
+.p-Widget .handsontable .table colgroup + thead tr:first-child th,
+.p-Widget .handsontable .table colgroup + thead tr:first-child td,
+.p-Widget .handsontable .table thead:first-child tr:first-child th,
+.p-Widget .handsontable .table thead:first-child tr:first-child td {
+  border-top: 1px solid var(--jp-border-color1);
+}
+
+.p-Widget .handsontable .table-bordered th:first-child,
+.p-Widget .handsontable .table-bordered td:first-child {
+  border-left: 1px solid var(--jp-border-color1);
+}
+
+.p-Widget .handsontable tr {
+  background-color: var(--jp-layout-color0);
+}
+
+.p-Widget .handsontable .table-striped > tbody > tr:nth-of-type(even) {
+  background-color: var(--jp-layout-color0);
+}
+
+.p-Widget .handsontable th,
+.p-Widget .handsontable td {
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-content-font-color0);
+  font-size: var(--jp-ui-font-size1);
+  font-family: var(--jp-ui-font-family);
+  border-right: 1px solid var(--jp-border-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.p-Widget .handsontable td.htInvalid {
+  background-color: var(--jp-error-color0) !important; /*gives priority over td.area selection background*/
+}
+
+.p-Widget .handsontable th:last-child {
+  border-right: 1px solid var(--jp-border-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.p-Widget .handsontable tr:first-child th.htNoFrame,
+.p-Widget .handsontable th:first-child.htNoFrame,
+.p-Widget .handsontable th.htNoFrame {
+  background-color: var(--jp-layout-color0);
+}
+
+.p-Widget .handsontable th {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-content-font-color0);
+}
+
+.p-Widget .handsontable th.active {
+  background-color: var(--jp-layout-color3);
+}
+
+.p-Widget .handsontable .manualColumnResizer:hover,
+.p-Widget .handsontable .manualColumnResizer.active,
+.p-Widget .handsontable .manualRowResizer:hover,
+.p-Widget .handsontable .manualRowResizer.active {
+  background-color: var(--jp-brand-color1);
+}
+
+.p-Widget .handsontable .manualColumnResizerGuide {
+  background-color: var(--jp-brand-color1);
+}
+
+.p-Widget .handsontable .manualRowResizerGuide {
+  background-color: var(--jp-brand-color1);
+}
+
+.p-Widget .handsontable td.area:before,
+.p-Widget .handsontable td.area-1:before,
+.p-Widget .handsontable td.area-2:before,
+.p-Widget .handsontable td.area-3:before,
+.p-Widget .handsontable td.area-4:before,
+.p-Widget .handsontable td.area-5:before,
+.p-Widget .handsontable td.area-6:before,
+.p-Widget .handsontable td.area-7:before {
+  background-color: var(--jp-brand-color2);
+}
+
+.p-Widget .handsontable tbody th.ht__highlight,
+.p-Widget .handsontable thead th.ht__highlight {
+  background-color: var(--jp-layout-color3);
+}
+
+.p-Widget .handsontable tbody th.ht__active_highlight,
+.p-Widget .handsontable thead th.ht__active_highlight {
+  background-color: var(--jp-brand-color3);
+  color: var(--jp-content-font-color0);
+}
+
+.p-Widget .handsontableInput {
+  box-shadow: 0 0 0 2px var(--jp-brand-color0) inset;
+  color: var(--jp-content-font-color0);
+  background-color: var(--jp-layout-color0);
+}
+
+.p-Widget .handsontable.listbox .ht_master table {
+  border: 1px solid var(--jp-border-color2);
+  background-color: var(--jp-layout-color0);
+}
+
+.p-Widget .handsontable.listbox tr td.current,
+.p-Widget .handsontable.listbox tr:hover td {
+  background-color: var(--jp-layout-color1);
+}
+
+.p-Widget .handsontable td.htSearchResult {
+  background: var(--jp-accent-color3);
+  color: var(--jp-content-font-color0);
+}
+
+.p-Widget .htBordered.htTopBorderSolid {
+  border-top-color: var(--jp-border-color2);
+}
+.p-Widget .htBordered.htRightBorderSolid {
+  border-right-color: var(--jp-border-color2);
+}
+.p-Widget .htBordered.htBottomBorderSolid {
+  border-bottom-color: var(--jp-border-color2);
+}
+.p-Widget .htBordered.htLeftBorderSolid {
+  border-left-color: var(--jp-border-color2);
+}
+
+.p-Widget .handsontable tbody tr th:nth-last-child(2) {
+  border-right: 1px solid var(--jp-border-color2);
+}
+
+.p-Widget .handsontable thead tr:nth-last-child(2) th.htGroupIndicatorContainer {
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.p-Widget .ht_clone_top_left_corner thead tr th:nth-last-child(2) {
+  border-right: 1px solid var(--jp-border-color2);
+}
+
+.p-Widget .handsontable .wtBorder.current {
+  background-color: var(--jp-brand-color0) !important;
+  border-color: var(--jp-layout-color0) !important;
+}
+
+.p-Widget .handsontable .wtBorder.area {
+  background-color: var(--jp-brand-color0) !important;
+  border-color: var(--jp-layout-color0) !important;
+}
+
+/* Pikaday styling */
+.pika-single {
+    color: var(--jp-content-font-color0);
+    background: var(--jp-layout-color0);
+    border: 1px solid var(--jp-border-color2);
+    border-bottom-color: var(--jp-border-color2);
+    font-family: var(--jp-ui-font-family);
+}
+
+.pika-label {
+    background-color: var(--jp-layout-color0);
+}
+
+.pika-table th {
+    color: var(--jp-content-font-color1);
+}
+
+.pika-button {
+    color: var(--jp-content-font-color2);
+    background: var(--jp-layout-color2);
+}
+
+.pika-week {
+    font-size: var(--jp-ui-font-size1);
+    color: var(--jp-content-font-color1);
+}
+
+.is-today .pika-button {
+    color: var(--jp-content-font-color2);
+}
+
+.is-selected .pika-button {
+    color: var(--jp-layout-color0);
+    background: var(--jp-layout-color2);
+    box-shadow: inset 0 1px 3px var(--jp-brand-color0)
+}
+
+.is-inrange .pika-button {
+    background: var(--jp-brand-color1)
+}
+
+.is-startrange .pika-button {
+    color: var(--jp-layout-color0);
+    background: var(--jp-layout-color2);
+}
+
+.is-endrange .pika-button {
+    color: var(--jp-layout-color0);
+    background: var(--jp-layout-color2);
+}
+
+.is-disabled .pika-button,
+.is-outside-current-month .pika-button {
+    color: var(--jp-content-font-color1);
+}
+
+.pika-button:hover {
+    color: var(--jp-layout-color0);
+    background: var(--jp-layout-color2);
+}
+
+.pika-prev,
+.pika-next {
+    background-color: var(--jp-layout-color2);
+}

js/package.json

@@ -3,7 +3,7 @@
   "version": "0.3.2",
   "description": "Spreadsheet in the Jupyter notebook",
   "author": "Maarten A. Breddels",
-  "main": "src/index.js",
+  "main": "lib/src/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/QuantStack/ipysheet.git"
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^1.0.1",
+    "@jupyter-widgets/controls": "^1.0.1",
     "handsontable": "^6.2.2",
     "lodash": "^4.17.4",
     "underscore": "^1.8.3"

js/src/sheet.ts

@@ -7,7 +7,9 @@ import * as Handsontable from 'handsontable';
 
 import 'pikaday/css/pikaday.css';
 import 'handsontable/dist/handsontable.min.css';
-import '../../src/custom.css';
+import '@jupyter-widgets/controls/css/materialcolors.css'
+import '@jupyter-widgets/controls/css/labvariables.css'
+import '../../css/custom.css';
 
 let semver_range = '~' + pkg.version;