Merge pull request #34432 from nextcloud/backport/34298/stable25

[stable25] Use color preset of shipped background as primary color
nextcloud · Oct 5, 2022 · 0c6b5cd · 0c6b5cd
2 parents ab95924 + d1dc38d
commit 0c6b5cd
Show file tree

Hide file tree

Showing 18 changed files with 131 additions and 77 deletions.
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
@@ -1,5 +1,6 @@
 :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);
@@ -53,19 +54,19 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --image-main-background: url('/core/img/app-background.jpg');
-  --color-primary: #0082c9;
+  --color-primary: #00639a;
   --color-primary-text: #ffffff;
-  --color-primary-hover: #329bd3;
-  --color-primary-light: #e5f2f9;
-  --color-primary-light-text: #003450;
-  --color-primary-light-hover: #dbe7ee;
+  --color-primary-hover: #3282ae;
+  --color-primary-light: #e5eff4;
+  --color-primary-light-text: #00273d;
+  --color-primary-light-hover: #dbe4e9;
   --color-primary-text-dark: #ededed;
-  --color-primary-element: #0082c9;
+  --color-primary-element: #00639a;
   --color-primary-element-text: #ffffff;
-  --color-primary-element-hover: #329bd3;
-  --color-primary-element-light: #e5f2f9;
-  --color-primary-element-light-text: #003450;
-  --color-primary-element-light-hover: #dbe7ee;
+  --color-primary-element-hover: #3282ae;
+  --color-primary-element-light: #e5eff4;
+  --color-primary-element-light-text: #00273d;
+  --color-primary-element-light-hover: #dbe4e9;
   --color-primary-element-text-dark: #ededed;
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
 }
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss
@@ -100,7 +100,7 @@
         margin-top: 10px;
         margin-bottom: 20px;
         cursor: pointer;
-        background-color: var(--color-primary);
+        background-color: var(--color-main-background-not-plain, var(--color-primary));
         background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/app-background.jpg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
 
         #theming-preview-logo {
@@ -145,4 +145,4 @@
     svg, img {
         transition: 500ms filter linear;
     }
