Various improvement to the thumbs-up / thumbs-down in-app feedback function.
Adds common multiple choice options to the dialog for like and dislike actions. When a choice has been make then a context sensitive question will be asked allowing for additional typed feedback.
The feedback email will now include parameters for the chosen multiple-choice answer and the installation type source of the feedback (Demo, on-premise or wordpress) along with the feature being rated and text comment.
#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:
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
What do you think of these questions for the "Like" choices?
Any question text suggestions gratefully received! :smiley:
Makes totally sense 👍 I was just clicking and not looking. Sorry about that. Looks nice 🚀
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! :crossed_fingers:
Once this is fixed, this would be ready to merge.