Update and fix theming images

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

5 files changed, 44 insertions, 57 deletions

diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss
index c4d67917506..5cec0e98199 100644
--- a/apps/theming/css/settings-admin.scss
+++ b/apps/theming/css/settings-admin.scss
@@ -100,7 +100,8 @@
         margin-top: 10px;
         margin-bottom: 20px;
         cursor: pointer;
-        background-image: var(--image-login);
+        background-color: var(--color-primary);
+        background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/background.svg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
 
         #theming-preview-logo {
             cursor: pointer;
@@ -111,7 +112,7 @@
             background-position: center;
             background-repeat: no-repeat;
             background-size: contain;
-            background-image: var(--image-logo);
+            background-image: var(--image-logo, url('../../../core/img/logo/logo.svg'));
         }
     }
 
@@ -127,6 +128,15 @@
         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);
+    }
 }
 
 /* transition effects for theming value changes */
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 52337d2105f..a5b55a5a738 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -45,18 +45,6 @@ $invert: luma($color-primary) > 0.6;
 	}
 }
 
-.nc-theming-main-background {
-	background-color: $color-primary;
-}
-
-.nc-theming-main-text {
-	color: $color-primary-text;
-}
-
-.nc-theming-contrast {
-	color: $color-primary-text;
-}
-
 @if ($invert) {
 	// too bright, use dark text to mix the primary
 	$color-primary-light: mix($color-primary, $color-main-text, 10%);
@@ -157,16 +145,6 @@ $invert: luma($color-primary) > 0.6;
 	}
 }
 
-@if variable_exists('theming-favicon-mime') and $theming-favicon-mime != '' {
-	#theming .advanced-option-favicon .image-preview {
-		background-image: $image-favicon;
-	}
-} @else {
-	#theming .advanced-option-favicon .image-preview {
-		background-image: none;
-	}
-}
-
 input.primary {
 	background-color: $color-primary-element;
 	border: 1px solid $color-primary-text;
@@ -305,9 +283,3 @@ input.primary {
 		border: 1px solid #ebebeb;
 	}
 }
-
-@if ($has-legal-links == 'true') {
-	footer {
-		height: 92px;
-	}
-}
diff --git a/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php b/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php
index 6842a731b5f..185289f6ff8 100644
--- a/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php
+++ b/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php
@@ -58,20 +58,6 @@ class BeforeTemplateRenderedListener implements IEventListener {
 			return $serverContainer->query(JSDataService::class);
 		});
 
-		// $linkToCSS = $this->urlGenerator->linkToRoute(
-		// 	'theming.Theming.getStylesheet',
-		// 	[
-		// 		'v' => $this->config->getAppValue('theming', 'cachebuster', '0'),
-		// 	]
-		// );
-		// \OCP\Util::addHeader(
-		// 	'link',
-		// 	[
-		// 		'rel' => 'stylesheet',
-		// 		'href' => $linkToCSS,
-		// 	]
-		// );
-
 		$this->themeInjectionService->injectHeaders();
 
 		// Making sure to inject just after core
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 97650bf6292..990b011bae9 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -24,21 +24,32 @@ declare(strict_types=1);
  */
 namespace OCA\Theming\Themes;
 
+use OCA\Theming\ImageManager;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
 use OCA\Theming\ITheme;
+use OCP\IConfig;
 use OCP\IURLGenerator;
 
 class DefaultTheme implements ITheme {
 	public Util $util;
 	public ThemingDefaults $themingDefaults;
 	public IURLGenerator $urlGenerator;
+	public ImageManager $imageManager;
+	public IConfig $config;
+
 	public string $primaryColor;
 
-	public function __construct(Util $util, ThemingDefaults $themingDefaults, IURLGenerator $urlGenerator) {
+	public function __construct(Util $util,
+								ThemingDefaults $themingDefaults,
+								IURLGenerator $urlGenerator,
+								ImageManager $imageManager,
+								IConfig $config) {
 		$this->util = $util;
 		$this->themingDefaults = $themingDefaults;
 		$this->urlGenerator = $urlGenerator;
+		$this->imageManager = $imageManager;
+		$this->config = $config;
 
 		$this->primaryColor = $this->themingDefaults->getColorPrimary();
 	}
@@ -58,11 +69,7 @@ class DefaultTheme implements ITheme {
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 
-		// Logo variables
-		$logoSvgPath = $this->urlGenerator->getAbsoluteURL($this->themingDefaults->getLogo());
-		$backgroundSvgPath = $this->urlGenerator->getAbsoluteURL($this->themingDefaults->getBackground());
-
-		return [
+		$variables = [
 			'--color-main-background' => $colorMainBackground,
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
 			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
@@ -124,11 +131,6 @@ class DefaultTheme implements ITheme {
 			'--animation-slow' => '300ms',
 
 			// Default variables --------------------------------------------
-			'--image-logo' => "url('$logoSvgPath')",
-			'--image-login' => "url('$backgroundSvgPath')",
-			'--image-logoheader' => "url('$logoSvgPath')",
-			'--image-favicon' => "url('$logoSvgPath')",
-
 			'--border-radius' => '3px',
 			'--border-radius-large' => '10px',
 			// pill-style button, value is large so big buttons also have correct roundness
@@ -156,5 +158,22 @@ class DefaultTheme implements ITheme {
 			'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset',
 			'--background-invert-if-bright' => 'unset',
 		];
+
+		// Register image variables only if custom-defined
+		$backgroundDeleted = $this->config->getAppValue('theming', 'backgroundMime', '') === 'backgroundColor';
+		foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) {
+			if ($this->imageManager->hasImage($image)) {
+				// If primary as background has been request, let's not define the background image
+				if ($image === 'background' && $backgroundDeleted) {
+					$variables["--image-background-plain"] = true;
+					continue;
+				} else if ($image === 'background') {
+					$variables['--image-background-size'] = 'cover';
+				}
+				$variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')";
+			}
+		}
+
+		return $variables;
 	}
 }
diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index d38ca0fc44c..6014f0e8579 100644
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -116,7 +116,7 @@ style('theming', 'settings-admin');
 				<label for="upload-login-logoheader"><span><?php p($l->t('Header logo')) ?></span></label>
 				<input id="upload-login-logoheader" class="fileupload" name="image" type="file">
 				<label for="upload-login-logoheader" class="button icon-upload svg" id="upload-login-logoheader" title="<?php p($l->t("Upload new header logo")) ?>"></label>
-				<div class="image-preview"></div>
+				<div id="theming-preview-logoheader" class="image-preview"></div>
 				<div data-setting="logoheaderMime" data-toggle="tooltip" data-original-title="<?php p($l->t('Reset to default')); ?>" class="theme-undo icon icon-history"></div>
 			</form>
 		</div>
@@ -127,7 +127,7 @@ style('theming', 'settings-admin');
 				<label for="upload-login-favicon"><span><?php p($l->t('Favicon')) ?></span></label>
 				<input id="upload-login-favicon" class="fileupload" name="image" type="file">
 				<label for="upload-login-favicon" class="button icon-upload svg" id="upload-login-favicon" title="<?php p($l->t("Upload new favicon")) ?>"></label>
-				<div class="image-preview"></div>
+				<div id="theming-preview-favicon" class="image-preview"></div>
 				<div data-setting="faviconMime" data-toggle="tooltip" data-original-title="<?php p($l->t('Reset to default')); ?>" class="theme-undo icon icon-history"></div>
 			</form>
 		</div>