FIX #13244: Unscrollable clasess page

[da-viper]

Resolves: #13244

• [x] I signed the CLA
• [x] The title of the PR describes the problem it addresses
• [x] Each commit's message describes its purpose and effects, and references the issue it resolves
• [x] If changes are extensive, there is a sequence of easily reviewable commits
• [x] The code in the PR follows the coding rules
• [x] There are no unnecessary changes
• [x] The code compiles and runs on my machine, preferably after each commit individually
• [x] I created a unit test or vtest to verify the changes I made (if applicable)

[da-viper]

would it not be better to have a gradient item something like

// Gradient
   Rectangle {
        property alias startColor: startGradient.color
        property alias stopColor: stopGradient.color

        height: 8
        z: 1

        gradient: Gradient {
            GradientStop {
                id: startGradient
                position: 0.0
            }
            GradientStop {
                id: stopGradient
                position: 1.0
            }
        }
    }

Then just call it when needed as below

GradientItem {
    anchors: .....
    startColor: "white"
    stopColor: "transparent"
}

[cbjeukendrup]

Yeah, good idea, now that we're using such gradients so often!

You could put this in the UiComponents module.

[da-viper]

Yeah, good idea, now that we're using such gradients so often!

You could put this in the UiComponents module.

I am not sure what to name the new component

if it is gradientItem styledGradient ? what do you think

[cbjeukendrup]

I'd maybe go for GradientRectangle; that might be the most descriptive.

[da-viper]

@cbjeukendrup do I include the new changes in this merge request or do I create a new merge request that depends on this one ?

[cbjeukendrup]

I think including it in this one is the most convenient, but in a separate commit (so you would end up with two commits: one for the original change, and one for the GradientRectangle refactor).

[cbjeukendrup]

@Da-Viper Hi! I'm sorry but we lost track of this PR, and now we would like to revisit it. Recently, because of a very related issue, the Classes page was already made scrollable in PR #18167, but this PR is still useful because it adds a nice gradient. So we'd like to review and merge it, but first a rebase will be needed. Could you please do that?

[da-viper]

@Da-Viper Hi! I'm sorry but we lost track of this PR, and now we would like to revisit it. Recently, because of a very related issue, the Classes page was already made scrollable in PR #18167, but this PR is still useful because it adds a nice gradient. So we'd like to review and merge it, but first a rebase will be needed. Could you please do that?

Sure

[da-viper]

@Da-Viper Hi! I'm sorry but we lost track of this PR, and now we would like to revisit it. Recently, because of a very related issue, the Classes page was already made scrollable in PR #18167, but this PR is still useful because it adds a nice gradient. So we'd like to review and merge it, but first a rebase will be needed. Could you please do that?

Do you want me to remove the changes made to the classes page and leave the gradient rectangle changes ?

[cbjeukendrup]

You can keep those changes as far as they are still applicable. But be aware of the fact that the root component has been made a StyledFlickable already; so either you need to revert that and make a StyledFlickable a child of the root item, or you need to do something different.

[da-viper]

@cbjeukendrup all done

[cbjeukendrup]

@DmitryArefiev note for testing: the issue linked to this PR was actually already solved in a recent PR for a very related issue, by making the page scrollable. But this PR also adds a nice gradient at the top when scrolling down, like shown here:

[DmitryArefiev]

@cbjeukendrup Thanks for the note! Nice gradient looks good

Tested #13244 on Win10, Mac13, LinuxUbuntu 22.04 - FIXED