git.iko.soy/unity8
on xenial help sign in
Accomodate header height when using a card carousel with non overlayed header
2ad0a3eAlbert Astals Cid
qml/Components/Carousel.qml+5−3
compare with xenial
unifiedsplit
@@ -47,6 +47,8 @@ Item {
47 property int drawBuffer: width / pathItemCount // an "ok" value - but values used from the listView cause loops
47 property int drawBuffer: width / pathItemCount // an "ok" value - but values used from the listView cause loops
48 /// The selected item can be shown in a different size controlled by selectedItemScaleFactor
48 /// The selected item can be shown in a different size controlled by selectedItemScaleFactor
49 property real selectedItemScaleFactor: 1.1
49 property real selectedItemScaleFactor: 1.1
50+ /// The extra margin at the bottom
51+ property real extraBottomMargin: 0
50 /// The index of the item that should be highlighted
52 /// The index of the item that should be highlighted
51 property alias highlightIndex: listView.highlightIndex
53 property alias highlightIndex: listView.highlightIndex
52 /// exposes the delegate of the currentItem
54 /// exposes the delegate of the currentItem
@@ -114,13 +116,13 @@ Item {
114 readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
116 readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
115 readonly property real tileHeight: tileWidth / tileAspectRatio
117 readonly property real tileHeight: tileWidth / tileAspectRatio
116 readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
118 readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
117− readonly property real verticalMargin: (parent.height - tileHeight) / 2
119+ readonly property real verticalMargin: (parent.height - tileHeight - carousel.extraBottomMargin) / 2
118 readonly property real visibleTilesScaleFactor: realPathItemCount / referencePathItemCount
120 readonly property real visibleTilesScaleFactor: realPathItemCount / referencePathItemCount
119
121
120 anchors {
122 anchors {
121 fill: parent
123 fill: parent
122 topMargin: verticalMargin
124 topMargin: verticalMargin
123− bottomMargin: verticalMargin
125+ bottomMargin: verticalMargin + carousel.extraBottomMargin
124 // extending the "drawing area"
126 // extending the "drawing area"
125 leftMargin: -carousel.drawBuffer
127 leftMargin: -carousel.drawBuffer
126 rightMargin: -carousel.drawBuffer
128 rightMargin: -carousel.drawBuffer
@@ -249,7 +251,7 @@ Item {
249 listView.gapToEndPhase,
251 listView.gapToEndPhase,
250 listView.translationXViewFactor)
252 listView.translationXViewFactor)
251
253
252− delegate: tileWidth > 0 && tileHeight > 0 ? loaderComponent : undefined
254+ delegate: tileWidth > 0 && tileHeight > 0 ? loaderComponent : null
253
255
254 Component {
256 Component {
255 id: loaderComponent
257 id: loaderComponent
qml/Dash/CardCarousel.qml+5−1
@@ -21,7 +21,9 @@ import "../Components"
21DashRenderer {
21DashRenderer {
22 id: cardCarousel
22 id: cardCarousel
23
23
24+ readonly property real extraHeaderHeight: cardTool.template && cardTool.template["overlay"] === true ? 0 : cardTool.headerHeight
25+
24− expandedHeight: carousel.implicitHeight + units.gu(6)
26+ expandedHeight: carousel.implicitHeight + units.gu(6) + extraHeaderHeight
25 collapsedHeight: expandedHeight
27 collapsedHeight: expandedHeight
26 growsVertically: false
28 growsVertically: false
27 innerWidth: carousel.innerWidth
29 innerWidth: carousel.innerWidth
@@ -30,6 +32,7 @@ DashRenderer {
30 id: carousel
32 id: carousel
31 anchors.fill: parent
33 anchors.fill: parent
32 tileAspectRatio: cardTool.components && cardTool.components["art"]["aspect-ratio"] || 1.0
34 tileAspectRatio: cardTool.components && cardTool.components["art"]["aspect-ratio"] || 1.0
35+ extraBottomMargin: cardCarousel.extraHeaderHeight
33 // FIXME we need to "reverse" the carousel to make the selected item the size
36 // FIXME we need to "reverse" the carousel to make the selected item the size
34 // and push others back.
37 // and push others back.
35 minimumTileWidth: cardTool.cardWidth / selectedItemScaleFactor
38 minimumTileWidth: cardTool.cardWidth / selectedItemScaleFactor
@@ -64,6 +67,7 @@ DashRenderer {
64 item.components = Qt.binding(function() { return cardTool.components; });
67 item.components = Qt.binding(function() { return cardTool.components; });
65 item.fontScale = Qt.binding(function() { return carousel.fontScale; });
68 item.fontScale = Qt.binding(function() { return carousel.fontScale; });
66 item.showHeader = Qt.binding(function() { return loader.explicitlyScaled; });
69 item.showHeader = Qt.binding(function() { return loader.explicitlyScaled; });
70+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
67 item.artShapeBorderSource = "none";
71 item.artShapeBorderSource = "none";
68 item.scopeStyle = cardCarousel.scopeStyle;
72 item.scopeStyle = cardCarousel.scopeStyle;
69 }
73 }
qml/Dash/CardTool.qml+2−2
@@ -144,8 +144,8 @@ Item {
144 */
144 */
145 readonly property int titleAlignment: {
145 readonly property int titleAlignment: {
146 if (template["card-layout"] === "horizontal"
146 if (template["card-layout"] === "horizontal"
147− || (typeof components["title"] !== "object" &&
147+ || typeof components["title"] !== "object"
148− components["title"]["align"] !== "center")) return Text.AlignLeft;
148+ || components["title"]["align"] === "left") return Text.AlignLeft;
149
149
150 var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
150 var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
151
151
tests/qmltests/CMakeLists.txt+1
@@ -20,6 +20,7 @@ add_unity8_qmltest(Dash Dash)
20add_unity8_qmltest(Dash DashContent)
20add_unity8_qmltest(Dash DashContent)
21add_unity8_qmltest(Dash DashShell)
21add_unity8_qmltest(Dash DashShell)
22add_unity8_qmltest(Dash Card)
22add_unity8_qmltest(Dash Card)
23+add_unity8_qmltest(Dash CardCarousel)
23add_unity8_qmlbenchmark(Dash CardBenchmark 1000)
24add_unity8_qmlbenchmark(Dash CardBenchmark 1000)
24add_unity8_qmltest(Dash CardTool)
25add_unity8_qmltest(Dash CardTool)
25add_unity8_qmltest(Dash GenericScopeView)
26add_unity8_qmltest(Dash GenericScopeView)
tests/qmltests/Dash/tst_CardCarousel.qmlnew file+87
@@ -0,0 +1,87 @@
1+/*
2+ * Copyright (C) 2013 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.4
18+import QtTest 1.0
19+import Ubuntu.Components 1.3
20+import Unity.Test 0.1 as UT
21+import "../../../qml/Dash"
22+import "CardHelpers.js" as Helpers
23+
24+Rectangle {
25+ id: root
26+ width: units.gu(80)
27+ height: units.gu(72)
28+ color: "#88FFFFFF"
29+
30+ property var overlaidTemplate: {"card-layout":"vertical", "card-size":"small", "category-layout":"carousel", "overlay": true }
31+ property var nonOverlaidTemplate: {"card-layout":"vertical", "card-size":"small", "category-layout":"carousel" }
32+
33+ CardTool {
34+ id: cTool
35+ count: 10
36+ objectName: "cardTool"
37+ template: nonOverlaidTemplate
38+ components: {"art":{"aspect-ratio":1.6,"field":"art"}, "title":{"field":"title"}, "attributes":{}}
39+ viewWidth: parent.width
40+ }
41+
42+ ListModel {
43+ id: lModel
44+
45+ Component.onCompleted: {
46+ cTool.templateChanged();
47+ for (var i = 0; i < cTool.count; ++i) {
48+ lModel.append( { title: "fqg\nfqg", art: Qt.resolvedUrl("artwork/music-player-design.png").toString() } );
49+ }
50+ }
51+ }
52+
53+ CardCarousel {
54+ id: cardCarousel
55+ cardTool: cTool
56+ width: parent.width
57+ height: expandedHeight
58+ model: lModel
59+
60+ Rectangle {
61+ color: "red"
62+ opacity: 0.2
63+ anchors.fill: parent
64+ }
65+ }
66+
67+ UT.UnityTestCase {
68+ id: testCase
69+ name: "CardCarousel"
70+
71+ when: windowShown
72+
73+ function test_non_overlaid_header_layout() {
74+ // When the header is non overlaid
75+ // we grow down to accomodate the header but the y of the list is the same
76+ var listView = findChild(cardCarousel, "listView");
77+
78+ cTool.template = overlaidTemplate;
79+ var yPos = listView.y;
80+ var height = cardCarousel.height;
81+
82+ cTool.template = nonOverlaidTemplate;
83+ compare(listView.y, yPos);
84+ compare(cardCarousel.height, height + cTool.headerHeight);
85+ }
86+ }
87+}
tests/qmltests/Dash/tst_CardTool.qml+10
@@ -345,6 +345,16 @@ Rectangle {
345 cardTool.componentsChanged();
345 cardTool.componentsChanged();
346
346
347 tryCompare(cardTool, "titleAlignment", data.value);
347 tryCompare(cardTool, "titleAlignment", data.value);
348+
349+ cardTool.components['title'] = { "field": "title" };
350+ cardTool.componentsChanged();
351+
352+ tryCompare(cardTool, "titleAlignment", data.value);
353+
354+ cardTool.components['title'] = { "field": "title", "align": "left" };
355+ cardTool.componentsChanged();
356+
357+ tryCompare(cardTool, "titleAlignment", Text.AlignLeft);
348 }
358 }
349
359
350 function test_categoryLayout_data() {
360 function test_categoryLayout_data() {