Improve nbAgg & WebAgg toolbars - #17078
Conversation
|
I'm not sure if it was aligned before, or just coincidence. It's easiest if we use flexbox, looks like it's available almost everywhere. |
|
Oh, I checked again, and it's actually just |
|
@QuLogic when using the "Waiting for other PR" label, can you please cross-link the other PR, so that one can find out what has to be reviewed before this? |
|
Updated to be vertically aligned. Additionally, I implemented For nbAgg, it uses 'active' & disabled style in Bootstrap: For WebAgg, there are new styles to colorize the active image to approximately tab:blue, and a disabled style: |
|
Rebased and updated the original description with the new screenshots. |
|
Looks like this broke the non-embedded WebAgg, so don't merge until I re-check this. |
This is one step to removing dependence on jQuery-UI.
For nbAgg, encapsulate buttons in a button group, and create new groups whenever we encounter a spacer. Change the toolbar's style to use Bootstrap.
* Add some surrounding `div`s for button groups, like the nbAgg toolbar, in order to add spacers. * Add our own CSS file instead of using jQuery UI styles.
This uses the 'active' Bootstrap style on nbagg, and colorizes the image to tab:blue on webagg.
dorafc
left a comment
dorafc
left a comment
There was a problem hiding this comment.
JS looks ok as a JQuery -> vanilla js translation. This is really the kind of thing you want to verify works in the browser.
tacaswell
left a comment
tacaswell
left a comment
There was a problem hiding this comment.
Tested the embedding example, spawning a sever with plt.show and nbagg work as expected.
4 participants
PR Summary
This tweaks the nbAgg and WebAgg toolbars to look a little better. Using button groups, we can emulate the spacer setup that other GUIs have. For WebAgg, start using Matplotlib's icons and try to move away from jQuery UI's CSS. Additionally, implement
set_history_buttons, so the back/forward buttons disable themselves, and add a style for active button, to show pan/zoom state.Previously, nbAgg looked like:
and now it looks like:
Previously, WebAgg looked like:
and now it looks like:
Waiting for #17053.PR Checklist