build vue

#18262 and this PR were worked on at the same time and covered some of the same changes, commits to #18262 were not really granular to the changes required here. Not sure it would have been efficient to base off another branch that was incomplete, receiving frequent changes and might even have been removed. Once #18262 is merged into 4.x-dev then I can merge those changes into this PR and resolve any conflicts. I'll keep this in mind for any future changes that are developed in parallel.

I agree that the popup is a bit ugly, it seems like many of the existing CSS rules are expecting angular components. I could add some nicer styling for this particular popup (eg textbox padding, better radio button spacing/size), but it would probably be better to have some overall approach for vue component styling. Perhaps a new vue UI demo page could be a good idea at some point? Happy to incorporate any suggestions for visual improvements!

I'll add some UI tests.

Can we make it look like below?

It's not perfect but it would do. We could actually make the subtitle the title and no longer have the thank you for rating ... as it makes it sound like someone already rated.

What would be ideal is that when you select an option, that the cursor in the textarea activates automatically so you can directly type.

Some of the textarea labels are quite long

I'd suggest to make them a bit shorter and eg remove "Let us know how we can do better so we can improve Matomo. Thank you ❤️". Just so it's more clear what we are asking them.

@tsteur How about this?

I've also set the textarea to use the 'materialize-textarea' class, hopefully it improves the look and is consistent with the style of the other components. The textarea should now autofocus as soon as a radio choice is made.

@bx80 There is now an option missing about bugs and all show now the same textarea label. Sorry I was not clear there what I meant earlier. I was meaning for the textarea field to still customise the shown question depending on the selected radio field. But reduce it to one shorter question/sentence and remove things like Thank you ❤️ to get more to the point there.

this is what it looks like for me

can we make each option a bit bigger? It's quite small

and add a 16px margin at the top so there's a bigger gap between the title and the radio fields

On my screen it looks quite good then. Not sure how it's on other browsers or OS?

Definitely going in the right direction 👍

@tsteur I've made the layout adjustments. At the moment only the "dislike" choices show a custom question, the "like" choices all show the same generic question, that hasn't changed. The 'Fix bugs' choice should still be there, but it will only show on the dislike choices list.

Currently the questions are:

Like:

• Useful Information => Please let us know more about how you use this feature so we can improve Matomo further.
• Easy to use => Please let us know more about how you use this feature so we can improve Matomo further.
• Configurable => Please let us know more about how you use this feature so we can improve Matomo further.
• Other => Please let us know more about how you use this feature so we can improve Matomo further.

Dislike:

• Add missing features => Which features are you missing?
• Make it easier to use => Was there a particular part of this feature you found difficult to use?
• Improve speed => Please let use know more about how we can do better so we can improve Matomo [Generic]
• Fix Bugs => We're sorry that you encountered issues, please let us know more about what didn't work.
• Other => Please let use know more about how we can do better so we can improve Matomo [Generic]

The "improve speed" question is just generic at the moment, not sure what we can really ask about speed, slow is slow. Maybe something like

• Improve speed => Could you provide an indication of how slow this feature is for you? Could you share how many visits per month you would typically record?

What do you think of these questions for the "Like" choices?

• Useful Information => Can you let us know a bit about how you use this information and what you find most useful about it?
• Easy to use => Is there anything else that could make Matomo easier to use or improve your experience?
• Configurable => Are there are any configuration options you find particularly useful? Are there any other options you would like to see?
• Other => Please let us know more about how you use this feature so we can improve Matomo further.

Any question text suggestions gratefully received! 😃

Makes totally sense 👍 I was just clicking and not looking. Sorry about that. Looks nice 🚀

@bx80 let me know when this one is ready for another review

Thanks @sgiehl, this is ready for a final review now.

Makes sense that we should show the privacy notice if we're doing it for the banner question. I've added it under the feedback textarea.

@sgiehl I've merged 4.x-dev into this branch which has brought in the font changes from #18262 and resolved the strange woff2 issue. The missing selections.json file has also been added. The ReviewLinks vue component had been removed by #18262 in 4.x-dev but it is still needed for showing after a thumbs up Rate Feature, so I've restored it. This issue should just need a final check and hopefully it is good to go! 🤞

Found a javascript error poping up in the console when clicking the dislike button

Once this is fixed, this would be ready to merge.