-}
+}
diff --git a/apps/theming/lib/Service/BackgroundService.php b/apps/theming/lib/Service/BackgroundService.php
@@ -44,6 +44,8 @@
 class BackgroundService {
 	// true when the background is bright and need dark icons
 	public const THEMING_MODE_DARK = 'dark';
+	public const DEFAULT_COLOR = '#0082c9';
+	public const DEFAULT_ACCESSIBLE_COLOR = '#00639a';
 
 	public const SHIPPED_BACKGROUNDS = [
 		'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [
@@ -90,8 +92,7 @@ class BackgroundService {
 		'kamil-porembinski-clouds.jpg' => [
 			'attribution' => 'Clouds (Kamil Porembiński, CC BY-SA)',
 			'attribution_url' => 'https://www.flickr.com/photos/paszczak000/8715851521/',
-			// Originally #0082c9 but adjusted for accessibility
-			'primary_color' => '#00639a',
+			'primary_color' => self::DEFAULT_COLOR,
 		],
 		'bernard-spragg-new-zealand-fern.jpg' => [
 			'attribution' => 'New zealand fern (Bernard Spragg, CC0)',

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -27,6 +27,7 @@
 use OCA\Theming\AppInfo\Application;
 use OCA\Theming\ImageManager;
 use OCA\Theming\ITheme;
+use OCA\Theming\Service\BackgroundService;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
 use OCP\App\IAppManager;
@@ -41,6 +42,7 @@ class DefaultTheme implements ITheme {
 
 	public Util $util;
 	public ThemingDefaults $themingDefaults;
+	public IUserSession $userSession;
 	public IURLGenerator $urlGenerator;
 	public ImageManager $imageManager;
 	public IConfig $config;
@@ -50,18 +52,22 @@ class DefaultTheme implements ITheme {
 
 	public function __construct(Util $util,
 								ThemingDefaults $themingDefaults,
+								IUserSession $userSession,
 								IURLGenerator $urlGenerator,
 								ImageManager $imageManager,
 								IConfig $config,
 								IL10N $l) {
 		$this->util = $util;
 		$this->themingDefaults = $themingDefaults;
+		$this->userSession = $userSession;
 		$this->urlGenerator = $urlGenerator;
 		$this->imageManager = $imageManager;
 		$this->config = $config;
 		$this->l = $l;
 
-		$this->primaryColor = $this->themingDefaults->getColorPrimary();
+		$initialPrimaryColor = $this->themingDefaults->getColorPrimary();
+		// Override default color if set to improve accessibility
+		$this->primaryColor = $initialPrimaryColor === BackgroundService::DEFAULT_COLOR ? BackgroundService::DEFAULT_ACCESSIBLE_COLOR : $initialPrimaryColor;
 	}
 
 	public function getId(): string {
@@ -101,6 +107,7 @@ public function getCSSVariables(): array {
 
 		$variables = [
 			'--color-main-background' => $colorMainBackground,
+			'--color-main-background-not-plain' => $this->themingDefaults->getColorPrimary(),
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
 			'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
@@ -221,21 +228,17 @@ public function getCSSVariables(): array {
 		}
 
 		$appManager = Server::get(IAppManager::class);
-		$userSession = Server::get(IUserSession::class);
-		$user = $userSession->getUser();
+		$user = $this->userSession->getUser();
 		if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
 
 			if ($themingBackground === 'custom') {
-				// Custom
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')";
-			} elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') {
-				// Shipped background
+			} elseif (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground])) {
 				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')";
 			} elseif (substr($themingBackground, 0, 1) === '#') {
-				// Color
 				unset($variables['--image-main-background']);
-				$variables['--color-main-background-plain'] = $this->primaryColor;
+				$variables['--color-main-background-plain'] = $this->themingDefaults->getColorPrimary();
 			}
 		}
 

diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
@@ -40,6 +40,8 @@
  */
 namespace OCA\Theming;
 
+use OCA\Theming\AppInfo\Application;
+use OCA\Theming\Service\BackgroundService;
 use OCP\App\AppPathNotFoundException;
 use OCP\App\IAppManager;
 use OCP\Files\NotFoundException;
@@ -49,61 +51,47 @@
 use OCP\IL10N;
 use OCP\INavigationManager;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
 
 class ThemingDefaults extends \OC_Defaults {
 
-	/** @var IConfig */
-	private $config;
-	/** @var IL10N */
-	private $l;
-	/** @var ImageManager */
-	private $imageManager;
-	/** @var IURLGenerator */
-	private $urlGenerator;
-	/** @var ICacheFactory */
-	private $cacheFactory;
-	/** @var Util */
-	private $util;
-	/** @var IAppManager */
-	private $appManager;
-	/** @var INavigationManager */
-	private $navigationManager;
-
-	/** @var string */
-	private $name;
-	/** @var string */
-	private $title;
-	/** @var string */
-	private $entity;
-	/** @var string */
-	private $productName;
-	/** @var string */
-	private $url;
-	/** @var string */
-	private $color;
-
-	/** @var string */
-	private $iTunesAppId;
-	/** @var string */
-	private $iOSClientUrl;
-	/** @var string */
-	private $AndroidClientUrl;
-	/** @var string */
-	private $FDroidClientUrl;
+	private IConfig $config;
+	private IL10N $l;
+	private ImageManager $imageManager;
+	private IUserSession $userSession;
+	private IURLGenerator $urlGenerator;
+	private ICacheFactory $cacheFactory;
+	private Util $util;
+	private IAppManager $appManager;
+	private INavigationManager $navigationManager;
+
+	private string $name;
+	private string $title;
+	private string $entity;
+	private string $productName;
+	private string $url;
+	private string $color;
+
+	private string $iTunesAppId;
+	private string $iOSClientUrl;
+	private string $AndroidClientUrl;
+	private string $FDroidClientUrl;
 
 	/**
 	 * ThemingDefaults constructor.
 	 *
 	 * @param IConfig $config
 	 * @param IL10N $l
 	 * @param ImageManager $imageManager
+	 * @param IUserSession $userSession
 	 * @param IURLGenerator $urlGenerator
 	 * @param ICacheFactory $cacheFactory
 	 * @param Util $util
 	 * @param IAppManager $appManager
 	 */
 	public function __construct(IConfig $config,
 								IL10N $l,
+								IUserSession $userSession,
 								IURLGenerator $urlGenerator,
 								ICacheFactory $cacheFactory,
 								Util $util,
@@ -115,6 +103,7 @@ public function __construct(IConfig $config,
 		$this->config = $config;
 		$this->l = $l;
 		$this->imageManager = $imageManager;
+		$this->userSession = $userSession;
 		$this->urlGenerator = $urlGenerator;
 		$this->cacheFactory = $cacheFactory;
 		$this->util = $util;
@@ -229,10 +218,24 @@ public function getShortFooter() {
 	 * @return string
 	 */
 	public function getColorPrimary() {
-		$color = $this->config->getAppValue('theming', 'color', $this->color);
+		$user = $this->userSession->getUser();
+		$color = $this->config->getAppValue(Application::APP_ID, 'color', '');
+
+		if ($color === '' && !empty($user)) {
+			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
+			if ($themingBackground === 'default') {
+				$this->increaseCacheBuster();
+				return BackgroundService::DEFAULT_COLOR;
+			} else if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) {
+				$this->increaseCacheBuster();
+				return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'];
+			}
+		}
+
 		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
-			$color = '#0082c9';
+			return BackgroundService::DEFAULT_COLOR;
 		}
+
 		return $color;
 	}
 

diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
@@ -171,7 +171,7 @@ export default {
 		}
 
 		&.color {
-			background-color: var(--color-primary);
+			background-color: var(--color-main-background-not-plain, var(--color-primary));
 			color: var(--color-primary-text);
 		}
 

diff --git a/apps/theming/tests/Service/ThemesServiceTest.php b/apps/theming/tests/Service/ThemesServiceTest.php
@@ -156,7 +156,7 @@ public function testDisableTheme(string $toDisable, array $enabledThemes, array
 			->method('getUserValue')
 			->with('user', Application::APP_ID, 'enabled-themes', '[]')
 			->willReturn(json_encode($enabledThemes));
-	
+
 
 		$this->assertEquals($expectedEnabled, $this->themesService->disableTheme($this->themes[$toDisable]));
 	}
@@ -190,7 +190,7 @@ public function testIsEnabled(string $themeId, array $enabledThemes, $expected)
 			->method('getUserValue')
 			->with('user', Application::APP_ID, 'enabled-themes', '[]')
 			->willReturn(json_encode($enabledThemes));
-	
+
 
 		$this->assertEquals($expected, $this->themesService->isEnabled($this->themes[$themeId]));
 	}
@@ -281,6 +281,7 @@ private function initThemes() {
 			'default' => new DefaultTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -289,6 +290,7 @@ private function initThemes() {
 			'light' => new LightTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -297,6 +299,7 @@ private function initThemes() {
 			'dark' => new DarkTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -305,6 +308,7 @@ private function initThemes() {
 			'light-highcontrast' => new HighContrastTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -313,6 +317,7 @@ private function initThemes() {
 			'dark-highcontrast' => new DarkHighContrastTheme(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,
@@ -321,6 +326,7 @@ private function initThemes() {
 			'opendyslexic' => new DyslexiaFont(
 				$util,
 				$this->themingDefaults,
+				$this->userSession,
 				$urlGenerator,
 				$imageManager,
 				$this->config,