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'