feat(core): app menu waffle launcher#60180
Conversation
- Popover grid replaces the old hamburger overlay - Roving tabindex keyboard nav (arrow keys, Home/End, Enter/Space) - Focus returns to whichever trigger opened the popover - RTL-aware horizontal alignment - Admin-only "More apps" tile - Unit + Cypress coverage Resolves: #59888 Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| .app-item { |
There was a problem hiding this comment.
We can consider moving this to @nextcloud/vue in future, since this item will be used on dashboard, universal search, etc.
Would like to ship in-place for first iteration.
There was a problem hiding this comment.
if planned for nextcloud-vue it would be great to use css modules instead of scoped styles for two-way isolation of styles.
| // NcPopover's focus-trap only knows the slot trigger (waffle). | ||
| // The current-app button lives outside the slot, so we track the | ||
| // source and restore focus manually via setReturnFocus. | ||
| openedFrom: null as 'waffle' | 'currentApp' | null, |
There was a problem hiding this comment.
UX behaviour relevant question here. Used common sense for first iteration.
| return | ||
| } | ||
|
|
||
| const cols = 4 |
There was a problem hiding this comment.
magic number 😬 imo fine for first iteration, but some rework might be needed here.
| case ' ': { | ||
| // Space's default scrolls the nearest scrollable ancestor (the | ||
| // popover); intercept and click programmatically. Enter gets | ||
| // the same treatment so we can close the popover uniformly. |
There was a problem hiding this comment.
Consistent with other waffle menus I looked at, but worth flagging as UX question
There was a problem hiding this comment.
space seems a bit unexpected here rest seems fine (for accessibility)
There was a problem hiding this comment.
fwiw APG recommends this behaviour:
My reasoning is that arrows, Home and End all trigger focus events (which will auto-scroll), making it possible for users to scroll the list without needing a dedicated key for it.
| // which is dark on light themes. The header sits on the theme primary | ||
| // background, so override to use the matching plain-text color. | ||
| --color-main-text: var(--color-background-plain-text); | ||
| color: var(--color-background-plain-text); |
There was a problem hiding this comment.
Might be better to add variants to @nextcloud/vue, but imo fine for first iteration
| --app-item-row-height: 64px; | ||
| --app-menu-rows-visible: 6; | ||
| padding: calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 2); | ||
| display: grid; |
There was a problem hiding this comment.
We can debate whether grid is best/simplest solution here. Happy to iterate on this.
| scrollbar-color: var(--color-scrollbar) transparent !important; | ||
|
|
||
| &::-webkit-scrollbar { | ||
| width: 6px !important; |
There was a problem hiding this comment.
Quick and dirty scrollbar styling. Happy to iterate on this.
pringelmann
added
3. to review
pringelmann
requested review from
ShGKme,
artonge,
kra-mo,
nfebe,
sorbaugh and
susnux
and removed request for
a team
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
| v-if="currentApp" | ||
| class="app-menu__current-app" | ||
| type="button" | ||
| :aria-label="t('core', 'Open apps menu')" |
There was a problem hiding this comment.
so both buttons open the waffle menu?
I would expect this button to open the index of the current app instead
There was a problem hiding this comment.
Yes as per design spec
This also feels like a weird interaction to me, especially since the popup anchor still points to the waffle. Would you mind expanding on what the rationale is here @kra-mo?
There was a problem hiding this comment.
agree UX wise this is unexpected
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
2 participants
Summary
First pass at the waffle launcher behind the apps icon in the header. Opening it shows a 4-wide grid of installed apps in a popover; admins also see a "More apps" tile linking to the app store. The existing current-app button is kept as a second trigger for the same popover.
Preview link
What's in:
TODO
Follow-ups for later PRs:
Checklist
3. to review, feature component)stable32)