Skip to content

Commit

Permalink
set up all in one busy/close/close-circle icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@telamonian
telamonian committed Jan 3, 2020
1 parent 1942359 commit 5b743d6
Show file tree
Hide file tree
Showing 13 changed files with 153 additions and 237 deletions.
4 changes: 2 additions & 2 deletions packages/application/src/shell.ts
View file
Expand Up @@ -3,7 +3,7 @@

import { DocumentRegistry } from '@jupyterlab/docregistry';

import { JLIcon } from '@jupyterlab/ui-components';
import { DockPanelSvg, JLIcon } from '@jupyterlab/ui-components';

import { ArrayExt, find, IIterator, iter, toArray } from '@lumino/algorithm';

Expand Down Expand Up @@ -179,7 +179,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
let topHandler = (this._topHandler = new Private.PanelHandler());
let bottomPanel = (this._bottomPanel = new BoxPanel());
let hboxPanel = new BoxPanel();
let dockPanel = (this._dockPanel = new DockPanel());
let dockPanel = (this._dockPanel = new DockPanelSvg());
MessageLoop.installMessageHook(dockPanel, this._dockChildHook);

let hsplitPanel = new SplitPanel();
Expand Down
2 changes: 1 addition & 1 deletion packages/application/style/base.css
View file
Expand Up @@ -48,7 +48,7 @@ body {
@import './dockpanel.css';
@import './icons.css';
@import './iconshover.css';
@import './iconsinverse.css';
@import './iconsalt.css';
@import './menus.css';
@import './scrollbar.css';
@import './tabs.css';
Expand Down
85 changes: 67 additions & 18 deletions packages/application/style/icons.css
View file
Expand Up @@ -39,7 +39,6 @@
.jp-icon4[stroke] {
stroke: var(--jp-inverse-layout-color4);
}

/* recolor the accent elements of an icon */
.jp-icon-accent0[fill] {
fill: var(--jp-layout-color0);
Expand Down Expand Up @@ -72,7 +71,6 @@
.jp-icon-accent4[stroke] {
stroke: var(--jp-layout-color4);
}

/* set the color of an icon to transparent */
.jp-icon-none[fill] {
fill: none;
Expand All @@ -81,7 +79,6 @@
.jp-icon-none[stroke] {
stroke: none;
}

/* brand icon colors. Same for light and dark */
.jp-icon-brand0[fill] {
fill: var(--jp-brand-color0);
Expand Down Expand Up @@ -114,7 +111,6 @@
.jp-icon-brand4[stroke] {
stroke: var(--jp-brand-color4);
}

/* warn icon colors. Same for light and dark */
.jp-icon-warn0[fill] {
fill: var(--jp-warn-color0);
Expand All @@ -141,7 +137,6 @@
.jp-icon-warn3[stroke] {
stroke: var(--jp-warn-color3);
}

/* icon colors that contrast well with each other and most backgrounds */
.jp-icon-contrast0[fill] {
fill: var(--jp-icon-contrast-color0);
Expand Down Expand Up @@ -171,9 +166,8 @@

/* CSS for icons in selected items in the settings editor */
#setting-editor .jp-PluginList .jp-mod-selected .jp-icon-selectable[fill] {
fill: white;
fill: #fff;
}

#setting-editor
.jp-PluginList
.jp-mod-selected
Expand All @@ -183,31 +177,92 @@

/* CSS for icons in selected filebrowser listing items */
.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
fill: white;
fill: #fff;
}

.jp-DirListing-item.jp-mod-selected .jp-icon-selectable-inverse[fill] {
fill: var(--jp-brand-color1);
}

/* CSS for icons in selected tabs in the sidebar tab manager */
#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
fill: white;
fill: #fff;
}

#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
fill: var(--jp-brand-color1);
}
#tab-manager
.p-TabBar-tab.jp-mod-active
.jp-icon-hover
:hover
.jp-icon-selectable[fill] {
fill: var(--jp-brand-color1);
}

#tab-manager
.p-TabBar-tab.jp-mod-active
.jp-icon-hover
:hover
.jp-icon-selectable-inverse[fill] {
fill: #fff;
}

/**
* TODO: come up with non css-hack solution for showing the busy icon on top
* of the close icon
* CSS for complex behavior of close icon of tabs in the sidebar tab manager
*/
#tab-manager
.p-TabBar-tab.jp-mod-dirty
> .p-TabBar-tabCloseIcon
> :not(:hover)
> .jp-icon3[fill] {
fill: none;
}
#tab-manager
.p-TabBar-tab.jp-mod-dirty
> .p-TabBar-tabCloseIcon
> :not(:hover)
> .jp-icon-busy[fill] {
fill: var(--jp-inverse-layout-color3);
}

#tab-manager
.p-TabBar-tab.jp-mod-dirty.jp-mod-active
> .p-TabBar-tabCloseIcon
> :not(:hover)
> .jp-icon-busy[fill] {
fill: #fff;
}

/**
* TODO: come up with non css-hack solution for showing the busy icon on top
* of the close icon
* CSS for complex behavior of close icon of tabs in the main area tabbar
*/
.p-DockPanel-tabBar
.p-TabBar-tab.p-mod-closable.jp-mod-dirty
> .p-TabBar-tabCloseIcon
> :not(:hover)
> .jp-icon3[fill] {
fill: none;
}
.p-DockPanel-tabBar
.p-TabBar-tab.p-mod-closable.jp-mod-dirty
> .p-TabBar-tabCloseIcon
> :not(:hover)
> .jp-icon-busy[fill] {
fill: var(--jp-inverse-layout-color3);
}

/* CSS for icons in status bar */
#jp-main-statusbar .jp-mod-selected .jp-icon-selectable[fill] {
fill: white;
fill: #fff;
}

#jp-main-statusbar .jp-mod-selected .jp-icon-selectable-inverse[fill] {
fill: var(--jp-brand-color1);
}

