Add OpacityMask to fix mouse hover on round corner.
authorCamila <hello@camila.codes>
Mon, 27 Jul 2020 15:27:23 +0000 (17:27 +0200)
committerKevin Ottens <ervin@ipsquad.net>
Tue, 28 Jul 2020 09:19:22 +0000 (11:19 +0200)
- Fix for #2173.
- Removed the workaround for the left round corner which was also
fixed with the OpacityMask.

Signed-off-by: Camila <hello@camila.codes>
src/gui/tray/Window.qml

index 1efb8212ba61f01a17933c3787e0b13a948cfb21..c6be85c229c8a3730398bb9e10f7fd3d0e3f6c59 100644 (file)
@@ -75,6 +75,19 @@ Window {
         }\r
     }\r
 \r
+    OpacityMask {\r
+        anchors.fill: parent\r
+        source: ShaderEffectSource {\r
+            sourceItem: trayWindowBackground\r
+            hideSource: true\r
+        }\r
+        maskSource: Rectangle {\r
+            width: trayWindowBackground.width\r
+            height: trayWindowBackground.height\r
+            radius: trayWindowBackground.radius\r
+        }\r
+    }\r
+\r
     Rectangle {\r
         id: trayWindowBackground\r
 \r
@@ -90,7 +103,6 @@ Window {
             anchors.top:    trayWindowBackground.top\r
             height:         Style.trayWindowHeaderHeight\r
             width:          Style.trayWindowWidth\r
-            radius:         (Style.trayWindowRadius > 0) ? (Style.trayWindowRadius - 1) : 0\r
             color:          Style.ncBlue\r
 \r
             // The overlay rectangle below eliminates the rounded corners from the bottom of the header\r
@@ -271,51 +283,9 @@ Window {
                         }\r
                     }\r
 \r
-                    background:\r
-                        Item {\r
-                        id: leftHoverContainer\r
-\r
-                        height: Style.trayWindowHeaderHeight\r
-                        width:  Style.currentAccountButtonWidth\r
-                        Rectangle {\r
-                            width: Style.currentAccountButtonWidth / 2\r
-                            height: Style.trayWindowHeaderHeight / 2\r
-                            color: "transparent"\r
-                            clip: true\r
-                            Rectangle {\r
-                                width: Style.currentAccountButtonWidth\r
-                                height: Style.trayWindowHeaderHeight\r
-                                radius: Style.trayWindowRadius\r
-                                color: "white"\r
-                                opacity: 0.2\r
-                                visible: accountBtnMouseArea.containsMouse\r
-                            }\r
-                        }\r
-                        Rectangle {\r
-                            width: Style.currentAccountButtonWidth / 2\r
-                            height: Style.trayWindowHeaderHeight / 2\r
-                            anchors.bottom: leftHoverContainer.bottom\r
-                            color: "white"\r
-                            opacity: 0.2\r
-                            visible: accountBtnMouseArea.containsMouse\r
-                        }\r
-                        Rectangle {\r
-                            width: Style.currentAccountButtonWidth / 2\r
-                            height: Style.trayWindowHeaderHeight / 2\r
-                            anchors.right: leftHoverContainer.right\r
-                            color: "white"\r
-                            opacity: 0.2\r
-                            visible: accountBtnMouseArea.containsMouse\r
-                        }\r
-                        Rectangle {\r
-                            width: Style.currentAccountButtonWidth / 2\r
-                            height: Style.trayWindowHeaderHeight / 2\r
-                            anchors.right: leftHoverContainer.right\r
-                            anchors.bottom: leftHoverContainer.bottom\r
-                            color: "white"\r
-                            opacity: 0.2\r
-                            visible: accountBtnMouseArea.containsMouse\r
-                        }\r
+                    background: Rectangle {\r
+                        color: accountBtnMouseArea.containsMouse ? "white" : "transparent"\r
+                        opacity: 0.2\r
                     }\r
 \r
                     RowLayout {\r