on xenial help sign in
Tweak card header to match the spec

- title is Medium only if subtitle is non-empty - title is only centered if explicitly requested by the scope ("align": "center" in components) - subtitle is x-small - highlighted attribute is Bold - emblem is allowed non-square Fixes: 1356371, 1365546, 1365549 Approved by: Alejandro J. Cura, Albert Astals Cid

commit8e74cdd0c0afa07f1b9b06cb8eec4f926b893a3f authorMichał Sawicz <michal.sawicz@canonical.com> dateMon 6 Oct 2014, 08:00 (12 years ago) parentaec74ac9f8aa54
16 files changed+86−92
plugins/Dash/CardAttributes.qml+1−1 plugins/Dash/CardCreator.js+6−7 qml/Dash/CardGrid.qml+1−1 qml/Dash/CardHorizontalList.qml+1−1 qml/Dash/CardTool.qml+18−13 qml/Dash/CardVerticalJournal.qml+1−1 qml/Dash/ScopesOverviewFavorites.qml+1−1 tests/plugins/Dash/cardcreator/1.res+3−3 tests/plugins/Dash/cardcreator/2.res+4−5 tests/plugins/Dash/cardcreator/3.res+4−5 tests/plugins/Dash/cardcreator/4.res+4−5 tests/plugins/Dash/cardcreator/5.res+4−5 tests/plugins/Dash/cardcreator/6.res+5−7 tests/plugins/Dash/cardcreator/7.res+4−5 tests/qmltests/Dash/CardHelpers.js+1−12 tests/qmltests/Dash/tst_CardTool.qml+28−20
plugins/Dash/CardAttributes.qml+1−1
@@ -59,7 +59,7 @@ GridLayout {
5959 text: "value" in modelData && modelData["value"] || "";
6060 elide: Text.ElideRight
6161 maximumLineCount: 1
62− font.weight: "style" in modelData && modelData["style"] == "highlighted" ? Font.DemiBold : Font.Light
62+ font.weight: "style" in modelData && modelData["style"] === "highlighted" ? Font.Bold : Font.Light
6363 fontSize: "small"
6464 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
6565 color: grid.color
plugins/Dash/CardCreator.js+6−7
@@ -222,13 +222,13 @@ var kTitleLabelCode = 'Label { \n\
222222 color: %2; \n\
223223 visible: showHeader %3; \n\
224224 text: root.title; \n\
225− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal; \n\
226− horizontalAlignment: root.headerAlignment; \n\
225+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\
226+ horizontalAlignment: root.titleAlignment; \n\
227227 }\n';
228228
229229// %1 is used as extra anchors of emblemIcon
230230// %2 is used as color of emblemIcon
231−var kEmblemIconCode = 'Icon { \n\
231+var kEmblemIconCode = 'StatusIcon { \n\
232232 id: emblemIcon; \n\
233233 objectName: "emblemIcon"; \n\
234234 anchors { \n\
@@ -238,7 +238,6 @@ var kEmblemIconCode = 'Icon { \n\
238238 } \n\
239239 source: cardData && cardData["emblem"] || ""; \n\
240240 color: %2; \n\
241− width: height; \n\
242241 height: source != "" ? titleLabel.font.pixelSize : 0; \n\
243242 }\n';
244243
@@ -260,13 +259,12 @@ var kSubtitleLabelCode = 'Label { \n\
260259 anchors { %1 } \n\
261260 anchors.topMargin: units.dp(2); \n\
262261 elide: Text.ElideRight; \n\
263− fontSize: "small"; \n\
262+ fontSize: "x-small"; \n\
264263 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
265264 color: %2; \n\
266265 visible: titleLabel.visible && titleLabel.text; \n\
267266 text: cardData && cardData["subtitle"] || ""; \n\
268267 font.weight: Font.Light; \n\
269− horizontalAlignment: root.headerAlignment; \n\
270268 }\n';
271269
272270// %1 is used as anchors of attributesRow
@@ -312,7 +310,7 @@ function cardString(template, components) {
312310 property var artShapeBorderSource: undefined; \n\
313311 property real fontScale: 1.0; \n\
314312 property var scopeStyle: null; \n\
315− property int headerAlignment: Text.AlignLeft; \n\
313+ property int titleAlignment: Text.AlignLeft; \n\
316314 property int fixedHeaderHeight: -1; \n\
317315 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
318316 readonly property string title: cardData && cardData["title"] || ""; \n\
@@ -657,6 +655,7 @@ function cardString(template, components) {
657655function createCardComponent(parent, template, components) {
658656 var imports = 'import QtQuick 2.2; \n\
659657 import Ubuntu.Components 1.1; \n\
658+ import Ubuntu.Settings.Components 0.1; \n\
660659 import Ubuntu.Connectivity 1.0; \n\
661660 import Dash 0.1;\n\
662661 import Utils 0.1;\n';
qml/Dash/CardGrid.qml+1−1
@@ -69,7 +69,7 @@ DashRenderer {
6969 item.cardData = Qt.binding(function() { return model; });
7070 item.template = Qt.binding(function() { return cardTool.template; });
7171 item.components = Qt.binding(function() { return cardTool.components; });
72− item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
72+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
7373 item.scopeStyle = root.scopeStyle;
7474 }
7575 Connections {
qml/Dash/CardHorizontalList.qml+1−1
@@ -49,7 +49,7 @@ DashRenderer {
4949 item.cardData = Qt.binding(function() { return model; });
5050 item.template = Qt.binding(function() { return cardTool.template; });
5151 item.components = Qt.binding(function() { return cardTool.components; });
52− item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
52+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
5353 item.scopeStyle = root.scopeStyle;
5454 }
5555 Connections {
qml/Dash/CardTool.qml+18−13
@@ -131,21 +131,26 @@ Item {
131131 property size artShapeSize: cardLoader.item ? cardLoader.item.artShapeSize : 0
132132
133133 /*!
134− \brief Desired alignment of header components.
134+ \brief Desired alignment of title
135135 */
136− readonly property int headerAlignment: {
137− var subtitle = components["subtitle"];
138− var price = components["price"];
139− var summary = components["summary"];
140−
141− var hasSubtitle = subtitle && (typeof subtitle === "string" || subtitle["field"])
142− var hasPrice = price && (typeof price === "string" || subtitle["field"]);
143− var hasSummary = summary && (typeof summary === "string" || summary["field"])
144−
145− var isOnlyTextComponent = !hasSubtitle && !hasPrice && !hasSummary;
146− if (!isOnlyTextComponent) return Text.AlignLeft;
136+ readonly property int titleAlignment: {
137+ if (template["card-layout"] === "horizontal"
138+ || (typeof components["title"] !== "object" &&
139+ components["title"]["align"] !== "center")) return Text.AlignLeft;
140+
141+ var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
142+
143+ for (var key in keys) {
144+ key = keys[key];
145+ try {
146+ if (typeof components[key] === "string"
147+ || typeof components[key]["field"] === "string") return Text.AlignLeft;
148+ } catch (e) {
149+ continue;
150+ }
151+ }
147152
148− return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;
153+ return Text.AlignHCenter;
149154 }
150155
151156 QtObject {
qml/Dash/CardVerticalJournal.qml+1−1
@@ -57,7 +57,7 @@ DashRenderer {
5757 item.cardData = Qt.binding(function() { return model; });
5858 item.template = Qt.binding(function() { return cardTool.template; });
5959 item.components = Qt.binding(function() { return cardTool.components; });
60− item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
60+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
6161 item.scopeStyle = root.scopeStyle;
6262 }
6363 Connections {
qml/Dash/ScopesOverviewFavorites.qml+1−1
@@ -61,7 +61,7 @@ Flickable {
6161 item.cardData = Qt.binding(function() { return model; });
6262 item.template = Qt.binding(function() { return cardTool.template; });
6363 item.components = Qt.binding(function() { return cardTool.components; });
64− item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
64+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
6565 }
6666
6767 Connections {
tests/plugins/Dash/cardcreator/1.res+3−3
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -74,8 +74,8 @@ Label {
7474 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
7575 visible: showHeader ;
7676 text: root.title;
77− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
78− horizontalAlignment: root.headerAlignment;
77+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
78+ horizontalAlignment: root.titleAlignment;
7979 }
8080UbuntuShape {
8181 id: touchdown;
tests/plugins/Dash/cardcreator/2.res+4−5
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -98,8 +98,8 @@ Image {
9898 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
9999 visible: showHeader ;
100100 text: root.title;
101− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
102− horizontalAlignment: root.headerAlignment;
101+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
102+ horizontalAlignment: root.titleAlignment;
103103 }
104104 ,Label {
105105 id: subtitleLabel;
@@ -111,13 +111,12 @@ Image {
111111 }
112112 anchors.topMargin: units.dp(2);
113113 elide: Text.ElideRight;
114− fontSize: "small";
114+ fontSize: "x-small";
115115 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
116116 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
117117 visible: titleLabel.visible && titleLabel.text;
118118 text: cardData && cardData["subtitle"] || "";
119119 font.weight: Font.Light;
120− horizontalAlignment: root.headerAlignment;
121120 }
122121
123122 ]
tests/plugins/Dash/cardcreator/3.res+4−5
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -74,8 +74,8 @@ Label {
7474 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
7575 visible: showHeader ;
7676 text: root.title;
77− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
78− horizontalAlignment: root.headerAlignment;
77+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
78+ horizontalAlignment: root.titleAlignment;
7979 }
8080Label {
8181 id: subtitleLabel;
@@ -87,13 +87,12 @@ Label {
8787 }
8888 anchors.topMargin: units.dp(2);
8989 elide: Text.ElideRight;
90− fontSize: "small";
90+ fontSize: "x-small";
9191 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9292 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
9393 visible: titleLabel.visible && titleLabel.text;
9494 text: cardData && cardData["subtitle"] || "";
9595 font.weight: Font.Light;
96− horizontalAlignment: root.headerAlignment;
9796 }
9897UbuntuShape {
9998 id: touchdown;
tests/plugins/Dash/cardcreator/4.res+4−5
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -78,8 +78,8 @@ Label {
7878 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
7979 visible: showHeader ;
8080 text: root.title;
81− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
82− horizontalAlignment: root.headerAlignment;
81+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
82+ horizontalAlignment: root.titleAlignment;
8383 }
8484,Label {
8585 id: subtitleLabel;
@@ -91,13 +91,12 @@ Label {
9191 }
9292 anchors.topMargin: units.dp(2);
9393 elide: Text.ElideRight;
94− fontSize: "small";
94+ fontSize: "x-small";
9595 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9696 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
9797 visible: titleLabel.visible && titleLabel.text;
9898 text: cardData && cardData["subtitle"] || "";
9999 font.weight: Font.Light;
100− horizontalAlignment: root.headerAlignment;
101100 }
102101]
103102}
tests/plugins/Dash/cardcreator/5.res+4−5
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -118,8 +118,8 @@ Label {
118118 color: root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
119119 visible: showHeader && overlayLoader.active;
120120 text: root.title;
121− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
122− horizontalAlignment: root.headerAlignment;
121+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
122+ horizontalAlignment: root.titleAlignment;
123123 }
124124Label {
125125 id: subtitleLabel;
@@ -132,13 +132,12 @@ Label {
132132 }
133133 anchors.topMargin: units.dp(2);
134134 elide: Text.ElideRight;
135− fontSize: "small";
135+ fontSize: "x-small";
136136 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
137137 color: root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
138138 visible: titleLabel.visible && titleLabel.text;
139139 text: cardData && cardData["subtitle"] || "";
140140 font.weight: Font.Light;
141− horizontalAlignment: root.headerAlignment;
142141 }
143142UbuntuShape {
144143 id: touchdown;
tests/plugins/Dash/cardcreator/6.res+5−7
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -73,8 +73,8 @@ Item {
7373 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
7474 visible: showHeader ;
7575 text: root.title;
76− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
77− horizontalAlignment: root.headerAlignment;
76+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
77+ horizontalAlignment: root.titleAlignment;
7878 }
7979,Label {
8080 id: subtitleLabel;
@@ -86,15 +86,14 @@ Item {
8686 }
8787 anchors.topMargin: units.dp(2);
8888 elide: Text.ElideRight;
89− fontSize: "small";
89+ fontSize: "x-small";
9090 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9191 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
9292 visible: titleLabel.visible && titleLabel.text;
9393 text: cardData && cardData["subtitle"] || "";
9494 font.weight: Font.Light;
95− horizontalAlignment: root.headerAlignment;
9695 }
97−,Icon {
96+,StatusIcon {
9897 id: emblemIcon;
9998 objectName: "emblemIcon";
10099 anchors {
@@ -104,7 +103,6 @@ Item {
104103 }
105104 source: cardData && cardData["emblem"] || "";
106105 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
107− width: height;
108106 height: source != "" ? titleLabel.font.pixelSize : 0;
109107 }
110108
tests/plugins/Dash/cardcreator/7.res+4−5
@@ -6,7 +6,7 @@ AbstractButton {
66 property var artShapeBorderSource: undefined;
77 property real fontScale: 1.0;
88 property var scopeStyle: null;
9− property int headerAlignment: Text.AlignLeft;
9+ property int titleAlignment: Text.AlignLeft;
1010 property int fixedHeaderHeight: -1;
1111 property size fixedArtShapeSize: Qt.size(-1, -1);
1212 readonly property string title: cardData && cardData["title"] || "";
@@ -99,8 +99,8 @@ Image {
9999 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
100100 visible: showHeader ;
101101 text: root.title;
102− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
103− horizontalAlignment: root.headerAlignment;
102+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
103+ horizontalAlignment: root.titleAlignment;
104104 }
105105,Label {
106106 id: subtitleLabel;
@@ -112,13 +112,12 @@ Image {
112112 }
113113 anchors.topMargin: units.dp(2);
114114 elide: Text.ElideRight;
115− fontSize: "small";
115+ fontSize: "x-small";
116116 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
117117 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
118118 visible: titleLabel.visible && titleLabel.text;
119119 text: cardData && cardData["subtitle"] || "";
120120 font.weight: Font.Light;
121− horizontalAlignment: root.headerAlignment;
122121 }
123122,CardAttributes {
124123 id: attributesRow;
tests/qmltests/Dash/CardHelpers.js+1−12
@@ -16,7 +16,7 @@
1616
1717.pragma library
1818
19−var components = ["title", "art", "subtitle", "mascot", "emblem", "old-price", "price", "alt-price", "rating", "alt-rating", "summary", "attributes", "overlayColor"]
19+var components = ["title", "art", "subtitle", "mascot", "emblem", "summary", "attributes", "overlayColor"]
2020
2121var defaultLayout = ' \
2222{ \
@@ -37,17 +37,6 @@ var defaultLayout = ' \
3737 "overlayColor": null, \
3838 "mascot": null, \
3939 "emblem": null, \
40− "old-price": null, \
41− "price": null, \
42− "alt-price": null, \
43− "rating": { \
44− "type": "stars", \
45− "range": [0, 5], \
46− "full": "image://theme/rating-star-full", \
47− "half": "image://theme/rating-star-half", \
48− "empty": "image://theme/rating-star-empty" \
49− }, \
50− "alt-rating": null, \
5140 "summary": null, \
5241 "attributes": { "max-count": 2 } \
5342 }, \
tests/qmltests/Dash/tst_CardTool.qml+28−20
@@ -85,8 +85,8 @@ Rectangle {
8585 "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title", "subtitle": "subtitle" } }
8686 },
8787 {
88− "name": "Title, price - horizontal",
89− "layout": { "template": { "card-layout": "horizontal" }, "components": { "title": "title", "price": "price" } }
88+ "name": "Title, attributes - horizontal",
89+ "layout": { "template": { "card-layout": "horizontal" }, "components": { "title": "title", "attributes": "attributes" } }
9090 },
9191 ]
9292
@@ -100,6 +100,7 @@ Rectangle {
100100 }
101101
102102 Column {
103+ id: column
103104 width: units.gu(38)
104105 anchors { left: parent.left; top: parent.top; margins: units.gu(1) }
105106
@@ -111,7 +112,7 @@ Rectangle {
111112 ]
112113
113114 delegate: Row {
114− anchors { left: parent.left; right: parent.right; margins: units.gu(3) }
115+ anchors { left: column.left; right: column.right; margins: units.gu(3) }
115116
116117 Label {
117118 height: units.gu(5)
@@ -315,28 +316,35 @@ Rectangle {
315316 }
316317 }
317318
318− function test_card_header_component_alignment_data() {
319+ function test_card_title_alignment_data() {
319320 return [
320− { tag: "Title - vertical", component: "titleLabel", property: "headerAlignment",
321− value: Text.AlignHCenter, index: 11, layout_index: 0 },
322− { tag: "Title - horizontal", component: "titleLabel", property: "headerAlignment",
323− value: Text.AlignLeft, index: 12, layout_index: 0},
324− { tag: "Title, subtitle - vertical", component: "titleLabel", property: "headerAlignment",
325− value: Text.AlignLeft, index: 13, layout_index: 0},
326− { tag: "Title, price - horizontal", component: "titleLabel", property: "headerAlignment",
327− value: Text.AlignLeft, index: 14, layout_index: 0},
328− ]
321+ { tag: "Art, header, summary", value: Text.AlignLeft, index: 0 },
322+ { tag: "Header, summary", value: Text.AlignLeft, index: 1 },
323+ { tag: "Art, header", value: Text.AlignLeft, index: 2 },
324+ { tag: "Header only", value: Text.AlignLeft, index: 3 },
325+ { tag: "Header title only", value: Text.AlignHCenter, index: 4 },
326+ { tag: "Header title and subtitle", value: Text.AlignLeft, index: 5 },
327+ { tag: "Header title and mascot", value: Text.AlignLeft, index: 6 },
328+ { tag: "Art, header, summary - small", value: Text.AlignLeft, index: 7 },
329+ { tag: "Art, header, summary - large", value: Text.AlignLeft, index: 8 },
330+ { tag: "Art, header, summary - horizontal", value: Text.AlignLeft, index: 9 },
331+ { tag: "Art, header - portrait", value: Text.AlignLeft, index: 10 },
332+ { tag: "Title - vertical", value: Text.AlignHCenter, index: 11 },
333+ { tag: "Title - horizontal", value: Text.AlignLeft, index: 12 },
334+ { tag: "Title, subtitle - vertical", value: Text.AlignLeft, index: 13 },
335+ { tag: "Title, attributes - horizontal", value: Text.AlignLeft, index: 14 },
336+ ];
329337 }
330338
331− function test_card_header_component_alignment(data) {
339+ function test_card_title_alignment(data) {
332340 selector.selectedIndex = data.index;
333− if (data.hasOwnProperty("layout_index")) {
334− layoutSelector.selectedIndex = data.layout_index;
335− }
336341
337− if (data.hasOwnProperty("property")) {
338− tryCompare(cardTool, data.property, data.value);
339− }
342+ tryCompare(cardTool, "titleAlignment", Text.AlignLeft);
343+
344+ cardTool.components['title'] = { "field": "title", "align": "center" };
345+ cardTool.componentsChanged();
346+
347+ tryCompare(cardTool, "titleAlignment", data.value);
340348 }
341349
342350 function test_categoryLayout_data() {