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

Proposed by Zsombor Egri
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
Cris Dywan 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.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
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

Revision history for this message
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

removing ListItemLayout reference

1431. By Zsombor Egri

staging merge

1432. By Zsombor Egri

more of ListItemLayout removed

1433. By Zsombor Egri

build dependency to QtQuick.Layouts added

1434. By Zsombor Egri

preset property type changed to enum and renamed to captionStyle

1435. By Zsombor Egri

review comments addressed

1436. By Zsombor Egri

enum changes updated on unit tests

1437. By Zsombor Egri

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