git.iko.soy/unity8
on xenial help sign in
Center-align title when it's alone in the header.
b4e41b5Michał Sawicz
qml/Dash/Card.qml+1
compare with xenial
unifiedsplit
@@ -24,6 +24,7 @@ Item {
24 property var cardData
24 property var cardData
25
25
26 property alias fontScale: header.fontScale
26 property alias fontScale: header.fontScale
27+ property alias headerAlignment: header.headerAlignment
27 readonly property alias headerHeight: header.height
28 readonly property alias headerHeight: header.height
28
29
29 property bool showHeader: true
30 property bool showHeader: true
qml/Dash/CardHeader.qml+2
@@ -29,6 +29,8 @@ Item {
29 // FIXME: Saviq, used to scale fonts down in Carousel
29 // FIXME: Saviq, used to scale fonts down in Carousel
30 property real fontScale: 1.0
30 property real fontScale: 1.0
31
31
32+ property alias headerAlignment: titleLabel.horizontalAlignment
33+
32 visible: mascotImage.status === Image.Ready || title || price
34 visible: mascotImage.status === Image.Ready || title || price
33 height: row.height > 0 ? row.height + row.margins * 2 : 0
35 height: row.height > 0 ? row.height + row.margins * 2 : 0
34
36
qml/Dash/CardTool.qml+18
@@ -105,6 +105,24 @@ Item {
105 */
105 */
106 readonly property alias headerHeight: card.headerHeight
106 readonly property alias headerHeight: card.headerHeight
107
107
108+ /*!
109+ \brief Desired alignment of header components.
110+ */
111+ readonly property int headerAlignment: {
112+ var subtitle = components["subtitle"];
113+ var price = components["price"];
114+ var summary = components["summary"];
115+
116+ var hasSubtitle = subtitle && (typeof subtitle === "string" || subtitle["field"])
117+ var hasPrice = price && (typeof price === "string" || subtitle["field"]);
118+ var hasSummary = summary && (typeof summary === "string" || summary["field"])
119+
120+ var isOnlyTextComponent = !hasSubtitle && !hasPrice && !hasSummary;
121+ if (!isOnlyTextComponent) return Text.AlignLeft;
122+
123+ return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;
124+ }
125+
108 Card {
126 Card {
109 id: card
127 id: card
110 objectName: "card"
128 objectName: "card"
tests/qmltests/Dash/tst_CardTool.qml+41
@@ -72,6 +72,22 @@ Rectangle {
72 "name": "Art, header - portrait",
72 "name": "Art, header - portrait",
73 "layout": { "components": Helpers.update(JSON.parse(Helpers.fullMapping), { "art": {"aspect-ratio": 0.5, "summary": undefined }}) }
73 "layout": { "components": Helpers.update(JSON.parse(Helpers.fullMapping), { "art": {"aspect-ratio": 0.5, "summary": undefined }}) }
74 },
74 },
75+ {
76+ "name": "Title - vertical",
77+ "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title" } }
78+ },
79+ {
80+ "name": "Title - horizontal",
81+ "layout": { "template": { "card-layout": "horizontal" }, "components": { "title": "title" } }
82+ },
83+ {
84+ "name": "Title, subtitle - vertical",
85+ "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title", "subtitle": "subtitle" } }
86+ },
87+ {
88+ "name": "Title, price - horizontal",
89+ "layout": { "template": { "card-layout": "horizontal" }, "components": { "title": "title", "price": "price" } }
90+ },
75 ]
91 ]
76
92
77 CardTool {
93 CardTool {
@@ -121,6 +137,7 @@ Rectangle {
121 height: cardTool.cardHeight || implicitHeight
137 height: cardTool.cardHeight || implicitHeight
122
138
123 clip: true
139 clip: true
140+ headerAlignment: cardTool.headerAlignment
124
141
125 Rectangle {
142 Rectangle {
126 anchors.fill: parent
143 anchors.fill: parent
@@ -302,5 +319,29 @@ Rectangle {
302 } else tryCompare(cardTool, "cardHeight", data.height);
319 } else tryCompare(cardTool, "cardHeight", data.height);
303 }
320 }
304 }
321 }
322+
323+ function test_card_header_component_alignment_data() {
324+ return [
325+ { tag: "Title - vertical", component: "titleLabel", property: "headerAlignment",
326+ value: Text.AlignHCenter, index: 11, layout_index: 0 },
327+ { tag: "Title - horizontal", component: "titleLabel", property: "headerAlignment",
328+ value: Text.AlignLeft, index: 12, layout_index: 0},
329+ { tag: "Title, subtitle - vertical", component: "titleLabel", property: "headerAlignment",
330+ value: Text.AlignLeft, index: 13, layout_index: 0},
331+ { tag: "Title, price - horizontal", component: "titleLabel", property: "headerAlignment",
332+ value: Text.AlignLeft, index: 14, layout_index: 0},
333+ ]
334+ }
335+
336+ function test_card_header_component_alignment(data) {
337+ selector.selectedIndex = data.index;
338+ if (data.hasOwnProperty("layout_index")) {
339+ layoutSelector.selectedIndex = data.layout_index;
340+ }
341+
342+ if (data.hasOwnProperty("property")) {
343+ tryCompare(cardTool, data.property, data.value);
344+ }
345+ }
305 }
346 }
306}
347}