From 710285d8c29a091b1446cfb6cff0fdb373c73f15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net> Date: Wed, 22 Feb 2023 12:45:02 +0100 Subject: [PATCH] fix: Adapt the menubar to the primary color if a custom backgorund image has been set MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl <jus@bitgrid.net> --- apps/theming/lib/Themes/CommonThemeTrait.php | 5 +++ cypress/e2e/theming/admin-settings.cy.ts | 46 ++++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 42ee6212cee84..d7836e4c120fc 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -115,6 +115,11 @@ protected function generateGlobalBackgroundVariables(): array { $variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no'; } + // Adapt the menubar to the primary color if a custom backgorund image has been set + if ($this->imageManager->hasImage('background')) { + $variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no'; + } + if ($hasCustomLogoHeader) { $variables['--image-logoheader-custom'] = 'true'; } diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts index 6825e0045c29b..af5d1999d8b85 100644 --- a/cypress/e2e/theming/admin-settings.cy.ts +++ b/cypress/e2e/theming/admin-settings.cy.ts @@ -227,6 +227,52 @@ describe('Remove the default background with a bright color', function() { }) }) +describe('Invert based on primary color if no background image is used', function() { + before(function() { + // Just in case previous test failed + cy.resetAdminTheming() + cy.login(admin) + }) + + it('See the admin theming section', function() { + cy.visit('/settings/admin/theming') + cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView() + cy.get('[data-admin-theming-settings]').should('be.visible') + }) + + it('Set a bright primary color and custom background', function() { + cy.intercept('*/apps/theming/ajax/uploadImage').as('setBackground') + + cy.fixture('image.jpg', null).as('background') + cy.get('[data-admin-theming-setting-file="background"] input[type="file"]').selectFile('@background', { force: true }) + + cy.wait('@setBackground') + cy.waitUntil(() => cy.window().then((win) => { + const currentBackgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default') + return currentBackgroundDefault.includes('/apps/theming/image/background?v=') + })) + + cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor') + + // Pick one of the bright color preset + cy.get('[data-admin-theming-setting-primary-color-picker]').click() + cy.get('.color-picker__simple-color-circle:eq(4)').click() + + cy.wait('@setColor') + cy.waitUntil(() => validateBodyThemingCss('#ddcb55', '/apps/theming/image/background?v=')) + }) + + it('See the header being inverted', function() { + cy.waitUntil(() => cy.window().then((win) => { + const firstEntry = win.document.querySelector('.app-menu-main li img') + if (!firstEntry) { + return false + } + return getComputedStyle(firstEntry).filter === 'invert(1)' + })) + }) +}) + describe('Change the login fields then reset them', function() { const name = 'ABCdef123' const url = 'https://example.com'