feature: added new FavouriteWidget to display favorite files in dashboard widget

[yemkareems]

feature: added new FavouriteWidget to display favorite files in dashboard widget

added a new widget to display favorite files in dashboard and to show a link to more favorites to apps/files/favorites. if max count of favorites of 50 is reached then also 'No favorites' is displayed

First version:

Details

fixes: #23308

• Resolves: #

Summary

TODO

• ...

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[AndyScherzinger]

Looping in @jancborchardt for

if max count of favorites of 50 is reached then also 'No favorites' is displayed

This seems unintuitive since "no favorites" implies count==0 but it is actually count>=50. So I would expect something like "too many favorites to display" or show the 50 and a "more" element/button.

Or I misunderstand the description @yemkareems 😄

[skjnldsv]

Following Andy's comment, I would actually say we show the last xx updated favorites (like 20 🤷 )

[sorbaugh]

Following Andy's comment, I would actually say we show the last xx updated favorites (like 20 🤷 )

I agree that this would be a good approach. cc @jancborchardt

[jancborchardt]

Following Andy's comment, I would actually say we show the last xx updated favorites (like 20 🤷 )

Sounds good to me as well!

Also 2 smaller things:

• The title should be "Favorite files" so it's clearer what it is. (Just like we say "Recommended files")
• The icon can be a favorite star to show a little difference

[sorbaugh]

Following Andy's comment, I would actually say we show the last xx updated favorites (like 20 🤷 )

Sounds good to me as well!

Also 2 smaller things:

• The title should be "Favorite files" so it's clearer what it is. (Just like we say "Recommended files")
• The icon can be a favorite star to show a little difference

cc @yemkareems

[yemkareems]

Looping in @jancborchardt for

if max count of favorites of 50 is reached then also 'No favorites' is displayed

This seems unintuitive since "no favorites" implies count==0 but it is actually count>=50. So I would expect something like "too many favorites to display" or show the 50 and a "more" element/button.

Or I misunderstand the description @yemkareems 😄

Irrespective of the limit the ui is showing only the latest 6. Hence removed the limit logic here and after 6 items, More favorites button is displayed which takes the user to file listing.

[yemkareems]

Following Andy's comment, I would actually say we show the last xx updated favorites (like 20 🤷 )

Sounds good to me as well!

Also 2 smaller things:

• The title should be "Favorite files" so it's clearer what it is. (Just like we say "Recommended files")
• The icon can be a favorite star to show a little difference

Changed the title and icon. The icon star loads with a grey color color initially and then it changes to black. The SVG is black however.

[yemkareems]

Initial icon load

After a while

[AndyScherzinger]

I think @nickvergessen fixed this a while ago for all icons until then, maybe you remember the PR @nickvergessen ?

[AndyScherzinger]

@yemkareems I would remove the circular masking, we don't have it in the files interface nor any other list in the dashboard except for avatars - see for reference in your screenshots: recommended files

[jancborchardt]

@yemkareems I would remove the circular masking, we don't have it in the files interface nor any other list in the dashboard except for avatars - see for reference in your screenshots: recommended files

Yep agree, missed this somehow. Circular masking is only for avatars. File previews get a little border-radius and filetype icons should be displayed as is.

[yemkareems]

@yemkareems I would remove the circular masking, we don't have it in the files interface nor any other list in the dashboard except for avatars - see for reference in your screenshots: recommended files

I had to change the DashboardApp.vue to have :id="panel-${panels[panelId].id}" in place of <div class="panel--content"> to have the id of the app and apply styles specific to the app

[yemkareems]

Most of the ui issues are addressed. Recommendation app has filename and extension in different classes and ui looks black and grey for the same. Except this and titles most of the ui is made similar to the Recommendation app

[come-nc]

A small change to avoid computing one more node than necessary and helping with code readability, but otherwise all good.

[jancborchardt]

Looks good to me design-wise!

[provokateurin]

Backend looks good, can't judge frontend

Resolved comments