Merge pull request #34576 from nextcloud/fix/user-theming-admin-overr…

…ride

Add admin user customization kill switch

apps/theming/css/default.css

@@ -1,6 +1,5 @@
 :root {
   --color-main-background: #ffffff;
-  --color-main-background-not-plain: #0082c9;
   --color-main-background-rgb: 255,255,255;
   --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
   --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
@@ -52,10 +51,11 @@
   --header-menu-item-height: 44px;
   --header-menu-profile-item-height: 66px;
   --breakpoint-mobile: 1024px;
-  --primary-invert-if-bright: no;
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
-  --image-main-background: url('/core/img/app-background.jpg');
+  --image-background: url('/core/img/app-background.jpg');
+  --color-background-plain: #0082c9;
+  --primary-invert-if-bright: no;
   --color-primary: #00639a;
   --color-primary-default: #0082c9;
   --color-primary-text: #ffffff;

apps/theming/css/settings-admin.scss

@@ -31,6 +31,8 @@
     }
     form.uploadButton {
         width: 411px;
+        display: flex;
+        align-items: center;
     }
     form .theme-undo,
     .theme-remove-bg {
@@ -46,7 +48,14 @@
         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,
@@ -61,6 +70,8 @@
     label span {
         display: inline-block;
         min-width: 175px;
+        max-width: 175px;
+        white-space: wrap;
         padding: 8px 0px;
         vertical-align: top;
     }
@@ -137,6 +148,15 @@
 	#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 */

apps/theming/js/settings-admin.js

@@ -173,6 +173,11 @@ window.addEventListener('DOMContentLoaded', function () {
 		var el = $(this);
 	});
 
+	$('#userThemingDisabled').change(function(e) {
+		var checked = e.target.checked
+		setThemingValue('disable-user-theming', checked ? 'yes' : 'no')
+	});
+
 	function onChange(e) {
 		var el = $(this);
 		var setting = el.parent().find('div[data-setting]').data('setting');

apps/theming/lib/Command/UpdateConfig.php

@@ -33,7 +33,7 @@
 
 class UpdateConfig extends Command {
 	public const SUPPORTED_KEYS = [
-		'name', 'url', 'imprintUrl', 'privacyUrl', 'slogan', 'color'
+		'name', 'url', 'imprintUrl', 'privacyUrl', 'slogan', 'color', 'disable-user-theming'
 	];
 
 	public const SUPPORTED_IMAGE_KEYS = [

apps/theming/lib/Controller/ThemingController.php

@@ -151,6 +151,11 @@ public function updateStylesheet($setting, $value) {
 					$error = $this->l10n->t('The given color is invalid');
 				}
 				break;
+			case 'disable-user-theming':
+				if ($value !== "yes" && $value !== "no") {
+					$error = $this->l10n->t('Disable-user-theming should be true or false');
+				}
+				break;
 		}
 		if ($error !== null) {
 			return new DataResponse([

apps/theming/lib/ImageManager.php

@@ -45,6 +45,7 @@
 use OCP\IURLGenerator;
 
 class ImageManager {
+	public const SupportedImageKeys = ['background', 'logo', 'logoheader', 'favicon'];
 
 	/** @var IConfig */
 	private $config;
@@ -53,7 +54,6 @@ class ImageManager {
 	/** @var IURLGenerator */
 	private $urlGenerator;
 	/** @var array */
-	private $supportedImageKeys = ['background', 'logo', 'logoheader', 'favicon'];
 	/** @var ICacheFactory */
 	private $cacheFactory;
 	/** @var ILogger */
@@ -142,7 +142,7 @@ public function hasImage(string $key): bool {
 	 */
 	public function getCustomImages(): array {
 		$images = [];
-		foreach ($this->supportedImageKeys as $key) {
+		foreach ($this::SupportedImageKeys as $key) {
 			$images[$key] = [
 				'mime' => $this->config->getAppValue('theming', $key . 'Mime', ''),
 				'url' => $this->getImageUrl($key),

apps/theming/lib/Settings/Admin.php

@@ -82,6 +82,7 @@ public function getForm(): TemplateResponse {
 			'images' => $this->imageManager->getCustomImages(),
 			'imprintUrl' => $this->themingDefaults->getImprintUrl(),
 			'privacyUrl' => $this->themingDefaults->getPrivacyUrl(),
+			'userThemingDisabled' => $this->themingDefaults->isUserThemingDisabled(),
 		];
 
 		return new TemplateResponse($this->appName, 'settings-admin', $parameters, '');

apps/theming/lib/Settings/Personal.php

@@ -27,6 +27,7 @@
 
 use OCA\Theming\ITheme;
 use OCA\Theming\Service\ThemesService;
+use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
@@ -39,15 +40,18 @@ class Personal implements ISettings {
 	private IConfig $config;
 	private ThemesService $themesService;
 	private IInitialState $initialStateService;
+	private ThemingDefaults $themingDefaults;
 
 	public function __construct(string $appName,
 								IConfig $config,
 								ThemesService $themesService,
-								IInitialState $initialStateService) {
+								IInitialState $initialStateService,
+								ThemingDefaults $themingDefaults) {
 		$this->appName = $appName;
 		$this->config = $config;
 		$this->themesService = $themesService;
 		$this->initialStateService = $initialStateService;
+		$this->themingDefaults = $themingDefaults;
 	}
 
 	public function getForm(): TemplateResponse {
@@ -72,6 +76,7 @@ public function getForm(): TemplateResponse {
 
 		$this->initialStateService->provideInitialState('themes', array_values($themes));
 		$this->initialStateService->provideInitialState('enforceTheme', $enforcedTheme);
+		$this->initialStateService->provideInitialState('isUserThemingDisabled', $this->themingDefaults->isUserThemingDisabled());
 		Util::addScript($this->appName, 'theming-settings');
 
 		return new TemplateResponse($this->appName, 'settings-personal');

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -24,6 +24,9 @@
  */
 namespace OCA\Theming\Themes;
 
+use OCA\Theming\AppInfo\Application;
+use OCA\Theming\ImageManager;
+use OCA\Theming\Service\BackgroundService;
 use OCA\Theming\Util;
 
 trait CommonThemeTrait {
@@ -41,6 +44,15 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 
 		// primary related colours
 		return [
+			// invert filter if primary is too bright
+			// to be used for legacy reasons only. Use inline
+			// svg with proper css variable instead or material
+			// design icons.
+			// ⚠️ Using 'no' as a value to make sure we specify an
+			// invalid one with no fallback. 'unset' could here fallback to some
+			// other theme with media queries
+			'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
+
 			'--color-primary' => $this->primaryColor,
 			'--color-primary-default' => $this->defaultPrimaryColor,
 			'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
@@ -63,4 +75,82 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
 		];
 	}
+
+	/**
+	 * Generate admin theming background-related variables
+	 */
+	protected function generateGlobalBackgroundVariables(): array {
+		$backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
+		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
+
+		$variables = [];
+
+		// If primary as background has been request or if we have a custom primary colour
+		// let's not define the background image
+		if ($backgroundDeleted && $this->themingDefaults->isUserThemingDisabled()) {
+			$variables['--image-background-plain'] = 'true';
+			$variables['--color-background-plain'] = $this->themingDefaults->getColorPrimary();
+		}
+
+		// Register image variables only if custom-defined
+		foreach (ImageManager::SupportedImageKeys as $image) {
+			if ($this->imageManager->hasImage($image)) {
+				$imageUrl = $this->imageManager->getImageUrl($image);
+				if ($image === 'background') {
+					// If background deleted is set, ignoring variable
+					if ($backgroundDeleted) {
+						continue;
+					}
+					$variables['--image-background-size'] = 'cover';
+				}
+				$variables["--image-$image"] = "url('" . $imageUrl . "')";
+			}
+		}
+
+		if ($hasCustomLogoHeader) {
+			$variables["--image-logoheader-custom"] = 'true';
+		}
+
+		return $variables;
+	}
+
+	/**
+	 * Generate user theming background-related variables
+	 */
+	protected function generateUserBackgroundVariables(): array {
+		$user = $this->userSession->getUser();
+		if ($user !== null
+			&& !$this->themingDefaults->isUserThemingDisabled()
+			&& $this->appManager->isEnabledForUser(Application::APP_ID)) {
+			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
+			$currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0');
+
+			// The user uploaded a custom background
+			if ($themingBackground === '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
+				];
+			}
+
+			// The user picked a shipped background
+			if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) {
+				return [
+					'--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')",
+					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+				];
+			}
+
+			// The user picked a static colour
+			if (substr($themingBackground, 0, 1) === '#') {
+				return [
+					'--image-background' => 'no',
+					'--color-background-plain' => $this->themingDefaults->getColorPrimary(),
+				];
+			}
+		}
+
+		return [];
+	}
 }