MORE ANIMATION FIX AAAAAA

This commit is contained in:
end-4
2025-04-20 09:46:13 +02:00
parent b5a9e01455
commit 11ff4bbfaf
4 changed files with 209 additions and 145 deletions
@@ -38,6 +38,12 @@ Item {
destroyTimer0.start()
}
function toggleExpanded() {
root.enableAnimation = true
notificationRowWrapper.anchors.bottom = undefined
root.expanded = !root.expanded
}
Timer {
id: destroyTimer0
interval: 0
@@ -83,7 +89,7 @@ Item {
if (mouse.button == Qt.MiddleButton)
Notifications.discardNotification(notificationObject.id);
else if (mouse.button == Qt.RightButton)
root.expanded = !root.expanded;
root.toggleExpanded()
}
}
@@ -95,6 +101,7 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
// anchors.top: parent.top
anchors.topMargin: notificationListSpacing
implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing
@@ -103,6 +110,7 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
// anchors.top: parent.top
height: notificationColumnLayout.implicitHeight
color: (notificationObject.urgency == NotificationUrgency.Critical) ?
@@ -116,6 +124,13 @@ Item {
easing.type: Appearance.animation.elementDecel.type
}
}
Behavior on height {
enabled: enableAnimation
NumberAnimation {
duration: Appearance.animation.elementDecelFast.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
}
@@ -125,6 +140,7 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
// anchors.top: parent.top
implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing
Behavior on x {
@@ -140,172 +156,186 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
RowLayout {
id: notificationRowLayout
Layout.fillWidth: true
Rectangle { // App icon
id: iconRectangle
implicitWidth: 47
implicitHeight: 47
Layout.leftMargin: 10
Layout.topMargin: 10
Layout.bottomMargin: 10
Layout.alignment: Qt.AlignTop
Layout.fillWidth: false
radius: Appearance.rounding.full
color: Appearance.m3colors.m3secondaryContainer
MaterialSymbol {
visible: notificationObject.appIcon == ""
text: (notificationObject.urgency == NotificationUrgency.Critical) ? "release_alert" :
NotificationUtils.guessMessageType(notificationObject.summary)
anchors.fill: parent
color: (notificationObject.urgency == NotificationUrgency.Critical) ?
Appearance.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) :
Appearance.m3colors.m3onSecondaryContainer
font.pixelSize: 27
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
spacing: 0
Item {
Layout.fillWidth: true
implicitHeight: notificationRowLayout.implicitHeight
Behavior on implicitHeight {
enabled: enableAnimation
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
IconImage {
visible: notificationObject.image == "" && notificationObject.appIcon != ""
anchors.centerIn: parent
implicitSize: 33
asynchronous: true
source: Quickshell.iconPath(notificationObject.appIcon)
}
Item {
anchors.fill: parent
visible: notificationObject.image != ""
Image {
id: notifImage
}
RowLayout {
id: notificationRowLayout
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
Rectangle { // App icon
id: iconRectangle
implicitWidth: 47
implicitHeight: 47
Layout.leftMargin: 10
Layout.topMargin: 10
Layout.bottomMargin: 10
Layout.alignment: Qt.AlignTop
Layout.fillWidth: false
radius: Appearance.rounding.full
color: Appearance.m3colors.m3secondaryContainer
MaterialSymbol {
visible: notificationObject.appIcon == ""
text: (notificationObject.urgency == NotificationUrgency.Critical) ? "release_alert" :
NotificationUtils.guessMessageType(notificationObject.summary)
anchors.fill: parent
readonly property int size: parent.width
source: notificationObject?.image
fillMode: Image.PreserveAspectCrop
cache: false
antialiasing: true
asynchronous: true
width: size
height: size
sourceSize.width: size
sourceSize.height: size
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: notifImage.size
height: notifImage.size
radius: Appearance.rounding.full
}
}
color: (notificationObject.urgency == NotificationUrgency.Critical) ?
Appearance.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) :
Appearance.m3colors.m3onSecondaryContainer
font.pixelSize: 27
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
IconImage {
visible: notificationObject.appIcon != ""
anchors.bottom: parent.bottom
anchors.right: parent.right
implicitSize: 23
visible: notificationObject.image == "" && notificationObject.appIcon != ""
anchors.centerIn: parent
implicitSize: 33
asynchronous: true
source: Quickshell.iconPath(notificationObject.appIcon)
}
}
}
ColumnLayout { // Notification content
spacing: 0
Layout.fillWidth: true
Item {
anchors.fill: parent
visible: notificationObject.image != ""
Image {
id: notifImage
RowLayout { // Row of summary, time and expand button
Layout.topMargin: 10
Layout.leftMargin: 10
Layout.rightMargin: 10
Layout.fillWidth: true
anchors.fill: parent
readonly property int size: parent.width
StyledText { // Summary
Layout.fillWidth: true
horizontalAlignment: Text.AlignLeft
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer2
text: notificationObject.summary
wrapMode: expanded ? Text.Wrap : Text.NoWrap
elide: Text.ElideRight
}
source: notificationObject?.image
fillMode: Image.PreserveAspectCrop
cache: false
antialiasing: true
asynchronous: true
Item { Layout.fillWidth: true }
width: size
height: size
sourceSize.width: size
sourceSize.height: size
StyledText { // Time
id: notificationTimeText
Layout.fillWidth: false
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignLeft
font.pixelSize: Appearance.font.pixelSize.smaller
color: Appearance.m3colors.m3outline
text: NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
Connections {
target: DateTime
function onTimeChanged() {
notificationTimeText.text = NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: notifImage.size
height: notifImage.size
radius: Appearance.rounding.full
}
}
}
IconImage {
visible: notificationObject.appIcon != ""
anchors.bottom: parent.bottom
anchors.right: parent.right
implicitSize: 23
asynchronous: true
source: Quickshell.iconPath(notificationObject.appIcon)
}
}
}
Button { // Expand button
Layout.alignment: Qt.AlignVCenter
id: expandButton
implicitWidth: 22
implicitHeight: 22
ColumnLayout { // Notification content
spacing: 0
Layout.fillWidth: true
PointingHandInteraction{}
onClicked: {
root.enableAnimation = true
root.expanded = !root.expanded
RowLayout { // Row of summary, time and expand button
Layout.topMargin: 10
Layout.leftMargin: 10
Layout.rightMargin: 10
Layout.fillWidth: true
StyledText { // Summary
Layout.fillWidth: true
horizontalAlignment: Text.AlignLeft
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer2
text: notificationObject.summary
wrapMode: expanded ? Text.Wrap : Text.NoWrap
elide: Text.ElideRight
}
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (expandButton.down) ? Appearance.colors.colLayer2Active : (expandButton.hovered ? Appearance.colors.colLayer2Hover : Appearance.transparentize(Appearance.colors.colLayer2, 1))
Item { Layout.fillWidth: true }
StyledText { // Time
id: notificationTimeText
Layout.fillWidth: false
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignLeft
font.pixelSize: Appearance.font.pixelSize.smaller
color: Appearance.m3colors.m3outline
text: NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
Connections {
target: DateTime
function onTimeChanged() {
notificationTimeText.text = NotificationUtils.getFriendlyNotifTimeString(notificationObject.time)
}
}
}
Button { // Expand button
Layout.alignment: Qt.AlignVCenter
id: expandButton
implicitWidth: 22
implicitHeight: 22
PointingHandInteraction{}
onClicked: {
root.toggleExpanded()
}
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (expandButton.down) ? Appearance.colors.colLayer2Active : (expandButton.hovered ? Appearance.colors.colLayer2Hover : Appearance.transparentize(Appearance.colors.colLayer2, 1))
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
contentItem: MaterialSymbol {
anchors.centerIn: parent
text: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer2
}
contentItem: MaterialSymbol {
anchors.centerIn: parent
text: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnLayer2
}
}
}
StyledText { // Notification body
Layout.fillWidth: true
Layout.leftMargin: 10
Layout.rightMargin: 10
Layout.bottomMargin: 10
clip: true
StyledText { // Notification body
Layout.fillWidth: true
Layout.leftMargin: 10
Layout.rightMargin: 10
Layout.bottomMargin: 10
clip: true
wrapMode: expanded ? Text.Wrap : Text.NoWrap
elide: Text.ElideRight
font.pixelSize: Appearance.font.pixelSize.small
horizontalAlignment: Text.AlignLeft
color: Appearance.m3colors.m3outline
// textFormat: Text.MarkdownText
text: notificationObject.body
wrapMode: expanded ? Text.Wrap : Text.NoWrap
elide: Text.ElideRight
font.pixelSize: Appearance.font.pixelSize.small
horizontalAlignment: Text.AlignLeft
color: Appearance.m3colors.m3outline
// textFormat: Text.MarkdownText
text: expanded ? notificationObject.body : notificationObject.body.split("\n")[0]
}
}
}
}
@@ -314,18 +344,39 @@ Item {
Flickable {
id: actionsFlickable
Layout.fillWidth: true
Layout.topMargin: -5
// Layout.topMargin: -5
Layout.leftMargin: 10
Layout.rightMargin: 10
Layout.bottomMargin: 10
implicitHeight: actionRowLayout.implicitHeight
Layout.bottomMargin: expanded ? 10 : 0
implicitHeight: expanded ? actionRowLayout.implicitHeight : 0
height: expanded ? actionRowLayout.implicitHeight : 0
contentWidth: actionRowLayout.implicitWidth
clip: true
visible: expanded
opacity: expanded ? 1 : 0
visible: opacity > 0
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
Behavior on height {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
Behavior on implicitHeight {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
RowLayout {
id: actionRowLayout
Layout.alignment: Qt.AlignBottom
Repeater {
id: actionRepeater
@@ -17,6 +17,17 @@ Rectangle {
property int currentTab: 0
property var tabButtonList: [{"icon": "notifications", "name": "Notifications"}, {"icon": "volume_up", "name": "Volume mixer"}]
Keys.onPressed: (event) => {
if (event.key === Qt.Key_PageDown || event.key === Qt.Key_PageUp) {
if (event.key === Qt.Key_PageDown) {
root.currentTab = Math.min(root.currentTab + 1, root.tabButtonList.length - 1)
} else if (event.key === Qt.Key_PageUp) {
root.currentTab = Math.max(root.currentTab - 1, 0)
}
event.accepted = true;
}
}
ColumnLayout {
anchors.margins: 5
anchors.fill: parent
@@ -75,7 +75,6 @@ Scope {
color: Appearance.colors.colLayer0
radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
focus: true
Keys.onPressed: (event) => {
if (event.key === Qt.Key_Escape) {
sidebarRoot.visible = false;
@@ -141,6 +140,7 @@ Scope {
// Center widget group
CenterWidgetGroup {
focus: sidebarRoot.visible
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
Layout.fillWidth: true
@@ -79,8 +79,8 @@ Item {
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
duration: Appearance.animation.menuDecel.duration
easing.type: Appearance.animation.menuDecel.type
}
}
@@ -130,6 +130,8 @@ Item {
Item { Layout.fillWidth: true }
NotificationStatusButton {
Layout.alignment: Qt.AlignVCenter
Layout.topMargin: 5
buttonIcon: "clear_all"
buttonText: "Clear"
onClicked: () => {