From 1b496571634b5d0a4510a166f437ae0f39ad0579 Mon Sep 17 00:00:00 2001 From: "Brian E. Granger" Date: Thu, 20 Jun 2019 17:15:19 -0700 Subject: [PATCH 1/3] Add filter list icon. --- packages/application/style/icons.css | 4 ++++ .../style/icons/md/ic_filter_list_24px.svg | 1 + packages/theme-dark-extension/style/urls.css | 1 + .../style/icons/md/ic_filter_list_24px.svg | 1 + packages/theme-light-extension/style/urls.css | 1 + 5 files changed, 8 insertions(+) create mode 100644 packages/theme-dark-extension/style/icons/md/ic_filter_list_24px.svg create mode 100644 packages/theme-light-extension/style/icons/md/ic_filter_list_24px.svg diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css index 449ad0140833..3b59b877e285 100644 --- a/packages/application/style/icons.css +++ b/packages/application/style/icons.css @@ -107,6 +107,10 @@ background-image: var(--jp-icon-circle); } +.jp-FilterListIcon { + background-image: var(--jp-icon-filter-list); +} + .jp-FolderIcon { background-image: var(--jp-icon-folder); } diff --git a/packages/theme-dark-extension/style/icons/md/ic_filter_list_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_filter_list_24px.svg new file mode 100644 index 000000000000..274d6908b49d --- /dev/null +++ b/packages/theme-dark-extension/style/icons/md/ic_filter_list_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/theme-dark-extension/style/urls.css b/packages/theme-dark-extension/style/urls.css index 54007cebb1bb..f266af42ea25 100644 --- a/packages/theme-dark-extension/style/urls.css +++ b/packages/theme-dark-extension/style/urls.css @@ -56,6 +56,7 @@ --jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg'); --jp-icon-file-selected: url('icons/jupyter/file_selected.svg'); --jp-icon-file: url('icons/jupyter/file.svg'); + --jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg'); --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg'); --jp-icon-folder: url('icons/md/ic_folder_24px.svg'); --jp-icon-home: url('icons/md/ic_home_24px.svg'); diff --git a/packages/theme-light-extension/style/icons/md/ic_filter_list_24px.svg b/packages/theme-light-extension/style/icons/md/ic_filter_list_24px.svg new file mode 100644 index 000000000000..9a94aff4be2d --- /dev/null +++ b/packages/theme-light-extension/style/icons/md/ic_filter_list_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css index 65ec1de86a8a..cac64fde09c1 100644 --- a/packages/theme-light-extension/style/urls.css +++ b/packages/theme-light-extension/style/urls.css @@ -55,6 +55,7 @@ --jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg'); --jp-icon-file-selected: url('icons/jupyter/file_selected.svg'); --jp-icon-file: url('icons/jupyter/file.svg'); + --jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg'); --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg'); --jp-icon-folder: url('icons/md/ic_folder_24px.svg'); --jp-icon-home: url('icons/md/ic_home_24px.svg'); From 8662ad24e8d2ebd685cc4c20d63862154e7880b7 Mon Sep 17 00:00:00 2001 From: "Brian E. Granger" Date: Thu, 20 Jun 2019 17:16:13 -0700 Subject: [PATCH 2/3] Use filter list icon in command palette header. --- packages/apputils/style/commandpalette.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/apputils/style/commandpalette.css b/packages/apputils/style/commandpalette.css index ba3c03a2bbfb..efef816103ed 100644 --- a/packages/apputils/style/commandpalette.css +++ b/packages/apputils/style/commandpalette.css @@ -105,10 +105,18 @@ background: var(--jp-layout-color2); } -.p-CommandPalette-header:hover::before { - content: '\2026'; /* ellipsis */ +.p-CommandPalette-header:hover::after { + content: ''; + min-width: 12px; + min-height: 12px; + background-size: 14px; + margin-right: 16px; float: right; - margin-right: 4px; + display: inline-block; + vertical-align: middle; + background-repeat: no-repeat; + background-position: center; + background-image: var(--jp-icon-filter-list); } .p-CommandPalette-header > mark { From 608c33beb6f6a6de12ee47d72fc22f941630de5d Mon Sep 17 00:00:00 2001 From: "Brian E. Granger" Date: Thu, 20 Jun 2019 18:27:14 -0700 Subject: [PATCH 3/3] Use our icon for cell type dropdown. --- packages/notebook/src/default-toolbar.tsx | 3 +++ packages/ui-components/style/base.css | 8 ++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/notebook/src/default-toolbar.tsx b/packages/notebook/src/default-toolbar.tsx index 134c9a1581c7..8e1b4e634a51 100644 --- a/packages/notebook/src/default-toolbar.tsx +++ b/packages/notebook/src/default-toolbar.tsx @@ -286,6 +286,9 @@ export class CellTypeSwitcher extends ReactWidget { onChange={this.handleChange} onKeyDown={this.handleKeyDown} value={value} + iconProps={{ + icon: + }} aria-label="Cell type" minimal > diff --git a/packages/ui-components/style/base.css b/packages/ui-components/style/base.css index e5d46a864a62..8adb7976093f 100644 --- a/packages/ui-components/style/base.css +++ b/packages/ui-components/style/base.css @@ -48,12 +48,14 @@ a:hover { outline-offset: unset; -moz-outline-radius: unset; } + /* Styles for ui-components */ .jp-Button { border-radius: var(--jp-border-radius); padding: 0px 12px; font-size: var(--jp-ui-font-size1); } + /* Use our own theme for hover styles */ button.jp-Button.bp3-button.bp3-minimal:hover { background-color: var(--jp-layout-color2); @@ -65,6 +67,7 @@ button.jp-Button.bp3-button.bp3-minimal:hover { .jp-Button.jp-ToolbarButtonComponent { text-transform: none; } + .jp-InputGroup input { box-sizing: border-box; border-radius: 0; @@ -78,16 +81,20 @@ button.jp-Button.bp3-button.bp3-minimal:hover { var(--jp-input-active-box-shadow-color), inset 0 0 0 3px var(--jp-input-active-box-shadow-color); } + .jp-InputGroup input::placeholder, input::placeholder { color: var(--jp-ui-font-color3); } + .jp-Icon { color: var(--jp-layout-color4); } + .jp-InputGroupAction { padding: 6px; } + .jp-HTMLSelect.bp3-html-select.bp3-minimal select { height: 24; font-size: var(--jp-ui-font-size1); @@ -96,6 +103,7 @@ input::placeholder { display: block; color: var(--jp-ui-font-color0); } + /* Use our own theme for hover styles */ .jp-HTMLSelect.bp3-html-select.bp3-minimal select:hover { color: var(--jp-ui-font-color0);