Implement AppLayout widget

[btel]

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)

• 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.

• 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.

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]

Thanks for getting starting witht this!

[btel]

With pleasure! Let me know if you have any comments.

[maartenbreddels]

Nice work Bartosz! Absolutely love the AppLayout widget.

Trying out I noticed the following (chrome on osx):

Can the scrollbar be avoided in the second example?

[btel]

@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]

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'))

[SylvainCorlay]

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

Great example notebooks!

[SylvainCorlay]

@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.

[SylvainCorlay]

🎉

[maartenbreddels]

Great work @btel !