feat: revamp recipes list page

[axel7083]

What does this PR do?

Following one of the mockup in #1126, improving the recipes card.

Notable change

• Adding an icon showing the status (cloned or not) similar to the one in extension catalog
• Adding the path in the card

Screenshot / video of UI

What issues does this PR fix or reference?

Fixes partially #1126

How to test this PR?

• unit tests has been provided

[benoitf]

for the path inside the card I don't know if we should truncate the middle of the path so we see the beginning and the end of the path but it can also be a bad idea !

[axel7083]

for the path inside the card I don't know if we should truncate the middle of the path so we see the beginning and the end of the path but it can also be a bad idea !

We will probably iterate a bit on this with Emma when she will be back ! I keep your remark in mind, I also feel a bit weird with the current path.

I cannot put a tooltip, because there is like overflow-hidden everywhere on the page...

[jeffmaury]

for the path inside the card I don't know if we should truncate the middle of the path so we see the beginning and the end of the path but it can also be a bad idea !

Yes can't we have the full path as tooltip ?

[jeffmaury]

LGTM comment wise

[feloy]

I find the recipe status button/indicator disturbing. It's ok when the recipe is downloadable, but when it is downloaded, the button is still active and does nothing. Also, a tooltip would help understand the meaning

[axel7083]

Following @feloy advise, I revised the design of the icon.

• First I noticed I was using chevron down instead of circle check which were looking weird
• I removed the border and hover effect when the recipe cloned
• I also added a tooltip on the button to improve understanding

demo-revamp-recipes-page.mp4

Yes can't we have the full path as tooltip ?

I was able to make it works, as the path is often too big, it go offscreen, I tried to play with the tooltip position (left, right etc.) but depending on which card, it get always cut offscreen...

[axel7083]

⚠️ NOT INCLUDED IN THIS PR

I had a little fun with finding a nice way of allowing the user to see the full path, and I though: what if the text automatically scroll when hovering

text-hover-scroll.mp4

if this idea please some people, I could make another PR to include it, what do you think @jeffmaury @benoitf @deboer-tim

I can control the speed of the animation, I am also thinking we could add cursor-copy and make it copy when the user click on it

[jeffmaury]

⚠️ NOT INCLUDED IN THIS PR

I had a little fun with finding a nice way of allowing the user to see the full path, and I though: what if the text automatically scroll when hovering
text-hover-scroll.mp4

if this idea please some people, I could make another PR to include it, what do you think @jeffmaury @benoitf @deboer-tim

I can control the speed of the animation, I am also thinking we could add cursor-copy and make it copy when the user click on it

Seems to me that it is more common to have a UI glitch (tooltip) that shows the full path when a specific UI action is taken (hover,...). Here the con that I see is that the full path is not displayed entirely but that's still an improvement

[feloy]

⚠️ NOT INCLUDED IN THIS PR
I had a little fun with finding a nice way of allowing the user to see the full path, and I though: what if the text automatically scroll when hovering
text-hover-scroll.mp4
if this idea please some people, I could make another PR to include it, what do you think @jeffmaury @benoitf @deboer-tim

I can control the speed of the animation, I am also thinking we could add cursor-copy and make it copy when the user click on it

Seems to me that it is more common to have a UI glitch (tooltip) that shows the full path when a specific UI action is taken (hover,...). Here the con that I see is that the full path is not displayed entirely but that's still an improvement

Also, one important thing for the user I think is to be able to copy the path string. If the path is not displayed completely, the copy is not effective. The tooltip won't help either, as its content cannot be copied. Should we add a copy button? (same as @axel7083 added in his initial message I guess)

[axel7083]

Merging for now this PR and I will open an issue for follow up here #1214