Add support for specifying custom icons in ToggleButtons #2182

astrofrog · 2018-08-25T20:30:40Z

This adds support for specifying custom icons via the data URI mechanism in ToggleButtons. Here is a preview:

A few open questions:

One thing I wasn't quite sure about is how the icon size should be handled, and how to make sure the icons are properly centered (in the example above there is a slight vertical offset for the two custom icons) - I'm not familiar enough with the notebook CSS.
What is the mechanism for adding tests? I can't see any tests currently for ToggleButtons currently?
I can add the same mechanism for ToggleButton once things are polished with ToggleButtons.

Impremented during the JupyterCon 2018 sprint

jasongrout · 2018-08-31T17:34:35Z

Thanks!

I've been thinking more about this, and particularly thinking about consistency with the Image widget. What do you think of having a new attribute, icon_format, that can be a mimetype, or the string 'url', or the string 'fontawesome' (defaulting to 'fontawesome'). The icon attribute itself would be changed to binary, and the format string would be used to determine how to interpret the icon attribute.

This would be a backwards incompatible change, and might be overkill, considering icons usually are fairly small, so it's not a big deal to transmit them as data URIs rather than in binary. It does make it slightly easier to give an image, as in you don't have to construct a data uri for the image (you can just read in the binary image and set the attribute to the data). Thoughts? How easy is it to construct data URIs in python?

maartenbreddels · 2018-08-31T19:47:03Z

What about making icon a union of string and image? String means fontawesome otherwise an image (from mobile phone)

…

On Fri, 31 Aug 2018, 19:34 Jason Grout, ***@***.***> wrote: Thanks! I've been thinking more about this, and particularly thinking about consistency with the Image widget. What do you think of having a new attribute, icon_format, that can be a mimetype, or the string 'url', or the string 'fontawesome' (defaulting to 'fontawesome'). The icon attribute itself would be changed to binary, and the format string would be used to determine how to interpret the icon attribute. This would be a backwards incompatible change, and might be overkill, considering icons usually are fairly small, so it's not a big deal to transmit them as data URIs rather than in binary. It does make it slightly easier to give an image, as in you don't have to construct a data uri for the image (you can just read in the binary image and set the attribute to the data). Thoughts? How easy is it to construct data URIs in python? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2182 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABryPZ89SZHpH1AT-Z5-LLa25rvf9Hsgks5uWXOrgaJpZM4WMhs3> .

jasongrout · 2018-08-31T19:52:46Z

Do you mean the icon attribute would actually be a reference to an image widget?

maartenbreddels · 2018-08-31T19:55:06Z

Indeed, so all logic of reading images etc on the kernel side is in that class. (from mobile phone)

…

On Fri, 31 Aug 2018, 21:52 Jason Grout, ***@***.***> wrote: Do you mean the icon attribute would actually be a reference to an image widget? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2182 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABryPc47AeXs2aBh86p76Gy7EnE9r4mYks5uWZQPgaJpZM4WMhs3> .

jasongrout · 2018-08-31T20:03:58Z

I don't think we have precedent for having an attribute that is the union of a widget reference or a string. @SylvainCorlay - do you have thoughts about having a union attribute of either a widget reference or a string? In the serialization, this really means that if the string starts with the magic value, it's considered a widget reference, otherwise it's a fontawesome name.

maartenbreddels · 2018-08-31T20:20:21Z

Another option is to have both icon (string) and image (Image) traits, if someone wants, the both can be used, not super elegant, but clean, and also quite obvious what image would be. (from mobile phone)

…

On Fri, 31 Aug 2018, 22:03 Jason Grout, ***@***.***> wrote: I don't think we have precedent for having an attribute that is the union of a widget reference or a string. @SylvainCorlay <https://github.com/SylvainCorlay> - do you have thoughts about having a union attribute of either a widget reference or a string? In the serialization, this really means that if the string starts with the magic value, it's considered a widget reference, otherwise it's a fontawesome name. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2182 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABryPZl8cm-g0L3ZNb1Lltc4bwBbplk8ks5uWZavgaJpZM4WMhs3> .

SylvainCorlay · 2018-08-31T21:51:18Z

The icon trait could be of a special Icon type.

Assigning a string would create a font-based icon upon traitlet validation. To get an image, explicitely instantiate an image-based icon.

maartenbreddels · 2018-09-01T07:46:36Z

I like it, so icon could be similar to Image, except it would create a li dom element for format=='fontawesome'? And button would create a view, and would attach that Dom element? (from mobile phone)

…

On Fri, 31 Aug 2018, 23:51 Sylvain Corlay, ***@***.***> wrote: The icon trait could be of a special Icon type. Assigning a string would create a font-based icon upon traitlet validation. To get an image, explicitely instantiate an image-based icon. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2182 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABryPeiYw20u9GXowbZwbaAyDaelhK7kks5uWa_WgaJpZM4WMhs3> .

SylvainCorlay · 2018-09-02T18:48:36Z

Yes, probably. We also need to do some work on line height for the containing element for vertical centering.

maartenbreddels · 2018-09-25T14:17:07Z

I've turned all icon/icons into Icon widgets/List of icon widgets. Icon is basically Image + fontawesome support.
See this demo for features, setting a custom .svg image as icon.

maartenbreddels · 2018-10-01T11:13:13Z

I've started supporting non-unique labels with this PR, but it would make sense to do this with all of the _Selection widget. Shall I leave this in this PR and once we agree do another PR to support it in the others as well?

