Merge pull request #22307 from nextcloud/bugfix/noid/dashboard-background

apps/dashboard/css/dashboard.scss

@@ -20,7 +20,7 @@
 
 $has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
 
-body.dashboard-inverted:not(.dashboard-dark) {
+body.dashboard--inverted:not(.dashboard--dark) {
 	// Do not invert the default logo
 	@if ($has-custom-logo == false) {
 		$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
@@ -45,7 +45,7 @@ body.dashboard-inverted:not(.dashboard-dark) {
 	}
 }
 
-body.dashboard-dark:not(.dashboard-inverted) {
+body.dashboard--dark:not(.dashboard--inverted) {
 	// invert the default logo
 	@if ($has-custom-logo == false) {
 		$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));

apps/dashboard/lib/Controller/DashboardController.php

@@ -134,8 +134,8 @@ class DashboardController extends Controller {
 	/**
 	 * @NoAdminRequired
 	 */
-	public function setBackground(string $type, string $value): JSONResponse {
-		$currentVersion = (int)$this->config->getUserValue($this->userId, 'dashboard', 'backgroundVersion', 0);
+	public function setBackground(string $type = 'default', string $value = ''): JSONResponse {
+		$currentVersion = (int)$this->config->getUserValue($this->userId, 'dashboard', 'backgroundVersion', '0');
 		try {
 			switch ($type) {
 				case 'shipped':

apps/dashboard/src/App.vue

@@ -58,7 +58,7 @@
 				<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" @updateBackground="updateBackground" />
+				<BackgroundSettings :background="background" @update:background="updateBackground" />
 			</div>
 		</Modal>
 	</div>
@@ -275,14 +275,14 @@ export default {
 		updateGlobalStyles() {
 			document.body.setAttribute('data-dashboard-background', this.background)
 			if (window.OCA.Theming.inverted) {
-				document.body.classList.add('dashboard-inverted')
+				document.body.classList.add('dashboard--inverted')
 			}
 
 			const shippedBackgroundTheme = shippedBackgroundList[this.background] ? shippedBackgroundList[this.background].theming : 'light'
 			if (shippedBackgroundTheme === 'dark') {
-				document.body.classList.add('dashboard-dark')
+				document.body.classList.add('dashboard--dark')
 			} else {
-				document.body.classList.remove('dashboard-dark')
+				document.body.classList.remove('dashboard--dark')
 			}
 		},
 	},

apps/dashboard/src/components/BackgroundSettings.vue

@@ -22,40 +22,32 @@
 
 <template>
 	<div class="background-selector">
-		<a class="background filepicker"
+		<button class="background filepicker"
 			:class="{ active: background === 'custom' }"
 			tabindex="0"
-			@click="pickFile"
-			@keyup.enter="pickFile"
-			@keyup.space="pickFile">
+			@click="pickFile">
 			{{ t('dashboard', 'Pick from files') }}
-		</a>
-		<a class="background default"
+		</button>
+		<button class="background default"
 			tabindex="0"
 			:class="{ 'icon-loading': loading === 'default', active: background === 'default' }"
-			@click="setDefault"
-			@keyup.enter="setDefault"
-			@keyup.space="setDefault">
+			@click="setDefault">
 			{{ t('dashboard', 'Default images') }}
-		</a>
-		<a class="background color"
+		</button>
+		<button class="background color"
 			:class="{ active: background === 'custom' }"
 			tabindex="0"
-			@click="pickColor"
-			@keyup.enter="pickColor"
-			@keyup.space="pickColor">
+			@click="pickColor">
 			{{ t('dashboard', 'Plain background') }}
-		</a>
-		<a v-for="shippedBackground in shippedBackgrounds"
+		</button>
+		<button v-for="shippedBackground in shippedBackgrounds"
 			:key="shippedBackground.name"
 			v-tooltip="shippedBackground.details.attribution"
 			:class="{ 'icon-loading': loading === shippedBackground.name, active: background === shippedBackground.name }"
 			tabindex="0"
 			class="background"
 			:style="{ 'background-image': 'url(' + shippedBackground.preview + ')' }"
-			@click="setShipped(shippedBackground.name)"
-			@keyup.enter="setShipped(shippedBackground.name)"
-			@keyup.space="setShipped(shippedBackground.name)" />
+			@click="setShipped(shippedBackground.name)" />
 	</div>
 </template>
 
@@ -98,13 +90,13 @@ export default {
 			const background = data.type === 'custom' || data.type === 'default' ? data.type : data.value
 			this.backgroundImage = getBackgroundUrl(background, data.version)
 			if (data.type === 'color') {
-				this.$emit('updateBackground', data)
+				this.$emit('update:background', data)
 				this.loading = false
 				return
 			}
 			const image = new Image()
 			image.onload = () => {
-				this.$emit('updateBackground', data)
+				this.$emit('update:background', data)
 				this.loading = false
 			}
 			image.src = this.backgroundImage

apps/user_status/src/App.vue

@@ -282,18 +282,12 @@ li:not(.inline) #user-status-menu-item {
 	width: 100%;
 
 	> button {
-		background-color: var(--color-main-background);
 		background-size: 16px;
 		border: 0;
 		border-radius: var(--border-radius-pill);
 		font-weight: normal;
 		padding-left: 40px;
 
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover);
-		}
-
 		&.icon-loading-small {
 			&::after {
 				left: 21px;

apps/weather_status/src/App.vue

@@ -463,18 +463,12 @@ li:not(.inline) .weather-status-menu-item {
 	width: 100%;
 
 	> button {
-		background-color: var(--color-main-background) !important;
 		background-size: 16px;
 		border: 0;
 		border-radius: var(--border-radius-pill);
 		font-weight: normal;
 		padding-left: 40px;
 
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover) !important;
-		}
-
 		&.icon-loading-small {
 			&::after {
 				left: 21px;