diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index e685424982f..1d6d5100a46 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -156,7 +156,7 @@ class ThemingController extends Controller { } break; case 'disable-user-theming': - if ($value !== "yes" && $value !== "no") { + if ($value !== 'yes' && $value !== 'no') { $error = $this->l10n->t('Disable-user-theming should be true or false'); } break; diff --git a/apps/theming/lib/ImageManager.php b/apps/theming/lib/ImageManager.php index c577e099a96..f536bae0421 100644 --- a/apps/theming/lib/ImageManager.php +++ b/apps/theming/lib/ImageManager.php @@ -97,10 +97,10 @@ class ImageManager { * @throws NotPermittedException */ public function getImage(string $key, bool $useSvg = true): ISimpleFile { - $logo = $this->config->getAppValue('theming', $key . 'Mime', ''); + $mime = $this->config->getAppValue('theming', $key . 'Mime', ''); $folder = $this->getRootFolder()->getFolder('images'); - if ($logo === '' || !$folder->fileExists($key)) { + if ($mime === '' || !$folder->fileExists($key)) { throw new NotFoundException(); } @@ -127,7 +127,8 @@ class ImageManager { public function hasImage(string $key): bool { $mimeSetting = $this->config->getAppValue('theming', $key . 'Mime', ''); - return $mimeSetting !== ''; + // Removing the background defines its mime as 'backgroundColor' + return $mimeSetting !== '' && $mimeSetting !== 'backgroundColor'; } /** diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 1aa1174fabc..eaf76360193 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -97,7 +97,7 @@ trait CommonThemeTrait { foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) { if ($this->imageManager->hasImage($image)) { $imageUrl = $this->imageManager->getImageUrl($image); - // --image-background is overridden by user theming + // --image-background is overridden by user theming if logged in $variables["--image-$image"] = "url('" . $imageUrl . "')"; } } diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php index 7de87389f18..21ab853a140 100644 --- a/apps/theming/lib/ThemingDefaults.php +++ b/apps/theming/lib/ThemingDefaults.php @@ -487,6 +487,7 @@ class ThemingDefaults extends \OC_Defaults { case 'background': case 'favicon': $this->imageManager->delete($setting); + $this->config->deleteAppValue('theming', $setting . 'Mime'); break; } diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts index 750fa5c230e..567bed94c0a 100644 --- a/cypress/e2e/theming/admin-settings.cy.ts +++ b/cypress/e2e/theming/admin-settings.cy.ts @@ -91,7 +91,7 @@ describe('Change the primary color and reset it', function() { }) }) -describe('Remove the default background and restore it', function() { +describe.only('Remove the default background and restore it', function() { before(function() { // Just in case previous test failed cy.resetAdminTheming() @@ -121,7 +121,7 @@ describe('Remove the default background and restore it', function() { cy.logout() cy.visit('/') - cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, '')) + cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null)) cy.screenshot() }) @@ -170,7 +170,7 @@ describe('Remove the default background with a custom primary color', function() cy.logout() cy.visit('/') - cy.waitUntil(() => validateBodyThemingCss(selectedColor, '')) + cy.waitUntil(() => validateBodyThemingCss(selectedColor, null)) cy.screenshot() }) @@ -212,7 +212,7 @@ describe('Remove the default background with a bright color', function() { cy.get('.color-picker__simple-color-circle:eq(4)').click() cy.wait('@setColor') - cy.waitUntil(() => validateBodyThemingCss('#ddcb55', '')) + cy.waitUntil(() => validateBodyThemingCss('#ddcb55', null)) }) it('See the header being inverted', function() { diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts index f3e9d96bd05..f9f4a9b0fd2 100644 --- a/cypress/e2e/theming/themingUtils.ts +++ b/cypress/e2e/theming/themingUtils.ts @@ -25,14 +25,19 @@ import { colord } from 'colord' * Validate the current page body css variables * * @param {string} expectedColor the expected color - * @param {string} expectedBackground the expected background + * @param {string|null} expectedBackground the expected background */ -export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') { +export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground: string|null = 'kamil-porembinski-clouds.jpg') { return cy.window().then((win) => { const guestBackgroundColor = getComputedStyle(win.document.body).backgroundColor const guestBackgroundImage = getComputedStyle(win.document.body).backgroundImage + + const isValidBackgroundImage = expectedBackground === null + ? guestBackgroundImage === 'none' + : guestBackgroundImage.includes(expectedBackground) + return colord(guestBackgroundColor).isEqual(expectedColor) - && guestBackgroundImage.includes(expectedBackground) + && isValidBackgroundImage }) } @@ -42,7 +47,7 @@ export const validateBodyThemingCss = function(expectedColor = '#0082c9', expect * @param {string} expectedColor the expected color * @param {string} expectedBackground the expected background */ -export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') { +export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', expectedBackground: string|null = 'kamil-porembinski-clouds.jpg') { return cy.window().then((win) => { const defaultSelectButton = win.document.querySelector('[data-user-theming-background-default]') const customColorSelectButton = win.document.querySelector('[data-user-theming-background-color]') @@ -53,7 +58,12 @@ export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', const defaultOptionBackground = getComputedStyle(defaultSelectButton).backgroundImage const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor - return defaultOptionBackground.includes(expectedBackground) + + const isValidBackgroundImage = expectedBackground === null + ? defaultOptionBackground === 'none' + : defaultOptionBackground.includes(expectedBackground) + + return isValidBackgroundImage && colord(defaultOptionBorderColor).isEqual(expectedColor) && colord(colorPickerOptionColor).isEqual(expectedColor) }) diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts index 78ff552210b..e324d115034 100644 --- a/cypress/e2e/theming/user-background.cy.ts +++ b/cypress/e2e/theming/user-background.cy.ts @@ -111,7 +111,7 @@ describe('User select shipped backgrounds and remove background', function() { // Validate clear background cy.wait('@clearBackground') - cy.waitUntil(() => validateBodyThemingCss('#56633d', '')) + cy.waitUntil(() => validateBodyThemingCss('#56633d', null)) }) }) @@ -163,7 +163,7 @@ describe('User select a bright custom color and remove background', function() { // Validate clear background cy.wait('@clearBackground') - cy.waitUntil(() => validateBodyThemingCss(undefined, '')) + cy.waitUntil(() => validateBodyThemingCss(undefined, null)) }) it('Select a custom color', function() {