Fix rounded corners in popups and dropdowns

buildscripts/cmake/SetupQt6.cmake

@@ -33,6 +33,7 @@ set(qt_components
     QuickWidgets
     Xml
     Svg
+    ShaderTools
 
     Core5Compat
 )

src/appshell/qml/FirstLaunchSetup/PlaybackPage.qml

@@ -47,12 +47,8 @@ Page {
         sourceSize: Qt.size(width * Screen.devicePixelRatio, height * Screen.devicePixelRatio)
 
         layer.enabled: ui.isEffectsAllowed
-        layer.effect: EffectOpacityMask {
-            maskSource: Rectangle {
-                width: image.width
-                height: image.height
-                radius: 3
-            }
+        layer.effect: RoundedCornersEffect {
+            radius: 3
         }
     }
 }

src/appshell/qml/FirstLaunchSetup/TutorialsPage.qml

@@ -62,12 +62,8 @@ Page {
                 source: "resources/VideoTutorials.png"
 
                 layer.enabled: ui.isEffectsAllowed
-                layer.effect: EffectOpacityMask {
-                    maskSource: Rectangle {
-                        width: image.width
-                        height: image.height
-                        radius: 3
-                    }
+                layer.effect: RoundedCornersEffect {
+                    radius: 3
                 }
             }
         }

src/appshell/qml/WelcomeDialog.qml

