Merge lp:~zsombi/ubuntu-ui-toolkit/100-captions into lp:ubuntu-ui-toolkit/staging

Proposed by Zsombor Egri on 2015-02-27
Status: Superseded
Proposed branch: lp:~zsombi/ubuntu-ui-toolkit/100-captions
Merge into: lp:ubuntu-ui-toolkit/staging
Diff against target: 365 lines (+279/-14)
8 files modified
components.api (+5/-0)
modules/Ubuntu/Components/Captions.qml (+144/-0)
modules/Ubuntu/Components/qmldir (+1/-0)
tests/resources/listitems/ListItemDragging.qml (+9/-12)
tests/unit/tst_performance/ListItemList.qml (+2/-2)
tests/unit/tst_performance/ListOfCaptions.qml (+33/-0)
tests/unit/tst_performance/tst_performance.cpp (+1/-0)
tests/unit_x11/tst_components/tst_captions.qml (+84/-0)
To merge this branch: bzr merge lp:~zsombi/ubuntu-ui-toolkit/100-captions
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Needs Fixing on 2015-02-27
Christian Dywan 2015-02-27 Pending
Review via email: mp+251248@code.launchpad.net

This proposal has been superseded by a proposal from 2015-03-02.

Commit Message

Captions container for ListItemLayout, containing two vertically aligned Labels.

To post a comment you must log in.
Tim Peeters (tpeeters) wrote :

119 + Layout.fillWidth: (preset === "caption")
120 + Layout.alignment: Qt.AlignVCenter | ((preset === "summary") ? Qt.AlignRight : Qt.AlignLeft)
121 + Layout.minimumWidth: 0
122 + Layout.maximumWidth: (preset === "summary") ? units.gu(6) : parent.width
123 + Layout.preferredWidth: (preset === "summary") ? Layout.maximumWidth : 0
124 + Layout.minimumHeight: 0
125 + Layout.maximumHeight: parent ? parent.height : childrenRect.height
126 + Layout.preferredHeight: childrenRect.height

group these

Zsombor Egri (zsombi) wrote :

> 119 + Layout.fillWidth: (preset === "caption")
> 120 + Layout.alignment: Qt.AlignVCenter | ((preset === "summary") ?
> Qt.AlignRight : Qt.AlignLeft)
> 121 + Layout.minimumWidth: 0
> 122 + Layout.maximumWidth: (preset === "summary") ? units.gu(6) :
> parent.width
> 123 + Layout.preferredWidth: (preset === "summary") ?
> Layout.maximumWidth : 0
> 124 + Layout.minimumHeight: 0
> 125 + Layout.maximumHeight: parent ? parent.height :
> childrenRect.height
> 126 + Layout.preferredHeight: childrenRect.height
>
> group these

I would not group attached properties... I checked, not even Qt is doing that.

1430. By Zsombor Egri on 2015-03-02

removing ListItemLayout reference

1431. By Zsombor Egri on 2015-03-02

staging merge

1432. By Zsombor Egri on 2015-03-02

more of ListItemLayout removed

1433. By Zsombor Egri on 2015-03-02

build dependency to QtQuick.Layouts added

1434. By Zsombor Egri on 2015-03-02

preset property type changed to enum and renamed to captionStyle

1435. By Zsombor Egri on 2015-03-02

review comments addressed

1436. By Zsombor Egri on 2015-03-03

enum changes updated on unit tests

1437. By Zsombor Egri on 2015-03-03

staging sync

