Saturday, July 7, 2018

I poked around in Jane, trying to organize our sites and meditating about #2430. I was unable to delete an unused site because it had summary records. New #2433 : the lino.modlib.summaries.Summary mixin now also sets allow_cascaded_delete to 'master'. En passant I converted more docstrings to prosa in tickets (Ticket management in Noi).

I fixed a problem which caused the lightbox to not work on my German blog. The actual problem was in the layout.html template, but en passant I updated the docstring of rstgen.sphinxconf.sigal_image.

Responsive layouts for Lino

Hamza and I had a look at the Responsive Table example. In the Table.view.xml source code we see:

<Column
        minScreenWidth="Desktop"
        demandPopin="true"
        hAlign="End">
        <Text text="Dimensions" />
</Column>

Looking at the sap.m.Column API reference I note:

  • The minScreenWidth of a Column causes OpenUI5 to hide this column when the screen width is below the specified minimum width. You can specify that width either using CSS sizes (e.g: “480px” or “40em”), or using one of the names of the sap.m.ScreenSize enumeration (e.g: “Phone”, “Tablet”, “Desktop”, “Small”, “Medium”, “Large”, …).

  • When a column becomes hidden because there is not enough space, OpenUI5 looks at demandPopin : if this is true, the column is shown as pop-in instead of hiding it.

This is an API feature of OpenUI5 which did not exist in ExtJS.

The important question for us us now: what information should an application developer provide so that Lino can use these features in a meaningful way?

Our first spontaneous suggestion was to introduce three new class attributes: tablet_columns, mobile_columns and popin_columns.

IOW we made the intuitive design choice that Lino provides three possible screen sizes: “desktop”, “tablet” and “phone”. The default size is desktop.

As the first example we made the lino_noi.lib.tickets.Tickets table responsive:

class Tickets(dd.Table):
    column_names = 'id summary:50 priority workflow_buttons:30 site:10'
    tablet_columns = "id summary workflow_buttons"
    mobile_columns = "summary workflow_buttons"
    popin_columns = "id priority site"

That means: the basic layout is column_names. These columns are visible when there is enough space. On a tablet (medium screen size) we want only the tablet_columns to be visible.

These new attributes are sets of field names that can be specified as a single string with a space-separated list of field names, and we extended the expand_field_names function for handling them.

Test:

>>> import lino
>>> lino.startup('lino_book.projects.team.settings.demo')
>>> from lino.api.doctest import *

>>> pprint(rt.models.tickets.AllTickets.mobile_columns)
set([<django.db.models.fields.CharField: summary>,
     lino.core.model.Model.workflow_buttons])