SylvainCorlay · 2018-10-05T13:05:54Z

ipywidgets/widgets/widget_button.py

+ #  warnings.warn("icons names no longer start with 'fa-', "
+ #  "just use the class name itself (for example, 'check' instead of 'fa-check')", DeprecationWarning)
+ #  value = value[3:]
+ #  return value


maartenbreddels · 2018-10-05T13:38:08Z

packages/controls/src/widget_bool.ts

- i.classList.add('fa-' + icon);
+ if (icon) {
+ this.iconView = <IconView> await this.create_child_view(icon)
+ if (description.length === 0) {


since of the async we should first put in a placeholder element.

maartenbreddels · 2018-10-31T11:12:24Z

@SylvainCorlay issues addressed that we discussed, should we merge?

maartenbreddels · 2018-10-31T11:14:46Z

oops, I see I need to follow the same pattern in ToggleButton

maartenbreddels · 2018-10-31T14:13:30Z

Ok, this PR led me to find #2256, we should first solve that and then rebase this on master.

…eButton as well

maartenbreddels · 2018-11-21T13:14:23Z

With #2256 in and some cleanups, this is ready for a new review or merge.

maartenbreddels · 2020-05-14T11:04:16Z

I think with https://github.com/mariobuikhuizen/ipyvuetify I personally don't need this anymore. Happy for someone else to pick this up.

maartenbreddels force-pushed the custom-icons branch 2 times, most recently from 4141afb to aaea487 Compare September 25, 2018 14:10

This was referenced Sep 28, 2018

WIP: Added a more general ToolbarWidget bqplot/bqplot#724

Open

Togglebuttons with only Icons #2209

Open

maartenbreddels mentioned this pull request Oct 1, 2018

WIP: Menu widget based on phosphorjs #2232

Open

SylvainCorlay reviewed Oct 5, 2018

View reviewed changes

maartenbreddels reviewed Oct 5, 2018

View reviewed changes

maartenbreddels mentioned this pull request Oct 5, 2018

Should Image.width/height be of type Int? #2236

Open

maartenbreddels force-pushed the custom-icons branch from 9f0180c to da19f86 Compare October 31, 2018 14:12

astrofrog and others added 7 commits November 21, 2018 13:50

Add support for specifying custom icons in ToggleButtons

58107b1

turn icon into a Icon widget

63a04c0

update docstring and spec

bd42f14

do not require the label to be unqique

02e2392

renaming: view->this, item->label, items->labels

34f48af

give icons a pointer icon as well

4020cd5

fix async issue using placeholder for icon

2bd8d8b

maartenbreddels added 3 commits November 21, 2018 13:50

move validation from Button to Icon

5d351dd

fix async issue using placeholder for icon in ToggleButtons and Toggl…

33fa4e0

…eButton as well

make sure the mouse pointer over the icon is really a pointer

e354ab5

maartenbreddels force-pushed the custom-icons branch from da19f86 to e354ab5 Compare November 21, 2018 12:50

maartenbreddels added 2 commits November 21, 2018 14:10

cleanups

c11448d

comments

1c39b37

SylvainCorlay added this to the Minor release milestone Jun 4, 2019

maartenbreddels closed this May 14, 2020

lock bot added the resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Jun 24, 2020

lock bot locked as resolved and limited conversation to collaborators Jun 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for specifying custom icons in ToggleButtons #2182

Add support for specifying custom icons in ToggleButtons #2182

astrofrog commented Aug 25, 2018

jasongrout commented Aug 31, 2018

maartenbreddels commented Aug 31, 2018 via email

jasongrout commented Aug 31, 2018

maartenbreddels commented Aug 31, 2018 via email

jasongrout commented Aug 31, 2018

maartenbreddels commented Aug 31, 2018 via email

SylvainCorlay commented Aug 31, 2018

maartenbreddels commented Sep 1, 2018 via email

SylvainCorlay commented Sep 2, 2018 •

edited

Loading

maartenbreddels commented Sep 25, 2018

maartenbreddels commented Oct 1, 2018

SylvainCorlay Oct 5, 2018

maartenbreddels Oct 5, 2018

maartenbreddels commented Oct 31, 2018

maartenbreddels commented Oct 31, 2018

maartenbreddels commented Oct 31, 2018

maartenbreddels commented Nov 21, 2018

maartenbreddels commented May 14, 2020

Add support for specifying custom icons in ToggleButtons #2182

Add support for specifying custom icons in ToggleButtons #2182

Conversation

astrofrog commented Aug 25, 2018

jasongrout commented Aug 31, 2018

maartenbreddels commented Aug 31, 2018 via email

jasongrout commented Aug 31, 2018

maartenbreddels commented Aug 31, 2018 via email

jasongrout commented Aug 31, 2018

maartenbreddels commented Aug 31, 2018 via email

SylvainCorlay commented Aug 31, 2018

maartenbreddels commented Sep 1, 2018 via email

SylvainCorlay commented Sep 2, 2018 • edited Loading

maartenbreddels commented Sep 25, 2018

maartenbreddels commented Oct 1, 2018

SylvainCorlay Oct 5, 2018

Choose a reason for hiding this comment

maartenbreddels Oct 5, 2018

Choose a reason for hiding this comment

maartenbreddels commented Oct 31, 2018

maartenbreddels commented Oct 31, 2018

maartenbreddels commented Oct 31, 2018

maartenbreddels commented Nov 21, 2018

maartenbreddels commented May 14, 2020

SylvainCorlay commented Sep 2, 2018 •

edited

Loading