git.iko.soy/unity8
on xenial help sign in
Merge trunk header-alignment.
5c77bf1Michał Sawicz
qml/Dash/Card.qml+63−3
compare with xenial
unifiedsplit
@@ -23,10 +23,14 @@ AbstractButton {
23 property var components
23 property var components
24 property var cardData
24 property var cardData
25
25
26+ property alias fontScale: header.fontScale
26 property alias headerAlignment: header.headerAlignment
27 property alias headerAlignment: header.headerAlignment
28+ readonly property alias headerHeight: header.height
29+
30+ property bool showHeader: true
27
31
28 implicitWidth: childrenRect.width
32 implicitWidth: childrenRect.width
29− implicitHeight: childrenRect.height
33+ implicitHeight: summary.y + summary.height
30
34
31 UbuntuShape {
35 UbuntuShape {
32 id: artShape
36 id: artShape
@@ -60,21 +64,77 @@ AbstractButton {
60 }
64 }
61 }
65 }
62
66
67+ ShaderEffect {
68+ id: overlay
69+ anchors {
70+ left: artShape.left
71+ right: artShape.right
72+ bottom: artShape.bottom
73+ }
74+
75+ height: header.height
76+ opacity: header.opacity * 0.6
77+ visible: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
78+
79+ property var source: ShaderEffectSource {
80+ id: shaderSource
81+ sourceItem: artShape
82+ onVisibleChanged: if (visible) scheduleUpdate()
83+ live: false
84+ sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
85+ }
86+
87+ vertexShader: "
88+ uniform highp mat4 qt_Matrix;
89+ attribute highp vec4 qt_Vertex;
90+ attribute highp vec2 qt_MultiTexCoord0;
91+ varying highp vec2 coord;
92+ void main() {
93+ coord = qt_MultiTexCoord0;
94+ gl_Position = qt_Matrix * qt_Vertex;
95+ }"
96+
97+ fragmentShader: "
98+ varying highp vec2 coord;
99+ uniform sampler2D source;
100+ uniform lowp float qt_Opacity;
101+ void main() {
102+ lowp vec4 tex = texture2D(source, coord);
103+ gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
104+ }"
105+ }
106+
63 CardHeader {
107 CardHeader {
64 id: header
108 id: header
65 objectName: "cardHeader"
109 objectName: "cardHeader"
66 anchors {
110 anchors {
111+ top: {
112+ if (template) {
113+ if (template["overlay"]) return overlay.top;
67− top: template && template["card-layout"] === "horizontal" ? artShape.top : artShape.bottom
114+ if (template["card-layout"] === "horizontal") return artShape.top;
115+ }
116+ return artShape.bottom;
117+ }
118+ left: {
119+ if (template) {
68− left: template && template["card-layout"] === "horizontal" ? artShape.right : parent.left
120+ if (!template["overlay"] && template["card-layout"] === "horizontal") return artShape.right;
121+ }
122+ return parent.left;
123+ }
69 right: parent.right
124 right: parent.right
70 }
125 }
71
126
72 mascot: cardData && cardData["mascot"] || ""
127 mascot: cardData && cardData["mascot"] || ""
73 title: cardData && cardData["title"] || ""
128 title: cardData && cardData["title"] || ""
74 subtitle: cardData && cardData["subtitle"] || ""
129 subtitle: cardData && cardData["subtitle"] || ""
130+
131+ opacity: showHeader ? 1 : 0
132+
133+ Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
75 }
134 }
76
135
77 Label {
136 Label {
137+ id: summary
78 objectName: "summaryLabel"
138 objectName: "summaryLabel"
79 anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
139 anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
80 wrapMode: Text.Wrap
140 wrapMode: Text.Wrap
qml/Dash/CardHeader.qml+8−1
@@ -26,6 +26,9 @@ Item {
26 property alias oldPrice: oldPriceLabel.text
26 property alias oldPrice: oldPriceLabel.text
27 property alias altPrice: altPriceLabel.text
27 property alias altPrice: altPriceLabel.text
28
28
29+ // FIXME: Saviq, used to scale fonts down in Carousel
30+ property real fontScale: 1.0
31+
29 property alias headerAlignment: titleLabel.horizontalAlignment
32 property alias headerAlignment: titleLabel.horizontalAlignment
30
33
31 visible: mascotImage.status === Image.Ready || title || price
34 visible: mascotImage.status === Image.Ready || title || price
@@ -43,7 +46,7 @@ Item {
43 leftMargin: spacing
46 leftMargin: spacing
44 rightMargin: spacing
47 rightMargin: spacing
45 }
48 }
46− spacing: mascotShape.visible ? margins : 0
49+ spacing: mascotShape.visible || (template && template["overlay"]) ? margins : 0
47
50
48 UbuntuShape {
51 UbuntuShape {
49 id: mascotShape
52 id: mascotShape
@@ -79,6 +82,8 @@ Item {
79 wrapMode: Text.Wrap
82 wrapMode: Text.Wrap
80 maximumLineCount: 2
83 maximumLineCount: 2
81 fontSize: "small"
84 fontSize: "small"
85+ font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
86+ color: template["overlay"] === true ? "white" : Theme.palette.selected.backgroundText
82 }
87 }
83
88
84 Label {
89 Label {
@@ -89,6 +94,8 @@ Item {
89 font.weight: Font.Light
94 font.weight: Font.Light
90 visible: titleLabel.text && text
95 visible: titleLabel.text && text
91 fontSize: "x-small"
96 fontSize: "x-small"
97+ font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
98+ color: template["overlay"] === true ? "white" : Theme.palette.selected.backgroundText
92 }
99 }
93
100
94 Row {
101 Row {
qml/Dash/CardTool.qml+10−3
@@ -100,7 +100,15 @@ Item {
100 }
100 }
101 }
101 }
102
102
103+ /*!
104+ type:real \brief Height of the card's header.
105+ */
106+ readonly property alias headerHeight: card.headerHeight
107+
108+ /*!
109+ \brief Desired alignment of header components.
110+ */
103− readonly property var headerAlignment: {
111+ readonly property int headerAlignment: {
104 var subtitle = components["subtitle"];
112 var subtitle = components["subtitle"];
105 var price = components["price"];
113 var price = components["price"];
106 var summary = components["summary"];
114 var summary = components["summary"];
@@ -115,10 +123,9 @@ Item {
115 return (template["card-layout"] === "horizontal") ? Text.AlignHCenter : Text.AlignLeft;
123 return (template["card-layout"] === "horizontal") ? Text.AlignHCenter : Text.AlignLeft;
116 }
124 }
117
125
118− readonly property QtObject priv: card
119−
120 Card {
126 Card {
121 id: card
127 id: card
128+ objectName: "card"
122 template: cardTool.template
129 template: cardTool.template
123 components: cardTool.components
130 components: cardTool.components
124
131
tests/qmltests/Dash/tst_Card.qml+8
@@ -74,6 +74,11 @@ Rectangle {
74 "name": "Header title only",
74 "name": "Header title only",
75 "layout": { "components": { "title": "title" } }
75 "layout": { "components": { "title": "title" } }
76 },
76 },
77+ {
78+ "name": "Art, header, summary - overlaid",
79+ "layout": { "template": { "overlay": true },
80+ "components": JSON.parse(Helpers.fullMapping) }
81+ },
77 ]
82 ]
78
83
79 CardTool {
84 CardTool {
@@ -224,6 +229,7 @@ Rectangle {
224 }
229 }
225
230
226 function test_card_size(data) {
231 function test_card_size(data) {
232+ waitForRendering(card);
227 selector.selectedIndex = data.index;
233 selector.selectedIndex = data.index;
228
234
229 if (data.hasOwnProperty("size")) {
235 if (data.hasOwnProperty("size")) {
@@ -314,6 +320,8 @@ Rectangle {
314 left: function() { return art.x }, index: 0 },
320 left: function() { return art.x }, index: 0 },
315 { tag: "Horizontal", top: function() { return art.y },
321 { tag: "Horizontal", top: function() { return art.y },
316 left: function() { return art.x + art.width }, index: 5 },
322 left: function() { return art.x + art.width }, index: 5 },
323+ { tag: "Overlay", top: function() { return art.y + art.height - header.height },
324+ left: function() { return art.x }, index: 9 },
317 ]
325 ]
318 }
326 }
319
327
tests/qmltests/Dash/tst_CardTool.qml+7−1
@@ -226,7 +226,7 @@ Rectangle {
226 id: dataArea
226 id: dataArea
227 anchors { left: parent.left; right: parent.right }
227 anchors { left: parent.left; right: parent.right }
228 height: units.gu(25)
228 height: units.gu(25)
229− text: JSON.stringify(cardTool.priv.cardData, undefined, 2)
229+ text: JSON.stringify(testCase.internalCard.cardData, undefined, 2)
230 }
230 }
231
231
232 Label {
232 Label {
@@ -256,8 +256,14 @@ Rectangle {
256 id: testCase
256 id: testCase
257 name: "Card"
257 name: "Card"
258
258
259+ property Card internalCard: findChild(cardTool, "card")
260+
259 when: windowShown
261 when: windowShown
260
262
263+ function init() {
264+ verify(typeof testCase.internalCard === "object", "Couldn't find internal card object.");
265+ }
266+
261 function cleanup() {
267 function cleanup() {
262 selector.selectedIndex = -1;
268 selector.selectedIndex = -1;
263 layoutSelector.selectedIndex = -1;
269 layoutSelector.selectedIndex = -1;