Unmerged revisions

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'components.api'
2--- components.api 2015-02-27 12:50:40 +0000
3+++ components.api 2015-02-27 12:50:40 +0000
4@@ -34,6 +34,11 @@
5 property Gradient gradient
6 property font font
7 property string iconPosition
8+Captions 1.2
9+ColumnLayout
10+ property string preset
11+ property Label title
12+ property Label subtitle
13 CheckBox 0.1 1.0
14 AbstractButton
15 property bool checked
16
17=== added file 'modules/Ubuntu/Components/Captions.qml'
18--- modules/Ubuntu/Components/Captions.qml 1970-01-01 00:00:00 +0000
19+++ modules/Ubuntu/Components/Captions.qml 2015-02-27 12:50:40 +0000
20@@ -0,0 +1,144 @@
21+/*
22+ * Copyright 2015 Canonical Ltd.
23+ *
24+ * This program is free software; you can redistribute it and/or modify
25+ * it under the terms of the GNU Lesser General Public License as published by
26+ * the Free Software Foundation; version 3.
27+ *
28+ * This program is distributed in the hope that it will be useful,
29+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
30+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
31+ * GNU Lesser General Public License for more details.
32+ *
33+ * You should have received a copy of the GNU Lesser General Public License
34+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
35+ */
36+
37+import QtQuick 2.4
38+import QtQuick.Layouts 1.1
39+import Ubuntu.Components 1.2
40+
41+/*!
42+ \qmltype Captions
43+ \inqmlmodule Ubuntu.Components 1.2
44+ \ingroup unstable-ubuntu-listitems
45+ \since Ubuntu.Components 1.2
46+ \brief Container providing presets for a twin-label column that can be used in
47+ \l ListItemLayout, RowLayout or GridLayout.
48+
49+ The labels are placed in a column and can be accessed through \l title and
50+ \l subtitle properties. The default spacing between the labels is 0.5 grid units.
51+
52+ The container only shows the labels whos text is set to a valid string. The
53+ labels not having any text set are not occupying the space. When embedded in a
54+ positioner or in a \l ListItemLayout, the container is aligned vertically centered.
55+
56+ \qml
57+ import QtQuick 2.4
58+ import Ubuntu.Components 1.2
59+
60+ ListItem {
61+ ListLayout {
62+ Captions {
63+ title.text: "Caption"
64+ subtitle.text: "Subtitle text"
65+ Component.onCompleted: subtitle.Layout.alignment = Qt.AlignRight
66+ }
67+ Captions {
68+ preset: "summary"
69+ title.text: "Text"
70+ subtitle.text: "Text"
71+ }
72+ }
73+ }
74+ \endqml
75+
76+ Additional items can also be added to the layout after the two labels.
77+ \qml
78+ Captions {
79+ title.text: "Caption"
80+ subtitle.text: "Subtitle"
81+ Label {
82+ text: "third line"
83+ fontSize: "xx-small"
84+ }
85+ }
86+ \endqml
87+ */
88+ColumnLayout {
89+ id: captions
90+
91+ /*!
92+ The property configures the arrangement and font sizes of the Labels in the
93+ component. It can take the following values:
94+ \list
95+ \li \b caption - (default) typical configuration for a left aligned twin-label
96+ setup, where the text covers the remaining area on a list layout.
97+ \li \b summary - configuration for a right-aligned twin label setup, with
98+ 6 grid units width.
99+ \endlist
100+ */
101+ property string preset: "caption"
102+
103+ /*!
104+ \qmlproperty Label title
105+ \readonly
106+ Label occupying the top area of the container.
107+ */
108+ property alias title: titleLabel
109+
110+ /*!
111+ \qmlproperty Label subtitle
112+ \readonly
113+ Label occupying the bottom area of the container.
114+ */
115+ property alias subtitle: subtitleLabel
116+
117+ clip: true
118+ spacing: units.gu(0.5)
119+ Layout.fillWidth: (preset === "caption")
120+ Layout.alignment: Qt.AlignVCenter | ((preset === "summary") ? Qt.AlignRight : Qt.AlignLeft)
121+ Layout.minimumWidth: 0
122+ Layout.maximumWidth: (preset === "summary") ? units.gu(6) : parent.width
123+ Layout.preferredWidth: (preset === "summary") ? Layout.maximumWidth : 0
124+ Layout.minimumHeight: 0
125+ Layout.maximumHeight: parent ? parent.height : childrenRect.height
126+ Layout.preferredHeight: childrenRect.height
127+
128+ // handle visibility, do not override visible property!
129+ // 'hide' column if title and subtitle is an empty string and
130+ // there's no more children added
131+ states: State {
132+ name: "__q_invisible"
133+ when: (title.text === "" && subtitle.text === "") && (captions.children.length == 2)
134+ PropertyChanges {
135+ target: captions
136+ visible: false
137+ }
138+ }
139+
140+ Label {
141+ id: titleLabel
142+ anchors {
143+ left: parent.left
144+ right: parent.right
145+ }
146+ fontSize: (preset === "summary") ? "small" : "medium"
147+ horizontalAlignment: (preset === "summary") ? Text.AlignRight : Text.AlignLeft
148+ visible: text !== ""
149+ elide: (preset === "caption") ? Text.ElideRight : Text.ElideNone
150+ }
151+ Label {
152+ id: subtitleLabel
153+ anchors {
154+ left: parent.left
155+ right: parent.right
156+ }
157+ fontSize: "small"
158+ horizontalAlignment: (preset === "summary") ? Text.AlignRight : Text.AlignLeft
159+ visible: text !== ""
160+ maximumLineCount: (preset === "caption") ? 2 : 1
161+ wrapMode: (preset === "caption") ? Text.Wrap : Text.NoWrap
162+ elide: (preset === "caption") ? Text.ElideRight : Text.ElideNone
163+ }
164+}
165
166=== modified file 'modules/Ubuntu/Components/qmldir'
167--- modules/Ubuntu/Components/qmldir 2015-02-27 12:50:40 +0000
168+++ modules/Ubuntu/Components/qmldir 2015-02-27 12:50:40 +0000
169@@ -111,3 +111,4 @@
170 #version 1.2
171 MainView 1.2 MainView12.qml
172 ListItemLayout 1.2 ListItemLayout.qml
173+Captions 1.2 Captions.qml
174
175=== modified file 'tests/resources/listitems/ListItemDragging.qml'
176--- tests/resources/listitems/ListItemDragging.qml 2015-02-27 12:50:40 +0000
177+++ tests/resources/listitems/ListItemDragging.qml 2015-02-27 12:50:40 +0000
178@@ -133,19 +133,16 @@
179 actions: contextualActions
180 }
181
182- Rectangle {
183- anchors.fill: parent
184- color: item.dragging ? UbuntuColors.blue : "#69aa69"
185- }
186- Column {
187- anchors.fill: parent
188- Label {
189- text: label + " from index #" + index
190- anchors.left: parent.left
191+ ListItemLayout {
192+ Captions {
193+ id: captions
194+ title.text: label
195+ subtitle.text: "from index #" + index
196 }
197- Label {
198- text: "Click to turn LTR<->RTL"
199- anchors.right: parent.right
200+ Captions {
201+ preset: "summary"
202+ title.text: "LTR"
203+ subtitle.text: "RTL"
204 }
205 }
206
207
208=== modified file 'tests/unit/tst_performance/ListItemList.qml'
209--- tests/unit/tst_performance/ListItemList.qml 2014-09-15 17:33:35 +0000
210+++ tests/unit/tst_performance/ListItemList.qml 2015-02-27 12:50:40 +0000
211@@ -1,5 +1,5 @@
212 /*
213- * Copyright 2014 Canonical Ltd.
214+ * Copyright 2015 Canonical Ltd.
215 *
216 * This program is free software; you can redistribute it and/or modify
217 * it under the terms of the GNU Lesser General Public License as published by
218@@ -14,7 +14,7 @@
219 * along with this program. If not, see <http://www.gnu.org/licenses/>.
220 */
221
222-import QtQuick 2.0
223+import QtQuick 2.3
224 import Ubuntu.Components 1.2
225
226 Column {
227
228=== added file 'tests/unit/tst_performance/ListOfCaptions.qml'
229--- tests/unit/tst_performance/ListOfCaptions.qml 1970-01-01 00:00:00 +0000
230+++ tests/unit/tst_performance/ListOfCaptions.qml 2015-02-27 12:50:40 +0000
231@@ -0,0 +1,33 @@
232+/*
233+ * Copyright 2015 Canonical Ltd.
234+ *
235+ * This program is free software; you can redistribute it and/or modify
236+ * it under the terms of the GNU Lesser General Public License as published by
237+ * the Free Software Foundation; version 3.
238+ *
239+ * This program is distributed in the hope that it will be useful,
240+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
241+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
242+ * GNU Lesser General Public License for more details.
243+ *
244+ * You should have received a copy of the GNU Lesser General Public License
245+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
246+ */
247+
248+import QtQuick 2.3
249+import Ubuntu.Components 1.2
250+
251+Column {
252+ width: 800
253+ height: 600
254+ Repeater {
255+ id: repeater
256+ model: 5000
257+ ListItem {
258+ ListItemLayout {
259+ Captions {
260+ }
261+ }
262+ }
263+ }
264+}
265
266=== modified file 'tests/unit/tst_performance/tst_performance.cpp'
267--- tests/unit/tst_performance/tst_performance.cpp 2015-02-27 12:50:40 +0000
268+++ tests/unit/tst_performance/tst_performance.cpp 2015-02-27 12:50:40 +0000
269@@ -81,6 +81,7 @@
270 QTest::newRow("list with ListItemLayout") << "ListItemLayoutList.qml" << QUrl();
271 QTest::newRow("list with new ListItem with actions") << "ListItemWithActionsList.qml" << QUrl();
272 QTest::newRow("list with new ListItem with inline actions") << "ListItemWithInlineActionsList.qml" << QUrl();
273+ QTest::newRow("list with Captions, preset: caption") << "ListOfCaptions.qml" << QUrl();
274 QTest::newRow("list with ListItems.Empty (equivalent to the new ListItem") << "ListItemsEmptyList.qml" << QUrl();
275 // disable this test as it takes >20 seconds. Kept still for measurements to be done during development
276 // QTest::newRow("list with ListItems.Base (one icon, one label and one chevron)") << "ListItemsBaseList.qml" << QUrl();
277
278=== added file 'tests/unit_x11/tst_components/tst_captions.qml'
279--- tests/unit_x11/tst_components/tst_captions.qml 1970-01-01 00:00:00 +0000
280+++ tests/unit_x11/tst_components/tst_captions.qml 2015-02-27 12:50:40 +0000
281@@ -0,0 +1,84 @@
282+/*
283+ * Copyright 2015 Canonical Ltd.
284+ *
285+ * This program is free software; you can redistribute it and/or modify
286+ * it under the terms of the GNU Lesser General Public License as published by
287+ * the Free Software Foundation; version 3.
288+ *
289+ * This program is distributed in the hope that it will be useful,
290+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
291+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
292+ * GNU Lesser General Public License for more details.
293+ *
294+ * You should have received a copy of the GNU Lesser General Public License
295+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
296+ */
297+
298+import QtQuick 2.4
299+import QtTest 1.0
300+import Ubuntu.Test 1.0
301+import Ubuntu.Components 1.2
302+import QtQuick.Layouts 1.1
303+
304+Item {
305+ width: units.gu(40)
306+ height: units.gu(71)
307+
308+ Column {
309+ width: parent.width
310+ ListItem {
311+ ListItemLayout {
312+ Captions {
313+ id: defaults
314+ }
315+ }
316+ }
317+ ListItem {
318+ ListItemLayout {
319+ Captions {
320+ id: testCaptions
321+ }
322+ }
323+ }
324+ }
325+
326+ UbuntuTestCase {
327+ name: "CaptionsAPI"
328+ when: windowShown
329+
330+ function test_0_defaults() {
331+ compare(defaults.preset, "caption", "Default preset is 'titles'");
332+ compare(defaults.height, 0, "default height is 0");
333+ compare(defaults.width, 0, "default width is 0")
334+ compare(defaults.spacing, units.gu(0.5), "default spacing failure");
335+ compare(defaults.visible, false, "default should be invisible")
336+ compare(defaults.Layout.alignment, Qt.AlignVCenter | Qt.AlignLeft, "center vertically and left horizontally by default");
337+ }
338+
339+ function test_captions_data() {
340+ return [
341+ {tag: "caption, title.fontSize", preset: "caption", label: "title", property: "fontSize", value: "medium"},
342+ {tag: "caption, title.horizontalAlignment", preset: "caption", label: "title", property: "horizontalAlignment", value: Text.AlignLeft},
343+ {tag: "caption, title.elide", preset: "caption", label: "title", property: "elide", value: Text.ElideRight},
344+ {tag: "caption, subtitle.fontSize", preset: "caption", label: "subtitle", property: "fontSize", value: "small"},
345+ {tag: "caption, subtitle.horizontalAlignment", preset: "caption", label: "subtitle", property: "horizontalAlignment", value: Text.AlignLeft},
346+ {tag: "caption, subtitle.maximumLineCount", preset: "caption", label: "subtitle", property: "maximumLineCount", value: 2},
347+ {tag: "caption, subtitle.wrapMode", preset: "caption", label: "subtitle", property: "wrapMode", value: Text.Wrap},
348+ {tag: "caption, subtitle.elide", preset: "caption", label: "subtitle", property: "elide", value: Text.ElideRight},
349+
350+ {tag: "summary, title.fontSize", preset: "summary", label: "title", property: "fontSize", value: "small"},
351+ {tag: "summary, title.horizontalAlignment", preset: "summary", label: "title", property: "horizontalAlignment", value: Text.AlignRight},
352+ {tag: "summary, title.elide", preset: "summary", label: "title", property: "elide", value: Text.ElideNone},
353+ {tag: "summary, subtitle.fontSize", preset: "summary", label: "subtitle", property: "fontSize", value: "small"},
354+ {tag: "summary, subtitle.horizontalAlignment", preset: "summary", label: "subtitle", property: "horizontalAlignment", value: Text.AlignRight},
355+ {tag: "summary, subtitle.maximumLineCount", preset: "summary", label: "subtitle", property: "maximumLineCount", value: 1},
356+ {tag: "summary, subtitle.wrapMode", preset: "summary", label: "subtitle", property: "wrapMode", value: Text.NoWrap},
357+ {tag: "summary, subtitle.elide", preset: "summary", label: "subtitle", property: "elide", value: Text.ElideNone},
358+ ];
359+ }
360+ function test_captions(data) {
361+ testCaptions.preset = data.preset;
362+ compare(testCaptions[data.label][data.property], data.value, data.tag + " values differ");
363+ }
364+ }
365+}

Subscribers

People subscribed via source and target branches