on xenial help sign in
Accomodate header height when using a card carousel with non overlayed header

Fixes: #1489309 Approved by: Michael Zanetti

commit2ad0a3eb8abb0b2666659f7de6e9edc33afe6c4e authorAlbert Astals Cid <albert.astals@canonical.com> dateMon 7 Sep 2015, 14:05 (11 years ago) parente2e5c10e37ff49
6 files changed+110−6
qml/Components/Carousel.qml+5−3 qml/Dash/CardCarousel.qml+5−1 qml/Dash/CardTool.qml+2−2 tests/qmltests/CMakeLists.txt+1 tests/qmltests/Dash/tst_CardCarousel.qml+87 tests/qmltests/Dash/tst_CardTool.qml+10
qml/Components/Carousel.qml+5−3
@@ -47,6 +47,8 @@ Item {
4747 property int drawBuffer: width / pathItemCount // an "ok" value - but values used from the listView cause loops
4848 /// The selected item can be shown in a different size controlled by selectedItemScaleFactor
4949 property real selectedItemScaleFactor: 1.1
50+ /// The extra margin at the bottom
51+ property real extraBottomMargin: 0
5052 /// The index of the item that should be highlighted
5153 property alias highlightIndex: listView.highlightIndex
5254 /// exposes the delegate of the currentItem
@@ -114,13 +116,13 @@ Item {
114116 readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
115117 readonly property real tileHeight: tileWidth / tileAspectRatio
116118 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
118120 readonly property real visibleTilesScaleFactor: realPathItemCount / referencePathItemCount
119121
120122 anchors {
121123 fill: parent
122124 topMargin: verticalMargin
123− bottomMargin: verticalMargin
125+ bottomMargin: verticalMargin + carousel.extraBottomMargin
124126 // extending the "drawing area"
125127 leftMargin: -carousel.drawBuffer
126128 rightMargin: -carousel.drawBuffer
@@ -249,7 +251,7 @@ Item {
249251 listView.gapToEndPhase,
250252 listView.translationXViewFactor)
251253
252− delegate: tileWidth > 0 && tileHeight > 0 ? loaderComponent : undefined
254+ delegate: tileWidth > 0 && tileHeight > 0 ? loaderComponent : null
253255
254256 Component {
255257 id: loaderComponent
qml/Dash/CardCarousel.qml+5−1
@@ -21,7 +21,9 @@ import "../Components"
2121DashRenderer {
2222 id: cardCarousel
2323
24− expandedHeight: carousel.implicitHeight + units.gu(6)
24+ readonly property real extraHeaderHeight: cardTool.template && cardTool.template["overlay"] === true ? 0 : cardTool.headerHeight
25+
26+ expandedHeight: carousel.implicitHeight + units.gu(6) + extraHeaderHeight
2527 collapsedHeight: expandedHeight
2628 growsVertically: false
2729 innerWidth: carousel.innerWidth
@@ -30,6 +32,7 @@ DashRenderer {
3032 id: carousel
3133 anchors.fill: parent
3234 tileAspectRatio: cardTool.components && cardTool.components["art"]["aspect-ratio"] || 1.0
35+ extraBottomMargin: cardCarousel.extraHeaderHeight
3336 // FIXME we need to "reverse" the carousel to make the selected item the size
3437 // and push others back.
3538 minimumTileWidth: cardTool.cardWidth / selectedItemScaleFactor
@@ -64,6 +67,7 @@ DashRenderer {
6467 item.components = Qt.binding(function() { return cardTool.components; });
6568 item.fontScale = Qt.binding(function() { return carousel.fontScale; });
6669 item.showHeader = Qt.binding(function() { return loader.explicitlyScaled; });
70+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
6771 item.artShapeBorderSource = "none";
6872 item.scopeStyle = cardCarousel.scopeStyle;
6973 }
qml/Dash/CardTool.qml+2−2
@@ -144,8 +144,8 @@ Item {
144144 */
145145 readonly property int titleAlignment: {
146146 if (template["card-layout"] === "horizontal"
147− || (typeof components["title"] !== "object" &&
148− components["title"]["align"] !== "center")) return Text.AlignLeft;
147+ || typeof components["title"] !== "object"
148+ || components["title"]["align"] === "left") return Text.AlignLeft;
149149
150150 var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
151151
tests/qmltests/CMakeLists.txt+1
@@ -20,6 +20,7 @@ add_unity8_qmltest(Dash Dash)
2020add_unity8_qmltest(Dash DashContent)
2121add_unity8_qmltest(Dash DashShell)
2222add_unity8_qmltest(Dash Card)
23+add_unity8_qmltest(Dash CardCarousel)
2324add_unity8_qmlbenchmark(Dash CardBenchmark 1000)
2425add_unity8_qmltest(Dash CardTool)
2526add_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 {
345345 cardTool.componentsChanged();
346346
347347 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);
348358 }
349359
350360 function test_categoryLayout_data() {