Replace hardcoded gradient rectangles in scrollable widgets with NFadeMask abstraction

[BUSTheid]

Pull Request

Motivation

Introduction of NFadeMask - reusable mask source component that centralises the fade rectangle + MultiEffect pattern and ports all affected widgets to use it.

Type of Change

• Bug fix
• New feature
• Breaking change
• Refactoring

Testing

• Tested on niri
• Tested on Hyprland
• Tested with different bar positions and density settings
• Tested at different interface scaling values
• Tested on sway
• Tested with multiple monitors (if applicable)

Checklist

• Code follows project style guidelines
• Self-reviewed my code
• No new warnings or errors
• Documentation or comments updated (if relevant)

[BUSTheid]

@ItsLemmy fixed some missing control over the fade in NScrollText, prototyped a pretty ugly solution for NScrollView - I'll try to simplify it if possible. Let me know what you think about the direction.

Maybe we can consider making the fade rectangle its own individual .qml or script to create dynamically everywhere we want on any part of the UI, to minimize boilerplate?

[notiant]

If you're working on this maybe you could also address the current fading of the beginning of the text if the text is not scrolling ("Replace" shouldn't be faded here):

[BUSTheid]

If you're working on this maybe you could also address the current fading of the beginning of the text if the text is not scrolling ("Replace" shouldn't be faded here):

I didn't think of that edge case, since I have it always scrolling if it's overflowing. On it!

[BUSTheid]

@notiant most recent commit should fix this, and added the animation for the fade appearing when the scrolling starts. Let me know if you find anything else, it's SO MANY elements that got refactored indirectly hah

[notiant]

@notiant most recent commit should fix this, and added the animation for the fade appearing when the scrolling starts. Let me know if you find anything else, it's SO MANY elements that got refactored indirectly hah

So after testing this a bit more I don't really see any fading mask in NScrollView (like the network or notification history panel)?

[BUSTheid]

@notiant most recent commit should fix this, and added the animation for the fade appearing when the scrolling starts. Let me know if you find anything else, it's SO MANY elements that got refactored indirectly hah

So after testing this a bit more I don't really see any fading mask in NScrollView (like the network or notification history panel)?

Notification history for me in particular does apply the fade, it's maybe too small on different scale values?

NFadeMask does assign a property that can be used to increase/decrease the size of the fade. API should be there and working, whether it gets changed in N* elements or particularly in a larger scope QML file. (I'm trash at design, but really enjoyed porting into a centralized solution kek)

// NFadeMask.qml
// Fraction of height/width of component that fades on each side
// Value: 0.0 - 0.5
property real fadeExtent: 0.1