Skip to content

fix(core): app menu launcher tile icon, dark mode, and hyphenation#60232

Open
pringelmann wants to merge 4 commits intomasterfrom
fix/59888/waffle-menu-followups
Open

fix(core): app menu launcher tile icon, dark mode, and hyphenation#60232
pringelmann wants to merge 4 commits intomasterfrom
fix/59888/waffle-menu-followups

Conversation

@pringelmann
Copy link
Copy Markdown
Contributor

Summary

Post-merge fixes to waffle menu:

  • Fix incorrect + icon url
  • Fix + icon not adapting to dark mode
  • (partial) fix for long app name hyphenation
Screenshot_2026-05-08_12-12-25

Checklist

@pringelmann pringelmann added this to the Nextcloud 34 milestone May 8, 2026
@pringelmann pringelmann self-assigned this May 8, 2026
@pringelmann pringelmann requested a review from a team as a code owner May 8, 2026 10:14
@pringelmann pringelmann requested review from nfebe, sorbaugh and susnux and removed request for a team May 8, 2026 10:14
@pringelmann pringelmann added bug design Design, UI, UX, etc. 3. to review Waiting for reviews labels May 8, 2026
@pringelmann pringelmann requested a review from kra-mo May 8, 2026 10:14
@pringelmann pringelmann force-pushed the fix/59888/waffle-menu-followups branch 2 times, most recently from 38785ed to 14f0d41 Compare May 8, 2026 10:49
@pringelmann pringelmann enabled auto-merge May 8, 2026 12:18
@nickvergessen nickvergessen disabled auto-merge May 8, 2026 12:27
Copy link
Copy Markdown
Member

@nickvergessen nickvergessen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

Having #FFFFFF with darkmode does not work properly

@nickvergessen
Copy link
Copy Markdown
Member

nickvergessen commented May 8, 2026

Actually --color-primary-element is FFFFFF which is okay on dark mode, so I guess the icons should be black/dark in those cases? Problem is in

// Force the icon to white on the colored circle, then apply the
// same vertical alpha gradient (--header-menu-icon-mask) used in
// the header so icons read consistently across the design.
filter: brightness(0) invert(1);

@kra-mo
Copy link
Copy Markdown
Member

kra-mo commented May 8, 2026

I guess the icons should be black/dark in those cases

The idea was that instead of changing the foreground color, the background color should always stay the same as it is in light mode. But I think this is known by @pringelmann, I don't think this should block this unrelated fix.

-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>
@pringelmann pringelmann force-pushed the fix/59888/waffle-menu-followups branch from 14f0d41 to 6e9e642 Compare May 8, 2026 12:50
@pringelmann
Copy link
Copy Markdown
Contributor Author

@nickvergessen yes general dark mode compatibility is high on my TODO list. I will open successive PRs in the coming days to resolve these issues.

@susnux
Copy link
Copy Markdown
Contributor

susnux commented May 8, 2026

The idea was that instead of changing the foreground color, the background color should always stay the same as it is in light mode

I think its more about if you set you primary color to #ffffff or a very light color.
So the icons should have proper filter:

- filter: brightness(0) invert(1); 
+ filter: var(--primary-invert-if-bright);

@susnux
Copy link
Copy Markdown
Contributor

susnux commented May 8, 2026

(icons are bright by default so they need to invert to black if the primary background is bright)

-e
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
@pringelmann
Copy link
Copy Markdown
Contributor Author

Icon color fixed

@nickvergessen
Copy link
Copy Markdown
Member

My thinking was that icons might not always be white

It's kind of an implizit requirement since a long time and how the old navigation was also treating (and inverting) them in the row and the overflow menu 🙈
Thanks for addressing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews bug design Design, UI, UX, etc.

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

4 participants