Merge pull request #28365 from mathesoncalum/27798-blurry_percussion_pads

Fix #27798: Blurry percussion panel pads

Author: mathesoncalum

src/notation/qml/MuseScore/NotationScene/internal/PercussionPanelPad.qml

@@ -23,7 +23,6 @@ import QtQuick 2.15
 
 import Muse.Ui 1.0
 import Muse.UiComponents 1.0
-import Muse.GraphicalEffects 1.0
 import MuseScore.NotationScene 1.0
 
 DropArea {
@@ -186,20 +185,12 @@ DropArea {
             // Loads either an empty slot or the pad content
             id: padLoader
 
+            readonly property real cornerRadius: swappableArea.radius - padLoader.anchors.margins
+
             anchors.fill: parent
             // Defined as 1 in the spec, but causes some aliasing in practice...
             anchors.margins: 2 + swappableArea.border.width
 
-            // Can't simply use clip as this won't take into account radius...
-            layer.enabled: ui.isEffectsAllowed
-            layer.effect: EffectOpacityMask {
-                maskSource: Rectangle {
-                    width: padLoader.width
-                    height: padLoader.height
-                    radius: swappableArea.radius - padLoader.anchors.margins
-                }
-            }
-
             sourceComponent: Boolean(root.padModel) ? padContentComponent : emptySlotComponent
 
             Component {
@@ -217,6 +208,8 @@ DropArea {
 
                     padSwapActive: dragHandler.active
 
+                    cornerRadius: padLoader.cornerRadius
+
                     Connections {
                         target: footerNavCtrl
                         function onTriggered() {
@@ -232,6 +225,7 @@ DropArea {
                 Rectangle {
                     id: emptySlotBackground
                     color: root.panelEnabled ? prv.enabledBackgroundColor : prv.disabledBackgroundColor
+                    radius: padLoader.cornerRadius
                 }
             }
         }

src/notation/qml/MuseScore/NotationScene/internal/PercussionPanelPadContent.qml

@@ -38,6 +38,8 @@ Column {
 
     property bool padSwapActive: false
 
+    property real cornerRadius: 0
+
     function openContextMenu(pos) {
         if (!root.padModel) {
             return
@@ -95,11 +97,14 @@ Column {
             }
         }
 
-        Rectangle {
+        RoundedRectangle {
             id: padNameBackground
 
             visible: !root.useNotationPreview
+
             anchors.fill: parent
+            topLeftRadius: root.cornerRadius
+            topRightRadius: root.cornerRadius
 
             color: Utils.colorWithAlpha(ui.theme.accentColor, ui.theme.buttonOpacityNormal)
         }
@@ -169,10 +174,12 @@ Column {
         color: root.useNotationPreview ? ui.theme.strokeColor : ui.theme.accentColor
     }
 
-    Rectangle {
+    RoundedRectangle {
         id: footerArea
 
         width: parent.width
+        bottomLeftRadius: root.cornerRadius
+        bottomRightRadius: root.cornerRadius
 
         color: Utils.colorWithAlpha(ui.theme.buttonColor, ui.theme.buttonOpacityNormal)