Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement AppLayout widget #2333

Merged
merged 39 commits into from Apr 9, 2019

Conversation

@btel
Copy link
Contributor

commented Mar 4, 2019

Request for review

This PR implements specialised layouts based on GridBox widget (using CSS Grid specification).

These are three reusable layouts:

  • TwoByTwoLayout - simple 2x2 grid (locations: top left, bottom left, top right, bottom right) with auto-merging capabilities (if a box is empty, it will be merged with the neighbour)

image

  • AppLayout - more flexible, application-like layout with a footer, a header, two sidebars and a central pane. If some of them are not occupied, they will be merged, giving much flexibility to this layout.

image

  • GridspecLayout - a NxM grid of widgets with a Pythonic indexing/slicing interface. Grid cells can be easily merged by using the slice notation. Very flexible layout, useful also for multi-panel graphs.

image

Example of usage:

import ipywidgets as widgets
app = widgets.TwoByTwoLayout(top_left=widgets.Button(), top_right=widgets.Button(),
                        bottom_left=widgets.Button(), bottom_right=widgets.Button())
display(app)

These template widgets are implemented in widget_templates.py and unit tests in test_widget_templates.py. There is also a new section in the docs written in jupyter notebook Layout Templates.ipynb (it's rather heavy in terms of number of lines, because of the widgets being embeded in the notebook).

@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Mar 4, 2019

Thanks for getting starting witht this!

@btel

This comment has been minimized.

Copy link
Contributor Author

commented Mar 4, 2019

@maartenbreddels

This comment has been minimized.

Copy link
Member

commented Mar 6, 2019

Nice work Bartosz! Absolutely love the AppLayout widget.

Trying out I noticed the following (chrome on osx):
image
Can the scrollbar be avoided in the second example?

@btel

This comment has been minimized.

Copy link
Contributor Author

commented Mar 6, 2019

@maartenbreddels Thanks for spotting this! The problem seems to be related to the way the size is calculated, i.e. height=100% does not include the margins, so the "Bottom right" button overflows.

I created a minimal example in HTML/CSS reproducing this problem: https://jsfiddle.net/j6xv45sn/

The solution is to set height of the button to 'auto'. I will update the examples.

@maartenbreddels
Copy link
Member

left a comment

Looking good, found a minor issue with 'merge'.

For the bqplot example, I think this behaves better:

max_slider = FloatSlider(min=0, max=10, description="Max: ",
                         layout=Layout(width='300px', height='20px'))
min_slider = FloatSlider(min=-1, max=10, description="Min: ",
                         layout=Layout(width='300px', height='20px'))
ipywidgets/widgets/widget_templates.py Outdated Show resolved Hide resolved
ipywidgets/widgets/widget_templates.py Outdated Show resolved Hide resolved

@btel btel changed the title WIP Implement AppLayout widget Implement AppLayout widget Mar 8, 2019

Bartosz Telenczuk
@SylvainCorlay
Copy link
Member

left a comment

This is brilliant! I left a few comments on the way as I am still looking at it.

Great example notebooks!

docs/source/examples/Layout Example.ipynb Outdated Show resolved Hide resolved
@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Mar 25, 2019

@btel thanks very much. This is really clean code, and we were not able to "break it" with more complex examples.

@jasongrout we have been reviewing this with @maartenbreddels and I am happy to merge as it is now.

Bartosz Telenczuk added some commits Apr 8, 2019

@SylvainCorlay SylvainCorlay merged commit 3fb98db into jupyter-widgets:master Apr 9, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

🎉

@maartenbreddels

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

Great work @btel !

@jasongrout jasongrout added this to the 7.5 milestone Jul 29, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.