Allow to pick custom colour

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/theming/css/default.css

@@ -57,6 +57,7 @@
   --background-invert-if-bright: invert(100%);
   --image-main-background: url('/core/img/app-background.jpg');
   --color-primary: #00639a;
+  --color-primary-default: #0082c9;
   --color-primary-text: #ffffff;
   --color-primary-hover: #3282ae;
   --color-primary-light: #e5eff4;

apps/theming/css/settings-admin.css

@@ -89,7 +89,7 @@
   margin-top: 10px;
   margin-bottom: 20px;
   cursor: pointer;
-  background-color: var(--color-main-background-not-plain, var(--color-primary));
+  background-color: var(--color-primary-default);
   background-image: var(--image-background, var(--image-background-plain, url("../../../core/img/app-background.jpg"), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
 }
 #theming #theming-preview #theming-preview-logo {

apps/theming/css/settings-admin.scss

@@ -100,7 +100,7 @@
         margin-top: 10px;
         margin-bottom: 20px;
         cursor: pointer;
-        background-color: var(--color-main-background-not-plain, var(--color-primary));
+        background-color: var(--color-primary-default);
         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 {

apps/theming/lib/ThemingDefaults.php

@@ -219,23 +219,28 @@ class ThemingDefaults extends \OC_Defaults {
 	 */
 	public function getColorPrimary() {
 		$user = $this->userSession->getUser();
+
+		// admin-defined primary color
 		$defaultColor = $this->getDefaultColorPrimary();
-		$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background');
-
-		// if the user is defined and the selected background is not a colour
-		if ($user !== null
-			&& !preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $themingBackground)) {
+		
+		// user-defined primary color
+		$themingBackground = '';
+		if (!empty($user)) {
 			$themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default');
-			if ($themingBackground === 'default') {
-				return BackgroundService::DEFAULT_COLOR;
-			} else if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) {
-				return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_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 (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $themingBackground)) {
+				if ($themingBackground === 'default') {
+					return BackgroundService::DEFAULT_COLOR;
+				} else if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_color'])) {
+					return BackgroundService::SHIPPED_BACKGROUNDS[$themingBackground]['primary_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 default color is not valid, return the default background one
@@ -253,7 +258,7 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @return string
 	 */
 	public function getDefaultColorPrimary() {
-		$color = $this->config->getAppValue(Application::APP_ID, 'color', $this->color);
+		$color = $this->config->getAppValue(Application::APP_ID, 'color');
 		if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $color)) {
 			$color = '#0082c9';
 		}

apps/theming/src/components/BackgroundSettings.vue

@@ -32,6 +32,17 @@
 			@click="pickFile">
 			{{ t('theming', 'Pick from Files') }}
 		</button>
+		<NcColorPicker v-model="Theming.color" @input="pickColor">
+			<button class="background color"
+				:class="{ active: background === Theming.color}"
+				tabindex="0"
+				:data-color="Theming.color"
+				:data-color-bright="invertTextColor(Theming.color)"
+				:style="{ backgroundColor: Theming.color, color: invertTextColor(Theming.color) ? '#000000' : '#ffffff'}"
+				@click="pickColor">
+				{{ t('theming', 'Custom color') }}
+			</button>
+		</NcColorPicker>
 
 		<!-- Default background -->
 		<button class="background default"
@@ -43,7 +54,7 @@
 
 		<!-- Default admin primary color -->
 		<button class="background color"
-			:class="{ active: background.startsWith('#') }"
+			:class="{ active: background === Theming.defaultColor }"
 			tabindex="0"
 			:data-color="Theming.defaultColor"
 			:data-color-bright="invertTextColor(Theming.defaultColor)"
@@ -68,6 +79,7 @@
 <script>
 import axios from '@nextcloud/axios'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import { getBackgroundUrl } from '../helpers/getBackgroundUrl.js'
@@ -81,6 +93,10 @@ export default {
 		Tooltip,
 	},
 
+	components: {
+		NcColorPicker,
+	},
+
 	props: {
 		background: {
 			type: String,

apps/theming/tests/Service/ThemesServiceTest.php

@@ -68,6 +68,10 @@ class ThemesServiceTest extends TestCase {
 			->method('getColorPrimary')
 			->willReturn('#0082c9');
 
+		$this->themingDefaults->expects($this->any())
+			->method('getDefaultColorPrimary')
+			->willReturn('#0082c9');
+
 		$this->initThemes();
 
 		$this->themesService = new ThemesService(

apps/theming/tests/Settings/AdminTest.php

@@ -97,7 +97,7 @@ class AdminTest extends TestCase {
 			->willReturn('MySlogan');
 		$this->themingDefaults
 			->expects($this->once())
-			->method('getColorPrimary')
+			->method('getDefaultColorPrimary')
 			->willReturn('#fff');
 		$this->urlGenerator
 			->expects($this->once())
@@ -156,7 +156,7 @@ class AdminTest extends TestCase {
 			->willReturn('MySlogan');
 		$this->themingDefaults
 			->expects($this->once())
-			->method('getColorPrimary')
+			->method('getDefaultColorPrimary')
 			->willReturn('#fff');
 		$this->urlGenerator
 			->expects($this->once())

apps/theming/tests/Settings/PersonalTest.php

@@ -138,6 +138,10 @@ class PersonalTest extends TestCase {
 		$themingDefaults->expects($this->any())
 			->method('getColorPrimary')
 			->willReturn('#0082c9');
+		
+		$themingDefaults->expects($this->any())
+			->method('getDefaultColorPrimary')
+			->willReturn('#0082c9');
 
 		$this->themes = [
 			'default' => new DefaultTheme(

apps/theming/tests/Themes/DefaultThemeTest.php

@@ -70,6 +70,11 @@ class DefaultThemeTest extends TestCase {
 			->method('getColorPrimary')
 			->willReturn('#0082c9');
 
+		$this->themingDefaults
+			->expects($this->any())
+			->method('getDefaultColorPrimary')
+			->willReturn('#0082c9');
+
 		$this->l10n
 			->expects($this->any())
 			->method('t')

apps/theming/tests/Themes/DyslexiaFontTest.php

@@ -84,6 +84,11 @@ class DyslexiaFontTest extends TestCase {
 			->method('getColorPrimary')
 			->willReturn('#0082c9');
 
+		$this->themingDefaults
+			->expects($this->any())
+			->method('getDefaultColorPrimary')
+			->willReturn('#0082c9');
+
 		$this->l10n
 			->expects($this->any())
 			->method('t')

apps/theming/tests/ThemingDefaultsTest.php

@@ -35,6 +35,7 @@
 namespace OCA\Theming\Tests;
 
 use OCA\Theming\ImageManager;
+use OCA\Theming\Service\BackgroundService;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
 use OCP\App\IAppManager;
@@ -46,6 +47,7 @@ use OCP\IConfig;
 use OCP\IL10N;
 use OCP\INavigationManager;
 use OCP\IURLGenerator;
+use OCP\IUser;
 use OCP\IUserSession;
 use Test\TestCase;
 
@@ -420,7 +422,7 @@ class ThemingDefaultsTest extends TestCase {
 		$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> – Slogan', $this->template->getShortFooter());
 	}
 
-	public function testgetColorPrimaryWithDefault() {
+	public function testGetColorPrimaryWithDefault() {
 		$this->config
 			->expects($this->once())
 			->method('getAppValue')
@@ -440,6 +442,74 @@ class ThemingDefaultsTest extends TestCase {
 		$this->assertEquals('#fff', $this->template->getColorPrimary());
 	}
 
+	public function testGetColorPrimaryWithDefaultBackground() {
+		$user = $this->createMock(IUser::class);
+		$this->userSession->expects($this->any())
+			->method('getUser')
+			->willReturn($user);
+		$user->expects($this->any())
+			->method('getUID')
+			->willReturn('user');
+
+		$this->assertEquals(BackgroundService::DEFAULT_COLOR, $this->template->getColorPrimary());
+	}
+
+	public function testGetColorPrimaryWithCustomBackground() {
+		$backgroundIndex = 2;
+		$background = array_values(BackgroundService::SHIPPED_BACKGROUNDS)[$backgroundIndex];
+		$user = $this->createMock(IUser::class);
+		$this->userSession->expects($this->any())
+			->method('getUser')
+			->willReturn($user);
+		$user->expects($this->any())
+			->method('getUID')
+			->willReturn('user');
+
+		$this->config
+			->expects($this->once())
+			->method('getUserValue')
+			->with('user', 'theming', 'background', 'default')
+			->willReturn(array_keys(BackgroundService::SHIPPED_BACKGROUNDS)[$backgroundIndex]);
+
+		$this->assertEquals($background['primary_color'], $this->template->getColorPrimary());
+	}
+
+	public function testGetColorPrimaryWithCustomBackgroundColor() {
+		$user = $this->createMock(IUser::class);
+		$this->userSession->expects($this->any())
+			->method('getUser')
+			->willReturn($user);
+		$user->expects($this->any())
+			->method('getUID')
+			->willReturn('user');
+
+		$this->config
+			->expects($this->once())
+			->method('getUserValue')
+			->with('user', 'theming', 'background', 'default')
+			->willReturn('#fff');
+
+		$this->assertEquals('#fff', $this->template->getColorPrimary());
+	}
+
+	public function testGetColorPrimaryWithInvalidCustomBackgroundColor() {
+		$user = $this->createMock(IUser::class);
+		$this->userSession->expects($this->any())
+			->method('getUser')
+			->willReturn($user);
+		$user->expects($this->any())
+			->method('getUID')
+			->willReturn('user');
+
+		$this->config
+			->expects($this->once())
+			->method('getUserValue')
+			->with('user', 'theming', 'background', 'default')
+			->willReturn('nextcloud');
+
+		$this->assertEquals($this->template->getDefaultColorPrimary(), $this->template->getColorPrimary());
+	}
+
 	public function testSet() {
 		$this->config
 			->expects($this->exactly(2))

tests/acceptance/features/app-theming.feature

@@ -13,7 +13,7 @@ Feature: app-theming
     And I see that the non-plain background color variable is eventually "#0082c9"
     When I set the "Color" parameter in the Theming app to "#C9C9C9"
     Then I see that the parameters in the Theming app are eventually saved
-    And I see that the primary color is eventually "#C9C9C9"
+    And I see that the primary color is eventually "#00639a"
     And I see that the non-plain background color variable is eventually "#C9C9C9"
 
   Scenario: resetting the color updates the primary color
@@ -23,7 +23,7 @@ Feature: app-theming
     And I see that the color selector in the Theming app has loaded
     And I set the "Color" parameter in the Theming app to "#C9C9C9"
     And I see that the parameters in the Theming app are eventually saved
-    And I see that the primary color is eventually "#C9C9C9"
+    And I see that the primary color is eventually "#00639a"
     And I see that the non-plain background color variable is eventually "#C9C9C9"
     When I reset the "Color" parameter in the Theming app to its default value
     Then I see that the parameters in the Theming app are eventually saved

tests/acceptance/features/bootstrap/ThemingAppContext.php

@@ -146,7 +146,7 @@ class ThemingAppContext implements Context, ActorAwareInterface {
 	 */
 	public function iSeeThatTheNonPlainBackgroundColorVariableIsEventually($color) {
 		$colorVariableMatchesCallback = function () use ($color) {
-			$colorVariable = $this->actor->getSession()->evaluateScript("return getComputedStyle(document.documentElement).getPropertyValue('--color-main-background-not-plain').trim();");
+			$colorVariable = $this->actor->getSession()->evaluateScript("return getComputedStyle(document.documentElement).getPropertyValue('--color-primary-default').trim();");
 			$colorVariable = $this->getRGBArray($colorVariable);
 			$color = $this->getRGBArray($color);