Rewrite admin theming in Vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Oct 28, 2022 · 4a2bbc7 · 4a2bbc7
1 parent d007088
commit 4a2bbc7
Show file tree

Hide file tree

Showing 33 changed files with 1,250 additions and 258 deletions.
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
@@ -55,6 +55,7 @@
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
   --image-background: url('/core/img/app-background.jpg');
+  --image-background-default: url('/core/img/app-background.jpg');
   --color-background-plain: #0082c9;
   --primary-invert-if-bright: no;
   --color-primary: #00639a;
@@ -66,6 +67,7 @@
   --color-primary-light-hover: #dbe4e9;
   --color-primary-text-dark: #ededed;
   --color-primary-element: #00639a;
+  --color-primary-element-default-hover: #329bd3;
   --color-primary-element-text: #ffffff;
   --color-primary-element-hover: #3282ae;
   --color-primary-element-light: #e5eff4;

diff --git a/apps/theming/lib/ImageManager.php b/apps/theming/lib/ImageManager.php
@@ -53,7 +53,6 @@ class ImageManager {
 	private $appData;
 	/** @var IURLGenerator */
 	private $urlGenerator;
-	/** @var array */
 	/** @var ICacheFactory */
 	private $cacheFactory;
 	/** @var ILogger */
@@ -137,20 +136,6 @@ public function hasImage(string $key): bool {
 		return $mimeSetting !== '';
 	}
 
-	/**
-	 * @return array<string, array{mime: string, url: string}>
-	 */
-	public function getCustomImages(): array {
-		$images = [];
-		foreach ($this::SupportedImageKeys 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/Settings/Admin.php b/apps/theming/lib/Settings/Admin.php
@@ -27,32 +27,38 @@
  */
 namespace OCA\Theming\Settings;
 
+use OCA\Theming\AppInfo\Application;
 use OCA\Theming\ImageManager;
 use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
 use OCP\Settings\IDelegatedSettings;
+use OCP\Util;
 
 class Admin implements IDelegatedSettings {
 	private string $appName;
 	private IConfig $config;
 	private IL10N $l;
 	private ThemingDefaults $themingDefaults;
+	private IInitialState $initialState;
 	private IURLGenerator $urlGenerator;
 	private ImageManager $imageManager;
 
 	public function __construct(string $appName,
 								IConfig $config,
 								IL10N $l,
 								ThemingDefaults $themingDefaults,
+								IInitialState $initialState,
 								IURLGenerator $urlGenerator,
 								ImageManager $imageManager) {
 		$this->appName = $appName;
 		$this->config = $config;
 		$this->l = $l;
 		$this->themingDefaults = $themingDefaults;
+		$this->initialState = $initialState;
 		$this->urlGenerator = $urlGenerator;
 		$this->imageManager = $imageManager;
 	}
@@ -69,23 +75,28 @@ public function getForm(): TemplateResponse {
 			$errorMessage = $this->l->t('You are already using a custom theme. Theming app settings might be overwritten by that.');
 		}
 
-		$parameters = [
-			'themable' => $themable,
-			'errorMessage' => $errorMessage,
+		$this->initialState->provideInitialState('adminThemingParameters', [
+			'isThemable' => $themable,
+			'notThemableErrorMessage' => $errorMessage,
 			'name' => $this->themingDefaults->getEntity(),
 			'url' => $this->themingDefaults->getBaseUrl(),
 			'slogan' => $this->themingDefaults->getSlogan(),
 			'color' => $this->themingDefaults->getDefaultColorPrimary(),
-			'uploadLogoRoute' => $this->urlGenerator->linkToRoute('theming.Theming.uploadImage'),
+			'logoMime' => $this->config->getAppValue(Application::APP_ID, 'logoMime', ''),
+			'backgroundMime' => $this->config->getAppValue(Application::APP_ID, 'backgroundMime', ''),
+			'logoheaderMime' => $this->config->getAppValue(Application::APP_ID, 'logoheaderMime', ''),
+			'faviconMime' => $this->config->getAppValue(Application::APP_ID, 'faviconMime', ''),
+			'legalNoticeUrl' => $this->themingDefaults->getImprintUrl(),
+			'privacyPolicyUrl' => $this->themingDefaults->getPrivacyUrl(),
+			'docUrl' => $this->urlGenerator->linkToDocs('admin-theming'),
+			'docUrlIcons' => $this->urlGenerator->linkToDocs('admin-theming-icons'),
 			'canThemeIcons' => $this->imageManager->shouldReplaceIcons(),
-			'iconDocs' => $this->urlGenerator->linkToDocs('admin-theming-icons'),
-			'images' => $this->imageManager->getCustomImages(),
-			'imprintUrl' => $this->themingDefaults->getImprintUrl(),
-			'privacyUrl' => $this->themingDefaults->getPrivacyUrl(),
 			'userThemingDisabled' => $this->themingDefaults->isUserThemingDisabled(),
-		];
+		]);
+
+		Util::addScript($this->appName, 'admin-theming');
 
-		return new TemplateResponse($this->appName, 'settings-admin', $parameters, '');
+		return new TemplateResponse($this->appName, 'settings-admin');
 	}
 
 	/**

diff --git a/apps/theming/lib/Settings/Personal.php b/apps/theming/lib/Settings/Personal.php
@@ -77,7 +77,8 @@ 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');
+
+		Util::addScript($this->appName, 'personal-theming');
 
 		return new TemplateResponse($this->appName, 'settings-personal');
 	}

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -40,6 +40,7 @@ trait CommonThemeTrait {
 	protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array {
 		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
 		$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
+		$colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor);
 		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 
 		// primary related colours
@@ -64,6 +65,7 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 
 			// used for buttons, inputs...
 			'--color-primary-element' => $colorPrimaryElement,
+			'--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60),
 			'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
 			'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
 			'--color-primary-element-light' => $colorPrimaryElementLight,
@@ -80,16 +82,19 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 	 * Generate admin theming background-related variables
 	 */
 	protected function generateGlobalBackgroundVariables(): array {
+		$user = $this->userSession->getUser();
 		$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';
+		if ($backgroundDeleted) {
 			$variables['--color-background-plain'] = $this->themingDefaults->getColorPrimary();
+			if ($this->themingDefaults->isUserThemingDisabled() || $user === null) {
+				$variables['--image-background-plain'] = 'true';
+			}
 		}
 
 		// Register image variables only if custom-defined
@@ -99,9 +104,11 @@ protected function generateGlobalBackgroundVariables(): array {
 				if ($image === 'background') {
 					// If background deleted is set, ignoring variable
 					if ($backgroundDeleted) {
+						$variables['--image-background-default'] = 'no';
 						continue;
 					}
 					$variables['--image-background-size'] = 'cover';
+					$variables['--image-background-default'] = "url('" . $imageUrl . "')";
 				}
 				$variables["--image-$image"] = "url('" . $imageUrl . "')";
 			}

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -193,6 +193,7 @@ public function getCSSVariables(): array {
 
 			// 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,
 		];
 

diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
@@ -224,7 +224,7 @@ public function getColorPrimary(): string {
 		if ($this->isUserThemingDisabled()) {
 			return $defaultColor;
 		}
-		
+
 		// user-defined primary color
 		$themingBackground = '';
 		if (!empty($user)) {