Add CustomAction toolbar action #8099
Conversation
| if (this.model.icon.startsWith("bk-tool-icon-")) | ||
| this.el.classList.add(this.model.icon) | ||
| else | ||
| this.el.style.backgroundImage = "url('data:image/png;base64," + this.model.icon + "')" |
bryevdv
Jul 21, 2018
Author
Member
Just occurs to me this is problematic, as ostensibly Image will accept other valid PIL image formats. But I'm not sure data URI's can actually be more than PNGs. Might end up simply restricting what Image accepts.
Just occurs to me this is problematic, as ostensibly Image will accept other valid PIL image formats. But I'm not sure data URI's can actually be more than PNGs. Might end up simply restricting what Image accepts.
| model: CustomAction | ||
|
|
||
| css_classes(): string[] { | ||
| return super.css_classes().concat("bk-toolbar-button-custom-action") |
bryevdv
Jul 21, 2018
Author
Member
This is to provide a known target for Selenium test to be able to click this button.
This is to provide a known target for Selenium test to be able to click this button.
|
Well, this is causing real test failures for |
|
Apparently PhantomJS does not support the |
Yep, that's why we have |
|
@mattpap thanks, I'd forgotten. Any other comments before merging? |
| if (startsWith(icon, "bk-tool-icon")) | ||
| this.el.classList.add(icon) | ||
| else | ||
| this.el.style.backgroundImage = "url('data:image/png;base64," + icon + "')" |
mattpap
Jul 23, 2018
Contributor
I would change (reverse) this logic, especially in light of #7499. Anything that starts with data: should be treated as a CSS icon and everything else should be a CSS class. This also means that icon should contain data:image/png;base64, prefix. This way we would allow for other formats and encodings.
I would change (reverse) this logic, especially in light of #7499. Anything that starts with data: should be treated as a CSS icon and everything else should be a CSS class. This also means that icon should contain data:image/png;base64, prefix. This way we would allow for other formats and encodings.
* add pillow as a runtime dependency * update release notes * add CustomAction toolbar button tool * fix requires spec format * don't use startsWith method, missing from PhantomJS * use internal startsWith * test for data:image and treat anything else as a CSS class
This is a slight diversion, but I intend to use this targetable toolbar button that executes callback code as a simple and standard means to inject JS code into selenium tests. Additionally, it seems like quite a useful feature for users in its own right.
This PR also adds an
Imageproperty, that can be set from RGB(A) NumPy arrays, PIL image objects, or from filenames of images in disk. The transformed value is always a Base64data\imagestring. In this way the icon for the toolbar tool may be set to an arbitrary choice by the user.This requires adding Pillow as a dependency, however Pillow is easily obtainable. Additionally, there was Gitter discussion about adding PNG, TIFF, etc. image glyphs, and Pillow will be needed for that work as well.