Merge pull request #29389 from cbjeukendrup/rounded_corners

cbjeukendrup · web-flow · commit ef758972b7c8 · 2025-08-21T22:33:46.000+02:00
Fix rounded corners in popups and dropdowns
diff --git a/buildscripts/cmake/SetupQt6.cmake b/buildscripts/cmake/SetupQt6.cmake
@@ -33,6 +33,7 @@ set(qt_components
     QuickWidgets
     Xml
     Svg
+    ShaderTools
 
     Core5Compat
 )
diff --git a/src/appshell/qml/FirstLaunchSetup/PlaybackPage.qml b/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
         }
     }
 }
diff --git a/src/appshell/qml/FirstLaunchSetup/TutorialsPage.qml b/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
                 }
             }
         }
diff --git a/src/appshell/qml/WelcomeDialog.qml b/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 {
diff --git a/src/framework/cloud/qml/Muse/Cloud/AccountAvatar.qml b/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
             }
         }
     }
 }
-
-
diff --git a/src/framework/dockwindow/qml/Muse/Dock/DockFloatingWindow.qml b/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
         }
     }
 
diff --git a/src/framework/extensions/qml/Muse/Extensions/internal/ExtensionItem.qml b/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
             }
         }
 
diff --git a/src/framework/learn/qml/Muse/Learn/internal/ClassesPage.qml b/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
                         }
                     }
 
diff --git a/src/framework/tours/qml/Muse/Tours/internal/TourStepPopup.qml b/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
                 }
             }
         }
diff --git a/src/framework/uicomponents/CMakeLists.txt b/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()
diff --git a/src/framework/uicomponents/graphicaleffects.qrc b/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>
diff --git a/src/framework/uicomponents/qml/Muse/GraphicalEffects/EffectOpacityMask.qml b/src/framework/uicomponents/qml/Muse/GraphicalEffects/EffectOpacityMask.qml
diff --git a/src/framework/uicomponents/qml/Muse/GraphicalEffects/RoundedCornersEffect.qml b/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"
+}
diff --git a/src/framework/uicomponents/qml/Muse/GraphicalEffects/qmldir b/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
diff --git a/src/framework/uicomponents/qml/Muse/GraphicalEffects/shaders/roundcorners.frag b/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;
+}
diff --git a/src/framework/uicomponents/qml/Muse/UiComponents/ProgressBar.qml b/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
         }
     }
 }
diff --git a/src/framework/uicomponents/qml/Muse/UiComponents/internal/PopupContent.qml b/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 {
diff --git a/src/project/qml/MuseScore/Project/internal/ScoresPage/ScoreGridItem.qml b/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
                     }
                 }
 
