Merge pull request #60232 from nextcloud/fix/59888/waffle-menu-followups

fix(core): app menu launcher tile icon, dark mode, and hyphenation
This commit is contained in:
Joas Schilling 2026-05-11 20:25:49 +02:00 committed by GitHub
commit df2e3e077a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 15 additions and 13 deletions

View file

@ -125,10 +125,9 @@ const unreadLabel = computed(() => {
&__icon {
width: var(--app-item-icon-size);
height: var(--app-item-icon-size);
// 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);
// App icons are bright by default; flip them to dark when the
// primary color (circle background) is bright (e.g. white in dark mode).
filter: var(--primary-invert-if-bright);
mask: var(--header-menu-icon-mask);
}
@ -149,6 +148,9 @@ const unreadLabel = computed(() => {
line-height: 1.3;
text-align: center;
color: var(--color-main-text);
// Needs a matching <html lang> to actually break with a hyphen.
-webkit-hyphens: auto;
hyphens: auto;
word-break: normal;
overflow-wrap: break-word;
max-width: 100%;
@ -159,7 +161,7 @@ const unreadLabel = computed(() => {
font-weight: bold;
}
// Outlined variant: no fill or gradient; icon color is unforced.
// Outlined variant: no fill or gradient.
&--outlined &__circle {
background: transparent;
background-image: none;
@ -167,7 +169,7 @@ const unreadLabel = computed(() => {
}
&--outlined &__icon {
filter: brightness(0);
filter: var(--background-invert-if-dark);
mask: none;
}
}

View file

@ -74,7 +74,7 @@ import { getCurrentUser } from '@nextcloud/auth'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import { loadState } from '@nextcloud/initial-state'
import { isRTL, n, t } from '@nextcloud/l10n'
import { generateFilePath, generateUrl } from '@nextcloud/router'
import { generateUrl, imagePath } from '@nextcloud/router'
import { defineComponent, ref } from 'vue'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcPopover from '@nextcloud/vue/components/NcPopover'
@ -120,7 +120,7 @@ export default defineComponent({
active: false,
order: Number.MAX_SAFE_INTEGER,
href: generateUrl('/settings/apps'),
icon: generateFilePath('settings', 'img', 'settings_apps.svg'),
icon: imagePath('core', 'actions/add.svg'),
type: 'link',
name: t('core', 'More apps'),
unread: 0,
@ -131,7 +131,7 @@ export default defineComponent({
active: false,
order: Number.MAX_SAFE_INTEGER,
href: 'https://apps.nextcloud.com/',
icon: generateFilePath('settings', 'img', 'apps.svg'),
icon: imagePath('core', 'actions/add.svg'),
type: 'link',
name: t('core', 'App store'),
unread: 0,

View file

@ -39,7 +39,7 @@ vi.mock('@nextcloud/event-bus', () => eventBus)
// Stub @nextcloud/router so we don't need a webroot for the moreApps URL.
vi.mock('@nextcloud/router', () => ({
generateUrl: (path: string) => path,
generateFilePath: (app: string, type: string, file: string) => `/apps/${app}/${type}/${file}`,
imagePath: (app: string, file: string) => `/${app}/img/${file}`,
}))
// Build a minimal nav entry that satisfies INavigationEntry.

4
dist/core-main.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long