Fix icons for the dark theme

[jtpio]

Fixes #375.

TODO

• Callstack icons
• Debugger icon in the toolbar

[jtpio]

Now sounds like a good time to migrate to the new LabIcon.

[jtpio]

The jp-icon3 is needed for the icons to be styled correctly based on the theme (using the correct fill color).

[jtpio]

31d8bb0 should fix most of the icons.

Still the debugger toolbar icon to fix.

[jtpio]

949b280 adds the debugger icon and the button as two separate items in the toolbar.

As a side effect the hover style now applies only to the switch:

cc @telamonian do you know if there is a more canonical way of achieving this with the new LabIcon system and the bugIcon from ui-components?

Until now the toolbar component was defined with:

debugger/src/handler.ts

Lines 38 to 46 in 2ee7a2e

	const button = new ToolbarButton({
	className: 'jp-DebuggerSwitchButton',
	iconClass: 'jp-ToggleSwitch',
	onClick,
	tooltip: 'Enable / Disable Debugger'
	});
	widget.toolbar.addItem('debugger-button', button);
	return button;

And styled with:

debugger/style/icons.css

Lines 90 to 122 in 2ee7a2e

	.jp-DebuggerSwitchButton::before {
	content: '';
	width: 14px;
	height: 14px;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 14px;
	margin-right: 4px;
	background-image: var(--jp-icon-bug);
	}
	.jp-Toolbar-item .jp-ToggleSwitch {
	display: flex;
	align-items: center;
	cursor: pointer;
	background-color: var(--jp-border-color1);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 34px;
	width: 35px;
	}
	.jp-Toolbar-item .jp-ToggleSwitch::before {
	content: '';
	height: 10px;
	width: 10px;
	margin-left: 5px;
	margin-right: 50%;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50%;
	}

Which made it possible to have both jp-BugIcon and the custom switch, visually looking like the following:

[jtpio]

Let's make the bug icon clickable as well is we keep the two items separate.

[jtpio]

d7e58e4 implements this:

It kind of feels "odd" that two items of the toolbar do the same thing though.

[jtpio]

Maybe @tgeorgeux has some input for a nice switch button UX that includes an icon? It looks like core JupyterLab doesn't have such component yet, so it might still be uncertain what we want to have really.

Otherwise I suggest handling this as a separate issue.

[telamonian]

cc @telamonian do you know if there is a more canonical way of achieving this with the new LabIcon system and the bugIcon from ui-components?

Short answer is no. I am currently thinking about ways to support multiple icons/text labels in a single LabButton (or something) component. Part of that is figuring out the actual use cases, so thanks for this.

It's a bit hacky, but I think you can get what you really want (a single outer <button> with two child icons side by side) like this:

const button = new ToolbarButton({ 
   className: classes('jp-DebuggerSwitchButton', 'jp-ToggleSwitch'),
   icon: bugIcon, 
   onClick, 
   tooltip: 'Enable / Disable Debugger' 
 }); 

So the bug icon would be inline svg, while the toggle switch would continue to be CSS. Getting the styling right might be a bit tricky, though

[jtpio]

Thanks @telamonian for the input!

I was also thinking about building a custom React component directly to have full control on it. Maybe that would be the simpler solution for now.

const button = new ToolbarButton({ 
   className: classes('jp-DebuggerSwitchButton', 'jp-ToggleSwitch'),
   icon: bugIcon, 
   onClick, 
   tooltip: 'Enable / Disable Debugger' 
 }); 

So the bug icon would be inline svg, while the toggle switch would continue to be CSS. Getting the styling right might be a bit tricky, though.

Yes, this is basically how it is at the moment (except that is uses iconClass instead of icon).

[telamonian]

Yes, this is basically how it is at the moment (except that is uses iconClass instead of icon).

The difference would be that both bug icon and toggle icon would be children of the same large button, like before, instead of having

two items of the toolbar do the same thing though.

[jtpio]

@afshin It looks like something like this works well actually:

[afshin]

Awesome. This looks great to me.

…

On Fri, 6 Mar 2020 at 18:40 Jeremy Tuloup ***@***.***> wrote: @afshin <https://github.com/afshin> It looks like something like this works well actually: [image: bug-icon-switch-label] <https://user-images.githubusercontent.com/591645/76112247-21a60f00-5fe2-11ea-9848-88dedf6c23e3.gif> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#376?email_source=notifications&email_token=AABG6KPKJCAIM224VWOGREDRGE7QTA5CNFSM4K7RSCZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEOCMMWA#issuecomment-595904088>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABG6KI4W767E7OIDMVTQVTRGE7QTANCNFSM4K7RSCZA> .

[tgeorgeux]

@jtpio I am working on switches here: jupyterlab/jupyterlab#8010

I think if the icon is being used as a toggle it makes more sense to color the icon to indicate it's on or off. The design pattern doesn't exist in Jupyterlab to have an 'icon and toggle' together. I

Hope this helps, I'll be in touch.

[jtpio]

Thanks @tgeorgeux for opening this issue 👍

[afshin]

Thank you!

👍