Ubuntu UI Toolkit

SDK: Design a new ListItem and layouts

Registered by Zsombor Egri

Design a new ListItem component the is performant enough to be used in dynamic lists i.e ListView.

The idea is to split the component into a base item which handles the click, options, and all other building elements requred from a list item, and a set of layouts, which can be used or not together with the ListItem or other components, in case the functionality provided by the ListItem is not needed.

The new API documentation can be found under https://docs.google.com/a/canonical.com/document/d/1uqmhDn_3wlcSuzvn3L44chjzUczQ3hx5yI_kBh2IxhY/edit#heading=h.ftjdgagfx6od

=========
UPDATES:
=========
* highlight automatic when action, left/right conditional actions or an active component or MouseArea are declared as content.
* we may need to provide highlight force property
* ListItemLayout and Captions should be the only standard layout helpers, ImageContainer and StandardLayout should be removed. Apps should be creating the layout themselves.

=============================================================================
Benchmarks with prototype:
Performance measurements with the ListItem prototype and the Ubuntu.Components.ListItems.Empty:

benchmark_GridOfComponents():"10000 Items": 89 msecs per iteration (total: 89, iterations: 1)
benchmark_GridOfComponents():"10000 ListItems": 143 msecs per iteration (total: 143, iterations: 1)
benchmark_GridOfComponents():"10000 Empty": 7212 msecs per iteration (total: 7,212, iterations: 1)

Present ListItems Standard and Subtitled comparison with StandardLayout.
benchmark_GridOfComponents():"ListItem.StandardLayout with two labels and Icon":
     675 msecs per iteration (total: 675, iterations: 1)
benchmark_GridOfComponents(ListItem.StandardLayout with two labels)
benchmark_GridOfComponents():"ListItem.StandardLayout with two labels":
     452 msecs per iteration (total: 452, iterations: 1)
benchmark_GridOfComponents():"ListItem.Subtitled with Icon":
     956 msecs per iteration (total: 956, iterations: 1)
benchmark_GridOfComponents():"ListItem.Subtitled without Icon":
     933 msecs per iteration (total: 933, iterations: 1)
benchmark_GridOfComponents():"ListItem.StandardLayout with one label and Icon":
     612 msecs per iteration (total: 612, iterations: 1)
benchmark_GridOfComponents():"ListItem.StandardLayout with one label":
     436 msecs per iteration (total: 436, iterations: 1)
benchmark_GridOfComponents():"ListItem.Standard with Icon":
     864 msecs per iteration (total: 864, iterations: 1)
benchmark_GridOfComponents():"ListItem.Standard without Icon":
     708 msecs per iteration (total: 708, iterations: 1)

Blueprint information

Status:
Complete
Approver:
Zoltan Balogh
Priority:
Undefined
Drafter:
Zsombor Egri
Direction:
Needs approval
Assignee:
Zsombor Egri
Definition:
Drafting
Series goal:
None
Implementation:
Implemented
Milestone target:
milestone icon upcoming-15.04
Started by
Zsombor Egri
Completed by
Zsombor Egri

Related branches

Sprints

Whiteboard

=============================================================================
  BENCHMARKS
=============================================================================
The following benchmarks are updated every time an MR is attached to the BP
(last updated for 130-standardlayout)
These were done on debug build on a i7-Haswell VM.

"list with QtQuick Item":
     51 msecs per iteration (total: 51, iterations: 1)
"list with new ListItem":
     142 msecs per iteration (total: 142, iterations: 1)
"list with new ListItem with options":
     178 msecs per iteration (total: 178, iterations: 1)
"list with new ListItem with inline options":
     220 msecs per iteration (total: 220, iterations: 1)
"list of standard layout":
     1,790 msecs per iteration (total: 1,790, iterations: 1)
"list of StandardLayout":
     1,973 msecs per iteration (total: 1,973, iterations: 1)
"list of StandardLayout with options":
     2,065 msecs per iteration (total: 2,065, iterations: 1)

Old list items Empty (equivalent to ListItem) and Standard (equivalent to StandardLayout):
"list with ListItems.Empty (equivalent to the new ListItem":
     3,836 msecs per iteration (total: 3,836, iterations: 1)
"list with ListItems.Base (one icon, one label and one chevron)":
     25,101 msecs per iteration (total: 25,101, iterations: 1)

(?)

Work Items

Work items:
[zsombi] ThinDivider color, margins and thickness fix: DONE
[zsombi] Text colors adjustment: DONE
[zsombi] Last item in a list not to have divider: DONE
[zsombi] ListItem and background: DONE
[zsombi] Add divider: DONE
[zsombi] Add ListItemOptions API: DONE
[zsombi] Implement swiping on ListItem: DONE
[zsombi] Implement configurable rebounding animation: DONE
[zsombi] Implement options visualization: DONE
[zsombi] Rebind list item content when option is selected : DONE
[zsombi] Custom delegates for options visualization: DONE
[zsombi] Snapping options when more than 50% gets visible: DONE
[zsombi] PREREQUISITE: Remove dependency from Unity Actions, move Acions type to C++: DONE
[zsombi] Action triggering to use value parameter to pass ListItem index: DONE
[zsombi] Publish leading, offset and visibleOptions properties in a style component to help custom delegate implementations: DONE
[zsombi] Last ListItem in a ListView has no divider: DONE
[zsombi] Fix disabled ListItem: DONE
[zsombi] Add ViewItems attached properties to parent item: DONE
[zsombi] Implement selection mode: DONE
[zsombi] Add pressAndHold() signal, prerequisite for UbuntuListView integration: DONE
[zsombi] Expose leading and panelColor properties in ListIyemOptions: DONE
[timp] Add samples to toolkit gallery: DONE
[zsombi] Provide helpers to handle global selection mode on a view: DONE
[zsombi] Add action property to ListItem to drive pressed and enabled behaviour: DONE
[zsombi] Implement Autopilot CPOs: DONE
[zsombi] Implement expanding pattern: TODO
Migrate ListItems.Expandable to use the new ListItem: TODO
[zsombi] Implement dragging (ListView reordering) feature: DONE
Identify minimal use cases: DONE
[zsombi] Define API for the layouts: DONE
[zsombi] Implement ListItemLayout: DONE
[zsombi] Implement Captions layout: DONE
[zsombi] Create StandardLayout: DONE
[zsombi] RTL support: DONE
[zsombi] Final review of components with design: DONE

This blueprint contains Public information 
Everyone can see this information.