diff --git a/src/project/qml/MuseScore/Project/internal/ScoresPage/ScoreListItem.qml b/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
                 }
             }
 

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ set(qt_components`
`33`	`33`	`QuickWidgets`
`34`	`34`	`Xml`
`35`	`35`	`Svg`
	`36`	`+ ShaderTools`
`36`	`37`
`37`	`38`	`Core5Compat`
`38`	`39`	`)`
Original file line number	Diff line number	Diff line change
`@@ -47,12 +47,8 @@ Page {`
`47`	`47`	`sourceSize: Qt.size(width * Screen.devicePixelRatio, height * Screen.devicePixelRatio)`
`48`	`48`
`49`	`49`	`layer.enabled: ui.isEffectsAllowed`
`50`		`- layer.effect: EffectOpacityMask {`
`51`		`- maskSource: Rectangle {`
`52`		`- width: image.width`
`53`		`- height: image.height`
`54`		`- radius: 3`
`55`		`- }`
	`50`	`+ layer.effect: RoundedCornersEffect {`
	`51`	`+ radius: 3`
`56`	`52`	`}`
`57`	`53`	`}`
`58`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,12 +62,8 @@ Page {`
`62`	`62`	`source: "resources/VideoTutorials.png"`
`63`	`63`
`64`	`64`	`layer.enabled: ui.isEffectsAllowed`
`65`		`- layer.effect: EffectOpacityMask {`
`66`		`- maskSource: Rectangle {`
`67`		`- width: image.width`
`68`		`- height: image.height`
`69`		`- radius: 3`
`70`		`- }`
	`65`	`+ layer.effect: RoundedCornersEffect {`
	`66`	`+ radius: 3`
`71`	`67`	`}`
`72`	`68`	`}`
`73`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -71,16 +71,9 @@ Item {`
`71`	`71`	`fillMode: Image.PreserveAspectCrop`
`72`	`72`
`73`	`73`	`layer.enabled: ui.isEffectsAllowed`
`74`		`- layer.effect: EffectOpacityMask {`
`75`		`- maskSource: Rectangle {`
`76`		`- width: root.side`
`77`		`- height: root.side`
`78`		`- radius: width / 2`
`79`		`- visible: false`
`80`		`- }`
	`74`	`+ layer.effect: RoundedCornersEffect {`
	`75`	`+ radius: width / 2`
`81`	`76`	`}`
`82`	`77`	`}`
`83`	`78`	`}`
`84`	`79`	`}`
`85`		`-`
`86`		`-`
Original file line number	Diff line number	Diff line change
`@@ -62,12 +62,8 @@ Item {`
`62`	`62`
`63`	`63`	`// Clip content to our beautiful rounded rect`
`64`	`64`	`layer.enabled: ui.isEffectsAllowed`
`65`		`- layer.effect: EffectOpacityMask {`
`66`		`- maskSource: Rectangle {`
`67`		`- width: dropArea.width`
`68`		`- height: dropArea.height`
`69`		`- radius: background.radius - background.border.width`
`70`		`- }`
	`65`	`+ layer.effect: RoundedCornersEffect {`
	`66`	`+ radius: background.radius - background.border.width`
`71`	`67`	`}`
`72`	`68`	`}`
`73`	`69`
Original file line number	Diff line number	Diff line change
`@@ -68,12 +68,8 @@ Item {`
`68`	`68`	`sourceSize: Qt.size(width * Screen.devicePixelRatio, height * Screen.devicePixelRatio)`
`69`	`69`
`70`	`70`	`layer.enabled: ui.isEffectsAllowed`
`71`		`- layer.effect: EffectOpacityMask {`
`72`		`- maskSource: Rectangle {`
`73`		`- width: thumbnail.width`
`74`		`- height: thumbnail.height`
`75`		`- radius: thumbnail.radius`
`76`		`- }`
	`71`	`+ layer.effect: RoundedCornersEffect {`
	`72`	`+ radius: thumbnail.radius`
`77`	`73`	`}`
`78`	`74`	`}`
`79`	`75`
Original file line number	Diff line number	Diff line change
`@@ -141,13 +141,8 @@ Item {`
`141`	`141`	`fillMode: Image.PreserveAspectCrop`
`142`	`142`
`143`	`143`	`layer.enabled: ui.isEffectsAllowed`
`144`		`- layer.effect: EffectOpacityMask {`
`145`		`- maskSource: Rectangle {`
`146`		`- width: avatar.width`
`147`		`- height: avatar.height`
`148`		`- radius: width / 2`
`149`		`- visible: false`
`150`		`- }`
	`144`	`+ layer.effect: RoundedCornersEffect {`
	`145`	`+ radius: width / 2`
`151`	`146`	`}`
`152`	`147`	`}`
`153`	`148`
Original file line number	Diff line number	Diff line change
`@@ -118,12 +118,8 @@ StyledPopupView {`
`118`	`118`	`source: root.previewImageOrGifUrl`
`119`	`119`
`120`	`120`	`layer.enabled: ui.isEffectsAllowed`
`121`		`- layer.effect: EffectOpacityMask {`
`122`		`- maskSource: Rectangle {`
`123`		`- width: previewRect.width`
`124`		`- height: previewRect.height`
`125`		`- radius: previewRect.radius`
`126`		`- }`
	`121`	`+ layer.effect: RoundedCornersEffect {`
	`122`	`+ radius: previewRect.radius`
`127`	`123`	`}`
`128`	`124`	`}`
`129`	`125`	`}`