From 5a8abf1d363051ef985f0656146476abc9ffccfb Mon Sep 17 00:00:00 2001 From: martinRenou Date: Thu, 14 Mar 2024 09:29:39 +0100 Subject: [PATCH 1/2] Fix CSS rules to match the new Lumino classes --- .../js/sass/table_display.scss | 114 ++++++++++++++---- .../js/src/dataGrid/cell/CellTooltip.ts | 2 +- 2 files changed, 92 insertions(+), 24 deletions(-) diff --git a/beakerx_tabledisplay/js/sass/table_display.scss b/beakerx_tabledisplay/js/sass/table_display.scss index b538ebe..051c390 100644 --- a/beakerx_tabledisplay/js/sass/table_display.scss +++ b/beakerx_tabledisplay/js/sass/table_display.scss @@ -316,7 +316,10 @@ a.dtmenu { } } -.p-Menu.bko-header-menu { +/* */ +.p-Menu.bko-header-menu, +/* */ +.lm-Menu.bko-header-menu { overflow: visible; } @@ -327,7 +330,10 @@ a.dtmenu { box-shadow: 0 6px 10px $shadow; background-clip: padding-box; - .p-Menu-content { + /* */ + .p-Menu-content, + /* */ + .lm-Menu-content { border-collapse: collapse; display: block; position: relative; @@ -336,7 +342,10 @@ a.dtmenu { overflow: visible; width: 100%; - .p-Menu-item { + /* */ + .p-Menu-item, + /* */ + .lm-Menu-item { display: block; font-weight: normal; line-height: 1.42857143; @@ -349,21 +358,33 @@ a.dtmenu { } } - .p-Menu-itemLabel { + /* */ + .p-Menu-itemLabel, + /* */ + .lm-Menu-itemLabel { padding: 3px; white-space: nowrap; display: inline-block; } + /* */ .p-Menu-itemIcon, - .p-Menu-itemShortcut { + /* */ + .lm-Menu-itemIcon, + /* */ + .p-Menu-itemShortcut, + /* */ + .lm-Menu-itemShortcut { min-width: 22px; position: static; padding: 4px; display: inline-block; } - .p-Menu-itemSubmenuIcon { + /* */ + .p-Menu-itemSubmenuIcon, + /* */ + .lm-Menu-itemSubmenuIcon { display: inline-block; position: absolute; right: 0px; @@ -371,7 +392,10 @@ a.dtmenu { margin-top: 3px; } - [data-type="submenu"] > .p-Menu-itemSubmenuIcon { + /* */ + [data-type="submenu"] > .p-Menu-itemSubmenuIcon, + /* */ + [data-type="submenu"] > .lm-Menu-itemSubmenuIcon { background: none; &:after { @@ -417,7 +441,10 @@ a.dtmenu { } } -.p-DataGrid { +/* */ +.p-DataGrid, +/* */ +.lm-DataGrid { min-width: 64px; max-width: 100%; min-height: 330px; @@ -489,7 +516,10 @@ a.dtmenu { } } -.p-DataGrid-tooltip { +/* */ +.p-DataGrid-tooltip, +/* */ +.lm-DataGrid-tooltip { background-color: $buttonBackground; box-shadow: 0 0 2px $shadow; border-radius: 3px; @@ -508,17 +538,26 @@ a.dtmenu { } } -.p-DataGrid-viewport { +/* */ +.p-DataGrid-viewport, +/* */ +.lm-DataGrid-viewport { border: $gridBorder; } -.p-DataGrid-scrollCorner { +/* */ +.p-DataGrid-scrollCorner, +/* */ +.lm-DataGrid-scrollCorner { background-color: $buttonDetail; border-right: $gridBorder; border-bottom: $gridBorder; } -.p-DataGrid-scrollCorner::after { +/* */ +.p-DataGrid-scrollCorner::after, +/* */ +.lm-DataGrid-scrollCorner::after { content: ''; position: absolute; top: 0; @@ -528,8 +567,14 @@ a.dtmenu { background-color: $buttonDetail; } -.p-ScrollBar { - .p-ScrollBar-button { +/* */ +.p-ScrollBar, +/* */ +.lm-ScrollBar { + /* */ + .p-ScrollBar-button, + /* */ + .lm-ScrollBar-button { color: $buttonHover; font: normal normal normal 14px/1 'Font Awesome 5 Free', FontAwesome; font-weight: 900; @@ -544,14 +589,20 @@ a.dtmenu { border-left: $gridBorder; border-right: $gridBorder; - .p-ScrollBar-thumb { + /* */ + .p-ScrollBar-thumb, + /* */ + .lm-ScrollBar-thumb { height: 100%; min-width: 15px; border-left: $gridBorder; border-right: $gridBorder; } - .p-ScrollBar-button { + /* */ + .p-ScrollBar-button, + /* */ + .lm-ScrollBar-button { &[data-action='increment'] { &:before { content: "\f0da"; @@ -574,15 +625,20 @@ a.dtmenu { border-top: $gridBorder; border-bottom: $gridBorder; - .p-ScrollBar-thumb { + /* */ + .p-ScrollBar-thumb, + /* */ + .lm-ScrollBar-thumb { width: 100%; min-height: 15px; border-top: $gridBorder; border-bottom: $gridBorder; } - - .p-ScrollBar-button { + /* */ + .p-ScrollBar-button, + /* */ + .lm-ScrollBar-button { &[data-action='increment'] { &:before { content: "\f0d7"; @@ -598,7 +654,10 @@ a.dtmenu { } } -.p-ScrollBar-button { +/* */ +.p-ScrollBar-button, +/* */ +.lm-ScrollBar-button { background-color: $buttonBackground; background-position: center center; min-height: 15px; @@ -617,11 +676,17 @@ a.dtmenu { } } -.p-ScrollBar-track { +/* */ +.p-ScrollBar-track, +/* */ +.lm-ScrollBar-track { background: $buttonBackground; } -.p-ScrollBar-thumb { +/* */ +.p-ScrollBar-thumb, +/* */ +.lm-ScrollBar-thumb { background: $buttonDetail; &:hover { @@ -629,7 +694,10 @@ a.dtmenu { cursor: pointer; } - &.p-mod-active { + /* */ + &.p-mod-active, + /* */ + &.lm-mod-active { background: $buttonDetail; cursor: pointer; } diff --git a/beakerx_tabledisplay/js/src/dataGrid/cell/CellTooltip.ts b/beakerx_tabledisplay/js/src/dataGrid/cell/CellTooltip.ts index 5c94b80..13454ac 100644 --- a/beakerx_tabledisplay/js/src/dataGrid/cell/CellTooltip.ts +++ b/beakerx_tabledisplay/js/src/dataGrid/cell/CellTooltip.ts @@ -26,7 +26,7 @@ export class CellTooltip { this.node = document.createElement('div'); this.node.style.position = 'absolute'; this.node.style.visibility = 'visible'; - this.node.classList.add('p-DataGrid-tooltip'); + this.node.classList.add('lm-DataGrid-tooltip'); if (text) { this.node.innerText = text; From 9f0c9b817e5e76c8be87f4bdb75df4ce69a02f40 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Thu, 14 Mar 2024 10:30:22 +0100 Subject: [PATCH 2/2] Bump --- beakerx_tabledisplay/beakerx_tabledisplay/_version.py | 2 +- beakerx_tabledisplay/js/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/beakerx_tabledisplay/beakerx_tabledisplay/_version.py b/beakerx_tabledisplay/beakerx_tabledisplay/_version.py index fdd1ea3..39550aa 100644 --- a/beakerx_tabledisplay/beakerx_tabledisplay/_version.py +++ b/beakerx_tabledisplay/beakerx_tabledisplay/_version.py @@ -1,2 +1,2 @@ -version_info = (2, 4, 0) +version_info = (2, 4, 1) __version__ = '.'.join(map(str, version_info)) diff --git a/beakerx_tabledisplay/js/package.json b/beakerx_tabledisplay/js/package.json index ea98f31..8e3e705 100644 --- a/beakerx_tabledisplay/js/package.json +++ b/beakerx_tabledisplay/js/package.json @@ -1,6 +1,6 @@ { "name": "@beakerx/beakerx-tabledisplay", - "version": "2.4.0", + "version": "2.4.1", "description": "BeakerX: Beaker TableDisplay Extension for Jupyter Notebook and Lab", "homepage": "http://beakerx.com/", "keywords": [