Makes active pip text darker to contrast with non-active pips

[krebil]

Prerequisites

• [x] I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes 12773

Description

Adds a class to the active pip (slider on the install screen) that makes it darker to contrast with the non-active pips. To test build and start an installation, choose a new telemetry "level" and observe that the active class moves to the selected value.

[github-actions[bot]]

Hi there @krebil, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• [x] 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

I think this also need to be changed in the analytics/telemetry dashboard in settings section: https://github.com/umbraco/Umbraco-CMS/blob/v10/contrib/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.controller.js

Alternatively it could be included in the <umb-range-slider> component so active pips always have noUi-value-active class by default. https://github.com/umbraco/Umbraco-CMS/blob/v10/contrib/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js (in that case we need to handle multiple pips as in the example here: https://refreshless.com/nouislider/examples/#section-pips )

// cc @iOvergaard @nielslyngsoe

[krebil]

Good points! I'll update it to handle multiple pips right away. For now, I'll put it in the <umb-range-slider> component until someone says otherwise

[krebil]

I've pushed some changes that accommodates multiple pips and added the active class functionality to the <umb-range-slider> component. It seems that the analytics.html uses the range-slider so this is updated by the above change.

The installer slider in user.html however does not use the range-slider, so the code remains in user.controller.js

@bjarnef Thanks for the feedback, let me know if you have anything else to add

[bjarnef]

Yes, it seems the user.html doesn't use <umb-range-slider> component, but instead creates the slider from an empty <div>. Although latest changes in v10/dev branch isn't merged to v10/contrib branch, it seems to be the case in that branch as well: https://github.com/umbraco/Umbraco-CMS/blob/v10/dev/src/Umbraco.Web.UI.Client/src/installer/steps/user.html#L123-L125

@iOvergaard any reason this "consentSlider" isn't using <umb-range-slider> component as well? Furthermore is seems part of these styles are redundant: https://github.com/umbraco/Umbraco-CMS/blob/v10/contrib/src/Umbraco.Web.UI.Client/src/less/installer.less#L288-L329

which is pretty much what we already have here: https://github.com/umbraco/Umbraco-CMS/blob/v10/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less

[bjarnef]

Okay regarding this https://github.com/umbraco/Umbraco-CMS/pull/12807#issuecomment-1209419912 it is because the installer and login screen haven't all components registered, so most are not available outside backoffice and some dependent on service like localizationService.

In the new backoffice it would probably be much easier to re-use components in installer and login screen as well :)

[iOvergaard]

Okay regarding this #12807 (comment) it is because the installer and login screen haven't all components registered, so most are not available outside backoffice and some dependent on service like localizationService.

In the new backoffice it would probably be much easier to re-use components in installer and login screen as well :)

Yes, that is exactly the reason why noUiSlider is being instantiated all on its own in the installer. Too many dependencies in umb-range-slider, the localization being one of the hardest to put in the installer app.

The new backoffice will have the same scaffolding for all runtime modes, so expect to be able to clean up a great deal. In fact - see for yourself here :-)

[bjarnef]

@iOvergaard yes, I recall I looked at this in the past to use <umb-checkbox> in login/installer, but struggled when components had dependency on localizationService :)

Yeah, I had a look at the new backoffice work. I did notice that it included the new UI library components with uui- prefix, but also the familiar umb- prefix. Are these backoffice specific components, while uui- components are more general components, which could be used in both backoffice, but also in frontend to build a web app it you wanted that... or just an admin interface with similar look & feel as in Umbraco backoffice.

[bjarnef]

For the specific telemetry slider is could also be useful to update the value when clicking the pips, but I don't think it should be default: https://refreshless.com/nouislider/examples/#section-click-pips

Another minor thing I noticed is that when switching to "Detailed" in Analytics dashboard in cause page to have scroll, which make the slider "jump" a bit because it's width is 25%.

something like this seems to work better:

width: 300px;
max-width: 100%;

Before

https://user-images.githubusercontent.com/2919859/183703983-cd6ef08a-0ece-4e06-918c-9c65878b5477.mp4

After

https://user-images.githubusercontent.com/2919859/183703840-a3f147ca-6588-4e89-8042-ec38da2f8f02.mp4

[krebil]

For the specific telemetry slider is could also be useful to update the value when clicking the pips, but I don't think it should be

This is already implemented in user.controller, so I've done something similar in the component.

[iOvergaard]

This PR also fixes #12700 by chance simply because the umb-range-slider.less file contains better styling for the noUiSlider in general, and now we import this file in the installer.