notifications working (totally) perfectly
This commit is contained in:
55
Bar/Center/Expanded.qml
Normal file
55
Bar/Center/Expanded.qml
Normal file
@@ -0,0 +1,55 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import "../../Color.js" as Colors
|
||||
import "../../Components/"
|
||||
import "../../Services/"
|
||||
|
||||
Item {
|
||||
id: fullTimeRoot
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: 30
|
||||
|
||||
gradient: MidpointGradient {
|
||||
color: Colors.red
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: timeColumnContainer
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
Column {
|
||||
id: timeColumn
|
||||
|
||||
spacing: 5
|
||||
|
||||
anchors {
|
||||
centerIn: parent
|
||||
}
|
||||
|
||||
StyledText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Colors.surface0
|
||||
text: Time.time
|
||||
|
||||
font {
|
||||
pointSize: 30
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Colors.surface1
|
||||
text: Time.date
|
||||
|
||||
font {
|
||||
pointSize: 9
|
||||
weight: 400
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
Bar/Center/NotificationDisplay.qml
Normal file
47
Bar/Center/NotificationDisplay.qml
Normal file
@@ -0,0 +1,47 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Services.Notifications
|
||||
import "../../Color.js" as Colors
|
||||
import "../../Components/"
|
||||
import "../../Services/"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property string body
|
||||
required property string summary
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: 30
|
||||
|
||||
gradient: MidpointGradient {
|
||||
color: Colors.green
|
||||
midpoint: 0.7
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: 5
|
||||
|
||||
StyledText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
font.pointSize: 11
|
||||
text: root.summary
|
||||
}
|
||||
|
||||
StyledText {
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: root.body
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
width: root.width - 20
|
||||
|
||||
font {
|
||||
pointSize: 10
|
||||
weight: 500
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
302
Bar/Center/NotificationList.qml
Normal file
302
Bar/Center/NotificationList.qml
Normal file
@@ -0,0 +1,302 @@
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import Quickshell
|
||||
import Quickshell.Services.Notifications
|
||||
import "../../Color.js" as Colors
|
||||
import "../../Components/"
|
||||
import "../../Services/"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property bool animEnabled
|
||||
required property double radius
|
||||
required property string rootState
|
||||
required property NotificationServer server
|
||||
|
||||
Behavior on anchors.topMargin {
|
||||
enabled: root.animEnabled
|
||||
|
||||
SpringAnimation {
|
||||
damping: 0.35
|
||||
spring: 4
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: ""
|
||||
when: root.rootState != "notifications"
|
||||
|
||||
PropertyChanges {
|
||||
root.anchors.topMargin: root.parent.height - 21
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "expanded"
|
||||
when: root.rootState == "notifications"
|
||||
|
||||
PropertyChanges {
|
||||
root.anchors.topMargin: 5
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
topMargin: parent.height - 21
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: background
|
||||
|
||||
anchors.fill: parent
|
||||
color: Colors.surface0
|
||||
radius: root.radius - 3
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: ""
|
||||
when: root.rootState != "notifications"
|
||||
|
||||
PropertyChanges {}
|
||||
},
|
||||
State {
|
||||
name: "expanded"
|
||||
when: root.rootState == "notifications"
|
||||
|
||||
PropertyChanges {
|
||||
background.anchors.bottomMargin: 5
|
||||
background.anchors.leftMargin: 5
|
||||
background.anchors.rightMargin: 5
|
||||
}
|
||||
|
||||
StateChangeScript {
|
||||
script: {
|
||||
console.log("some");
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
anchors {
|
||||
bottomMargin: 15
|
||||
leftMargin: 20
|
||||
rightMargin: 20
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: notifListContainer
|
||||
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
opacity: 0
|
||||
|
||||
anchors {
|
||||
bottomMargin: 5
|
||||
leftMargin: 5
|
||||
rightMargin: 5
|
||||
topMargin: 5
|
||||
}
|
||||
|
||||
CenteredText {
|
||||
color: Colors.overlay0
|
||||
text: "No Notifications"
|
||||
visible: root.server.trackedNotifications.values.length <= 0
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: notifScrollingList
|
||||
|
||||
anchors.fill: parent
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
height: Math.min(contentHeight, parent.height)
|
||||
implicitHeight: background.height
|
||||
model: root.server.trackedNotifications.values.length
|
||||
spacing: 7
|
||||
|
||||
// verticalLayoutDirection: ListView.BottomToTop
|
||||
|
||||
delegate: Item {
|
||||
id: notifRoot
|
||||
|
||||
property Notification currentNotif: root.server.trackedNotifications.values[(notifRoot.notifLen
|
||||
- 1) - index]
|
||||
required property real index
|
||||
property real notifLen: root.server.trackedNotifications.values.length
|
||||
|
||||
height: 50
|
||||
width: ListView.view.width
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: ""
|
||||
when: notifHover.hovered == false
|
||||
},
|
||||
State {
|
||||
name: "hovered"
|
||||
when: notifHover.hovered == false
|
||||
|
||||
PropertyChanges {}
|
||||
}
|
||||
]
|
||||
|
||||
HoverHandler {
|
||||
id: notifHover
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dismissButton
|
||||
|
||||
color: Colors.red
|
||||
implicitWidth: 100
|
||||
radius: 10
|
||||
|
||||
Behavior on anchors.rightMargin {
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: ""
|
||||
when: notifHover.hovered == false
|
||||
},
|
||||
State {
|
||||
name: "hovered"
|
||||
when: notifHover.hovered == true
|
||||
|
||||
PropertyChanges {
|
||||
dismissButton.anchors.rightMargin: 5
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
TapHandler {
|
||||
onTapped: {
|
||||
notifRoot.currentNotif.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 3
|
||||
right: parent.right
|
||||
rightMargin: 10
|
||||
top: parent.top
|
||||
topMargin: 3
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: textContainer
|
||||
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
color: Colors.surface2
|
||||
radius: 9
|
||||
|
||||
Behavior on anchors.rightMargin {
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: ""
|
||||
when: notifHover.hovered == false
|
||||
},
|
||||
State {
|
||||
name: "hovered"
|
||||
when: notifHover.hovered == true
|
||||
|
||||
PropertyChanges {
|
||||
textContainer.anchors.rightMargin: 40
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Column {
|
||||
id: textColumn
|
||||
|
||||
anchors {
|
||||
centerIn: parent
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
|
||||
StyledText {
|
||||
color: Colors.text
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: notifRoot.currentNotif.summary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
width: notifRoot.width - 10
|
||||
}
|
||||
|
||||
StyledText {
|
||||
color: Colors.subtext1
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: notifRoot.currentNotif.body
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
width: notifRoot.width - 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
anchors {
|
||||
bottomMargin: 5
|
||||
leftMargin: 10
|
||||
rightMargin: 10
|
||||
topMargin: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MultiEffect {
|
||||
id: notifListClipper
|
||||
|
||||
anchors.fill: notifListContainer
|
||||
maskEnabled: true
|
||||
maskSource: clipsource
|
||||
opacity: 0
|
||||
source: notifListContainer
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: ""
|
||||
when: root.rootState != "notifications"
|
||||
|
||||
PropertyChanges {
|
||||
notifListClipper.opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "expanded"
|
||||
when: root.rootState == "notifications"
|
||||
|
||||
PropertyChanges {
|
||||
notifListClipper.opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: clipsource
|
||||
|
||||
anchors.fill: background
|
||||
color: "black"
|
||||
layer.enabled: true
|
||||
radius: background.radius
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user