Restore dashboard layout

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 48 insertions, 7 deletions

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 6a3662279d6..4477ce29016 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -1,5 +1,5 @@
 <template>
-	<div id="app-dashboard" :style="backgroundStyle">
+	<div id="app-dashboard">
 		<h2>{{ greeting.text }}</h2>
 		<ul class="statuses">
 			<div v-for="status in sortedRegisteredStatus"
@@ -172,7 +172,7 @@ export default {
 			}
 
 			return {
-				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url(${this.backgroundImage})`,
+				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
 			}
 		},
 
@@ -365,10 +365,18 @@ export default {
 			if (isBackgroundBright) {
 				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)')
 				document.querySelector('#header').style.setProperty('--color-primary-text', '#000000')
+				//document.body.removeAttribute('data-theme-dark')
+				//document.body.setAttribute('data-theme-light', 'true')
 			} else {
-				document.querySelector('#header').style.removeProperty('--primary-invert-if-bright')
-				document.querySelector('#header').style.removeProperty('--color-primary-text')
+				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'no')
+				document.querySelector('#header').style.setProperty('--color-primary-text', '#ffffff')
+				//document.body.removeAttribute('data-theme-light')
+				//document.body.setAttribute('data-theme-dark', 'true')
 			}
+
+			document.documentElement.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage);
+			document.querySelector('#header').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage);
+			document.querySelector('body').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage);
 		},
 		updateSkipLink() {
 			// Make sure "Skip to main content" link points to the app content
@@ -426,7 +434,6 @@ export default {
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-attachment: fixed;
-	background-color: var(--color-primary);
 
 	> h2 {
 		color: var(--color-primary-text);
@@ -675,3 +682,21 @@ export default {
 	}
 }
 </style>
+<style>
+html, body {
+	overflow: auto;
+	position: static;
+	height: auto;
+	background-attachment: fixed;
+}
+
+#body-user #header {
+	position: fixed;
+}
+
+#content {
+	height: auto;
+	overflow: auto;
+	position: static !important;;
+}
+</style>
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 56348069ff4..18a6e209f6f 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -28,9 +28,12 @@ use OCA\Theming\ImageManager;
 use OCA\Theming\ThemingDefaults;
 use OCA\Theming\Util;
 use OCA\Theming\ITheme;
+use OCP\App\IAppManager;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
+use OCP\IUserSession;
+use OCP\Server;
 
 class DefaultTheme implements ITheme {
 	public Util $util;
@@ -93,7 +96,7 @@ class DefaultTheme implements ITheme {
 		$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
 		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 
-		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') ||  $this->imageManager->hasImage('logoheader');
+		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
 		$hasCustomPrimaryColour = !empty($this->config->getAppValue('theming', 'color'));
 
 		$variables = [
@@ -212,7 +215,7 @@ class DefaultTheme implements ITheme {
 		}
 
 		// Register image variables only if custom-defined
-		foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) {
+		foreach (['logo', 'logoheader', 'favicon', 'background'] as $image) {
 			if ($this->imageManager->hasImage($image)) {
 				$imageUrl = $this->imageManager->getImageUrl($image);
 				if ($image === 'background') {
@@ -231,6 +234,19 @@ class DefaultTheme implements ITheme {
 			$variables["--image-logoheader-custom"] = 'true';
 		}
 
+		$appManager = Server::get(IAppManager::class);
+		$userSession = Server::get(IUserSession::class);
+		$user = $userSession->getUser();
+		if ($appManager->isEnabledForUser('dashboard') && $user !== null) {
+			$dashboardBackground = $this->config->getUserValue($user->getUID(), 'dashboard', 'background', 'default');
+
+			if ($dashboardBackground === 'custom') {
+				$variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('dashboard.dashboard.getBackground') . "')";
+			} elseif ($dashboardBackground !== 'default' && substr($dashboardBackground, 0, 1) !== '#') {
+				$variables['--image-main-background'] = "url('/apps/dashboard/img/" . $dashboardBackground . "')";
+			}
+		}
+
 		return $variables;
 	}