on f286fa6 help sign in
unity8/qml/Notifications/Notification.qml
592 lines 22 kB history raw
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 */
17import QtQuick 2.4
18import Powerd 0.1
19import Ubuntu.Components 1.3
20import Ubuntu.Components.ListItems 1.3 as ListItem
21import Unity.Notifications 1.0
22import QMenuModel 0.1
23import Utils 0.1
24import "../Components"
26StyledItem {
27 id: notification
29 property alias iconSource: icon.fileSource
30 property alias secondaryIconSource: secondaryIcon.source
31 property alias summary: summaryLabel.text
32 property alias body: bodyLabel.text
33 property alias value: valueIndicator.value
34 property var actions
35 property var notificationId
36 property var type
37 property var hints
38 property var notification
39 property color color: theme.palette.normal.background
40 property bool fullscreen: false
41 property int maxHeight
42 property int margins: units.gu(1)
44 readonly property real defaultOpacity: 1.0
45 property bool hasMouse
46 property url background: ""
48 objectName: "background"
49 implicitHeight: type !== Notification.PlaceHolder ? (fullscreen ? maxHeight : outterColumn.height + shapedBack.anchors.topMargin + margins * 2) : 0
51 // FIXME: non-zero initially because of LP: #1354406 workaround, we want this to start at 0 upon creation eventually
52 opacity: defaultOpacity - Math.abs(x / notification.width)
54 theme: ThemeSettings {
55 name: "Ubuntu.Components.Themes.Ambiance"
56 }
58 readonly property bool expanded: type === Notification.SnapDecision && // expand only snap decisions, if...
59 (fullscreen || // - it's a fullscreen one
60 ListView.view.currentIndex === index || // - it's the one the user clicked on
61 (ListView.view.currentIndex === -1 && index == 0) // - the first one after the user closed the previous one
62 )
64 NotificationAudio {
65 id: sound
66 objectName: "sound"
67 source: hints["suppress-sound"] !== "true" && hints["sound-file"] !== undefined ? hints["sound-file"] : ""
68 }
70 Component.onCompleted: {
71 if (type === Notification.PlaceHolder) {
72 return;
73 }
75 // Turn on screen as needed (Powerd.Notification means the screen
76 // stays on for a shorter amount of time)
77 if (type === Notification.SnapDecision) {
78 Powerd.setStatus(Powerd.On, Powerd.SnapDecision);
79 } else if (type !== Notification.Confirmation) {
80 Powerd.setStatus(Powerd.On, Powerd.Notification);
81 }
83 // FIXME: using onCompleted because of LP: #1354406 workaround, has to be onOpacityChanged really
84 if (opacity == defaultOpacity && hints["suppress-sound"] !== "true" && sound.source !== "") {
85 sound.play();
86 }
87 }
89 Component.onDestruction: {
90 if (type === Notification.PlaceHolder) {
91 return;
92 }
94 if (type === Notification.SnapDecision) {
95 Powerd.setStatus(Powerd.Off, Powerd.SnapDecision);
96 } else if (type !== Notification.Confirmation) {
97 Powerd.setStatus(Powerd.Off, Powerd.Notification);
98 }
99 }
101 function closeNotification() {
102 if (index === ListView.view.currentIndex) { // reset to get the 1st snap decision expanded
103 ListView.view.currentIndex = -1;
104 }
106 // perform the "reject" action
107 notification.notification.invokeAction(notification.actions.data(1, ActionModel.RoleActionId));
109 notification.notification.close();
110 }
112 Behavior on x {
113 UbuntuNumberAnimation { easing.type: Easing.OutBounce }
114 }
116 onHintsChanged: {
117 if (type === Notification.Confirmation && opacity == defaultOpacity && hints["suppress-sound"] !== "true" && sound.source !== "") {
118 sound.play();
119 }
120 }
122 onFullscreenChanged: {
123 if (fullscreen) {
124 notification.notification.urgency = Notification.Critical;
125 }
126 ListView.view.topmostIsFullscreen = fullscreen;
127 }
129 Behavior on implicitHeight {
130 enabled: !fullscreen
131 UbuntuNumberAnimation {
132 duration: UbuntuAnimation.SnapDuration
133 }
134 }
136 visible: type !== Notification.PlaceHolder
138 BorderImage {
139 anchors {
140 fill: contents
141 margins: shapedBack.visible ? -units.gu(1) : -units.gu(1.5)
142 }
143 source: "../Stages/graphics/dropshadow2gu.sci"
144 opacity: notification.opacity * 0.5
145 enabled: !fullscreen
146 }
148 UbuntuShape {
149 id: shapedBack
150 objectName: "shapedBack"
152 visible: !fullscreen
153 anchors {
154 fill: parent
155 leftMargin: notification.margins
156 rightMargin: notification.margins
157 topMargin: index == 0 ? notification.margins : 0
158 }
159 backgroundColor: parent.color
160 radius: "small"
161 aspect: UbuntuShape.Flat
162 }
164 Rectangle {
165 id: nonShapedBack
167 visible: fullscreen
168 anchors.fill: parent
169 color: parent.color
170 }
172 onXChanged: {
173 if (Math.abs(notification.x) > 0.75 * notification.width) {
174 closeNotification();
175 }
176 }
178 Item {
179 id: contents
180 anchors.fill: fullscreen ? nonShapedBack : shapedBack
182 UnityMenuModelPaths {
183 id: paths
185 source: hints["x-canonical-private-menu-model"]
187 busNameHint: "busName"
188 actionsHint: "actions"
189 menuObjectPathHint: "menuPath"
190 }
192 UnityMenuModel {
193 id: unityMenuModel
195 property string lastNameOwner: ""
197 busName: paths.busName
198 actions: paths.actions
199 menuObjectPath: paths.menuObjectPath
200 onNameOwnerChanged: {
201 if (lastNameOwner !== "" && nameOwner === "" && notification.notification !== undefined) {
202 notification.notification.close()
203 }
204 lastNameOwner = nameOwner
205 }
206 }
208 MouseArea {
209 id: interactiveArea
211 anchors.fill: parent
212 objectName: "interactiveArea"
214 drag.target: !fullscreen ? notification : undefined
215 drag.axis: Drag.XAxis
216 drag.minimumX: -notification.width
217 drag.maximumX: notification.width
218 hoverEnabled: true
220 onClicked: {
221 if (notification.type === Notification.Interactive) {
222 notification.notification.invokeAction(actionRepeater.itemAt(0).actionId)
223 } else {
224 notification.ListView.view.currentIndex = index;
225 }
226 }
227 onReleased: {
228 if (Math.abs(notification.x) < notification.width / 2) {
229 notification.x = 0
230 } else {
231 notification.x = notification.width
232 }
233 }
234 }
236 NotificationButton {
237 objectName: "closeButton"
238 width: units.gu(2)
239 height: width
240 radius: width / 2
241 visible: hasMouse && (containsMouse || interactiveArea.containsMouse)
242 iconName: "close"
243 outline: false
244 hoverEnabled: true
245 color: theme.palette.normal.negative
246 anchors.horizontalCenter: parent.left
247 anchors.horizontalCenterOffset: notification.parent.state === "narrow" ? notification.margins / 2 : 0
248 anchors.verticalCenter: parent.top
249 anchors.verticalCenterOffset: notification.parent.state === "narrow" ? notification.margins / 2 : 0
251 onClicked: closeNotification();
252 }
254 Column {
255 id: outterColumn
256 objectName: "outterColumn"
258 anchors {
259 left: parent.left
260 right: parent.right
261 top: parent.top
262 margins: !fullscreen ? notification.margins : 0
263 }
265 spacing: notification.margins
267 Row {
268 id: topRow
270 spacing: notification.margins
271 anchors {
272 left: parent.left
273 right: parent.right
274 }
276 ShapedIcon {
277 id: icon
279 objectName: "icon"
280 width: units.gu(6)
281 height: width
282 shaped: notification.hints["x-canonical-non-shaped-icon"] !== "true"
283 visible: iconSource !== "" && type !== Notification.Confirmation
284 }
286 Column {
287 id: labelColumn
288 width: secondaryIcon.visible ? parent.width - x - units.gu(3) : parent.width - x
289 anchors.verticalCenter: (icon.visible && !bodyLabel.visible) ? icon.verticalCenter : undefined
290 spacing: units.gu(.4)
292 Label {
293 id: summaryLabel
295 objectName: "summaryLabel"
296 anchors {
297 left: parent.left
298 right: parent.right
299 }
300 visible: type !== Notification.Confirmation
301 fontSize: "medium"
302 font.weight: Font.Light
303 color: theme.palette.normal.backgroundSecondaryText
304 elide: Text.ElideRight
305 textFormat: Text.PlainText
306 }
308 Label {
309 id: bodyLabel
311 objectName: "bodyLabel"
312 anchors {
313 left: parent.left
314 right: parent.right
315 }
316 visible: body != "" && type !== Notification.Confirmation
317 fontSize: "small"
318 font.weight: Font.Light
319 color: theme.palette.normal.backgroundTertiaryText
320 wrapMode: Text.Wrap
321 maximumLineCount: type === Notification.SnapDecision ? 12 : 2
322 elide: Text.ElideRight
323 textFormat: Text.PlainText
324 lineHeight: 1.1
325 }
326 }
328 Image {
329 id: secondaryIcon
331 objectName: "secondaryIcon"
332 width: units.gu(2)
333 height: width
334 visible: status === Image.Ready
335 fillMode: Image.PreserveAspectCrop
336 }
337 }
339 ListItem.ThinDivider {
340 visible: type === Notification.SnapDecision && notification.expanded
341 }
343 Icon {
344 name: "toolkit_chevron-down_3gu"
345 visible: type === Notification.SnapDecision && !notification.expanded
346 width: units.gu(2)
347 height: width
348 anchors.horizontalCenter: parent.horizontalCenter
349 color: theme.palette.normal.base
350 }
352 ShapedIcon {
353 id: centeredIcon
354 objectName: "centeredIcon"
355 width: units.gu(4)
356 height: width
357 shaped: notification.hints["x-canonical-non-shaped-icon"] !== "true"
358 fileSource: icon.fileSource
359 visible: fileSource !== "" && type === Notification.Confirmation
360 anchors.horizontalCenter: parent.horizontalCenter
361 }
363 Label {
364 id: valueLabel
365 objectName: "valueLabel"
366 text: body
367 anchors.horizontalCenter: parent.horizontalCenter
368 visible: type === Notification.Confirmation && body !== ""
369 fontSize: "medium"
370 font.weight: Font.Light
371 color: theme.palette.normal.backgroundSecondaryText
372 wrapMode: Text.WordWrap
373 maximumLineCount: 1
374 elide: Text.ElideRight
375 textFormat: Text.PlainText
376 }
378 ProgressBar {
379 id: valueIndicator
380 objectName: "valueIndicator"
381 visible: type === Notification.Confirmation
382 minimumValue: 0
383 maximumValue: 100
384 showProgressPercentage: false
385 anchors {
386 left: parent.left
387 right: parent.right
388 }
389 height: units.gu(1)
390 }
392 Column {
393 id: dialogColumn
394 objectName: "dialogListView"
395 spacing: notification.margins
397 visible: count > 0 && (notification.expanded || notification.fullscreen)
399 anchors {
400 left: parent.left
401 right: parent.right
402 top: fullscreen ? parent.top : undefined
403 bottom: fullscreen ? parent.bottom : undefined
404 }
406 Repeater {
407 model: unityMenuModel
409 NotificationMenuItemFactory {
410 id: menuItemFactory
412 anchors {
413 left: dialogColumn.left
414 right: dialogColumn.right
415 }
417 menuModel: unityMenuModel
418 menuData: model
419 menuIndex: index
420 maxHeight: notification.maxHeight
421 background: notification.background
423 onLoaded: {
424 notification.fullscreen = Qt.binding(function() { return fullscreen; });
425 }
426 onAccepted: {
427 notification.notification.invokeAction(actionRepeater.itemAt(0).actionId)
428 }
429 }
430 }
431 }
433 Column {
434 id: oneOverTwoCase
436 anchors {
437 left: parent.left
438 right: parent.right
439 }
441 spacing: notification.margins
443 visible: notification.type === Notification.SnapDecision && oneOverTwoRepeaterTop.count === 3 && notification.expanded
445 Repeater {
446 id: oneOverTwoRepeaterTop
448 model: notification.actions
449 delegate: Loader {
450 id: oneOverTwoLoaderTop
452 property string actionId: id
453 property string actionLabel: label
455 Component {
456 id: oneOverTwoButtonTop
458 NotificationButton {
459 objectName: "notify_oot_button" + index
460 width: oneOverTwoCase.width
461 text: oneOverTwoLoaderTop.actionLabel
462 outline: notification.hints["x-canonical-private-affirmative-tint"] !== "true"
463 color: notification.hints["x-canonical-private-affirmative-tint"] === "true" ? theme.palette.normal.positive
464 : theme.palette.normal.foreground
465 onClicked: notification.notification.invokeAction(oneOverTwoLoaderTop.actionId)
466 }
467 }
468 sourceComponent: index == 0 ? oneOverTwoButtonTop : undefined
469 }
470 }
472 Row {
473 spacing: notification.margins
475 Repeater {
476 id: oneOverTwoRepeaterBottom
478 model: notification.actions
479 delegate: Loader {
480 id: oneOverTwoLoaderBottom
482 property string actionId: id
483 property string actionLabel: label
485 Component {
486 id: oneOverTwoButtonBottom
488 NotificationButton {
489 objectName: "notify_oot_button" + index
490 width: oneOverTwoCase.width / 2 - spacing / 2
491 text: oneOverTwoLoaderBottom.actionLabel
492 outline: notification.hints["x-canonical-private-rejection-tint"] !== "true"
493 color: index == 1 && notification.hints["x-canonical-private-rejection-tint"] === "true" ? theme.palette.normal.negative
494 : theme.palette.normal.foreground
495 onClicked: notification.notification.invokeAction(oneOverTwoLoaderBottom.actionId)
496 }
497 }
498 sourceComponent: (index == 1 || index == 2) ? oneOverTwoButtonBottom : undefined
499 }
500 }
501 }
502 }
504 Row {
505 id: buttonRow
507 objectName: "buttonRow"
508 anchors {
509 left: parent.left
510 right: parent.right
511 }
512 visible: notification.type === Notification.SnapDecision && actionRepeater.count > 0 && !oneOverTwoCase.visible && notification.expanded
513 spacing: notification.margins
514 layoutDirection: Qt.RightToLeft
516 Loader {
517 id: notifySwipeButtonLoader
518 active: notification.hints["x-canonical-snap-decisions-swipe"] === "true"
520 sourceComponent: SwipeToAct {
521 objectName: "notify_swipe_button"
522 width: buttonRow.width
523 leftIconName: "call-end"
524 rightIconName: "call-start"
525 clickToAct: notification.hasMouse
526 onRightTriggered: {
527 notification.notification.invokeAction(notification.actions.data(0, ActionModel.RoleActionId))
528 }
530 onLeftTriggered: {
531 notification.notification.invokeAction(notification.actions.data(1, ActionModel.RoleActionId))
532 }
533 }
534 }
536 Repeater {
537 id: actionRepeater
538 model: notification.actions
539 delegate: Loader {
540 id: loader
542 property string actionId: id
543 property string actionLabel: label
544 active: !notifySwipeButtonLoader.active
546 Component {
547 id: actionButton
549 NotificationButton {
550 objectName: "notify_button" + index
551 width: buttonRow.width / 2 - spacing / 2
552 text: loader.actionLabel
553 outline: (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] !== "true") ||
554 (index == 1 && notification.hints["x-canonical-private-rejection-tint"] !== "true")
555 color: {
556 var result = theme.palette.normal.foreground;
557 if (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] === "true") {
558 result = theme.palette.normal.positive;
559 }
560 if (index == 1 && notification.hints["x-canonical-private-rejection-tint"] === "true") {
561 result = theme.palette.normal.negative;
562 }
563 return result;
564 }
565 onClicked: notification.notification.invokeAction(loader.actionId)
566 }
567 }
568 sourceComponent: (index == 0 || index == 1) ? actionButton : undefined
569 }
570 }
571 }
573 OptionToggle {
574 id: optionToggle
575 objectName: "notify_button2"
576 width: parent.width
577 anchors {
578 left: parent.left
579 right: parent.right
580 }
582 visible: notification.type === Notification.SnapDecision && actionRepeater.count > 3 && !oneOverTwoCase.visible && notification.expanded
583 model: notification.actions
584 expanded: false
585 startIndex: 2
586 onTriggered: {
587 notification.notification.invokeAction(id)
588 }
589 }
590 }
591 }