From 1142394c813762fd97128d1cddd4f93e73f5ea7b Mon Sep 17 00:00:00 2001 From: Karla Spuldaro Date: Mon, 14 Dec 2020 17:12:54 -0500 Subject: [PATCH 1/4] Add new icons --- packages/ui-components/src/icon/iconimports.ts | 4 ++++ packages/ui-components/style/deprecated.css | 8 ++++++++ packages/ui-components/style/icons/toolbar/table-rows.svg | 1 + packages/ui-components/style/icons/toolbar/tree-view.svg | 1 + 4 files changed, 14 insertions(+) create mode 100644 packages/ui-components/style/icons/toolbar/table-rows.svg create mode 100644 packages/ui-components/style/icons/toolbar/tree-view.svg diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts index bb1819210814..814183fa7318 100644 --- a/packages/ui-components/src/icon/iconimports.ts +++ b/packages/ui-components/src/icon/iconimports.ts @@ -74,10 +74,12 @@ import settingsSvgstr from '../../style/icons/filetype/settings.svg'; import spreadsheetSvgstr from '../../style/icons/filetype/spreadsheet.svg'; import stopSvgstr from '../../style/icons/toolbar/stop.svg'; import tabSvgstr from '../../style/icons/sidebar/tab.svg'; +import tableSvgstr from '../../style/icons/toolbar/table-rows.svg'; import tagSvgstr from '../../style/icons/toolbar/tag.svg'; import terminalSvgstr from '../../style/icons/statusbar/terminal.svg'; import textEditorSvgstr from '../../style/icons/filetype/text-editor.svg'; import tocSvgstr from '../../style/icons/sidebar/toc.svg'; +import treeSvgstr from '../../style/icons/toolbar/tree-view.svg'; import trustedSvgstr from '../../style/icons/statusbar/trusted.svg'; import undoSvgstr from '../../style/icons/toolbar/undo.svg'; import vegaSvgstr from '../../style/icons/filetype/vega.svg'; @@ -150,10 +152,12 @@ export const settingsIcon = new LabIcon({ name: 'ui-components:settings', svgstr export const spreadsheetIcon = new LabIcon({ name: 'ui-components:spreadsheet', svgstr: spreadsheetSvgstr }); export const stopIcon = new LabIcon({ name: 'ui-components:stop', svgstr: stopSvgstr }); export const tabIcon = new LabIcon({ name: 'ui-components:tab', svgstr: tabSvgstr }); +export const tableIcon = new LabIcon({ name: 'ui-components:table', svgstr: tableSvgstr }); export const tagIcon = new LabIcon({ name: 'ui-components:tag', svgstr: tagSvgstr }); export const terminalIcon = new LabIcon({ name: 'ui-components:terminal', svgstr: terminalSvgstr }); export const textEditorIcon = new LabIcon({ name: 'ui-components:text-editor', svgstr: textEditorSvgstr }); export const tocIcon = new LabIcon({ name: 'ui-components:toc', svgstr: tocSvgstr }); +export const treeIcon = new LabIcon({ name: 'ui-components:tree', svgstr: treeSvgstr }); export const trustedIcon = new LabIcon({ name: 'ui-components:trusted', svgstr: trustedSvgstr }); export const undoIcon = new LabIcon({ name: 'ui-components:undo', svgstr: undoSvgstr }); export const vegaIcon = new LabIcon({ name: 'ui-components:vega', svgstr: vegaSvgstr }); diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css index f7e7606d1e90..55108a149439 100644 --- a/packages/ui-components/style/deprecated.css +++ b/packages/ui-components/style/deprecated.css @@ -78,10 +78,12 @@ --jp-icon-spreadsheet: url('icons/filetype/spreadsheet.svg'); --jp-icon-stop: url('icons/toolbar/stop.svg'); --jp-icon-tab: url('icons/sidebar/tab.svg'); + --jp-icon-table: url('icons/sidebar/table-rows.svg'); --jp-icon-tag: url('icons/toolbar/tag.svg'); --jp-icon-terminal: url('icons/statusbar/terminal.svg'); --jp-icon-text-editor: url('icons/filetype/text-editor.svg'); --jp-icon-toc: url('icons/sidebar/toc.svg'); + --jp-icon-tree: url('icons/sidebar/tree-view.svg'); --jp-icon-trusted: url('icons/statusbar/trusted.svg'); --jp-icon-undo: url('icons/toolbar/undo.svg'); --jp-icon-vega: url('icons/filetype/vega.svg'); @@ -288,6 +290,9 @@ .jp-TabIcon { background-image: var(--jp-icon-tab); } +.jp-TableIcon { + background-image: var(--jp-icon-table); +} .jp-TagIcon { background-image: var(--jp-icon-tag); } @@ -300,6 +305,9 @@ .jp-TocIcon { background-image: var(--jp-icon-toc); } +.jp-TreeIcon { + background-image: var(--jp-icon-tree); +} .jp-TrustedIcon { background-image: var(--jp-icon-trusted); } diff --git a/packages/ui-components/style/icons/toolbar/table-rows.svg b/packages/ui-components/style/icons/toolbar/table-rows.svg new file mode 100644 index 000000000000..9f4a12b4a80a --- /dev/null +++ b/packages/ui-components/style/icons/toolbar/table-rows.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-components/style/icons/toolbar/tree-view.svg b/packages/ui-components/style/icons/toolbar/tree-view.svg new file mode 100644 index 000000000000..ac0c5e153162 --- /dev/null +++ b/packages/ui-components/style/icons/toolbar/tree-view.svg @@ -0,0 +1 @@ + \ No newline at end of file From e680f9c125e76f753839c6ad0f101ed532607c64 Mon Sep 17 00:00:00 2001 From: Karla Spuldaro Date: Tue, 22 Dec 2020 16:37:44 -0500 Subject: [PATCH 2/4] Add new toolbar buttons --- .../debugger/src/panels/variables/index.ts | 42 ++++++++++++++----- packages/debugger/style/icons.css | 26 ++++++++++++ .../ui-components/src/icon/iconimports.ts | 8 ++-- packages/ui-components/style/deprecated.css | 10 +---- .../style/icons/toolbar/table-rows.svg | 7 +++- .../style/icons/toolbar/tree-view.svg | 7 +++- 6 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/debugger/src/panels/variables/index.ts b/packages/debugger/src/panels/variables/index.ts index 487a517032b8..06af4f582282 100644 --- a/packages/debugger/src/panels/variables/index.ts +++ b/packages/debugger/src/panels/variables/index.ts @@ -5,6 +5,8 @@ import { IThemeManager, ToolbarButton } from '@jupyterlab/apputils'; import { nullTranslator, ITranslator } from '@jupyterlab/translation'; +import { tableRowsIcon, treeViewIcon } from '@jupyterlab/ui-components'; + import { CommandRegistry } from '@lumino/commands'; import { Panel, Widget } from '@lumino/widgets'; @@ -15,7 +17,7 @@ import { VariablesBodyGrid } from './grid'; import { VariablesHeader } from './header'; -import { ScopeSwitcher } from './scope'; +// import { ScopeSwitcher } from './scope'; import { VariablesBodyTree } from './tree'; @@ -52,22 +54,42 @@ export class Variables extends Panel { this.update(); }; + // this._header.toolbar.addItem( + // 'scope-switcher', + // new ScopeSwitcher({ + // translator, + // model, + // tree: this._tree, + // grid: this._table + // }) + // ); + + // this._header.toolbar.addItem( + // 'view-VariableSwitch', + // new ToolbarButton({ + // iconClass: 'jp-ToggleSwitch', + // onClick: onViewChange, + // tooltip: trans.__('Table / Tree View') + // }) + // ); + this._header.toolbar.addItem( - 'scope-switcher', - new ScopeSwitcher({ - translator, - model, - tree: this._tree, - grid: this._table + 'view-VariableTreeView', + new ToolbarButton({ + icon: treeViewIcon, + className: 'jp-TreeView', + onClick: onViewChange, + tooltip: trans.__('Tree View') }) ); this._header.toolbar.addItem( - 'view-VariableSwitch', + 'view-VariableTableView', new ToolbarButton({ - iconClass: 'jp-ToggleSwitch', + icon: tableRowsIcon, + className: 'jp-TableView', onClick: onViewChange, - tooltip: trans.__('Table / Tree View') + tooltip: trans.__('Table View') }) ); diff --git a/packages/debugger/style/icons.css b/packages/debugger/style/icons.css index 16781765fd8a..b527d663b266 100644 --- a/packages/debugger/style/icons.css +++ b/packages/debugger/style/icons.css @@ -31,6 +31,32 @@ border-radius: 50%; } +button.jp-Button.bp3-button.bp3-minimal.jp-TreeView.jp-TreeView, +button.jp-Button.bp3-button.bp3-minimal.jp-TreeView.jp-TableView { + display: flex; + align-items: center; + -webkit-transition: 0.4s; + transition: 0.4s; + width: 35px; +} + +button.jp-Button.bp3-button.bp3-minimal.jp-TreeView:hover { + cursor: pointer; + background-color: var(--jp-layout-color1); + border-radius: 34px; +} + +button.jp-Button.bp3-button.bp3-minimal.jp-TableView:hover { + cursor: pointer; + background-color: var(--jp-layout-color1); + border-radius: 34px; +} + +.jp-ViewModeSelected { + background-color: var(--jp-layout-color1); + border-radius: 34px; +} + [data-jp-debugger='true'] .jp-Toolbar-item .jp-ToggleSwitch, [data-jp-table='true'] .jp-Toolbar-item .jp-ToggleSwitch { background-color: var(--jp-warn-color0); diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts index 814183fa7318..2c2aaf2a1757 100644 --- a/packages/ui-components/src/icon/iconimports.ts +++ b/packages/ui-components/src/icon/iconimports.ts @@ -74,12 +74,12 @@ import settingsSvgstr from '../../style/icons/filetype/settings.svg'; import spreadsheetSvgstr from '../../style/icons/filetype/spreadsheet.svg'; import stopSvgstr from '../../style/icons/toolbar/stop.svg'; import tabSvgstr from '../../style/icons/sidebar/tab.svg'; -import tableSvgstr from '../../style/icons/toolbar/table-rows.svg'; +import tableRowsSvgstr from '../../style/icons/toolbar/table-rows.svg'; import tagSvgstr from '../../style/icons/toolbar/tag.svg'; import terminalSvgstr from '../../style/icons/statusbar/terminal.svg'; import textEditorSvgstr from '../../style/icons/filetype/text-editor.svg'; import tocSvgstr from '../../style/icons/sidebar/toc.svg'; -import treeSvgstr from '../../style/icons/toolbar/tree-view.svg'; +import treeViewSvgstr from '../../style/icons/toolbar/tree-view.svg'; import trustedSvgstr from '../../style/icons/statusbar/trusted.svg'; import undoSvgstr from '../../style/icons/toolbar/undo.svg'; import vegaSvgstr from '../../style/icons/filetype/vega.svg'; @@ -152,12 +152,12 @@ export const settingsIcon = new LabIcon({ name: 'ui-components:settings', svgstr export const spreadsheetIcon = new LabIcon({ name: 'ui-components:spreadsheet', svgstr: spreadsheetSvgstr }); export const stopIcon = new LabIcon({ name: 'ui-components:stop', svgstr: stopSvgstr }); export const tabIcon = new LabIcon({ name: 'ui-components:tab', svgstr: tabSvgstr }); -export const tableIcon = new LabIcon({ name: 'ui-components:table', svgstr: tableSvgstr }); +export const tableRowsIcon = new LabIcon({ name: 'ui-components:table-rows', svgstr: tableRowsSvgstr }); export const tagIcon = new LabIcon({ name: 'ui-components:tag', svgstr: tagSvgstr }); export const terminalIcon = new LabIcon({ name: 'ui-components:terminal', svgstr: terminalSvgstr }); export const textEditorIcon = new LabIcon({ name: 'ui-components:text-editor', svgstr: textEditorSvgstr }); export const tocIcon = new LabIcon({ name: 'ui-components:toc', svgstr: tocSvgstr }); -export const treeIcon = new LabIcon({ name: 'ui-components:tree', svgstr: treeSvgstr }); +export const treeViewIcon = new LabIcon({ name: 'ui-components:tree-view', svgstr: treeViewSvgstr }); export const trustedIcon = new LabIcon({ name: 'ui-components:trusted', svgstr: trustedSvgstr }); export const undoIcon = new LabIcon({ name: 'ui-components:undo', svgstr: undoSvgstr }); export const vegaIcon = new LabIcon({ name: 'ui-components:vega', svgstr: vegaSvgstr }); diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css index 55108a149439..008c92625ab8 100644 --- a/packages/ui-components/style/deprecated.css +++ b/packages/ui-components/style/deprecated.css @@ -78,12 +78,12 @@ --jp-icon-spreadsheet: url('icons/filetype/spreadsheet.svg'); --jp-icon-stop: url('icons/toolbar/stop.svg'); --jp-icon-tab: url('icons/sidebar/tab.svg'); - --jp-icon-table: url('icons/sidebar/table-rows.svg'); + --jp-icon-table-rows: url('icons/toolbar/table-rows.svg'); --jp-icon-tag: url('icons/toolbar/tag.svg'); --jp-icon-terminal: url('icons/statusbar/terminal.svg'); --jp-icon-text-editor: url('icons/filetype/text-editor.svg'); --jp-icon-toc: url('icons/sidebar/toc.svg'); - --jp-icon-tree: url('icons/sidebar/tree-view.svg'); + --jp-icon-tree-view: url('icons/toolbar/tree-view.svg'); --jp-icon-trusted: url('icons/statusbar/trusted.svg'); --jp-icon-undo: url('icons/toolbar/undo.svg'); --jp-icon-vega: url('icons/filetype/vega.svg'); @@ -290,9 +290,6 @@ .jp-TabIcon { background-image: var(--jp-icon-tab); } -.jp-TableIcon { - background-image: var(--jp-icon-table); -} .jp-TagIcon { background-image: var(--jp-icon-tag); } @@ -305,9 +302,6 @@ .jp-TocIcon { background-image: var(--jp-icon-toc); } -.jp-TreeIcon { - background-image: var(--jp-icon-tree); -} .jp-TrustedIcon { background-image: var(--jp-icon-trusted); } diff --git a/packages/ui-components/style/icons/toolbar/table-rows.svg b/packages/ui-components/style/icons/toolbar/table-rows.svg index 9f4a12b4a80a..0a241774cede 100644 --- a/packages/ui-components/style/icons/toolbar/table-rows.svg +++ b/packages/ui-components/style/icons/toolbar/table-rows.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/packages/ui-components/style/icons/toolbar/tree-view.svg b/packages/ui-components/style/icons/toolbar/tree-view.svg index ac0c5e153162..48a64351298c 100644 --- a/packages/ui-components/style/icons/toolbar/tree-view.svg +++ b/packages/ui-components/style/icons/toolbar/tree-view.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + \ No newline at end of file From 2c763eed6def79434c3b4e3c4a3cbedc21596caf Mon Sep 17 00:00:00 2001 From: Karla Spuldaro Date: Wed, 23 Dec 2020 11:36:39 -0500 Subject: [PATCH 3/4] Mark button selection --- .../debugger/src/panels/variables/index.ts | 56 ++++++++++--------- packages/debugger/style/icons.css | 3 - 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/debugger/src/panels/variables/index.ts b/packages/debugger/src/panels/variables/index.ts index b15ca406c44d..7f9b343c460f 100644 --- a/packages/debugger/src/panels/variables/index.ts +++ b/packages/debugger/src/panels/variables/index.ts @@ -5,7 +5,7 @@ import { IThemeManager, ToolbarButton } from '@jupyterlab/apputils'; import { nullTranslator, ITranslator } from '@jupyterlab/translation'; -import { Switch, tableRowsIcon, treeViewIcon } from '@jupyterlab/ui-components'; +import { tableRowsIcon, treeViewIcon } from '@jupyterlab/ui-components'; import { CommandRegistry } from '@lumino/commands'; @@ -56,41 +56,47 @@ export class Variables extends Panel { this._tree.hide(); this._table.show(); this.node.setAttribute('data-jp-table', 'true'); + markViewButtonSelection('table'); } else { this._tree.show(); this._table.hide(); this.node.removeAttribute('data-jp-table'); + markViewButtonSelection('tree'); } this.update(); }; - const button = new Switch(); - button.id = 'jp-debugger'; - button.valueChanged.connect((_, args) => { - onViewChange(); + const treeViewButton = new ToolbarButton({ + icon: treeViewIcon, + className: 'jp-TreeView', + onClick: onViewChange, + tooltip: trans.__('Tree View') }); - button.caption = trans.__('Table / Tree View'); - this._header.toolbar.addItem('view-VariableSwitch', button); - this._header.toolbar.addItem( - 'view-VariableTreeView', - new ToolbarButton({ - icon: treeViewIcon, - className: 'jp-TreeView', - onClick: onViewChange, - tooltip: trans.__('Tree View') - }) - ); + const tableViewButton = new ToolbarButton({ + icon: tableRowsIcon, + className: 'jp-TableView', + onClick: onViewChange, + tooltip: trans.__('Table View') + }); - this._header.toolbar.addItem( - 'view-VariableTableView', - new ToolbarButton({ - icon: tableRowsIcon, - className: 'jp-TableView', - onClick: onViewChange, - tooltip: trans.__('Table View') - }) - ); + const markViewButtonSelection = (selectedView: string): void => { + const viewModeClassName = 'jp-ViewModeSelected'; + + if (selectedView === 'tree') { + tableViewButton.removeClass(viewModeClassName); + treeViewButton.addClass(viewModeClassName); + } else { + treeViewButton.removeClass(viewModeClassName); + tableViewButton.addClass(viewModeClassName); + } + }; + + markViewButtonSelection(this._table.isHidden ? 'tree' : 'table'); + + this._header.toolbar.addItem('view-VariableTreeView', treeViewButton); + + this._header.toolbar.addItem('view-VariableTableView', tableViewButton); this.addWidget(this._header); this.addWidget(this._tree); diff --git a/packages/debugger/style/icons.css b/packages/debugger/style/icons.css index 64107b36bfe6..41ba77ae9f04 100644 --- a/packages/debugger/style/icons.css +++ b/packages/debugger/style/icons.css @@ -15,16 +15,13 @@ button.jp-Button.bp3-button.bp3-minimal.jp-TreeView.jp-TableView { button.jp-Button.bp3-button.bp3-minimal.jp-TreeView:hover { cursor: pointer; background-color: var(--jp-layout-color1); - border-radius: 34px; } button.jp-Button.bp3-button.bp3-minimal.jp-TableView:hover { cursor: pointer; background-color: var(--jp-layout-color1); - border-radius: 34px; } .jp-ViewModeSelected { background-color: var(--jp-layout-color1); - border-radius: 34px; } From aecc84c76ecd055eab23075eea0e53925f78575d Mon Sep 17 00:00:00 2001 From: Jeremy Tuloup Date: Wed, 6 Jan 2021 10:37:10 +0100 Subject: [PATCH 4/4] Run integrity script for the new icons --- packages/ui-components/style/deprecated.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css index 008c92625ab8..6f6512c58a3f 100644 --- a/packages/ui-components/style/deprecated.css +++ b/packages/ui-components/style/deprecated.css @@ -290,6 +290,9 @@ .jp-TabIcon { background-image: var(--jp-icon-tab); } +.jp-TableRowsIcon { + background-image: var(--jp-icon-table-rows); +} .jp-TagIcon { background-image: var(--jp-icon-tag); } @@ -302,6 +305,9 @@ .jp-TocIcon { background-image: var(--jp-icon-toc); } +.jp-TreeViewIcon { + background-image: var(--jp-icon-tree-view); +} .jp-TrustedIcon { background-image: var(--jp-icon-trusted); }