@@ -137,12 +137,8 @@ StyledDialogView {
                 source: model.currentItem ? model.currentItem.imageUrl : ""
 
                 layer.enabled: ui.isEffectsAllowed
-                layer.effect: EffectOpacityMask {
-                    maskSource: Rectangle {
-                        width: image.width
-                        height: image.height
-                        radius: 8
-                    }
+                layer.effect: RoundedCornersEffect {
+                    radius: 8
                 }
 
                 MouseArea {

src/framework/cloud/qml/Muse/Cloud/AccountAvatar.qml

@@ -71,16 +71,9 @@ Item {
             fillMode: Image.PreserveAspectCrop
 
             layer.enabled: ui.isEffectsAllowed
-            layer.effect: EffectOpacityMask {
-                maskSource: Rectangle {
-                    width: root.side
-                    height: root.side
-                    radius: width / 2
-                    visible: false
-                }
+            layer.effect: RoundedCornersEffect {
+                radius: width / 2
             }
         }
     }
 }
-
-

src/framework/dockwindow/qml/Muse/Dock/DockFloatingWindow.qml

@@ -62,12 +62,8 @@ Item {
 
         // Clip content to our beautiful rounded rect
         layer.enabled: ui.isEffectsAllowed
-        layer.effect: EffectOpacityMask {
-            maskSource: Rectangle {
-                width: dropArea.width
-                height: dropArea.height
-                radius: background.radius - background.border.width
-            }
+        layer.effect: RoundedCornersEffect {
+            radius: background.radius - background.border.width
         }
     }
 

src/framework/extensions/qml/Muse/Extensions/internal/ExtensionItem.qml

@@ -68,12 +68,8 @@ Item {
             sourceSize: Qt.size(width * Screen.devicePixelRatio, height * Screen.devicePixelRatio)
 
             layer.enabled: ui.isEffectsAllowed
-            layer.effect: EffectOpacityMask {
-                maskSource: Rectangle {
-                    width: thumbnail.width
-                    height: thumbnail.height
-                    radius: thumbnail.radius
-                }
+            layer.effect: RoundedCornersEffect {
+                radius: thumbnail.radius
             }
         }
 

src/framework/learn/qml/Muse/Learn/internal/ClassesPage.qml

@@ -141,13 +141,8 @@ Item {
                         fillMode: Image.PreserveAspectCrop
 
                         layer.enabled: ui.isEffectsAllowed
-                        layer.effect: EffectOpacityMask {
-                            maskSource: Rectangle {
-                                width: avatar.width
-                                height: avatar.height
-                                radius: width / 2
-                                visible: false
-                            }
+                        layer.effect: RoundedCornersEffect {
+                            radius: width / 2
                         }
                     }
 

src/framework/tours/qml/Muse/Tours/internal/TourStepPopup.qml

@@ -118,12 +118,8 @@ StyledPopupView {
                 source: root.previewImageOrGifUrl
 
                 layer.enabled: ui.isEffectsAllowed
-                layer.effect: EffectOpacityMask {
-                    maskSource: Rectangle {
-                        width: previewRect.width
-                        height: previewRect.height
-                        radius: previewRect.radius
-                    }
+                layer.effect: RoundedCornersEffect {
+                    radius: previewRect.radius
                 }
             }
         }

src/framework/uicomponents/CMakeLists.txt

@@ -127,6 +127,11 @@ set(MODULE_USE_UNITY OFF)
 
 setup_module()
 
+qt_add_shaders(${MODULE} "${MODULE}_shaders"
+    FILES
+        "qml/Muse/GraphicalEffects/shaders/roundcorners.frag"
+)
+
 if (MUSE_MODULE_UI_TESTS)
     add_subdirectory(tests)
 endif()

src/framework/uicomponents/graphicaleffects.qrc

@@ -2,9 +2,9 @@
     <qresource prefix="/">
         <file>qml/Muse/GraphicalEffects/qmldir</file>
         <file>qml/Muse/GraphicalEffects/EffectDropShadow.qml</file>
-        <file>qml/Muse/GraphicalEffects/EffectOpacityMask.qml</file>
         <file>qml/Muse/GraphicalEffects/EffectRectangularGlow.qml</file>
         <file>qml/Muse/GraphicalEffects/EffectFastBlur.qml</file>
         <file>qml/Muse/GraphicalEffects/EffectColorOverlay.qml</file>
+        <file>qml/Muse/GraphicalEffects/RoundedCornersEffect.qml</file>
     </qresource>
 </RCC>

src/framework/uicomponents/qml/Muse/GraphicalEffects/RoundedCornersEffect.qml

@@ -0,0 +1,32 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-only
+ * MuseScore-CLA-applies
+ *
+ * MuseScore
+ * Music Composition & Notation
+ *
+ * Copyright (C) 2025 MuseScore Limited and others
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+
+ShaderEffect {
+    id: root
+
+    required property real radius
+    property size sourceSize: Qt.size(root.width, root.height)
+
+    fragmentShader: "qrc:/qml/Muse/GraphicalEffects/shaders/roundcorners.frag.qsb"
+}

src/framework/uicomponents/qml/Muse/GraphicalEffects/qmldir

@@ -1,6 +1,6 @@
 module Muse.GraphicalEffects
-EffectOpacityMask 1.0 EffectOpacityMask.qml
 EffectDropShadow 1.0 EffectDropShadow.qml
 EffectRectangularGlow 1.0 EffectRectangularGlow.qml
 EffectFastBlur 1.0 EffectFastBlur.qml
 EffectColorOverlay 1.0 EffectColorOverlay.qml
+RoundedCornersEffect 1.0 RoundedCornersEffect.qml

src/framework/uicomponents/qml/Muse/GraphicalEffects/shaders/roundcorners.frag

@@ -0,0 +1,35 @@
+#version 440
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float radius;
+    vec2 sourceSize;
+};
+
+layout(binding = 1) uniform sampler2D source;
+
+void main() {
+    vec4 sourceColor = texture(source, qt_TexCoord0);
+
+    // Convert texture coordinates to pixel coordinates
+    vec2 pixelPos = qt_TexCoord0 * sourceSize;
+
+    // Calculate the distance to the nearest corner of the rounded rectangle
+    vec2 center = sourceSize * 0.5;
+    vec2 halfSize = sourceSize * 0.5;
+
+    // Distance from center to edge, accounting for corner radius
+    vec2 cornerDistance = abs(pixelPos - center) - (halfSize - radius);
+
+    // Calculate the signed distance to the rounded rectangle boundary
+    float dist = length(max(cornerDistance, 0.0)) + min(max(cornerDistance.x, cornerDistance.y), 0.0) - radius;
+
+    // Use smoothstep by way of anti-aliasing
+    float alpha = 1.0 - smoothstep(-0.4, 0.4, dist);
+
+    fragColor = sourceColor * alpha * qt_Opacity;
+}

src/framework/uicomponents/qml/Muse/UiComponents/ProgressBar.qml

@@ -86,30 +86,26 @@ FocusScope {
         border.color: ui.theme.strokeColor
         border.width: Math.max(ui.theme.borderWidth, 1)
 
-        layer.enabled: ui.isEffectsAllowed
-        layer.effect: EffectOpacityMask {
-            maskSource: Item {
-                width: backgroundRect.width
-                height: backgroundRect.height
-
-                Rectangle {
-                    anchors.fill: parent
-                    radius: backgroundRect.radius
-                }
+        Item {
+            anchors.fill: parent
+            anchors.margins: backgroundRect.border.width
+
+            layer.enabled: ui.isEffectsAllowed
+            layer.effect: RoundedCornersEffect {
+                radius: backgroundRect.radius - anchors.margins
             }
-        }
 
-        Rectangle {
-            id: progressRect
+            Rectangle {
+                id: progressRect
 
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            anchors.margins: backgroundRect.border.width
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.bottom: parent.bottom
 
-            width: Math.min(parent.width * (root.value / root.to), parent.width - backgroundRect.border.width)
+                width: parent.width * Math.min(root.value / root.to, 1)
 
-            color: ui.theme.accentColor
+                color: ui.theme.accentColor
+            }
         }
 
         StyledTextLabel {
@@ -119,8 +115,6 @@ FocusScope {
             anchors.verticalCenter: parent.verticalCenter
 
             horizontalAlignment: Text.AlignHCenter
-
-            z: progressRect.z + 1
         }
     }
 }

src/framework/uicomponents/qml/Muse/UiComponents/internal/PopupContent.qml

@@ -24,6 +24,7 @@ import QtQuick 2.15
 
 import Muse.Ui 1.0
 import Muse.UiComponents 1.0
+import Muse.GraphicalEffects 1.0
 
 FocusScope {
     id: root
@@ -120,6 +121,11 @@ FocusScope {
 
             implicitWidth: root.contentWidth
             implicitHeight: root.contentHeight
+
+            layer.enabled: ui.isEffectsAllowed
+            layer.effect: RoundedCornersEffect {
+                radius: contentBackground.radius
+            }
         }
 
         Rectangle {

src/project/qml/MuseScore/Project/internal/ScoresPage/ScoreGridItem.qml

@@ -109,12 +109,8 @@ FocusScope {
                     }
 
                     layer.enabled: ui.isEffectsAllowed
-                    layer.effect: EffectOpacityMask {
-                        maskSource: Rectangle {
-                            width: thumbnail.width
-                            height: thumbnail.height
-                            radius: thumbnail.radius
-                        }
+                    layer.effect: RoundedCornersEffect {
+                        radius: thumbnail.radius
                     }
                 }
 

src/project/qml/MuseScore/Project/internal/ScoresPage/ScoreListItem.qml

@@ -73,12 +73,8 @@ ListItemBlank {
                 }
 
                 layer.enabled: ui.isEffectsAllowed
-                layer.effect: EffectOpacityMask {
-                    maskSource: Rectangle {
-                        width: thumbnailLoader.width
-                        height: thumbnailLoader.height
-                        radius: 2
-                    }
+                layer.effect: RoundedCornersEffect {
+                    radius: 2
                 }
             }