Merge lp:~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs into lp:ubuntu-ui-toolkit/staging

Proposed by Andrea Bernabei
Status: Merged
Approved by: Andrea Bernabei
Approved revision: 1826
Merged at revision: 2040
Proposed branch: lp:~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs
Merge into: lp:ubuntu-ui-toolkit/staging
Diff against target: 158 lines (+81/-5)
2 files modified
src/Ubuntu/UbuntuToolkit/privates/threelabelsslot_p.cpp (+6/-0)
src/Ubuntu/UbuntuToolkit/uclistitemlayout.cpp (+75/-5)
To merge this branch: bzr merge lp:~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs
Reviewer Review Type Date Requested Status
ubuntu-sdk-build-bot continuous-integration Approve
Cris Dywan Approve
Jonas G. Drange (community) Approve
Review via email: mp+300372@code.launchpad.net

Commit message

ListItemLayout doc: add elide mode change example and add section about labels default properties values

Description of the change

Add some documentation to ListItemLayout docs, in particular:

- explain that the some properties of ListItemLayout's labels have different default values from what is used by Label component

- explain that changing "elide" also requires disabling wrapping (see bug#1603450)

To post a comment you must log in.
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :

FAILED: Continuous integration, rev:1826
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs/+merge/300372/+edit-commit-message

https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1081/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/4509/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-stable/1081/rebuild

review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :

FAILED: Continuous integration, rev:1826
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs/+merge/300372/+edit-commit-message

https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/834/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/4510/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-i386-gles-stable/834/rebuild

review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :

FAILED: Continuous integration, rev:1826
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs/+merge/300372/+edit-commit-message

https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/862/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/4511/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-amd64-devel/862/rebuild

review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :

FAILED: Continuous integration, rev:1826
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~faenil/ubuntu-ui-toolkit/moreListItemLayoutDocs/+merge/300372/+edit-commit-message

https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1060/
Executed test runs:
    None: https://jenkins.ubuntu.com/ubuntu-sdk/job/generic-update-mp/4512/console

Click here to trigger a rebuild:
https://jenkins.ubuntu.com/ubuntu-sdk/job/ubuntu-ui-toolkit-ci-armhf-stable/1060/rebuild

review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Jonas G. Drange (jonas-drange) wrote :

This will reduce confusion from trying to apply e.g. Text.ElideMiddle on ListItemLayout's title element.

Certainly fixes bug 1603450.

Thanks!

review: Approve
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
Cris Dywan (kalikiana) wrote :

Nice docs! Those were long overdue. Thanks!

review: Approve
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
ubuntu-sdk-build-bot (ubuntu-sdk-build-bot) wrote :
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/Ubuntu/UbuntuToolkit/privates/threelabelsslot_p.cpp'
2--- src/Ubuntu/UbuntuToolkit/privates/threelabelsslot_p.cpp 2016-07-07 07:21:48 +0000
3+++ src/Ubuntu/UbuntuToolkit/privates/threelabelsslot_p.cpp 2016-07-18 17:41:12 +0000
4@@ -44,6 +44,8 @@
5 //Using WrapAnywhere because ElideRight elides too early when used
6 //together with WrapWord, and that produces an unexpected result.
7 //This will cover most of the usecases.
8+ //NOTE: If you want to use ElideMiddle or ElideLeft you'll have to
9+ //set wrapMode to NoWrap (see Text docs for more details)
10 m_title->setWrapMode(UCLabel::WrapAnywhere);
11 m_title->setElideMode(UCLabel::ElideRight);
12 m_title->setMaximumLineCount(1);
13@@ -55,6 +57,8 @@
14 {
15 if (m_subtitle != Q_NULLPTR) {
16 m_subtitle->setWrapMode(UCLabel::WrapAnywhere);
17+ //NOTE: If you want to use ElideMiddle or ElideLeft you'll have to
18+ //set wrapMode to NoWrap (see Text docs for more details)
19 m_subtitle->setElideMode(UCLabel::ElideRight);
20 m_subtitle->setMaximumLineCount(1);
21 m_subtitle->setTextSize(UCLabel::Small);
22@@ -65,6 +69,8 @@
23 {
24 if (m_summary != Q_NULLPTR) {
25 m_summary->setWrapMode(UCLabel::WrapAnywhere);
26+ //NOTE: If you want to use ElideMiddle or ElideLeft you'll have to
27+ //set wrapMode to NoWrap (see Text docs for more details)
28 m_summary->setElideMode(UCLabel::ElideRight);
29 m_summary->setMaximumLineCount(2);
30 m_summary->setTextSize(UCLabel::Small);
31
32=== modified file 'src/Ubuntu/UbuntuToolkit/uclistitemlayout.cpp'
33--- src/Ubuntu/UbuntuToolkit/uclistitemlayout.cpp 2016-07-07 07:21:48 +0000
34+++ src/Ubuntu/UbuntuToolkit/uclistitemlayout.cpp 2016-07-18 17:41:12 +0000
35@@ -40,6 +40,11 @@
36 ListItemLayout is essentially a \l {SlotsLayout} with a predefined
37 \l {SlotsLayout::mainSlot} that provides (up to) 3 Labels automatically laid out
38 according to our UI guidelines.
39+
40+ \b Note: those labels may have properties whose default value is different
41+ from what is used by the standard Label component. The default wrapMode,
42+ for instance, is different. Have a look at \l {Labels' properties} section.
43+
44 This main slot has been optimized to cover most of the usecases
45 without compromising performance (read more in \l {Optimizing memory consumption}).
46
47@@ -186,6 +191,39 @@
48 to have the same height even without having to fill \l subtitle's (or summary's)
49 text with dummy content.
50
51+ \section1 Labels' properties
52+
53+ ListItemLayout's labels are the same component as \l {Label}, but with slightly different
54+ default properties. Moreover, \l Label derives from \l {Text}. As a consequence,
55+ you can access and override all the properties provided by \l {Text} and \l {Label}, if needed. Please
56+ refer to \l {Text}'s and \l {Label}'s documentation to see the list of all the properties.
57+
58+ The default values for ListItemLayout's labels are defined in the documentation of each label.
59+ See \l title, \l subtitle and \l summary.
60+
61+ \b Note: if you want to change the elide mode of a label to something other than \c Text.ElideRight,
62+ make sure its \c wrapMode is set to \c Text.NoWrap. See \l Text::wrapMode for more details.
63+
64+ \qml
65+ import QtQuick 2.4
66+ import Ubuntu.Components 1.3
67+ Item {
68+ width: units.gu(30)
69+ height: units.gu(50)
70+ ListItem {
71+ height: layout.height + (divider.visible ? divider.height : 0)
72+ ListItemLayout {
73+ id: fileLayout
74+ //Let's change the default elide mode to Text.ElideMiddle
75+ title.elide: Text.ElideMiddle
76+ //ElideMiddle only works if there is no wrapping (see Text::wrapMode doc)
77+ title.wrapMode: Text.NoWrap
78+ title.text: "Red Roses run no risk, sir, on nurses order."
79+ }
80+ }
81+ }
82+ \endqml
83+
84 \section1 Optimizing memory consumption
85
86 In order to minimize memory consumption, the Labels in the \l SlotsLayout::mainSlot
87@@ -221,6 +259,7 @@
88
89 \qml
90 ListItem {
91+ height: layout.height + (divider.visible ? divider.height : 0)
92 property alias titleText: layout.title.text
93 ListItemLayout {
94 id: layout
95@@ -301,13 +340,28 @@
96 Text component, as shown in the following example:
97
98 \qml
99- Item {
100- ListItemLayout {
101- title.text: "Hello"
102- title.color: "yellow"
103- }
104+ import QtQuick 2.4
105+ import Ubuntu.Components 1.3
106+ ListItemLayout {
107+ height: units.gu(10)
108+ width: units.gu(30)
109+ title.color: UbuntuColors.orange
110+ title.maximumLineCount: 3
111+ title.text: "Red Roses\nrun no risk,\nsir, on nurses order."
112 }
113 \endqml
114+
115+ The default \l Text::elide value for \l title is \c Text.ElideRight.
116+
117+ The default \l Text::wrapMode is \c Text.WrapAnywhere.
118+
119+ That means, for instance, that if you want to use a different elide mode, you also have
120+ to set wrapMode to \c Text.NoWrap. Refer to the official \l Text documentation for
121+ further details.
122+
123+ The default \l Label::textSize is \c Label.Medium.
124+
125+ The rest of the properties have the same default values as \l Label.
126 */
127 UCLabel *UCListItemLayout::title()
128 {
129@@ -320,6 +374,14 @@
130 This property defines the subtitle label and its properties.
131 Styling and font properties can be set by using the prefix
132 \c {subtitle.} in a similar way as shown in \l title.
133+
134+ The default \l Text::elide value for \l subtitle is \c Text.ElideRight.
135+
136+ The default \l Text::wrapMode is \c Text.WrapAnywhere.
137+
138+ The default \l Label::textSize is \c Label.Small.
139+
140+ The rest of the properties have the same default values as \l Label.
141 */
142 UCLabel *UCListItemLayout::subtitle()
143 {
144@@ -332,6 +394,14 @@
145 This property defines the subtitle label and its properties.
146 Styling and font properties can be set by using the prefix
147 \c {summary.} in a similar way as shown in \l title.
148+
149+ The default \l Text::elide value for \l summary is \c Text.ElideRight.
150+
151+ The default \l Text::wrapMode is \c Text.WrapAnywhere.
152+
153+ The default \l Label::textSize is \c Label.Small.
154+
155+ The rest of the properties have the same default values as \l Label.
156 */
157 UCLabel *UCListItemLayout::summary()
158 {

Subscribers

People subscribed via source and target branches