Improve nbAgg & WebAgg toolbars #17078
Conversation
|
Can the dropdown box in webagg be centered again? |
|
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.
|
OK, it was just crossed PRs with #17135 and an errant slash. |
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