git.iko.soy/unity8
on xenial help sign in
Update look of infographic a bit
6f37702Michael Terry
qml/Components/Circle.qmldeleted−22
compare with xenial
unifiedsplit
@@ -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 {
73 anchors.horizontalCenter: parent.horizontalCenter
73 anchors.horizontalCenter: parent.horizontalCenter
74 font.pixelSize: units.gu(7.5)
74 font.pixelSize: units.gu(7.5)
75 color: "white"
75 color: "white"
76− opacity: 0.5
77 text: Qt.formatTime(clock.currentDate)
76 text: Qt.formatTime(clock.currentDate)
78 font.weight: Font.Light
77 font.weight: Font.Light
79 }
78 }
@@ -85,7 +84,6 @@ Item {
85 anchors.horizontalCenter: parent.horizontalCenter
84 anchors.horizontalCenter: parent.horizontalCenter
86 fontSize: "medium"
85 fontSize: "medium"
87 color: "white"
86 color: "white"
88− opacity: 0.5
89 text: Qt.formatDate(clock.currentDate, Qt.DefaultLocaleLongDate)
87 text: Qt.formatDate(clock.currentDate, Qt.DefaultLocaleLongDate)
90 font.weight: Font.Light
88 font.weight: Font.Light
91 }
89 }
qml/Greeter/CoverPage.qml+2
@@ -109,6 +109,8 @@ Showable {
109 model: root.infographicModel
109 model: root.infographicModel
110 clip: true // clip large data bubbles
110 clip: true // clip large data bubbles
111
111
112+ useColor: !root.hasCustomBackground
113+
112 anchors {
114 anchors {
113 verticalCenter: parent.verticalCenter
115 verticalCenter: parent.verticalCenter
114 left: parent.left
116 left: parent.left
qml/Greeter/Infographics.qml+27−20
@@ -14,7 +14,6 @@
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
15 */
16
16
17−import "../Components"
18import "Gradient.js" as Gradient
17import "Gradient.js" as Gradient
19import QtQuick 2.4
18import QtQuick 2.4
20import Ubuntu.Components 1.3
19import Ubuntu.Components 1.3
@@ -25,6 +24,7 @@ Item {
25 property var model
24 property var model
26
25
27 property int animDuration: 10
26 property int animDuration: 10
27+ property bool useColor: true
28
28
29 QtObject {
29 QtObject {
30 id: d
30 id: d
@@ -36,6 +36,14 @@ Item {
36 || circleChangeAnimTimer.running
36 || circleChangeAnimTimer.running
37 }
37 }
38
38
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+
39 Connections {
47 Connections {
40 target: model
48 target: model
41 ignoreUnknownSignals: model === undefined
49 ignoreUnknownSignals: model === undefined
@@ -142,9 +150,10 @@ Item {
142 width: dataCircle.width / divisor
150 width: dataCircle.width / divisor
143 height: dataCircle.height / divisor
151 height: dataCircle.height / divisor
144 opacity: 0.0
152 opacity: 0.0
145− scale: 0.0
153+ circleScale: 0.0
146 visible: modelData !== undefined
154 visible: modelData !== undefined
147 color: "transparent"
155 color: "transparent"
156+ centerCircle: dataCircle
148
157
149 SequentialAnimation {
158 SequentialAnimation {
150 id: pastCircleChangeAnim
159 id: pastCircleChangeAnim
@@ -160,7 +169,7 @@ Item {
160 }
169 }
161 PropertyAnimation {
170 PropertyAnimation {
162 target: pastCircle
171 target: pastCircle
163− property: "scale"
172+ property: "circleScale"
164 to: modelData
173 to: modelData
165 easing.type: Easing.OutCurve
174 easing.type: Easing.OutCurve
166 duration: circleChangeAnimTimer.interval * d.circleModifier
175 duration: circleChangeAnimTimer.interval * d.circleModifier
@@ -168,7 +177,10 @@ Item {
168 ColorAnimation {
177 ColorAnimation {
169 target: pastCircle
178 target: pastCircle
170 property: "color"
179 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)
172 easing.type: Easing.OutCurve
184 easing.type: Easing.OutCurve
173 duration: circleChangeAnimTimer.interval * d.circleModifier
185 duration: circleChangeAnimTimer.interval * d.circleModifier
174 }
186 }
@@ -202,9 +214,10 @@ Item {
202 width: dataCircle.width / divisor
214 width: dataCircle.width / divisor
203 height: dataCircle.height / divisor
215 height: dataCircle.height / divisor
204 opacity: 0.0
216 opacity: 0.0
205− scale: 0.0
217+ circleScale: 0.0
206 visible: modelData !== undefined
218 visible: modelData !== undefined
207 color: "transparent"
219 color: "transparent"
220+ centerCircle: dataCircle
208
221
209 SequentialAnimation {
222 SequentialAnimation {
210 id: presentCircleChangeAnim
223 id: presentCircleChangeAnim
@@ -221,7 +234,7 @@ Item {
221 }
234 }
222 PropertyAnimation {
235 PropertyAnimation {
223 target: presentCircle
236 target: presentCircle
224− property: "scale"
237+ property: "circleScale"
225 to: modelData
238 to: modelData
226 easing.type: Easing.OutCurve
239 easing.type: Easing.OutCurve
227 duration: circleChangeAnimTimer.interval * d.circleModifier
240 duration: circleChangeAnimTimer.interval * d.circleModifier
@@ -229,7 +242,10 @@ Item {
229 ColorAnimation {
242 ColorAnimation {
230 target: presentCircle
243 target: presentCircle
231 property: "color"
244 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)
233 easing.type: Easing.OutCurve
249 easing.type: Easing.OutCurve
234 duration: circleChangeAnimTimer.interval * d.circleModifier
250 duration: circleChangeAnimTimer.interval * d.circleModifier
235 }
251 }
@@ -239,15 +255,6 @@ Item {
239 }
255 }
240 }
256 }
241
257
242− Image {
243− id: backgroundCircle
244− objectName: "backgroundCircle"
245−
246− anchors.fill: parent
247−
248− source: "graphics/infographic_circle_back.png"
249− }
250−
251 Timer {
258 Timer {
252 id: dotShowAnimTimer
259 id: dotShowAnimTimer
253
260
@@ -318,7 +325,7 @@ Item {
318
325
319 index: model.index
326 index: model.index
320 count: dots.count
327 count: dots.count
321− radius: backgroundCircle.width / 2
328+ radius: dataCircle.width / 2
322 halfSize: dot.width / 2
329 halfSize: dot.width / 2
323 posOffset: radius / dot.width / 3
330 posOffset: radius / dot.width / 3
324 state: dot.state
331 state: dot.state
@@ -327,7 +334,7 @@ Item {
327 id: dot
334 id: dot
328 objectName: "dot" + index
335 objectName: "dot" + index
329
336
330− property real baseOpacity: 0.4
337+ property real baseOpacity: 1
331
338
332 width: units.dp(5) * parent.radius / 200
339 width: units.dp(5) * parent.radius / 200
333 height: units.dp(5) * parent.radius / 200
340 height: units.dp(5) * parent.radius / 200
@@ -363,10 +370,10 @@ Item {
363 property alias hideAnim: decreaseOpacity
370 property alias hideAnim: decreaseOpacity
364 property alias showAnim: increaseOpacity
371 property alias showAnim: increaseOpacity
365
372
366− property real baseOpacity: 0.6
373+ property real baseOpacity: 1
367 property real duration: dotShowAnimTimer.interval * 5
374 property real duration: dotShowAnimTimer.interval * 5
368
375
369− height: 0.7 * backgroundCircle.width
376+ height: 0.7 * dataCircle.width
370 width: notification.height
377 width: notification.height
371 anchors.centerIn: parent
378 anchors.centerIn: parent
372
379
qml/Greeter/WideView.qml+2
@@ -111,6 +111,8 @@ FocusScope {
111 infographics {
111 infographics {
112 height: 0.75 * parent.height
112 height: 0.75 * parent.height
113 anchors.leftMargin: loginList.x + loginList.width
113 anchors.leftMargin: loginList.x + loginList.width
114+
115+ useColor: !root.hasCustomBackground
114 }
116 }
115
117
116 onTease: root.tease()
118 onTease: root.tease()
qml/Greeter/graphics/infographic_circle_back.pngdeleted

Binary file not shown.