client-web
client-web copied to clipboard
alkem-io
'More' icon on callouts, grouping all actions in 1 menu
Description
As an admin I get tired of seeing all those settings buttons As a user I get visually tired of seeing all those icons on the callouts As a designer I want a clean looking platform
Acceptance criteria
On a (sub)space page, where all callouts are positioned underneath each other,
- [ ] Move Share and Expand button to be part of the menu, as per design
- [ ] Group positioning actions (move up/down etc) to be submenu under Position of tool (icon: SwapVertOutlined)
- [ ] Order as per design (which includes #5405 sort contributions, can be left out as part of this issue)
- [ ] Clicking on the title opens the dialog
- [ ] UPDATES in the comments on this one - Hovering on the dots icon opens the menu, when opened on hover, close when the mouse moves off the menu + icon (as in global menu)
Additional Context
Figma: https://www.figma.com/design/SiA2BQY2pym2W1m5ZqcXOe/Collection-of-contributions%3A-changing-the-order?node-id=49-145&t=NvfZQtrblpi3EbXT-1
Areas that will be affected
NB: Product team: Note that Tutorials need to be updated after this change!
Please don't hide the Share button under another menu!
Currently, clicking on the Share button leads to another step of choosing how to share. Hiding the Share button would add a 3rd step. 
If I'm working with something / someone, as a user, I would prefer to be able to share it fast :)
@keyboardguy25 When you're working in a whiteboard, the share button will remain directly visible. This is the main place where people use this button. This is just about the callout blocks on the page, where the button is used much less. These pages look massively cleaner and less confusing when all those icons are replaced with one single 'more' icon.
@SimoneZaza, @bobbykolev: I don't know how to map the roles to the privileges, therefore are preserved the checks before this task (for Position of tool - collaboration.authorization.myPrivileges - Update; for Edit, Publish, Delete and Sort Contributions - authorization.myPrivileges - Update). The last bullet of AC - Hovering on the dots icon opens the menu, when opened on hover, close when the mouse moves off the menu + icon (as in global menu) - cannot be done unless refactoring of the callouts and even then using the MUI menu will result in closing the settings menu when the Position of tool menu opens. Also it's not clear how to close the full screen once opened, so I added additional close icon that is not in the design.
I'd suggest extracting the hover functionality in a separate task if it's critical for the UX. Personally, I don't like the popping dialogs on hover. Imagine if you're scrolling vertically around this icon and the callouts' menus are popping in and out.
@SimoneZaza , if you approve the changes we can plan this implementation for the release shortly, and as stated in the ticket, please consider updates in the tutorials.
@bobbykolev @EmiliaPavlova indeed not critical at all, please continue without, very much looking forward to seeing this released!
Overall looks good and as per comments.
Moving it back to backlog, as I cannot verify save as callout template option
