The selection column is not only a visual column, but also a real column
of the file list table. Unlike other columns whose width is reduced in
space constrained screens the selection column must stay the same so the
tapping area is large enough to be easily usable
The selection column does not appear in the search results table, so its
contents have to be explicitly aligned with those of the main table
based on whether the main table has a selection column or not (using the
"has-selection" CSS class in the same way as the "has-favorite" CSS
class was being used when there was a column for favorite actions).
In the tests the ":visible" selector can no longer be used. That
selector matches elements with a width or height that is greater than
zero, but the dimensions calculated in the unit tests are not reliable;
the width of the link was zero before these changes, and now moving the
checkbox to its own column causes the height of the link to become zero
too, so it no longer matches the ":visible" selector even if it is not
hidden. As hidding and showing the link is based on its "display" CSS
property its value is the one checked now.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The favorite icon was shown on its own "column" (not a real column in
the table, but a visual column achieved through margins and left
positions). Now the icon was moved to the top right corner of the file
thumbnail, and the thumbnail and file name were moved to the left to
fill the space left by the "column".
To keep the markup in line with its visual representation (and to ease
the placing through CSS), the favorite mark is no longer prepended to
the row, but appended to the thumbnail instead. In the same way, the
thumbnail is no longer appended to the checkbox label, but to the link
with the name of the file instead (although the checkbox is still shown
at the bottom right corner of the thumbnail, and clicking on the
thumbnail still selects the file). In order to show the "busy" state on
a file the "icon-loading-small" CSS class is set to the parent element
of the thumbnail, so the thumbnail is also wrapped now by another div
with the same size and position as the label.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
