override default dashboard background in theming

Signed-off-by: Julien Veyssier <[email protected]>

apps/dashboard/lib/Controller/DashboardController.php

@@ -35,6 +35,7 @@
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\NotFoundResponse;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\App\IAppManager;
 use OCP\Dashboard\IManager;
 use OCP\Dashboard\IWidget;
 use OCP\Dashboard\RegisterWidgetEvent;
@@ -49,6 +50,8 @@ class DashboardController extends Controller {
 	private $inititalStateService;
 	/** @var IEventDispatcher */
 	private $eventDispatcher;
+	/** @var IAppManager */
+	private $appManager;
 	/** @var IManager */
 	private $dashboardManager;
 	/** @var IConfig */
@@ -65,6 +68,7 @@ public function __construct(
 		IRequest $request,
 		IInitialStateService $initialStateService,
 		IEventDispatcher $eventDispatcher,
+		IAppManager $appManager,
 		IManager $dashboardManager,
 		IConfig $config,
 		BackgroundService $backgroundService,
@@ -74,6 +78,7 @@ public function __construct(
 
 		$this->inititalStateService = $initialStateService;
 		$this->eventDispatcher = $eventDispatcher;
+		$this->appManager = $appManager;
 		$this->dashboardManager = $dashboardManager;
 		$this->config = $config;
 		$this->backgroundService = $backgroundService;
@@ -109,6 +114,11 @@ public function index(): TemplateResponse {
 		// It does not matter if some statuses are missing from the array, missing ones are considered enabled
 		$statuses = ($statuses && count($statuses) > 0) ? $statuses : ['weather' => true];
 
+		// if theming app is enabled and wants to override default, we pass it
+		$themingDefaultBackground = $this->appManager->isEnabledForUser('theming')
+			? $this->config->getAppValue('theming', 'dashboardBackgroundMime', 'backgroundColor')
+			: '';
+		$this->inititalStateService->provideInitialState('dashboard', 'themingDefaultBackground', $themingDefaultBackground);
 		$this->inititalStateService->provideInitialState('dashboard', 'panels', $widgets);
 		$this->inititalStateService->provideInitialState('dashboard', 'statuses', $statuses);
 		$this->inititalStateService->provideInitialState('dashboard', 'layout', $userLayout);

apps/dashboard/src/App.vue

@@ -68,7 +68,9 @@
 				<a v-if="isAdmin" :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
 
 				<h3>{{ t('dashboard', 'Change background image') }}</h3>
-				<BackgroundSettings :background="background" @update:background="updateBackground" />
+				<BackgroundSettings :background="background"
+					:theming-default-background="themingDefaultBackground"
+					@update:background="updateBackground" />
 
 				<h3>{{ t('dashboard', 'Weather service') }}</h3>
 				<p>
@@ -95,11 +97,11 @@ import { generateUrl } from '@nextcloud/router'
 import isMobile from './mixins/isMobile'
 import BackgroundSettings from './components/BackgroundSettings'
 import getBackgroundUrl from './helpers/getBackgroundUrl'
-import prefixWithBaseUrl from './helpers/prefixWithBaseUrl'
 
 const panels = loadState('dashboard', 'panels')
 const firstRun = loadState('dashboard', 'firstRun')
 const background = loadState('dashboard', 'background')
+const themingDefaultBackground = loadState('dashboard', 'themingDefaultBackground')
 const version = loadState('dashboard', 'version')
 const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
 const statusInfo = {
@@ -142,16 +144,17 @@ export default {
 			appStoreUrl: generateUrl('/settings/apps/dashboard'),
 			statuses: {},
 			background,
+			themingDefaultBackground,
 			version,
-			defaultBackground: window.OCA.Accessibility?.theme === 'dark' ? prefixWithBaseUrl('[email protected]?v=1') : prefixWithBaseUrl('flickr-paszczak000-8715851521.jpg?v=1'),
 		}
 	},
 	computed: {
 		backgroundImage() {
-			return getBackgroundUrl(this.background, this.version)
+			return getBackgroundUrl(this.background, this.version, this.themingDefaultBackground)
 		},
 		backgroundStyle() {
-			if (this.background.match(/#[0-9A-Fa-f]{6}/g)) {
+			if ((this.background === 'default' && this.themingDefaultBackground === 'backgroundColor')
+				|| this.background.match(/#[0-9A-Fa-f]{6}/g)) {
 				return null
 			}
 			return {

apps/dashboard/src/components/BackgroundSettings.vue

@@ -66,6 +66,10 @@ export default {
 			type: String,
 			default: 'default',
 		},
+		themingDefaultBackground: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -88,8 +92,8 @@ export default {
 	methods: {
 		async update(data) {
 			const background = data.type === 'custom' || data.type === 'default' ? data.type : data.value
-			this.backgroundImage = getBackgroundUrl(background, data.version)
-			if (data.type === 'color') {
+			this.backgroundImage = getBackgroundUrl(background, data.version, this.themingDefaultBackground)
+			if (data.type === 'color' || (data.type === 'default' && this.themingDefaultBackground === 'backgroundColor')) {
 				this.$emit('update:background', data)
 				this.loading = false
 				return

apps/dashboard/src/helpers/getBackgroundUrl.js

@@ -23,8 +23,11 @@
 import { generateUrl } from '@nextcloud/router'
 import prefixWithBaseUrl from './prefixWithBaseUrl'
 
-export default (background, time = 0) => {
+export default (background, time = 0, themingDefaultBackground = '') => {
 	if (background === 'default') {
+		if (themingDefaultBackground && themingDefaultBackground !== 'backgroundColor') {
+			return generateUrl('/apps/theming/image/dashboardBackground') + '?v=' + time
+		}
 		if (window.OCA.Accessibility.theme === 'dark') {
 			return prefixWithBaseUrl('eduardo-neves-pedra-azul.jpg')
 		}

apps/theming/css/settings-admin.scss

@@ -33,6 +33,7 @@
         width: 411px;
     }
     form .theme-undo,
+    .theme-remove-dashboard-bg,
     .theme-remove-bg {
         cursor: pointer;
         opacity: .3;
@@ -90,7 +91,8 @@
         border-radius: 3px;
     }
 
-    #theming-preview {
+    #theming-preview,
+    #theming-preview-dashboard {
         width: 230px;
         height: 140px;
         background-size: cover;

apps/theming/css/theming.scss

@@ -33,7 +33,26 @@
 	}
 }
 
+@mixin faded-dashboard-background-image {
+	@include faded-background;
+	background-size: contain;
+
+	@if ($color-primary == #0082C9) {
+		background-image: $image-dashboard-background, linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
+	}
+
+	@if($has-custom-dashboard-background == true) {
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-image: $image-dashboard-background;
+	}
+	@if $image-dashboard-plain == 'true' {
+		background-image: none !important;
+	}
+}
+
 $has-custom-background: variable_exists('theming-background-mime') and $theming-background-mime != '';
+$has-custom-dashboard-background: variable_exists('theming-dashboard-background-mime') and $theming-dashboard-background-mime != '';
 $has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
 $invert: luma($color-primary) > 0.6;
 
@@ -119,6 +138,10 @@ $invert: luma($color-primary) > 0.6;
 	@include faded-background-image;
 }
 
+#theming-preview-dashboard {
+	@include faded-dashboard-background-image;
+}
+
 /* override styles for login screen in guest.css */
 @if ($has-custom-logo) {
 	// custom logo
@@ -246,6 +269,12 @@ input.primary,
 	}
 }
 
+@if $image-dashboard-plain == 'true' {
+	#theming-dashboard-preview {
+		background-image: none !important;
+	}
+}
+
 /** Handle primary buttons for bright colors */
 @if (luma($color-primary) > 0.8) {
 	select,

apps/theming/js/settings-admin.js

@@ -151,6 +151,9 @@ window.addEventListener('DOMContentLoaded', function () {
 	$('#theming-preview').on('click', function() {
 		$('#upload-login-background').click();
 	});
+	$('#theming-preview-dashboard').on('click', function() {
+		$('#upload-dashboard-background').click();
+	});
 
 	function checkName () {
 		var length = $('#theming-name').val().length;
@@ -247,4 +250,16 @@ window.addEventListener('DOMContentLoaded', function () {
 		});
 	});
 
+	$('.theme-remove-dashboard-bg').click(function() {
+		startLoading();
+		$.post(
+			OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : 'dashboardBackgroundMime', 'value' : 'backgroundColor'}
+		).done(function(response) {
+			preview('dashboardBackgroundMime', 'backgroundColor', response.data.serverCssUrl);
+		}).fail(function(response) {
+			OC.msg.finishedSaving('#theming_settings_msg', response);
+			$('#theming_settings_loading').hide();
+		});
+	});
+
 });

apps/theming/lib/ImageManager.php

@@ -86,6 +86,8 @@ public function getImageUrl(string $key, bool $useSvg = true): string {
 				return $this->urlGenerator->imagePath('core', 'logo/logo.png') . '?v=' . $cacheBusterCounter;
 			case 'background':
 				return $this->urlGenerator->imagePath('core', 'background.png') . '?v=' . $cacheBusterCounter;
+			case 'dashboardBackground':
+				return $this->urlGenerator->imagePath('dashboard', 'eduardo-neves-pedra-azul.jpg') . '?v=' . $cacheBusterCounter;
 		}
 	}
 

apps/theming/lib/ThemingDefaults.php

@@ -255,6 +255,10 @@ public function getBackground(): string {
 		return $this->imageManager->getImageUrl('background');
 	}
 
+	public function getDashboardBackground(): string {
+		return $this->imageManager->getImageUrl('dashboardBackground');
+	}
+
 	/**
 	 * @return string
 	 */
@@ -290,6 +294,7 @@ public function getScssVariables() {
 			'theming-cachebuster' => "'" . $this->config->getAppValue('theming', 'cachebuster', '0') . "'",
 			'theming-logo-mime' => "'" . $this->config->getAppValue('theming', 'logoMime') . "'",
 			'theming-background-mime' => "'" . $this->config->getAppValue('theming', 'backgroundMime') . "'",
+			'theming-dashboard-background-mime' => "'" . $this->config->getAppValue('theming', 'dashboardBackgroundMime') . "'",
 			'theming-logoheader-mime' => "'" . $this->config->getAppValue('theming', 'logoheaderMime') . "'",
 			'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
 		];
@@ -298,7 +303,9 @@ public function getScssVariables() {
 		$variables['image-logoheader'] = "url('".$this->imageManager->getImageUrl('logoheader')."')";
 		$variables['image-favicon'] = "url('".$this->imageManager->getImageUrl('favicon')."')";
 		$variables['image-login-background'] = "url('".$this->imageManager->getImageUrl('background')."')";
+		$variables['image-dashboard-background'] = "url('".$this->imageManager->getImageUrl('dashboardBackground')."')";
 		$variables['image-login-plain'] = 'false';
+		$variables['image-dashboard-plain'] = 'false';
 
 		if ($this->config->getAppValue('theming', 'color', null) !== null) {
 			$variables['color-primary'] = $this->getColorPrimary();
@@ -310,6 +317,10 @@ public function getScssVariables() {
 			$variables['image-login-plain'] = 'true';
 		}
 
+		if ($this->config->getAppValue('theming', 'dashboardBackgroundMime', null) === 'backgroundColor') {
+			$variables['image-dashboard-plain'] = 'true';
+		}
+
 		$variables['has-legal-links'] = 'false';
 		if ($this->getImprintUrl() !== '' || $this->getPrivacyUrl() !== '') {
 			$variables['has-legal-links'] = 'true';

apps/theming/templates/settings-admin.php

@@ -91,6 +91,19 @@
 	<div id="theming-preview">
 		<div id="theming-preview-logo"></div>
 	</div>
+	<div>
+		<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>" data-image-key="dashboardBackground">
+			<input type="hidden" id="theming-dashboardBackgroundMime" value="<?php p($_['images']['dashboardBackground']['mime']); ?>" />
+			<input type="hidden" name="key" value="dashboardBackground" />
+			<label for="upload-dashboard-background"><span><?php p($l->t('Dashboard default background image')) ?></span></label>
+			<input id="upload-dashboard-background" class="fileupload" name="image" type="file">
+			<label for="upload-dashboard-background" class="button icon-upload svg" id="upload-dashboard-background" title="<?php p($l->t("Upload new dashboard default background")) ?>"></label>
+			<div class="theme-remove-dashboard-bg icon icon-delete" data-toggle="tooltip" data-original-title="<?php p($l->t('Remove dashboard default background image')); ?>"></div>
+		</form>
+	</div>
+	<div id="theming-preview-dashboard">
+		<div id="theming-preview-logo"></div>
+	</div>
 
 	<h3 class="inlineblock"><?php p($l->t('Advanced options')); ?></h3>
 

apps/theming/tests/ThemingDefaultsTest.php

@@ -586,6 +586,15 @@ public function testGetBackground() {
 		$this->assertEquals('custom-background?v=0', $this->template->getBackground());
 	}
 
+	public function testGetDashboardBackground() {
+		$this->imageManager
+			->expects($this->once())
+			->method('getImageUrl')
+			->with('dashboardBackground')
+			->willReturn('custom-dashboard-background?v=0');
+		$this->assertEquals('custom-dashboard-background?v=0', $this->template->getDashboardBackground());
+	}
+
 	private function getLogoHelper($withName, $useSvg) {
 		$this->imageManager->expects($this->any())
 			->method('getImage')
@@ -671,16 +680,20 @@ public function testGetScssVariables() {
 		$this->imageManager->expects($this->at(1))->method('getImageUrl')->with('logoheader')->willReturn('custom-logoheader?v=0');
 		$this->imageManager->expects($this->at(2))->method('getImageUrl')->with('favicon')->willReturn('custom-favicon?v=0');
 		$this->imageManager->expects($this->at(3))->method('getImageUrl')->with('background')->willReturn('custom-background?v=0');
+		$this->imageManager->expects($this->at(3))->method('getImageUrl')->with('dashboardBackground')->willReturn('custom-dashboard-background?v=0');
 
 		$expected = [
 			'theming-cachebuster' => '\'0\'',
 			'theming-logo-mime' => '\'jpeg\'',
 			'theming-background-mime' => '\'jpeg\'',
+			'theming-dashboard-background-mime' => '\'jpeg\'',
 			'image-logo' => "url('custom-logo?v=0')",
 			'image-login-background' => "url('custom-background?v=0')",
+			'image-dashboard-background' => "url('custom-dashboard-background?v=0')",
 			'color-primary' => $this->defaults->getColorPrimary(),
 			'color-primary-text' => '#ffffff',
 			'image-login-plain' => 'false',
+			'image-dashboard-plain' => 'false',
 			'color-primary-element' => '#aaaaaa',
 			'theming-logoheader-mime' => '\'jpeg\'',
 			'theming-favicon-mime' => '\'jpeg\'',