git.iko.soy/unity8
on xenial help sign in
Update look of infographic a bit

Approved by: Albert Astals Cid

commit6f377028e90368240596e66c5918b31d528451e1 authorMichael Terry <michael.terry@canonical.com> dateTue 13 Sep 2016, 06:55 (10 years ago) parent4bd37d63653285
7 files changed+88−44
compare with xenial
unifiedsplit
qml/Components/Circle.qml−22 qml/Greeter/Circle.qml+57 qml/Greeter/Clock.qml−2 qml/Greeter/CoverPage.qml+2 qml/Greeter/Infographics.qml+27−20 qml/Greeter/WideView.qml+2 qml/Greeter/graphics/infographic_circle_back.png
qml/Components/Circle.qmldeleted−22
@@ -1,22 +0,0 @@
1−/*
2− * Copyright (C) 2013 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.4
18−
19−Rectangle {
20− antialiasing: true
21− radius: width / 2
22− }
qml/Greeter/Circle.qmlnew file+57
@@ -0,0 +1,57 @@
1+/*
2+ * Copyright (C) 2013,2016 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.4
18+
19+Canvas {
20+ id: root
21+ property color color
22+ property real circleScale
23+ property var centerCircle
24+
25+ onColorChanged: requestPaint()
26+ onCircleScaleChanged: requestPaint()
27+ onCenterCircleChanged: requestPaint()
28+
29+ onPaint: {
30+ if (circleScale <= 0) {
31+ return;
32+ }
33+
34+ var ctx = getContext("2d");
35+
36+ // draw big circle
37+ ctx.save();
38+ ctx.fillStyle = color;
39+ ctx.beginPath();
40+ ctx.arc(width / 2, height / 2, circleScale * width / 2, 0, 2 * Math.PI, false);
41+ ctx.fill();
42+ ctx.restore();
43+
44+ // chop out inner infographics circle
45+ if (centerCircle) {
46+ var circleMiddle = mapFromItem(centerCircle,
47+ centerCircle.width / 2,
48+ centerCircle.height / 2);
49+ ctx.save();
50+ ctx.globalCompositeOperation = "destination-out";
51+ ctx.beginPath();
52+ ctx.arc(circleMiddle.x, circleMiddle.y, centerCircle.width / 2, 0, 2 * Math.PI, false);
53+ ctx.fill();
54+ ctx.restore();
55+ }
56+ }
57+}
qml/Greeter/Clock.qml−2
@@ -73,7 +73,6 @@ Item {
7373 anchors.horizontalCenter: parent.horizontalCenter
7474 font.pixelSize: units.gu(7.5)
7575 color: "white"
76− opacity: 0.5
7776 text: Qt.formatTime(clock.currentDate)
7877 font.weight: Font.Light
7978 }
@@ -85,7 +84,6 @@ Item {
8584 anchors.horizontalCenter: parent.horizontalCenter
8685 fontSize: "medium"
8786 color: "white"
88− opacity: 0.5
8987 text: Qt.formatDate(clock.currentDate, Qt.DefaultLocaleLongDate)
9088 font.weight: Font.Light
9189 }
qml/Greeter/CoverPage.qml+2
@@ -109,6 +109,8 @@ Showable {
109109 model: root.infographicModel
110110 clip: true // clip large data bubbles
111111
112+ useColor: !root.hasCustomBackground
113+
112114 anchors {
113115 verticalCenter: parent.verticalCenter
114116 left: parent.left
qml/Greeter/Infographics.qml+27−20
@@ -14,7 +14,6 @@
1414 * along with this program. If not, see <http://www.gnu.org/licenses/>.
1515 */
1616
17−import "../Components"
1817import "Gradient.js" as Gradient
1918import QtQuick 2.4
2019import Ubuntu.Components 1.3
@@ -25,6 +24,7 @@ Item {
2524 property var model
2625
2726 property int animDuration: 10
27+ property bool useColor: true
2828
2929 QtObject {
3030 id: d
@@ -36,6 +36,14 @@ Item {
3636 || circleChangeAnimTimer.running
3737 }
3838
39+ // Define a replacement white-based color theme when useColor is false
40+ QtObject {
41+ id: whiteTheme
42+ property color main: "white"
43+ property color start: "white"
44+ property color end: "white"
45+ }
46+
3947 Connections {
4048 target: model
4149 ignoreUnknownSignals: model === undefined
@@ -142,9 +150,10 @@ Item {
142150 width: dataCircle.width / divisor
143151 height: dataCircle.height / divisor
144152 opacity: 0.0
145− scale: 0.0
153+ circleScale: 0.0
146154 visible: modelData !== undefined
147155 color: "transparent"
156+ centerCircle: dataCircle
148157
149158 SequentialAnimation {
150159 id: pastCircleChangeAnim
@@ -160,7 +169,7 @@ Item {
160169 }
161170 PropertyAnimation {
162171 target: pastCircle
163− property: "scale"
172+ property: "circleScale"
164173 to: modelData
165174 easing.type: Easing.OutCurve
166175 duration: circleChangeAnimTimer.interval * d.circleModifier
@@ -168,7 +177,10 @@ Item {
168177 ColorAnimation {
169178 target: pastCircle
170179 property: "color"
171− to: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
180+ to: Gradient.threeColorByIndex(index, count,
181+ useColor ?
182+ infographic.model.secondColor :
183+ whiteTheme)
172184 easing.type: Easing.OutCurve
173185 duration: circleChangeAnimTimer.interval * d.circleModifier
174186 }
@@ -202,9 +214,10 @@ Item {
202214 width: dataCircle.width / divisor
203215 height: dataCircle.height / divisor
204216 opacity: 0.0
205− scale: 0.0
217+ circleScale: 0.0
206218 visible: modelData !== undefined
207219 color: "transparent"
220+ centerCircle: dataCircle
208221
209222 SequentialAnimation {
210223 id: presentCircleChangeAnim
@@ -221,7 +234,7 @@ Item {
221234 }
222235 PropertyAnimation {
223236 target: presentCircle
224− property: "scale"
237+ property: "circleScale"
225238 to: modelData
226239 easing.type: Easing.OutCurve
227240 duration: circleChangeAnimTimer.interval * d.circleModifier
@@ -229,7 +242,10 @@ Item {
229242 ColorAnimation {
230243 target: presentCircle
231244 property: "color"
232− to: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
245+ to: Gradient.threeColorByIndex(index, infographic.model.currentDay,
246+ useColor ?
247+ infographic.model.firstColor :
248+ whiteTheme)
233249 easing.type: Easing.OutCurve
234250 duration: circleChangeAnimTimer.interval * d.circleModifier
235251 }
@@ -239,15 +255,6 @@ Item {
239255 }
240256 }
241257
242− Image {
243− id: backgroundCircle
244− objectName: "backgroundCircle"
245−
246− anchors.fill: parent
247−
248− source: "graphics/infographic_circle_back.png"
249− }
250−
251258 Timer {
252259 id: dotShowAnimTimer
253260
@@ -318,7 +325,7 @@ Item {
318325
319326 index: model.index
320327 count: dots.count
321− radius: backgroundCircle.width / 2
328+ radius: dataCircle.width / 2
322329 halfSize: dot.width / 2
323330 posOffset: radius / dot.width / 3
324331 state: dot.state
@@ -327,7 +334,7 @@ Item {
327334 id: dot
328335 objectName: "dot" + index
329336
330− property real baseOpacity: 0.4
337+ property real baseOpacity: 1
331338
332339 width: units.dp(5) * parent.radius / 200
333340 height: units.dp(5) * parent.radius / 200
@@ -363,10 +370,10 @@ Item {
363370 property alias hideAnim: decreaseOpacity
364371 property alias showAnim: increaseOpacity
365372
366− property real baseOpacity: 0.6
373+ property real baseOpacity: 1
367374 property real duration: dotShowAnimTimer.interval * 5
368375
369− height: 0.7 * backgroundCircle.width
376+ height: 0.7 * dataCircle.width
370377 width: notification.height
371378 anchors.centerIn: parent
372379
qml/Greeter/WideView.qml+2
@@ -111,6 +111,8 @@ FocusScope {
111111 infographics {
112112 height: 0.75 * parent.height
113113 anchors.leftMargin: loginList.x + loginList.width
114+
115+ useColor: !root.hasCustomBackground
114116 }
115117
116118 onTease: root.tease()
qml/Greeter/graphics/infographic_circle_back.pngdeleted

Binary file not shown.