on xenial help sign in
Merge lp:~unity-team/unity8/themeing-font-and-mascot
commitbbe0049850c2f39af457f2db1d5cc98b10a349be authorMichał Sawicz <michal.sawicz@canonical.com> dateWed 12 Mar 2014, 12:05 (13 years ago) parenta7c2b92df249c7
4 files changed+54−85
qml/Dash/Card.qml+3−11 qml/Dash/CardHeader.qml+2−47 tests/qmltests/Dash/tst_Card.qml+49 tests/qmltests/Dash/tst_CardHeader.qml−27
qml/Dash/Card.qml+3−11
@@ -44,6 +44,8 @@ AbstractButton {
4444 anchors.fill: parent
4545 image: backgroundImage.source ? backgroundImage : null
4646
47+ property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
48+
4749 property Image backgroundImage: Image {
4850 objectName: "backgroundImage"
4951 source: {
@@ -187,17 +189,7 @@ AbstractButton {
187189 text: cardData && cardData["summary"] || ""
188190 height: text ? implicitHeight : 0
189191 fontSize: "small"
190− color: getFontColor(background.color)
191−
192− function getLuminance(color) {
193− return 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
194− }
195−
196192 // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
197− function getFontColor(backgroundColor) {
198− if (backgroundColor === undefined) return "grey";
199− var luminance = getLuminance(backgroundColor);
200− return luminance < 0.7 ? "white" : "grey"
201− }
193+ color: background.visible && background.luminance < 0.7 ? "white" : "grey"
202194 }
203195}
qml/Dash/CardHeader.qml+2−47
@@ -22,9 +22,6 @@ Item {
2222 property alias mascot: mascotImage.source
2323 property alias title: titleLabel.text
2424 property alias subtitle: subtitleLabel.text
25− property alias price: priceLabel.text
26− property alias oldPrice: oldPriceLabel.text
27− property alias altPrice: altPriceLabel.text
2825
2926 property alias titleWeight: titleLabel.font.weight
3027 property alias titleSize: titleLabel.fontSize
@@ -38,7 +35,7 @@ Item {
3835 property bool useMascotShape: true
3936 property color fontColor: "grey"
4037
41− visible: mascotImage.status === Image.Ready || title || price
38+ visible: mascotImage.status === Image.Ready || title
4239 height: row.height > 0 ? row.height + row.margins * 2 : 0
4340
4441 Row {
@@ -71,6 +68,7 @@ Item {
7168
7269 Image {
7370 id: mascotImage
71+ objectName: "mascotImage"
7472
7573 width: source ? mascotShape.width : 0
7674 height: mascotShape.height
@@ -113,49 +111,6 @@ Item {
113111 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
114112 color: fontColor
115113 }
116−
117− Row {
118− id: prices
119− objectName: "prices"
120− anchors { left: parent.left; right: parent.right }
121−
122− property int labels: {
123− var labels = 1; // price always visible
124− if (oldPriceLabel.text !== "") labels += 1;
125− if (altPriceLabel.text !== "") labels += 1;
126− return labels;
127− }
128− property real labelWidth: width / labels
129−
130− Label {
131− id: priceLabel
132− width: parent.labelWidth
133− elide: Text.ElideRight
134− font.weight: Font.DemiBold
135− color: "#ff990000"
136− visible: text
137− }
138−
139− Label {
140− id: oldPriceLabel
141− objectName: "oldPriceLabel"
142− width: parent.labelWidth
143− elide: Text.ElideRight
144− horizontalAlignment: parent.labels === 3 ? Text.AlignHCenter : Text.AlignRight
145− font.strikeout: true
146− color: "black"
147− visible: text
148− }
149−
150− Label {
151− id: altPriceLabel
152− width: parent.labelWidth
153− elide: Text.ElideRight
154− horizontalAlignment: Text.AlignRight
155− color: fontColor
156− visible: text
157− }
158− }
159114 }
160115 }
161116}
tests/qmltests/Dash/tst_Card.qml+49
@@ -427,5 +427,54 @@ Rectangle {
427427
428428 tryCompare(testCase.title.font, "weight", data.weight);
429429 }
430+
431+ function test_fontColor_data() {
432+ return [
433+ { tag: "#ffffff", dark: true },
434+ { tag: "#fdfdfd", dark: true },
435+ { tag: "#f9f9f9", dark: true },
436+ { tag: "#000000", dark: false },
437+ { tag: "#ef814c", dark: false },
438+ { tag: "#312f2c", dark: false },
439+ { tag: "#be332d", dark: false },
440+ { tag: "#52ace4", dark: false },
441+ { tag: "#3a5897", dark: false },
442+ { tag: "#1caeeb", dark: false },
443+ { tag: "#87c341", dark: false },
444+ { tag: "#50893b", dark: false },
445+ ];
446+ }
447+
448+ function test_fontColor(data) {
449+ selector.selectedIndex = 10;
450+
451+ background.color = data.tag;
452+
453+ var fontColor = data.dark ? "grey" : "white";
454+
455+ tryCompareFunction(function() { return Qt.colorEqual(summary.color, fontColor); }, true);
456+ tryCompareFunction(function() { return Qt.colorEqual(header.fontColor, fontColor); }, true);
457+ }
458+
459+ function test_mascotShape_data() {
460+ return [
461+ { tag: "Art and summary", shape: false, index: 0 },
462+ { tag: "No Summary", shape: true, index: 6 },
463+ { tag: "With background", shape: false, index: 10 },
464+ ];
465+ }
466+
467+ function test_mascotShape(data) {
468+ selector.selectedIndex = data.index;
469+
470+ var shape = findChild(card, "mascotShape");
471+ var image = findChild(card, "mascotImage");
472+
473+ verify(shape, "Could not find shape.");
474+ verify(image, "Could not find image.");
475+
476+ tryCompare(shape, "visible", data.shape);
477+ tryCompare(image, "visible", !data.shape);
478+ }
430479 }
431480}
tests/qmltests/Dash/tst_CardHeader.qml−27
@@ -46,7 +46,6 @@ Rectangle {
4646 property Item mascot: findChild(cardHeader, "mascotShape")
4747 property Item titleLabel: findChild(cardHeader, "titleLabel")
4848 property Item subtitleLabel: findChild(cardHeader, "subtitleLabel")
49− property Item prices: findChild(cardHeader, "prices")
5049 property Item oldPriceLabel: findChild(cardHeader, "oldPriceLabel")
5150 property Item outerRow: findChild(cardHeader, "outerRow")
5251 property Item column: findChild(cardHeader, "column")
@@ -55,7 +54,6 @@ Rectangle {
5554 verify(typeof testCase.mascot === "object", "Couldn't find mascot object.");
5655 verify(typeof testCase.titleLabel === "object", "Couldn't find titleLabel object.");
5756 verify(typeof testCase.subtitleLabel === "object", "Couldn't find subtitleLabel object.");
58− verify(typeof testCase.prices === "object", "Couldn't find prices object.");
5957 verify(typeof testCase.oldPriceLabel === "object", "Couldn't find oldPriceLabel object.");
6058 }
6159
@@ -63,9 +61,6 @@ Rectangle {
6361 cardHeader.mascot = "";
6462 cardHeader.title = "";
6563 cardHeader.subtitle = "";
66− cardHeader.price = "";
67− cardHeader.oldPrice = "";
68− cardHeader.altPrice = "";
6964 }
7065
7166 function test_mascot_data() {
@@ -96,28 +91,6 @@ Rectangle {
9691 tryCompare(cardHeader, "visible", data.visible);
9792 }
9893
99− function test_prices_data() {
100− return [
101− { tag: "Main", main: "$1.25", visible: true },
102− { tag: "Alt", alt: "€1.00", visible: false },
103− { tag: "Old", old: "€2.00", visible: false },
104− { tag: "Main and Alt", main: "$1.25", alt: "€1.00", visible: true },
105− { tag: "Main and Old", main: "$1.25", old: "$2.00", visible: true, oldAlign: Text.AlignRight },
106− { tag: "Alt and Old", alt: "€1.00", old: "$2.00", visible: false },
107− { tag: "All", main: "$1.25", alt: "€1.00", old: "$2.00", visible: true, oldAlign: Text.AlignHCenter },
108− ]
109− }
110−
111− function test_prices(data) {
112− cardHeader.price = data.main !== undefined ? data.main : "";
113− cardHeader.oldPrice = data.old !== undefined ? data.old : "";
114− cardHeader.altPrice = data.alt !== undefined ? data.alt : "";
115− tryCompare(cardHeader, "visible", data.visible);
116− if (data.hasOwnProperty("oldAlign")) {
117− compare(testCase.oldPriceLabel.horizontalAlignment, data.oldAlign, "Old price label is aligned wrong.")
118− }
119− }
120−
12194 function test_dimensions_data() {
12295 return [
12396 { tag: "Column width", object: column, width: cardHeader.width },