diff --git a/look-and-feel/contents/lockscreen/SimpleNotification.qml b/look-and-feel/contents/lockscreen/SimpleNotification.qml index 39d00151..a7563a93 100644 --- a/look-and-feel/contents/lockscreen/SimpleNotification.qml +++ b/look-and-feel/contents/lockscreen/SimpleNotification.qml @@ -21,6 +21,7 @@ import QtQuick.Layouts 1.1 import QtGraphicalEffects 1.12 import org.kde.plasma.components 2.0 as PlasmaComponents +import org.kde.plasma.components 3.0 as PlasmaComponents3 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.notificationmanager 1.1 as Notifications @@ -32,6 +33,7 @@ import "../components" // meant to be temporary, until the notifications components in plasma-workspace are available to used // https://invent.kde.org/plasma/plasma-workspace/-/blob/master/applets/notifications/package/contents/ui/NotificationItem.qml Item { + id: notificationItem property var notification anchors.left: parent.left @@ -39,7 +41,7 @@ Item { height: notifLayout.height + units.gridUnit opacity: 1 - Math.min(1, 1.5 * Math.abs(rect.x) / width) // opacity during dismiss swipe - + // notification Rectangle { id: rect @@ -52,10 +54,8 @@ Item { border.color: "#bdbdbd" border.width: 1 - - RowLayout { + ColumnLayout { id: notifLayout - height: textLayout.height anchors { left: parent.left leftMargin: units.gridUnit * 0.5 @@ -63,82 +63,124 @@ Item { rightMargin: units.gridUnit * 0.5 verticalCenter: parent.verticalCenter } - spacing: units.smallSpacing / 2 - - // notif body - ColumnLayout { - id: textLayout + RowLayout { Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - spacing: units.gridUnit / 2 - - Label { - text: notification.summary - color: "#212121" + spacing: units.smallSpacing / 2 + // notif body + ColumnLayout { + id: textLayout Layout.fillWidth: true - Layout.preferredHeight: implicitHeight - maximumLineCount: 3 - wrapMode: Text.WordWrap - elide: Text.ElideRight - font.pointSize: 11 + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + spacing: units.gridUnit / 2 + + Label { + text: notification.summary + color: "#212121" + Layout.fillWidth: true + Layout.preferredHeight: implicitHeight + maximumLineCount: 3 + wrapMode: Text.WordWrap + elide: Text.ElideRight + font.pointSize: 11 + } + Label { + text: notification.body + color: "#616161" + Layout.fillWidth: true + wrapMode: Text.WordWrap + elide: Text.ElideRight + font.pointSize: 10 + } } - Label { - text: notification.body - color: "#616161" - Layout.fillWidth: true - wrapMode: Text.WordWrap - elide: Text.ElideRight - font.pointSize: 10 + + // notification icon + Item { + id: iconContainer + + Layout.alignment: Qt.AlignVCenter | Qt.AlignRight + Layout.preferredWidth: units.iconSizes.large + Layout.preferredHeight: units.iconSizes.large + Layout.topMargin: units.smallSpacing + Layout.bottomMargin: units.smallSpacing + + visible: iconItem.active || imageItem.active + + PlasmaCore.IconItem { + id: iconItem + // don't show two identical icons + readonly property bool active: valid && source != notification.applicationIconSource + anchors.fill: parent + usesPlasmaTheme: false + smooth: true + source: { + let icon = notification.icon; + if (typeof icon !== "string") return ""; + if (icon === "dialog-information") return ""; + return icon; + } + visible: active + } + + KQCAddons.QImageItem { + id: imageItem + readonly property bool active: !null && nativeWidth > 0 + anchors.fill: parent + smooth: true + fillMode: KQCAddons.QImageItem.PreserveAspectFit + visible: active + image: typeof notification.icon === "object" ? notification.icon : undefined + } } } - - // notification icon - Item { - id: iconContainer - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - Layout.preferredWidth: units.iconSizes.large - Layout.preferredHeight: units.iconSizes.large - Layout.topMargin: units.smallSpacing - Layout.bottomMargin: units.smallSpacing + Flow { + id: actionsflow + Layout.fillWidth: true + spacing: units.smallSpacing + layoutDirection: Qt.RightToLeft + Repeater { + id: actionRepeater - visible: iconItem.active || imageItem.active + model: { + var buttons = []; + var actionNames = (notificationItem.notification.actionNames || []); + var actionLabels = (notificationItem.notification.actionLabels || []); + // HACK We want the actions to be right-aligned but Flow also reverses + for (var i = actionNames.length - 1; i >= 0; --i) { + buttons.push({ + actionName: actionNames[i], + label: actionLabels[i] + }); + } - PlasmaCore.IconItem { - id: iconItem - // don't show two identical icons - readonly property bool active: valid && source != notification.applicationIconSource - anchors.fill: parent - usesPlasmaTheme: false - smooth: true - source: { - let icon = notification.icon; - if (typeof icon !== "string") return ""; - if (icon === "dialog-information") return ""; - return icon; + return buttons; } - visible: active - } - KQCAddons.QImageItem { - id: imageItem - readonly property bool active: !null && nativeWidth > 0 - anchors.fill: parent - smooth: true - fillMode: KQCAddons.QImageItem.PreserveAspectFit - visible: active - image: typeof notification.icon === "object" ? notification.icon : undefined + PlasmaComponents3.ToolButton { + flat: false + // why does it spit "cannot assign undefined to string" when a notification becomes expired? + text: modelData.label || "" + + onClicked: { + notifModel.invokeAction(notificationItem.notification.notificationId, modelData.actionName); + } + } } } } - + // swipe gesture for dismissing notification (left/right) MouseArea { id: dismissSwipe anchors.fill: parent drag.axis: Drag.XAxis drag.target: rect - + onPressed: { + let pos = mapToItem(actionsflow, mouse.x, mouse.y); + if (actionsflow.childAt(pos.x, pos.y)) { + mouse.accepted = false; + } + } onReleased: { if (Math.abs(rect.x) > width / 2) { // dismiss notification when finished swipe notifModel.close(notification.id);