git.iko.soy/unity8
on xenial help sign in
Tweak card header to implement the spec correctly

- title is Medium only if subtitle is non-empty - title is only centered if explicitly requested by the scope ("align": "center" in components), with only one allowed line - subtitle is x-small - highlighted attribute is Bold - emblem is allowed non-square

commitbd181fc2a7b8aa0e559e7e59704ed5142b938d88 authorMichał Sawicz <michal.sawicz@canonical.com> dateThu 4 Sep 2014, 18:54 (12 years ago) parente805fc5
15 files changed+77−83
compare with xenial
unifiedsplit
plugins/Dash/CardAttributes.qml+1−1 plugins/Dash/CardCreator.js+7−8 qml/Dash/CardGrid.qml+1−1 qml/Dash/CardHorizontalList.qml+1−1 qml/Dash/CardTool.qml+11−11 qml/Dash/CardVerticalJournal.qml+1−1 qml/Dash/ScopesOverviewFavorites.qml+1−1 tests/plugins/Dash/cardcreator/1.res+4−4 tests/plugins/Dash/cardcreator/2.res+5−6 tests/plugins/Dash/cardcreator/3.res+5−6 tests/plugins/Dash/cardcreator/4.res+5−6 tests/plugins/Dash/cardcreator/5.res+5−6 tests/plugins/Dash/cardcreator/6.res+6−8 tests/plugins/Dash/cardcreator/7.res+5−6 tests/qmltests/Dash/tst_CardTool.qml+19−17
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+7−8
@@ -215,18 +215,18 @@ var kTitleLabelCode = 'Label { \n\
215215 elide: Text.ElideRight; \n\
216216 fontSize: "small"; \n\
217217 wrapMode: Text.Wrap; \n\
218− maximumLineCount: 2; \n\
218+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2; \n\
219219 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
220220 color: %2; \n\
221221 visible: showHeader %3; \n\
222222 text: root.title; \n\
223− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal; \n\
224− horizontalAlignment: root.headerAlignment; \n\
223+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\
224+ horizontalAlignment: root.titleAlignment; \n\
225225 }\n';
226226
227227// %1 is used as extra anchors of emblemIcon
228228// %2 is used as color of emblemIcon
229−var kEmblemIconCode = 'Icon { \n\
229+var kEmblemIconCode = 'StatusIcon { \n\
230230 id: emblemIcon; \n\
231231 objectName: "emblemIcon"; \n\
232232 anchors { \n\
@@ -236,7 +236,6 @@ var kEmblemIconCode = 'Icon { \n\
236236 } \n\
237237 source: cardData && cardData["emblem"] || ""; \n\
238238 color: %2; \n\
239− width: height; \n\
240239 height: source != "" ? titleLabel.font.pixelSize : 0; \n\
241240 }\n';
242241
@@ -258,13 +257,12 @@ var kSubtitleLabelCode = 'Label { \n\
258257 anchors { %1 } \n\
259258 anchors.topMargin: units.dp(2); \n\
260259 elide: Text.ElideRight; \n\
261− fontSize: "small"; \n\
260+ fontSize: "x-small"; \n\
262261 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
263262 color: %2; \n\
264263 visible: titleLabel.visible && titleLabel.text; \n\
265264 text: cardData && cardData["subtitle"] || ""; \n\
266265 font.weight: Font.Light; \n\
267− horizontalAlignment: root.headerAlignment; \n\
268266 }\n';
269267
270268// %1 is used as anchors of attributesRow
@@ -310,7 +308,7 @@ function cardString(template, components) {
310308 property var artShapeBorderSource: undefined; \n\
311309 property real fontScale: 1.0; \n\
312310 property var scopeStyle: null; \n\
313− property int headerAlignment: Text.AlignLeft; \n\
311+ property int titleAlignment: Text.AlignLeft; \n\
314312 property int fixedHeaderHeight: -1; \n\
315313 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
316314 readonly property string title: cardData && cardData["title"] || ""; \n\
@@ -655,6 +653,7 @@ function cardString(template, components) {
655653function createCardComponent(parent, template, components) {
656654 var imports = 'import QtQuick 2.2; \n\
657655 import Ubuntu.Components 1.1; \n\
656+ import Ubuntu.Settings.Components 0.1; \n\
658657 import Dash 0.1;\n\
659658 import Utils 0.1;\n';
660659 var card = cardString(template, components);
qml/Dash/CardGrid.qml+1−1
@@ -68,7 +68,7 @@ DashRenderer {
6868 item.cardData = Qt.binding(function() { return model; });
6969 item.template = Qt.binding(function() { return cardTool.template; });
7070 item.components = Qt.binding(function() { return cardTool.components; });
71− item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
71+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
7272 item.scopeStyle = root.scopeStyle;
7373 }
7474 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+11−11
@@ -131,21 +131,21 @@ 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"];
136+ readonly property int titleAlignment: {
137+ if (template["card-layout"] === "horizontal"
138+ || typeof components["title"] !== "object"
139+ || components["title"]["align"] !== "center") return Text.AlignHCenter;
140140
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"])
141+ var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
144142
145− var isOnlyTextComponent = !hasSubtitle && !hasPrice && !hasSummary;
146− if (!isOnlyTextComponent) return Text.AlignLeft;
143+ for (var key in keys) {
144+ if (typeof components[key] === "string"
145+ || typeof components[key]["field"] === "string") return Text.AlignLeft;
146+ }
147147
148− return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;
148+ return Text.AlignHCenter;
149149 }
150150
151151 QtObject {
qml/Dash/CardVerticalJournal.qml+1−1
@@ -56,7 +56,7 @@ DashRenderer {
5656 item.cardData = Qt.binding(function() { return model; });
5757 item.template = Qt.binding(function() { return cardTool.template; });
5858 item.components = Qt.binding(function() { return cardTool.components; });
59− item.headerAlignment = Qt.binding(function() { return cardTool.headerAlignment; });
59+ item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
6060 item.scopeStyle = root.scopeStyle;
6161 }
6262 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+4−4
@@ -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"] || "";
@@ -68,13 +68,13 @@ Label {
6868 elide: Text.ElideRight;
6969 fontSize: "small";
7070 wrapMode: Text.Wrap;
71− maximumLineCount: 2;
71+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
7272 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
7373 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
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 }
7979UbuntuShape {
8080 id: touchdown;
tests/plugins/Dash/cardcreator/2.res+5−6
@@ -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"] || "";
@@ -92,13 +92,13 @@ Image {
9292 elide: Text.ElideRight;
9393 fontSize: "small";
9494 wrapMode: Text.Wrap;
95− maximumLineCount: 2;
95+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
9696 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9797 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
9898 visible: showHeader ;
9999 text: root.title;
100− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
101− horizontalAlignment: root.headerAlignment;
100+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
101+ horizontalAlignment: root.titleAlignment;
102102 }
103103 ,Label {
104104 id: subtitleLabel;
@@ -110,13 +110,12 @@ Image {
110110 }
111111 anchors.topMargin: units.dp(2);
112112 elide: Text.ElideRight;
113− fontSize: "small";
113+ fontSize: "x-small";
114114 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
115115 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
116116 visible: titleLabel.visible && titleLabel.text;
117117 text: cardData && cardData["subtitle"] || "";
118118 font.weight: Font.Light;
119− horizontalAlignment: root.headerAlignment;
120119 }
121120
122121 ]
tests/plugins/Dash/cardcreator/3.res+5−6
@@ -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"] || "";
@@ -68,13 +68,13 @@ Label {
6868 elide: Text.ElideRight;
6969 fontSize: "small";
7070 wrapMode: Text.Wrap;
71− maximumLineCount: 2;
71+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
7272 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
7373 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
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 }
7979Label {
8080 id: subtitleLabel;
@@ -86,13 +86,12 @@ Label {
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: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
9292 visible: titleLabel.visible && titleLabel.text;
9393 text: cardData && cardData["subtitle"] || "";
9494 font.weight: Font.Light;
95− horizontalAlignment: root.headerAlignment;
9695 }
9796UbuntuShape {
9897 id: touchdown;
tests/plugins/Dash/cardcreator/4.res+5−6
@@ -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"] || "";
@@ -72,13 +72,13 @@ Label {
7272 elide: Text.ElideRight;
7373 fontSize: "small";
7474 wrapMode: Text.Wrap;
75− maximumLineCount: 2;
75+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
7676 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
7777 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
7878 visible: showHeader ;
7979 text: root.title;
80− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
81− horizontalAlignment: root.headerAlignment;
80+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
81+ horizontalAlignment: root.titleAlignment;
8282 }
8383,Label {
8484 id: subtitleLabel;
@@ -90,13 +90,12 @@ Label {
9090 }
9191 anchors.topMargin: units.dp(2);
9292 elide: Text.ElideRight;
93− fontSize: "small";
93+ fontSize: "x-small";
9494 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9595 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
9696 visible: titleLabel.visible && titleLabel.text;
9797 text: cardData && cardData["subtitle"] || "";
9898 font.weight: Font.Light;
99− horizontalAlignment: root.headerAlignment;
10099 }
101100]
102101}
tests/plugins/Dash/cardcreator/5.res+5−6
@@ -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"] || "";
@@ -112,13 +112,13 @@ Label {
112112 elide: Text.ElideRight;
113113 fontSize: "small";
114114 wrapMode: Text.Wrap;
115− maximumLineCount: 2;
115+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
116116 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
117117 color: root.scopeStyle ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
118118 visible: showHeader && overlayLoader.active;
119119 text: root.title;
120− font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal;
121− horizontalAlignment: root.headerAlignment;
120+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
121+ horizontalAlignment: root.titleAlignment;
122122 }
123123Label {
124124 id: subtitleLabel;
@@ -131,13 +131,12 @@ Label {
131131 }
132132 anchors.topMargin: units.dp(2);
133133 elide: Text.ElideRight;
134− fontSize: "small";
134+ fontSize: "x-small";
135135 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
136136 color: root.scopeStyle ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
137137 visible: titleLabel.visible && titleLabel.text;
138138 text: cardData && cardData["subtitle"] || "";
139139 font.weight: Font.Light;
140− horizontalAlignment: root.headerAlignment;
141140 }
142141UbuntuShape {
143142 id: touchdown;
tests/plugins/Dash/cardcreator/6.res+6−8
@@ -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"] || "";
@@ -68,13 +68,13 @@ Item {
6868 elide: Text.ElideRight;
6969 fontSize: "small";
7070 wrapMode: Text.Wrap;
71− maximumLineCount: 2;
71+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
7272 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
7373 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (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.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.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+5−6
@@ -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"] || "";
@@ -93,13 +93,13 @@ Image {
9393 elide: Text.ElideRight;
9494 fontSize: "small";
9595 wrapMode: Text.Wrap;
96− maximumLineCount: 2;
96+ maximumLineCount: horizontalAlignment === Text.AlighHCenter ? 1 : 2;
9797 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9898 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (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.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,CardAttributes {
123122 id: attributesRow;
tests/qmltests/Dash/tst_CardTool.qml+19−17
@@ -73,8 +73,8 @@ Rectangle {
7373 "layout": { "components": Helpers.update(JSON.parse(Helpers.fullMapping), { "art": {"aspect-ratio": 0.5, "summary": undefined }}) }
7474 },
7575 {
76− "name": "Title - vertical",
77− "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title" } }
76+ "name": "Title - centered",
77+ "layout": { "template": { "card-layout": "vertical" }, "components": { "title": { "field": "title", "align": "center" } } }
7878 },
7979 {
8080 "name": "Title - horizontal",
@@ -85,8 +85,12 @@ 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" } }
90+ },
91+ {
92+ "name": "Title, attributes - centered",
93+ "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title", "attributes": "attributes" } }
9094 },
9195 ]
9296
@@ -100,6 +104,7 @@ Rectangle {
100104 }
101105
102106 Column {
107+ id: column
103108 width: units.gu(38)
104109 anchors { left: parent.left; top: parent.top; margins: units.gu(1) }
105110
@@ -111,7 +116,7 @@ Rectangle {
111116 ]
112117
113118 delegate: Row {
114− anchors { left: parent.left; right: parent.right; margins: units.gu(3) }
119+ anchors { left: column.left; right: column.right; margins: units.gu(3) }
115120
116121 Label {
117122 height: units.gu(5)
@@ -315,27 +320,24 @@ Rectangle {
315320 }
316321 }
317322
318− function test_card_header_component_alignment_data() {
323+ function test_card_title_alignment_data() {
319324 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− ]
325+ { tag: "Title - centered", value: Text.AlignHCenter, index: 11, layout_index: 0 },
326+ { tag: "Title - horizontal", value: Text.AlignLeft, index: 12, layout_index: 0},
327+ { tag: "Title, subtitle - vertical", value: Text.AlignLeft, index: 13, layout_index: 0},
328+ { tag: "Title, attribute - horizontal", value: Text.AlignLeft, index: 14, layout_index: 0},
329+ { tag: "Title, attribute - centered", value: Text.AlignLeft, index: 15, layout_index: 0},
330+ ];
329331 }
330332
331− function test_card_header_component_alignment(data) {
333+ function test_card_title_alignment(data) {
332334 selector.selectedIndex = data.index;
333335 if (data.hasOwnProperty("layout_index")) {
334336 layoutSelector.selectedIndex = data.layout_index;
335337 }
336338
337339 if (data.hasOwnProperty("property")) {
338− tryCompare(cardTool, data.property, data.value);
340+ tryCompare(cardTool, "titleAlignment", data.value);
339341 }
340342 }
341343