fix: adjust ui for notification

18202781743 · 18202781743 · commit e5ff176a30c0 · 2024-12-07T15:03:44.000+08:00
Using OverlapIndicator to display overlap for notification.
Drop NotifyItemBackground's blur(it can't work), and adjust it's
opacity to from 0.7 to 1.
Drop blur of NotificationCenter.
Drop window's blur, and window is transparent.

pms: BUG-284903
diff --git a/panels/notification/bubble/package/Bubble.qml b/panels/notification/bubble/package/Bubble.qml
@@ -8,8 +8,9 @@ import QtQuick.Controls 2.15
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
-D.Control {
+Control {
     id: control
+    height: loader.height
     property var bubble
     onHoveredChanged: function () {
         if (control.hovered) {
@@ -19,7 +20,9 @@ D.Control {
         }
     }
 
-    contentItem:  Loader {
+    Loader {
+        id: loader
+        width: control.width
         sourceComponent: bubble.level <= 1 ? normalCom : overlayCom
     }
     Component {
@@ -34,8 +37,4 @@ D.Control {
             bubble: control.bubble
         }
     }
-
-    z: bubble.level <= 1 ? 0 : 1 - bubble.level
-
-    // background: D.FloatingPanel { }
 }
diff --git a/panels/notification/bubble/package/NormalBubble.qml b/panels/notification/bubble/package/NormalBubble.qml
@@ -9,40 +9,26 @@ import org.deepin.ds 1.0
 import org.deepin.ds.notification 1.0
 import org.deepin.dtk 1.0 as D
 
-D.Control {
+NotifyItemContent {
     id: control
     property var bubble
 
-    contentItem: NotifyItemContent {
-        width: 360
-        appName: bubble.appName
-        iconName: bubble.iconName
-        date: bubble.timeTip
-        actions: bubble.actions
-        title: bubble.summary
-        content: bubble.body
-        strongInteractive: bubble.urgency === 2
-        contentIcon: bubble.bodyImagePath
-        onRemove: function () {
-            console.log("remove notify", bubble.appName)
-            Applet.close(bubble.index)
-        }
-        onActionInvoked: function (actionId) {
-            console.log("action notify", bubble.appName, actionId)
-            Applet.invokeAction(bubble.index, actionId)
-        }
+    width: 360
+    appName: bubble.appName
+    iconName: bubble.iconName
+    date: bubble.timeTip
+    actions: bubble.actions
+    title: bubble.summary
+    content: bubble.body
+    strongInteractive: bubble.urgency === 2
+    contentIcon: bubble.bodyImagePath
+    onRemove: function () {
+        console.log("remove notify", bubble.appName)
+        Applet.close(bubble.index)
     }
-
-    z: bubble.level <= 1 ? 0 : 1 - bubble.level
-
-    background: Rectangle {
-        width: 360
-        radius: 12
-        opacity: {
-            if (bubble.level === 1)
-                return 0.8
-            return 1
-        }
+    onActionInvoked: function (actionId) {
+        console.log("action notify", bubble.appName, actionId)
+        Applet.invokeAction(bubble.index, actionId)
     }
 
     MouseArea {
diff --git a/panels/notification/bubble/package/OverlayBubble.qml b/panels/notification/bubble/package/OverlayBubble.qml
@@ -7,50 +7,35 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 import org.deepin.ds 1.0
+import org.deepin.ds.notification 1.0
 import org.deepin.dtk 1.0 as D
 
-D.Control {
+Item {
     id: control
     property var bubble
     readonly property int radius: 12
 
-    contentItem: ColumnLayout {
-        spacing: 0
-        Rectangle {
-            visible: bubble.level > 2
-            Layout.bottomMargin: -34
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: bubbleContent.width - 2 * control.radius
-            Layout.preferredHeight: 40
-            radius: control.radius
-            opacity: 0.8
-            z: control.z + control.z + 1
-        }
-
-        Rectangle {
-            Layout.bottomMargin: -34
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: bubbleContent.width - control.radius
-            Layout.preferredHeight: 40
-            radius: control.radius
-            opacity: 0.8
-            z: control.z + control.z + 1
-        }
-
-        NormalBubble {
-            id: bubbleContent
-            Layout.fillWidth: true
-            Layout.maximumWidth: 360
-            bubble: control.bubble
+    height: bubbleContent.height + indicator.height
+    OverlapIndicator {
+        id: indicator
+        width: parent.width
+        count: bubble.level - 1
+        revert: true
+        anchors {
+            top: parent.top
+            left: parent.left
+            leftMargin: radius
+            right: parent.right
+            rightMargin: radius
         }
     }
 
-    z: bubble.level <= 1 ? 0 : 1 - bubble.level
-
-    background: Rectangle {
-        implicitWidth: 200
-        radius: control.radius
-        opacity: 1
-        color: "transparent"
+    NormalBubble {
+        id: bubbleContent
+        width: parent.width
+        bubble: control.bubble
+        anchors {
+            top: indicator.bottom
+        }
     }
 }
diff --git a/panels/notification/bubble/package/main.qml b/panels/notification/bubble/package/main.qml
@@ -40,10 +40,10 @@ Window {
     DLayerShellWindow.bottomMargin: windowMargin(2)
     palette: DTK.palette
     ColorSelector.family: Palette.CrystalColor
-    DWindow.enabled: true
     DWindow.windowEffect: PlatformHandle.EffectNoBorder | PlatformHandle.EffectNoShadow
     color: "transparent"
     DWindow.windowRadius: 0
+    DWindow.enabled: false
     // DWindow.enableBlurWindow: true
     screen: Qt.application.screens[0]
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
@@ -58,6 +58,7 @@ Window {
         anchors {
             centerIn: parent
             margins: 10
+            topMargin: 15
         }
 
         spacing: 10
diff --git a/panels/notification/center/Main.qml b/panels/notification/center/Main.qml
diff --git a/panels/notification/center/OverlapNotify.qml b/panels/notification/center/OverlapNotify.qml
@@ -82,28 +82,4 @@ NotifyItem {
     }
     Keys.onEnterPressed: root.expand()
     Keys.onReturnPressed: root.expand()
-
-    component OverlapIndicator: Control {
-        id: overlap
-
-        required property var count
-
-        contentItem: ColumnLayout {
-            spacing: 0
-            Repeater {
-                model: overlap.count
-
-                delegate: NotifyItemBackground {
-                    Layout.topMargin: -overlapItemRadius
-                    Layout.alignment: Qt.AlignHCenter
-                    Layout.preferredWidth: overlap.width - (index) * overlapItemRadius *2
-                    Layout.preferredHeight: overlapItemRadius * 2
-                    radius: overlapItemRadius
-                    z: -index
-                }
-            }
-        }
-
-        background: BoundingRectangle {}
-    }
 }
diff --git a/panels/notification/center/package/main.qml b/panels/notification/center/package/main.qml
@@ -42,13 +42,14 @@ Window {
     DLayerShellWindow.bottomMargin: windowMargin(2) + 10
     palette: DTK.palette
     ColorSelector.family: Palette.CrystalColor
-    DWindow.enabled: true
     DWindow.windowEffect: PlatformHandle.EffectNoBorder | PlatformHandle.EffectNoShadow
-    DWindow.windowRadius: DTK.platformTheme.windowRadius
+    // DWindow.windowRadius: DTK.platformTheme.windowRadius
     // DWindow.enableSystemResize: false
     // DWindow.enableSystemMove: false
+    DWindow.windowRadius: 0
+    DWindow.enabled: false
     color: "transparent"
-    DWindow.enableBlurWindow: true
+    // DWindow.enableBlurWindow: true
     screen: Qt.application.screens[0]
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
     onScreenChanged: {
diff --git a/panels/notification/plugin/CMakeLists.txt b/panels/notification/plugin/CMakeLists.txt
@@ -17,6 +17,7 @@ qt_add_qml_module(notificationplugin
         NotifyItemContent.qml
         NotifyAction.qml
         SettingActionButton.qml
+        OverlapIndicator.qml
     OUTPUT_DIRECTORY
         ${PROJECT_BINARY_DIR}/plugins/org/deepin/ds/notification/
 )
diff --git a/panels/notification/plugin/NotifyAction.qml b/panels/notification/plugin/NotifyAction.qml
@@ -75,6 +75,16 @@ Control {
             actionInvoked(actionData.id)
         }
 
+        Loader {
+            anchors.fill: parent
+            active: actionButton.activeFocus
+
+            sourceComponent: FocusBoxBorder {
+                radius: 6
+                color: palette.highlight
+            }
+        }
+
         background: NotifyItemBackground {
             implicitHeight: 30
             implicitWidth: 50
diff --git a/panels/notification/plugin/NotifyItemBackground.qml b/panels/notification/plugin/NotifyItemBackground.qml
@@ -6,19 +6,22 @@ import QtQuick
 import org.deepin.dtk 1.0
 import org.deepin.ds.notification
 
-FloatingPanel {
-    id: root
-    radius: 12
-    backgroundColor: Palette {
+Control {
+    id: control
+
+    padding: radius / 2
+
+    property int radius: 12
+    property Palette backgroundColor: Palette {
         normal {
             common: ("transparent")
-            crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.7)
+            crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 1)
         }
         normalDark {
-            crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7)
+            crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 1)
         }
     }
-    insideBorderColor: Palette {
+    property Palette insideBorderColor: Palette {
         normal {
             common: ("transparent")
             crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.2)
@@ -27,7 +30,7 @@ FloatingPanel {
             crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.1)
         }
     }
-    outsideBorderColor: Palette {
+    property Palette outsideBorderColor: Palette {
         normal {
             common: ("transparent")
             crystal: Qt.rgba(0, 0, 0, 0.1)
@@ -36,7 +39,7 @@ FloatingPanel {
             crystal: Qt.rgba(0, 0, 0, 0.6)
         }
     }
-    dropShadowColor: Palette {
+    property Palette dropShadowColor: Palette {
         normal {
             common: ("transparent")
             crystal: Qt.rgba(0, 0, 0, 0.2)
@@ -45,4 +48,49 @@ FloatingPanel {
             crystal: Qt.rgba(0, 0, 0, 0.4)
         }
     }
+
+    background: Item {
+        id: blur
+        implicitWidth: 180
+        implicitHeight: 40
+
+        Loader {
+            anchors.fill: backgroundRect
+            active: control.dropShadowColor
+            sourceComponent: BoxShadow {
+                shadowOffsetX: 0
+                shadowOffsetY: 6
+                shadowColor: control.ColorSelector.dropShadowColor
+                shadowBlur: 20
+                cornerRadius: backgroundRect.radius
+                spread: 0
+                hollow: true
+            }
+        }
+
+        Rectangle {
+            id: backgroundRect
+            anchors.fill: parent
+            radius: control.radius
+            color: control.ColorSelector.backgroundColor
+        }
+
+        Loader {
+            anchors.fill: backgroundRect
+            active: control.insideBorderColor && control.ColorSelector.controlTheme === ApplicationHelper.DarkType
+            sourceComponent: InsideBoxBorder {
+                radius: backgroundRect.radius
+                color: control.ColorSelector.insideBorderColor
+            }
+        }
+
+        Loader {
+            anchors.fill: backgroundRect
+            active: control.outsideBorderColor
+            sourceComponent: OutsideBoxBorder {
+                radius: backgroundRect.radius
+                color: control.ColorSelector.outsideBorderColor
+            }
+        }
+    }
 }
diff --git a/panels/notification/plugin/NotifyItemContent.qml b/panels/notification/plugin/NotifyItemContent.qml
diff --git a/panels/notification/plugin/OverlapIndicator.qml b/panels/notification/plugin/OverlapIndicator.qml

Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,9 @@ import QtQuick.Controls 2.15`
`8`	`8`	`import org.deepin.ds 1.0`
`9`	`9`	`import org.deepin.dtk 1.0 as D`
`10`	`10`
`11`		`-D.Control {`
	`11`	`+Control {`
`12`	`12`	`id: control`
	`13`	`+ height: loader.height`
`13`	`14`	`property var bubble`
`14`	`15`	`onHoveredChanged: function () {`
`15`	`16`	`if (control.hovered) {`
`@@ -19,7 +20,9 @@ D.Control {`
`19`	`20`	`}`
`20`	`21`	`}`
`21`	`22`
`22`		`- contentItem: Loader {`
	`23`	`+ Loader {`
	`24`	`+ id: loader`
	`25`	`+ width: control.width`
`23`	`26`	`sourceComponent: bubble.level <= 1 ? normalCom : overlayCom`
`24`	`27`	`}`
`25`	`28`	`Component {`
`@@ -34,8 +37,4 @@ D.Control {`
`34`	`37`	`bubble: control.bubble`
`35`	`38`	`}`
`36`	`39`	`}`
`37`		`-`
`38`		`- z: bubble.level <= 1 ? 0 : 1 - bubble.level`
`39`		`-`
`40`		`- // background: D.FloatingPanel { }`
`41`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ qt_add_qml_module(notificationplugin`
`17`	`17`	`NotifyItemContent.qml`
`18`	`18`	`NotifyAction.qml`
`19`	`19`	`SettingActionButton.qml`
	`20`	`+ OverlapIndicator.qml`
`20`	`21`	`OUTPUT_DIRECTORY`
`21`	`22`	`${PROJECT_BINARY_DIR}/plugins/org/deepin/ds/notification/`
`22`	`23`	`)`