git.iko.soy/unity8
on xenial help sign in
Merge lp:~unity-team/unity8/themeing-font-and-mascot.
6f4607dMichał Sawicz
qml/Dash/Card.qml+15−3
compare with xenial
unifiedsplit
@@ -140,7 +140,6 @@ AbstractButton {
140 CardHeader {
140 CardHeader {
141 id: header
141 id: header
142 objectName: "cardHeader"
142 objectName: "cardHeader"
143− inOverlay: root.template && root.template["overlay"] === true
144 anchors {
143 anchors {
145 top: {
144 top: {
146 if (template) {
145 if (template) {
@@ -163,6 +162,9 @@ AbstractButton {
163 subtitle: cardData && cardData["subtitle"] || ""
162 subtitle: cardData && cardData["subtitle"] || ""
164
163
165 opacity: showHeader ? 1 : 0
164 opacity: showHeader ? 1 : 0
165+ inOverlay: root.template && root.template["overlay"] === true
166+ fontColor: inOverlay ? "white" : summary.color
167+ useMascotShape: !background.visible && !inOverlay
166
168
167 Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
169 Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
168 }
170 }
@@ -183,7 +185,17 @@ AbstractButton {
183 text: cardData && cardData["summary"] || ""
185 text: cardData && cardData["summary"] || ""
184 height: text ? implicitHeight : 0
186 height: text ? implicitHeight : 0
185 fontSize: "small"
187 fontSize: "small"
188+ color: getFontColor(background.color)
189+
190+ function getLuminance(color) {
191+ return 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
192+ }
193+
186− // TODO karni (for each Label): Update Ubuntu.Components.Themes.Palette and use theme color instead
194+ // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
187− color: "grey"
195+ function getFontColor(backgroundColor) {
196+ if (backgroundColor === undefined) return "grey";
197+ var luminance = getLuminance(backgroundColor);
198+ return luminance < 0.7 ? "white" : "grey"
199+ }
188 }
200 }
189}
201}
qml/Dash/CardHeader.qml+24−16
@@ -30,7 +30,10 @@ Item {
30 property real fontScale: 1.0
30 property real fontScale: 1.0
31
31
32 property alias headerAlignment: titleLabel.horizontalAlignment
32 property alias headerAlignment: titleLabel.horizontalAlignment
33+
33 property bool inOverlay: false
34 property bool inOverlay: false
35+ property bool useMascotShape: true
36+ property color fontColor: "grey"
34
37
35 visible: mascotImage.status === Image.Ready || title || price
38 visible: mascotImage.status === Image.Ready || title || price
36 height: row.height > 0 ? row.height + row.margins * 2 : 0
39 height: row.height > 0 ? row.height + row.margins * 2 : 0
@@ -41,13 +44,13 @@ Item {
41
44
42 property real margins: units.gu(1)
45 property real margins: units.gu(1)
43
46
47+ spacing: mascotShape.visible || mascotImage.visible || inOverlay ? margins : 0
44 anchors {
48 anchors {
45 top: parent.top; left: parent.left; right: parent.right
49 top: parent.top; left: parent.left; right: parent.right
46 margins: margins
50 margins: margins
47 leftMargin: spacing
51 leftMargin: spacing
48 rightMargin: spacing
52 rightMargin: spacing
49 }
53 }
50− spacing: mascotShape.visible || inOverlay ? margins : 0
51
54
52 UbuntuShape {
55 UbuntuShape {
53 id: mascotShape
56 id: mascotShape
@@ -56,20 +59,23 @@ Item {
56 // TODO karni: Icon aspect-ratio is 8:7.5. Revisit these values to avoid fraction of pixels.
59 // TODO karni: Icon aspect-ratio is 8:7.5. Revisit these values to avoid fraction of pixels.
57 width: units.gu(6)
60 width: units.gu(6)
58 height: units.gu(5.625)
61 height: units.gu(5.625)
59− visible: image.status === Image.Ready
62+ visible: useMascotShape && image && image.status === Image.Ready
60− // FIXME the * 4 is a workaround to obtain crispness
61− // Find out the proper fix
62 readonly property int maxSize: Math.max(width, height) * 4
63 readonly property int maxSize: Math.max(width, height) * 4
63
64
64− image: Image {
65− id: mascotImage
65+ image: useMascotShape ? mascotImage : null
66− cache: true
66+ }
67
67
68+ Image {
69+ id: mascotImage
70+
71+ width: source ? mascotShape.width : 0
72+ height: mascotShape.height
73+ visible: !useMascotShape && status === Image.Ready
74+
68− sourceSize { width: mascotShape.maxSize; height: mascotShape.maxSize }
75+ sourceSize { width: mascotShape.maxSize; height: mascotShape.maxSize }
69− fillMode: Image.PreserveAspectCrop
76+ fillMode: Image.PreserveAspectCrop
70− horizontalAlignment: Image.AlignHCenter
77+ horizontalAlignment: Image.AlignHCenter
71− verticalAlignment: Image.AlignVCenter
78+ verticalAlignment: Image.AlignVCenter
72− }
73 }
79 }
74
80
75 Column {
81 Column {
@@ -86,8 +92,7 @@ Item {
86 wrapMode: Text.Wrap
92 wrapMode: Text.Wrap
87 maximumLineCount: 2
93 maximumLineCount: 2
88 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
94 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
89− // TODO karni (for each Label): Update Ubuntu.Components.Themes.Palette and use theme color instead
95+ color: fontColor
90− color: inOverlay ? "white" : "grey" // Theme.palette.normal.backgroundText
91 }
96 }
92
97
93 Label {
98 Label {
@@ -98,7 +103,7 @@ Item {
98 font.weight: Font.Light
103 font.weight: Font.Light
99 visible: titleLabel.text && text
104 visible: titleLabel.text && text
100 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
105 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
101− color: inOverlay ? "white" : "grey" // Theme.palette.normal.backgroundText
106+ color: fontColor
102 }
107 }
103
108
104 Row {
109 Row {
@@ -119,7 +124,7 @@ Item {
119 width: parent.labelWidth
124 width: parent.labelWidth
120 elide: Text.ElideRight
125 elide: Text.ElideRight
121 font.weight: Font.DemiBold
126 font.weight: Font.DemiBold
122− color: "grey" // Theme.palette.normal.backgroundText
127+ color: "#ff990000"
123 visible: text
128 visible: text
124 }
129 }
125
130
@@ -129,6 +134,8 @@ Item {
129 width: parent.labelWidth
134 width: parent.labelWidth
130 elide: Text.ElideRight
135 elide: Text.ElideRight
131 horizontalAlignment: parent.labels === 3 ? Text.AlignHCenter : Text.AlignRight
136 horizontalAlignment: parent.labels === 3 ? Text.AlignHCenter : Text.AlignRight
137+ font.strikeout: true
138+ color: "black"
132 visible: text
139 visible: text
133 }
140 }
134
141
@@ -137,6 +144,7 @@ Item {
137 width: parent.labelWidth
144 width: parent.labelWidth
138 elide: Text.ElideRight
145 elide: Text.ElideRight
139 horizontalAlignment: Text.AlignRight
146 horizontalAlignment: Text.AlignRight
147+ color: fontColor
140 visible: text
148 visible: text
141 }
149 }
142 }
150 }