From cedae7c6d74e11c8aaa59b09a38db04dbebc818d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Thu, 20 Oct 2022 13:18:06 +0200 Subject: [PATCH] Allow to remove the background and select a custom colour MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- apps/theming/appinfo/routes.php | 5 + apps/theming/css/settings-admin.css | 148 ++++++++++++ apps/theming/css/settings-admin.scss | 168 ++++++++++++++ apps/theming/lib/Command/UpdateConfig.php | 10 +- .../lib/Controller/UserThemeController.php | 25 +- apps/theming/lib/ImageManager.php | 37 ++- .../lib/Jobs/MigrateBackgroundImages.php | 1 + .../BeforeTemplateRenderedListener.php | 20 +- .../theming/lib/Service/BackgroundService.php | 29 ++- apps/theming/lib/Themes/CommonThemeTrait.php | 35 +-- apps/theming/lib/Themes/DefaultTheme.php | 5 - apps/theming/lib/ThemingDefaults.php | 15 +- apps/theming/src/UserThemes.vue | 25 +- .../src/components/BackgroundSettings.vue | 217 +++++++++++------- apps/theming/src/helpers/getBackgroundUrl.js | 49 ---- apps/theming/src/helpers/prefixWithBaseUrl.js | 25 -- .../Controller/ThemingControllerTest.php | 2 +- apps/theming/tests/ThemingDefaultsTest.php | 8 +- core/css/apps.css | Bin 62277 -> 62310 bytes core/css/apps.scss | 2 +- core/css/guest.css | Bin 19116 -> 19081 bytes core/css/server.css | Bin 161787 -> 161820 bytes core/img/app-background.jpg | Bin 190294 -> 0 bytes core/img/background.png | Bin 9621 -> 0 bytes core/img/background.svg | 1 - 25 files changed, 583 insertions(+), 244 deletions(-) create mode 100644 apps/theming/css/settings-admin.css create mode 100644 apps/theming/css/settings-admin.scss delete mode 100644 apps/theming/src/helpers/getBackgroundUrl.js delete mode 100644 apps/theming/src/helpers/prefixWithBaseUrl.js delete mode 100644 core/img/app-background.jpg delete mode 100644 core/img/background.png delete mode 100644 core/img/background.svg diff --git a/apps/theming/appinfo/routes.php b/apps/theming/appinfo/routes.php index 0b51b22dbb7..eceb447620d 100644 --- a/apps/theming/appinfo/routes.php +++ b/apps/theming/appinfo/routes.php @@ -88,6 +88,11 @@ return [ 'url' => '/background/{type}', 'verb' => 'POST', ], + [ + 'name' => 'userTheme#deleteBackground', + 'url' => '/background/custom', + 'verb' => 'DELETE', + ], ], 'ocs' => [ [ diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css new file mode 100644 index 00000000000..1979387c5dd --- /dev/null +++ b/apps/theming/css/settings-admin.css @@ -0,0 +1,148 @@ +#theming input { + width: 230px; +} +#theming input:focus, +#theming input:active { + padding-right: 30px; +} +#theming .fileupload { + display: none; +} +#theming div > label { + position: relative; +} +#theming .theme-undo { + position: absolute; + top: -7px; + right: 4px; + cursor: pointer; + opacity: 0.3; + padding: 7px; + vertical-align: top; + display: inline-block; + visibility: hidden; + height: 32px; + width: 32px; +} +#theming form.uploadButton { + width: 411px; + display: flex; + align-items: center; +} +#theming form .theme-undo, +#theming .theme-remove-bg { + cursor: pointer; + opacity: 0.3; + padding: 7px; + vertical-align: top; + display: inline-block; + float: right; + position: relative; + top: 4px; + right: 0px; + visibility: visible; + height: 32px; + width: 32px; + margin-left: auto; +} +#theming form .theme-undo:not([style*="display:"]) ~ .theme-remove-bg { + margin-left: 0; +} +#theming input[type=text]:hover + .theme-undo, +#theming input[type=text] + .theme-undo:hover, +#theming input[type=text]:focus + .theme-undo, +#theming input[type=text]:active + .theme-undo, +#theming input[type=url]:hover + .theme-undo, +#theming input[type=url] + .theme-undo:hover, +#theming input[type=url]:focus + .theme-undo, +#theming input[type=url]:active + .theme-undo { + visibility: visible; +} +#theming label span { + display: inline-block; + min-width: 175px; + max-width: 175px; + white-space: wrap; + padding: 8px 0px; + vertical-align: top; +} +#theming .icon-upload, +#theming .uploadButton .icon-loading-small { + padding: 8px 20px; + width: 20px; + margin: 2px 0px; + min-height: 32px; + display: inline-block; +} +#theming #theming_settings_status { + height: 26px; + margin: 10px; +} +#theming #theming_settings_loading { + display: inline-block; + vertical-align: middle; + margin-right: 10px; +} +#theming #theming_settings_msg { + vertical-align: middle; + border-radius: 3px; +} +#theming #theming-preview { + width: 230px; + height: 140px; + background-size: cover; + background-position: center center; + text-align: center; + margin-left: 178px; + margin-top: 10px; + margin-bottom: 20px; + cursor: pointer; + background-color: var(--color-primary-default); + background-image: var(--image-background-default, var(--image-background-plain, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%))); +} +#theming #theming-preview #theming-preview-logo { + cursor: pointer; + width: 20%; + height: 20%; + margin-top: 20px; + display: inline-block; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: var(--image-logo, url("../../../core/img/logo/logo.svg")); +} +#theming .theming-hints { + margin-top: 20px; +} +#theming .image-preview { + display: inline-block; + width: 80px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} +#theming #theming-preview-logoheader { + background-image: var(--image-logoheader); +} +#theming #theming-preview-favicon { + background-image: var(--image-favicon); +} +#theming #user-theming { + margin-top: 44px; + display: flex; +} +#theming #user-theming > div { + max-width: 400px; + margin-bottom: 44px; +} + +/* transition effects for theming value changes */ +#header { + transition: background-color 500ms linear; +} +#header svg, #header img { + transition: 500ms filter linear; +} + +/*# sourceMappingURL=settings-admin.css.map */ diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss new file mode 100644 index 00000000000..f34dea52698 --- /dev/null +++ b/apps/theming/css/settings-admin.scss @@ -0,0 +1,168 @@ +#theming { + input { + width: 230px; + } + + input:focus, + input:active { + padding-right: 30px; + } + + .fileupload { + display: none; + } + + div > label { + position: relative; + } + + .theme-undo { + position: absolute; + top: -7px; // input padding + right: 4px; // input right margin + border + cursor: pointer; + opacity: .3; + padding: 7px; + vertical-align: top; + display: inline-block; + visibility: hidden; + height: 32px; // height of input + width: 32px; // height of input + } + form.uploadButton { + width: 411px; + display: flex; + align-items: center; + } + form .theme-undo, + .theme-remove-bg { + cursor: pointer; + opacity: .3; + padding: 7px; + vertical-align: top; + display: inline-block; + float: right; + position: relative; + top: 4px; + right: 0px; + visibility: visible; + height: 32px; + width: 32px; + // right align + margin-left: auto; + } + form .theme-undo:not([style*="display:"]) ~ .theme-remove-bg { + // Only align the undo button if both are shown + margin-left: 0; + } + + input[type='text']:hover + .theme-undo, + input[type='text'] + .theme-undo:hover, + input[type='text']:focus + .theme-undo, + input[type='text']:active + .theme-undo, + input[type='url']:hover + .theme-undo, + input[type='url'] + .theme-undo:hover, + input[type='url']:focus + .theme-undo, + input[type='url']:active + .theme-undo{ + visibility: visible; + } + + label span { + display: inline-block; + min-width: 175px; + max-width: 175px; + white-space: wrap; + padding: 8px 0px; + vertical-align: top; + } + + .icon-upload, + .uploadButton .icon-loading-small { + padding: 8px 20px; + width: 20px; + margin: 2px 0px; + min-height: 32px; + display: inline-block; + } + + #theming_settings_status { + height: 26px; + margin: 10px; + } + + #theming_settings_loading { + display: inline-block; + vertical-align: middle; + margin-right: 10px; + } + + #theming_settings_msg { + vertical-align: middle; + border-radius: 3px; + } + + #theming-preview { + width: 230px; + height: 140px; + background-size: cover; + background-position: center center; + text-align: center; + margin-left: 178px; + margin-top: 10px; + margin-bottom: 20px; + cursor: pointer; + background-color: var(--color-primary-default); + background-image: var(--image-background-default, var(--image-background-plain, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%))); + + #theming-preview-logo { + cursor: pointer; + width: 20%; + height: 20%; + margin-top: 20px; + display: inline-block; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: var(--image-logo, url('../../../core/img/logo/logo.svg')); + } + } + + .theming-hints { + margin-top: 20px; + } + + .image-preview { + display: inline-block; + width: 80px; + height: 36px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } + + #theming-preview-logoheader { + // Only using --image-logoheader to show the custom value only + background-image: var(--image-logoheader); + } + + #theming-preview-favicon { + background-image: var(--image-favicon); + } + + #user-theming { + margin-top: 44px; + display: flex; + & > div { + max-width: 400px; + margin-bottom: 44px; + } + } +} + +/* transition effects for theming value changes */ +#header { + transition: background-color 500ms linear; + svg, img { + transition: 500ms filter linear; + } +} diff --git a/apps/theming/lib/Command/UpdateConfig.php b/apps/theming/lib/Command/UpdateConfig.php index c327c92492f..58dfcff8a8e 100644 --- a/apps/theming/lib/Command/UpdateConfig.php +++ b/apps/theming/lib/Command/UpdateConfig.php @@ -36,10 +36,6 @@ class UpdateConfig extends Command { 'name', 'url', 'imprintUrl', 'privacyUrl', 'slogan', 'color', 'disable-user-theming' ]; - public const SUPPORTED_IMAGE_KEYS = [ - 'background', 'logo', 'favicon', 'logoheader' - ]; - private $themingDefaults; private $imageManager; private $config; @@ -87,14 +83,14 @@ class UpdateConfig extends Command { $value = $this->config->getAppValue('theming', $key, ''); $output->writeln('- ' . $key . ': ' . $value . ''); } - foreach (self::SUPPORTED_IMAGE_KEYS as $key) { + foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $key) { $value = $this->config->getAppValue('theming', $key . 'Mime', ''); $output->writeln('- ' . $key . ': ' . $value . ''); } return 0; } - if (!in_array($key, self::SUPPORTED_KEYS, true) && !in_array($key, self::SUPPORTED_IMAGE_KEYS, true)) { + if (!in_array($key, self::SUPPORTED_KEYS, true) && !in_array($key, ImageManager::SUPPORTED_IMAGE_KEYS, true)) { $output->writeln('Invalid config key provided'); return 1; } @@ -115,7 +111,7 @@ class UpdateConfig extends Command { return 0; } - if (in_array($key, self::SUPPORTED_IMAGE_KEYS, true)) { + if (in_array($key, ImageManager::SUPPORTED_IMAGE_KEYS, true)) { if (strpos($value, '/') !== 0) { $output->writeln('The image file needs to be provided as an absolute path: ' . $value . '.'); return 1; diff --git a/apps/theming/lib/Controller/UserThemeController.php b/apps/theming/lib/Controller/UserThemeController.php index 635dad34736..888ab9a0ca8 100644 --- a/apps/theming/lib/Controller/UserThemeController.php +++ b/apps/theming/lib/Controller/UserThemeController.php @@ -155,21 +155,34 @@ class UserThemeController extends OCSController { /** * @NoAdminRequired */ - public function setBackground(string $type = 'default', string $value = ''): JSONResponse { + public function deleteBackground(): JSONResponse { + $currentVersion = (int)$this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0'); + $this->backgroundService->deleteBackgroundImage(); + return new JSONResponse([ + 'backgroundImage' => null, + 'backgroundColor' => $this->themingDefaults->getColorPrimary(), + 'version' => $currentVersion, + ]); + } + + /** + * @NoAdminRequired + */ + public function setBackground(string $type = BackgroundService::BACKGROUND_DEFAULT, string $value = ''): JSONResponse { $currentVersion = (int)$this->config->getUserValue($this->userId, Application::APP_ID, 'userCacheBuster', '0'); try { switch ($type) { - case 'shipped': + case BackgroundService::BACKGROUND_SHIPPED: $this->backgroundService->setShippedBackground($value); break; - case 'custom': + case BackgroundService::BACKGROUND_CUSTOM: $this->backgroundService->setFileBackground($value); break; case 'color': $this->backgroundService->setColorBackground($value); break; - case 'default': + case BackgroundService::BACKGROUND_DEFAULT: $this->backgroundService->setDefaultBackground(); break; default: @@ -185,8 +198,8 @@ class UserThemeController extends OCSController { $this->config->setUserValue($this->userId, Application::APP_ID, 'userCacheBuster', (string)$currentVersion); return new JSONResponse([ - 'type' => $type, - 'value' => $value, + 'backgroundImage' => $this->config->getUserValue($this->userId, Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT), + 'backgroundColor' => $this->themingDefaults->getColorPrimary(), 'version' => $currentVersion, ]); } diff --git a/apps/theming/lib/ImageManager.php b/apps/theming/lib/ImageManager.php index 88a733580fc..ce9c2525802 100644 --- a/apps/theming/lib/ImageManager.php +++ b/apps/theming/lib/ImageManager.php @@ -33,6 +33,8 @@ */ namespace OCA\Theming; +use OCA\Theming\AppInfo\Application; +use OCA\Theming\Service\BackgroundService; use OCP\Files\IAppData; use OCP\Files\NotFoundException; use OCP\Files\NotPermittedException; @@ -45,7 +47,7 @@ use OCP\ITempManager; use OCP\IURLGenerator; class ImageManager { - public const SupportedImageKeys = ['background', 'logo', 'logoheader', 'favicon']; + public const SUPPORTED_IMAGE_KEYS = ['background', 'logo', 'logoheader', 'favicon']; /** @var IConfig */ private $config; @@ -74,8 +76,14 @@ class ImageManager { $this->appData = $appData; } - public function getImageUrl(string $key, bool $useSvg = true): string { - $cacheBusterCounter = $this->config->getAppValue('theming', 'cachebuster', '0'); + /** + * Get a globally defined image (admin theming settings) + * + * @param string $key the image key + * @return string the image url + */ + public function getImageUrl(string $key): string { + $cacheBusterCounter = $this->config->getAppValue(Application::APP_ID, 'cachebuster', '0'); if ($this->hasImage($key)) { return $this->urlGenerator->linkToRoute('theming.Theming.getImage', [ 'key' => $key ]) . '?v=' . $cacheBusterCounter; } @@ -86,13 +94,16 @@ class ImageManager { case 'favicon': return $this->urlGenerator->imagePath('core', 'logo/logo.png') . '?v=' . $cacheBusterCounter; case 'background': - return $this->urlGenerator->imagePath('core', 'background.png') . '?v=' . $cacheBusterCounter; + return $this->urlGenerator->linkTo(Application::APP_ID, "img/background/" . BackgroundService::DEFAULT_BACKGROUND); } return ''; } - public function getImageUrlAbsolute(string $key, bool $useSvg = true): string { - return $this->urlGenerator->getAbsoluteURL($this->getImageUrl($key, $useSvg)); + /** + * Get the absolute url. See getImageUrl + */ + public function getImageUrlAbsolute(string $key): string { + return $this->urlGenerator->getAbsoluteURL($this->getImageUrl($key)); } /** @@ -136,6 +147,20 @@ class ImageManager { return $mimeSetting !== ''; } + /** + * @return array + */ + public function getCustomImages(): array { + $images = []; + foreach (self::SUPPORTED_IMAGE_KEYS as $key) { + $images[$key] = [ + 'mime' => $this->config->getAppValue('theming', $key . 'Mime', ''), + 'url' => $this->getImageUrl($key), + ]; + } + return $images; + } + /** * Get folder for current theming files * diff --git a/apps/theming/lib/Jobs/MigrateBackgroundImages.php b/apps/theming/lib/Jobs/MigrateBackgroundImages.php index 54c0d591e40..4b0cf187bae 100644 --- a/apps/theming/lib/Jobs/MigrateBackgroundImages.php +++ b/apps/theming/lib/Jobs/MigrateBackgroundImages.php @@ -27,6 +27,7 @@ declare(strict_types=1); namespace OCA\Theming\Jobs; use OCA\Theming\AppInfo\Application; +use OCP\App\IAppManager; use OCP\AppFramework\Utility\ITimeFactory; use OCP\BackgroundJob\IJobList; use OCP\BackgroundJob\QueuedJob; diff --git a/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php b/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php index a6e0923e643..d0fa9690602 100644 --- a/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php +++ b/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php @@ -84,16 +84,32 @@ class BeforeTemplateRenderedListener implements IEventListener { if (!empty($user)) { $userId = $user->getUID(); + /** User background */ $this->initialState->provideInitialState( - 'background', - $this->config->getUserValue($userId, Application::APP_ID, 'background', 'default'), + 'backgroundImage', + $this->config->getUserValue($userId, Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT), ); + /** User color */ + $this->initialState->provideInitialState( + 'backgroundColor', + $this->config->getUserValue($userId, Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT), + ); + + /** + * Admin background. `backgroundColor` if disabled, + * mime type if defined and empty by default + */ $this->initialState->provideInitialState( 'themingDefaultBackground', $this->config->getAppValue('theming', 'backgroundMime', ''), ); + $this->initialState->provideInitialState( + 'defaultShippedBackground', + BackgroundService::DEFAULT_BACKGROUND, + ); + /** List of all shipped backgrounds */ $this->initialState->provideInitialState( 'shippedBackgrounds', BackgroundService::SHIPPED_BACKGROUNDS, diff --git a/apps/theming/lib/Service/BackgroundService.php b/apps/theming/lib/Service/BackgroundService.php index d49878b11b0..667ca99a1f9 100644 --- a/apps/theming/lib/Service/BackgroundService.php +++ b/apps/theming/lib/Service/BackgroundService.php @@ -48,6 +48,12 @@ class BackgroundService { public const DEFAULT_COLOR = '#0082c9'; public const DEFAULT_ACCESSIBLE_COLOR = '#006aa3'; + public const BACKGROUND_SHIPPED = 'shipped'; + public const BACKGROUND_CUSTOM = 'custom'; + public const BACKGROUND_DEFAULT = 'default'; + public const BACKGROUND_DISABLED = 'disabled'; + + public const DEFAULT_BACKGROUND = 'kamil-porembinski-clouds.jpg'; public const SHIPPED_BACKGROUNDS = [ 'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [ 'attribution' => 'Butterfly wing scale (Anatoly Mikhaltsov, CC BY-SA)', @@ -153,7 +159,7 @@ class BackgroundService { } public function setDefaultBackground(): void { - $this->config->deleteUserValue($this->userId, Application::APP_ID, 'background'); + $this->config->deleteUserValue($this->userId, Application::APP_ID, 'background_image'); } /** @@ -165,7 +171,7 @@ class BackgroundService { * @throws NoUserException */ public function setFileBackground($path): void { - $this->config->setUserValue($this->userId, Application::APP_ID, 'background', 'custom'); + $this->config->setUserValue($this->userId, Application::APP_ID, 'background_image', self::BACKGROUND_DEFAULT); $userFolder = $this->rootFolder->getUserFolder($this->userId); /** @var File $file */ @@ -183,27 +189,28 @@ class BackgroundService { if (!array_key_exists($fileName, self::SHIPPED_BACKGROUNDS)) { throw new InvalidArgumentException('The given file name is invalid'); } - $this->config->setUserValue($this->userId, Application::APP_ID, 'background', $fileName); + $this->config->setUserValue($this->userId, Application::APP_ID, 'background_image', $fileName); + $this->setColorBackground(self::SHIPPED_BACKGROUNDS[$fileName]['primary_color']); } public function setColorBackground(string $color): void { if (!preg_match('/^#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) { throw new InvalidArgumentException('The given color is invalid'); } - $this->config->setUserValue($this->userId, Application::APP_ID, 'background', $color); + $this->config->setUserValue($this->userId, Application::APP_ID, 'background_color', $color); + } + + public function deleteBackgroundImage(): void { + $this->config->setUserValue($this->userId, Application::APP_ID, 'background_image', self::BACKGROUND_DISABLED); } public function getBackground(): ?ISimpleFile { - $background = $this->config->getUserValue($this->userId, Application::APP_ID, 'background', 'default'); - if ($background === 'custom') { + $background = $this->config->getUserValue($this->userId, Application::APP_ID, 'background_image', self::BACKGROUND_DEFAULT); + if ($background === self::BACKGROUND_CUSTOM) { try { return $this->getAppDataFolder()->getFile('background.jpg'); } catch (NotFoundException | NotPermittedException $e) { - try { - // Fallback can be removed in 26 - $dashboardFolder = $this->appDataFactory->get('dashboard'); - return $dashboardFolder->getFolder($this->userId)->getFile('background.jpg'); - } catch (\Throwable $t) {} + return null; } } return null; diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 360c335fc7d..c58a3fd43e3 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -88,6 +88,10 @@ trait CommonThemeTrait { $variables = []; + // Default last fallback values + $variables['--image-background-default'] = $backgroundDeleted ?: "url('" . $this->themingDefaults->getBackground() . "')"; + $variables['--color-background-plain'] = $this->defaultPrimaryColor; + // If primary as background has been request or if we have a custom primary colour // let's not define the background image if ($backgroundDeleted) { @@ -98,7 +102,7 @@ trait CommonThemeTrait { } // Register image variables only if custom-defined - foreach (ImageManager::SupportedImageKeys as $image) { + foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) { if ($this->imageManager->hasImage($image)) { $imageUrl = $this->imageManager->getImageUrl($image); if ($image === 'background') { @@ -110,6 +114,7 @@ trait CommonThemeTrait { $variables['--image-background-size'] = 'cover'; $variables['--image-background-default'] = "url('" . $imageUrl . "')"; } + // --image-background is overriden by user theming $variables["--image-$image"] = "url('" . $imageUrl . "')"; } } @@ -129,32 +134,32 @@ trait CommonThemeTrait { if ($user !== null && !$this->themingDefaults->isUserThemingDisabled() && $this->appManager->isEnabledForUser(Application::APP_ID)) { - $themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default'); + $backgroundImage = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT); $currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0'); + // The user removed the background + if ($backgroundImage === BackgroundService::BACKGROUND_DISABLED) { + return [ + '--image-background' => 'no', + '--color-background-plain' => $this->themingDefaults->getColorPrimary(), + ]; + } + // The user uploaded a custom background - if ($themingBackground === 'custom') { + if ($backgroundImage === BackgroundService::BACKGROUND_CUSTOM) { $cacheBuster = substr(sha1($user->getUID() . '_' . $currentVersion), 0, 8); return [ '--image-background' => "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$cacheBuster')", - // TODO: implement primary color from custom background --color-background-plain + '--color-background-plain' => $this->themingDefaults->getColorPrimary(), ]; } // The user picked a shipped background - if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) { + if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage])) { return [ - '--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')", - '--color-background-plain' => $this->themingDefaults->getColorPrimary(), - '--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no', - ]; - } - - // The user picked a static colour - if (substr($themingBackground, 0, 1) === '#') { - return [ - '--image-background' => 'no', + '--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')", '--color-background-plain' => $this->themingDefaults->getColorPrimary(), + '--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no', ]; } } diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 85e437a82e5..100d34864fc 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -190,11 +190,6 @@ class DefaultTheme implements ITheme { '--background-invert-if-dark' => 'no', '--background-invert-if-bright' => 'invert(100%)', '--background-image-invert-if-bright' => 'no', - - // Default last fallback values - '--image-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')", - '--image-background-default' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')", - '--color-background-plain' => $this->defaultPrimaryColor, ]; // Primary variables diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php index 16ea7a14c0f..42965ca6795 100644 --- a/apps/theming/lib/ThemingDefaults.php +++ b/apps/theming/lib/ThemingDefaults.php @@ -226,23 +226,12 @@ class ThemingDefaults extends \OC_Defaults { } // user-defined primary color - $themingBackground = ''; if (!empty($user)) { - $themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', ''); - // If the user selected the default background - if ($themingBackground === '') { - return BackgroundService::DEFAULT_COLOR; - } - + $themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background_color', ''); // If the user selected a specific colour if (preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $themingBackground)) { return $themingBackground; } - - // if the user-selected background is a background reference - if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) { - return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color']; - } } // If the default color is not valid, return the default background one @@ -477,7 +466,7 @@ class ThemingDefaults extends \OC_Defaults { $returnValue = $this->getSlogan(); break; case 'color': - $returnValue = $this->getColorPrimary(); + $returnValue = $this->getDefaultColorPrimary(); break; case 'logo': case 'logoheader': diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue index 5a41c019017..7220820a3c3 100644 --- a/apps/theming/src/UserThemes.vue +++ b/apps/theming/src/UserThemes.vue @@ -69,10 +69,7 @@ @@ -92,8 +89,6 @@ const availableThemes = loadState('theming', 'themes', []) const enforceTheme = loadState('theming', 'enforceTheme', '') const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false) -const background = loadState('theming', 'background') -const themingDefaultBackground = loadState('theming', 'themingDefaultBackground') const isUserThemingDisabled = loadState('theming', 'isUserThemingDisabled') console.debug('Available themes', availableThemes) @@ -111,10 +106,10 @@ export default { data() { return { availableThemes, + + // Admin defined configs enforceTheme, shortcutsDisabled, - background, - themingDefaultBackground, isUserThemingDisabled, } }, @@ -173,9 +168,21 @@ export default { }, methods: { + // Refresh server-side generated theming CSS + refreshGlobalStyles() { + [...document.head.querySelectorAll('link.theme')].forEach(theme => { + const url = new URL(theme.href) + url.searchParams.set('v', Date.now()) + const newTheme = theme.cloneNode() + newTheme.href = url.toString() + newTheme.onload = () => theme.remove() + document.head.append(newTheme) + }) + }, + updateBackground(data) { this.background = (data.type === 'custom' || data.type === 'default') ? data.type : data.value - this.$emit('update:background') + this.refreshGlobalStyles() }, changeTheme({ enabled, id }) { diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue index 45e627fd378..9890f9ad3f0 100644 --- a/apps/theming/src/components/BackgroundSettings.vue +++ b/apps/theming/src/components/BackgroundSettings.vue @@ -26,68 +26,75 @@