NScrollText: proper fade implementation

Modules/Bar/Widgets/ActiveWindow.qml

@@ -254,8 +254,6 @@ Item {
 
         NScrollText {
           id: titleContainer
-          showGradientMasks: true
-          gradientColor: Style.capsuleColor
           text: windowTitle
           Layout.alignment: Qt.AlignVCenter
           maxWidth: {
@@ -273,6 +271,10 @@ Item {
             return NScrollText.ScrollMode.Never;
           }
           forcedHover: mainMouseArea.containsMouse
+          gradientColor: Style.capsuleColor
+          gradientWidth: Math.round(8 * Style.uiScaleRatio)
+          cornerRadius: Style.radiusM
+
           NText {
             text: windowTitle
             pointSize: barFontSize

Modules/Bar/Widgets/MediaMini.qml

@@ -322,8 +322,6 @@ Item {
         // Scrolling title
         NScrollText {
           id: titleContainer
-          showGradientMasks: true
-          gradientColor: Style.capsuleColor
           Layout.fillWidth: true
           Layout.alignment: Qt.AlignVCenter
           Layout.preferredHeight: capsuleHeight
@@ -340,9 +338,14 @@ Item {
           cursorShape: hasPlayer ? Qt.PointingHandCursor : Qt.ArrowCursor
           maxWidth: root.maxWidth - root.mainContentWidth
           forcedHover: mainMouseArea.containsMouse
+          gradientColor: Style.capsuleColor
+          gradientWidth: Math.round(8 * Style.uiScaleRatio)
+          cornerRadius: Style.radiusM
+
           NText {
             color: hasPlayer ? root.textColor : Color.mOnSurfaceVariant
             pointSize: barFontSize
+            elide: Text.ElideNone
           }
         }
       }

Modules/Panels/Media/MediaPlayerPanel.qml

@@ -285,8 +285,6 @@ SmartPanel {
               spacing: 0
 
               NScrollText {
-                showGradientMasks: true
-                gradientColor: Color.mSurfaceVariant
                 Layout.fillWidth: true
                 maxWidth: parent.width
                 text: {
@@ -304,6 +302,8 @@ SmartPanel {
                     return NScrollText.ScrollMode.Hover;
                   return NScrollText.ScrollMode.Never;
                 }
+                gradientColor: Color.mSurfaceVariant
+                cornerRadius: Style.radiusM
 
                 delegate: NText {
                   pointSize: root.compactMode ? Style.fontSizeL : Style.fontSizeXL
@@ -316,8 +316,6 @@ SmartPanel {
               }
 
               NScrollText {
-                showGradientMasks: true
-                gradientColor: Color.mSurfaceVariant
                 Layout.fillWidth: true
                 maxWidth: parent.width
                 text: {
@@ -335,6 +333,8 @@ SmartPanel {
                     return NScrollText.ScrollMode.Hover;
                   return NScrollText.ScrollMode.Never;
                 }
+                gradientColor: Color.mSurfaceVariant
+                cornerRadius: Style.radiusM
 
                 delegate: NText {
                   pointSize: root.compactMode ? Style.fontSizeS : Style.fontSizeM

Modules/Panels/Wallpaper/WallpaperPanel.qml

@@ -785,8 +785,9 @@ SmartPanel {
           text: isBrowseMode ? currentBrowsePath : WallpaperService.getMonitorDirectory(targetScreen?.name ?? "")
           Layout.fillWidth: true
           scrollMode: NScrollText.ScrollMode.Hover
-          showGradientMasks: true
           gradientColor: Color.mSurfaceVariant
+          cornerRadius: Style.radiusM
+
           NText {
             text: isBrowseMode ? currentBrowsePath : WallpaperService.getMonitorDirectory(targetScreen?.name ?? "")
             pointSize: Style.fontSizeS

Widgets/NScrollText.qml

@@ -35,11 +35,16 @@ Item {
   property bool forcedHover: false
   property int cursorShape: Qt.ArrowCursor
 
-  // animation controls
   property real waitBeforeScrolling: 1000
   property real scrollCycleDuration: Math.max(4000, root.text.length * 120)
   property real resettingDuration: 300
 
+  // gradient controls
+  property bool showGradients: true
+  property real gradientWidth: Math.round(12 * Style.uiScaleRatio)
+  property color gradientColor: Color.mSurfaceVariant
+  property real cornerRadius: 0
+
   readonly property real contentWidth: {
     if (!titleText.item)
       return 0;
@@ -123,10 +128,6 @@ Item {
     }
   }
 
-  property bool showGradientMasks: false
-  property color gradientColor: "transparent"
-  property real gradientWidth: 12
-
   RowLayout {
     id: scrollContainer
     height: parent.height
@@ -175,14 +176,17 @@ Item {
     }
   }
 
+  // Fade Gradients
   Rectangle {
+    id: leftGradient
     anchors.left: parent.left
     anchors.top: parent.top
     anchors.bottom: parent.bottom
     width: root.gradientWidth
-    z: 1
-    visible: root.showGradientMasks && (root.contentWidth > root.width)
-    opacity: root.state === NScrollText.ScrollState.Scrolling ? Math.min(1.0, -scrollContainer.x / (root.gradientWidth * 1.5)) : 0
+    z: 2
+    visible: root.showGradients && root.contentWidth > root.maxWidth
+    radius: root.cornerRadius
+    opacity: scrollContainer.x < -1 ? 1 : 0
     gradient: Gradient {
       orientation: Gradient.Horizontal
       GradientStop {
@@ -194,15 +198,24 @@ Item {
         color: "transparent"
       }
     }
+    Behavior on opacity {
+      NumberAnimation {
+        duration: Style.animationFast
+        easing.type: Easing.InOutQuad
+      }
+    }
   }
 
   Rectangle {
+    id: rightGradient
     anchors.right: parent.right
     anchors.top: parent.top
     anchors.bottom: parent.bottom
     width: root.gradientWidth
-    z: 1
-    visible: root.showGradientMasks && (root.contentWidth > root.width)
+    z: 2
+    visible: root.showGradients && root.contentWidth > root.maxWidth
+    radius: root.cornerRadius
+    opacity: 1 // Always show if overflowing as it loops
     gradient: Gradient {
       orientation: Gradient.Horizontal
       GradientStop {
@@ -214,5 +227,11 @@ Item {
         color: root.gradientColor
       }
     }
+    Behavior on opacity {
+      NumberAnimation {
+        duration: Style.animationFast
+        easing.type: Easing.InOutQuad
+      }
+    }
   }
 }