Custom task select

[julien-nc]

Here is the custom button-based task selector.

• The max number of buttons can be easily changed, it's now 5.
• display: flex
• flex-wrap: wrap
• gap-x: 6px
• gap-y: 8px
• NcActionText is buggy (focus-trap + style issues) so we use NcActionButton. Problem is it does not look good without an icon: so we use CircleSmallIcon: . Any suggestion to improve this?
• If a task from the menu is selected, it is added as the last button (6th).

https://github.com/nextcloud/assistant/assets/11291457/d8a18eb2-0d6d-4356-b6e3-24ac431ef847

[julien-nc]

refs https://github.com/nextcloud/server/issues/39478

[skjnldsv]

Does the menu component not allow for a text-only dropdown without the space for icons on the left? @skjnldsv @raimund-schluessler

No, it was deemed to be best to always have an icon for clearer understanding. This is what is recommended by many, including material desing: https://m3.material.io/components/menus/overview

[raimund-schluessler]

Does the menu component not allow for a text-only dropdown without the space for icons on the left?

No, it was deemed to be best to always have an icon for clearer understanding.

This is what is recommended by many, including material desing: https://m3.material.io/components/menus/overview

While I also think having an icon is better, we do have NcActionText which allows to not show an icon next to the label. If the component has style issues as stated above, and you really don't want an icon, I think it would be best to fix the style issues upstream.

[raimund-schluessler]

• Can they be ellipsized into the action menu after 1 line of action? Looks a bit off right now with 1½ lines of actions.

For this, the NcActions component implements the inline prop.

[jancborchardt]

This is what is recommended by many, including material desing: https://m3.material.io/components/menus/overview

The Material Design guidelines and examples have the icon as optional though. We could do it similarly?

[nimishavijay]

Example of how it might look without any icons:

Alternatives:

Show the same icon

We've encountered this problem multiple times now (setting a time for the snooze feature also had discussions regarding this) so it could be best to allow an action menu without any icons also.

it also looks a bit awkward if some items have an icon and some don't (see screenshot) so we could have variants of the action menu where all items have icons or none of the items have icons, what do you think?

[julien-nc]

When only using NcActionButton + NcActions (with inline and force-name) it does not display the action names for those out of the menu. So for now i'm sticking to buttons + NcActionsButtons (in menu only).

For now we can fix the NcActionButton icon issue with CSS.

Can they be ellipsized into the action menu after 1 line of action? Looks a bit off right now with 1½ lines of actions.

@jancborchardt I don't know how to implement this :grin: . Even when switching to NcActionButton + NcActions, we can only set a number of visible items, so if names are long, it wraps anyway.

[julien-nc]

Some news here. If one selects a task from the action menu, it now replaces the last inline button. The last inline button that was replaced is moved in the action menu.

https://github.com/nextcloud/assistant/assets/11291457/719c55a3-b534-4e51-b4df-30c571a12225