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