/* special handling for splash icon CSS. While the theme CSS reloads during
splash, the splash icon can loose theming. To prevent that, we set a
default for its color variable */
Expand All @@ -218,7 +273,6 @@
/**
* (DEPRECATED) Support for icons as CSS `background-images`
*/

.jp-MaterialIcon {
min-width: 16px;
min-height: 16px;
Expand All @@ -228,7 +282,6 @@
background-repeat: no-repeat;
background-position: center;
}

.jp-Icon {
display: inline-block;
vertical-align: middle;
Expand Down Expand Up @@ -271,10 +324,6 @@
background-image: var(--jp-icon-console);
}

.jp-DirectionsRunIcon {
background-image: var(--jp-icon-directions-run);
}

.jp-DownloadIcon {
background-image: var(--jp-icon-download);
}
Expand Down
46 changes: 23 additions & 23 deletions packages/application/style/iconsinverse.css → packages/application/style/iconsalt.css
View file
Expand Up @@ -4,71 +4,71 @@
|----------------------------------------------------------------------------*/

/**
* Support for inverse colors for icons as inline SVG HTMLElements
* Support for alt colors for icons as inline SVG HTMLElements
*/

/* inverse recolor the primary elements of an icon */
.jp-icon-inverse .jp-icon0[fill] {
/* alt recolor the primary elements of an icon */
.jp-icon-alt .jp-icon0[fill] {
fill: var(--jp-layout-color0);
}
.jp-icon-inverse .jp-icon1[fill] {
.jp-icon-alt .jp-icon1[fill] {
fill: var(--jp-layout-color1);
}
.jp-icon-inverse .jp-icon2[fill] {
.jp-icon-alt .jp-icon2[fill] {
fill: var(--jp-layout-color2);
}
.jp-icon-inverse .jp-icon3[fill] {
.jp-icon-alt .jp-icon3[fill] {
fill: var(--jp-layout-color3);
}
.jp-icon-inverse .jp-icon4[fill] {
.jp-icon-alt .jp-icon4[fill] {
fill: var(--jp-layout-color4);
}

.jp-icon-inverse .jp-icon0[stroke] {
.jp-icon-alt .jp-icon0[stroke] {
stroke: var(--jp-layout-color0);
}
.jp-icon-inverse .jp-icon1[stroke] {
.jp-icon-alt .jp-icon1[stroke] {
stroke: var(--jp-layout-color1);
}
.jp-icon-inverse .jp-icon2[stroke] {
.jp-icon-alt .jp-icon2[stroke] {
stroke: var(--jp-layout-color2);
}
.jp-icon-inverse .jp-icon3[stroke] {
.jp-icon-alt .jp-icon3[stroke] {
stroke: var(--jp-layout-color3);
}
.jp-icon-inverse .jp-icon4[stroke] {
.jp-icon-alt .jp-icon4[stroke] {
stroke: var(--jp-layout-color4);
}

/* inverse recolor the accent elements of an icon */
.jp-icon-inverse .jp-icon-accent0[fill] {
/* alt recolor the accent elements of an icon */
.jp-icon-alt .jp-icon-accent0[fill] {
fill: var(--jp-inverse-layout-color0);
}
.jp-icon-inverse .jp-icon-accent1[fill] {
.jp-icon-alt .jp-icon-accent1[fill] {
fill: var(--jp-inverse-layout-color1);
}
.jp-icon-inverse .jp-icon-accent2[fill] {
.jp-icon-alt .jp-icon-accent2[fill] {
fill: var(--jp-inverse-layout-color2);
}
.jp-icon-inverse .jp-icon-accent3[fill] {
.jp-icon-alt .jp-icon-accent3[fill] {
fill: var(--jp-inverse-layout-color3);
}
.jp-icon-inverse .jp-icon-accent4[fill] {
.jp-icon-alt .jp-icon-accent4[fill] {
fill: var(--jp-inverse-layout-color4);
}

.jp-icon-inverse .jp-icon-accent0[stroke] {
.jp-icon-alt .jp-icon-accent0[stroke] {
stroke: var(--jp-inverse-layout-color0);
}
.jp-icon-inverse .jp-icon-accent1[stroke] {
.jp-icon-alt .jp-icon-accent1[stroke] {
stroke: var(--jp-inverse-layout-color1);
}
.jp-icon-inverse .jp-icon-accent2[stroke] {
.jp-icon-alt .jp-icon-accent2[stroke] {
stroke: var(--jp-inverse-layout-color2);
}
.jp-icon-inverse .jp-icon-accent3[stroke] {
.jp-icon-alt .jp-icon-accent3[stroke] {
stroke: var(--jp-inverse-layout-color3);
}
.jp-icon-inverse .jp-icon-accent4[stroke] {
.jp-icon-alt .jp-icon-accent4[stroke] {
stroke: var(--jp-inverse-layout-color4);
}
40 changes: 20 additions & 20 deletions packages/application/style/iconshover.css
View file
Expand Up @@ -91,67 +91,67 @@
*/

/* inverse recolor the primary elements of an icon */
.jp-icon-hover.jp-icon-inverse :hover .jp-icon0-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon0-hover[fill] {
fill: var(--jp-layout-color0);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon1-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon1-hover[fill] {
fill: var(--jp-layout-color1);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon2-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon2-hover[fill] {
fill: var(--jp-layout-color2);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon3-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon3-hover[fill] {
fill: var(--jp-layout-color3);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon4-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon4-hover[fill] {
fill: var(--jp-layout-color4);
}

.jp-icon-hover.jp-icon-inverse :hover .jp-icon0-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon0-hover[stroke] {
stroke: var(--jp-layout-color0);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon1-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon1-hover[stroke] {
stroke: var(--jp-layout-color1);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon2-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon2-hover[stroke] {
stroke: var(--jp-layout-color2);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon3-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon3-hover[stroke] {
stroke: var(--jp-layout-color3);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon4-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon4-hover[stroke] {
stroke: var(--jp-layout-color4);
}

/* inverse recolor the accent elements of an icon */
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent0-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent0-hover[fill] {
fill: var(--jp-inverse-layout-color0);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent1-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent1-hover[fill] {
fill: var(--jp-inverse-layout-color1);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent2-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent2-hover[fill] {
fill: var(--jp-inverse-layout-color2);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent3-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent3-hover[fill] {
fill: var(--jp-inverse-layout-color3);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent4-hover[fill] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent4-hover[fill] {
fill: var(--jp-inverse-layout-color4);
}

.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent0-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent0-hover[stroke] {
stroke: var(--jp-inverse-layout-color0);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent1-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent1-hover[stroke] {
stroke: var(--jp-inverse-layout-color1);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent2-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent2-hover[stroke] {
stroke: var(--jp-inverse-layout-color2);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent3-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent3-hover[stroke] {
stroke: var(--jp-inverse-layout-color3);
}
.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent4-hover[stroke] {
.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent4-hover[stroke] {
stroke: var(--jp-inverse-layout-color4);
}

0 comments on commit 5b743d6

Please sign in to comment.