git.iko.soy/unity8
on xenial help sign in
Accomodate header height when using a card carousel with non overlayed header
62f2cb3Albert Astals Cid
qml/Components/Carousel.qml+4−2
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
qml/Dash/CardCarousel.qml+4−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
tests/qmltests/CMakeLists.txt+1
@@ -19,6 +19,7 @@ add_unity8_qmltest(Components ZoomableImage)
19add_unity8_qmltest(Dash Dash)
19add_unity8_qmltest(Dash Dash)
20add_unity8_qmltest(Dash DashContent)
20add_unity8_qmltest(Dash DashContent)
21add_unity8_qmltest(Dash Card)
21add_unity8_qmltest(Dash Card)
22+add_unity8_qmltest(Dash CardCarousel)
22add_unity8_qmlbenchmark(Dash CardBenchmark 1000)
23add_unity8_qmlbenchmark(Dash CardBenchmark 1000)
23add_unity8_qmltest(Dash CardTool)
24add_unity8_qmltest(Dash CardTool)
24add_unity8_qmltest(Dash GenericScopeView)
25add_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+}