Merge pull request #36931 from nextcloud/fix/theming-background

fix(theming): select "no-background" option and fix layout order

apps/theming/src/components/BackgroundSettings.vue

@@ -33,6 +33,7 @@
 			tabindex="0"
 			@click="pickFile">
 			{{ t('theming', 'Custom background') }}
+			<ImageEdit v-if="backgroundImage !== 'custom'" :size="26" />
 			<Check :size="44" />
 		</button>
 
@@ -60,6 +61,17 @@
 			</button>
 		</NcColorPicker>
 
+		<!-- Remove background -->
+		<button class="background background__delete"
+			:class="{ 'background--active': isBackgroundDisabled }"
+			data-user-theming-background-clear
+			tabindex="0"
+			@click="removeBackground">
+			{{ t('theming', 'No background') }}
+			<Close v-if="!isBackgroundDisabled" :size="32" />
+			<Check :size="44" />
+		</button>
+
 		<!-- Background set selection -->
 		<button v-for="shippedBackground in shippedBackgrounds"
 			:key="shippedBackground.name"
@@ -74,15 +86,6 @@
 			@click="setShipped(shippedBackground.name)">
 			<Check :size="44" />
 		</button>
-
-		<!-- Remove background -->
-		<button class="background background__delete"
-			data-user-theming-background-clear
-			tabindex="0"
-			@click="removeBackground">
-			{{ t('theming', 'Remove background') }}
-			<Close :size="32" />
-		</button>
 	</div>
 </template>
 
@@ -92,6 +95,7 @@ import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import ImageEdit from 'vue-material-design-icons/ImageEdit.vue'
 import debounce from 'debounce'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
 import Vibrant from 'node-vibrant'
@@ -118,6 +122,7 @@ export default {
 	components: {
 		Check,
 		Close,
+		ImageEdit,
 		NcColorPicker,
 	},
 
@@ -159,6 +164,11 @@ export default {
 		isGlobalBackgroundDeleted() {
 			return themingDefaultBackground === 'backgroundColor'
 		},
+
+		isBackgroundDisabled() {
+			return this.backgroundImage === 'disabled'
+			|| !this.backgroundImage
+		},
 	},
 
 	methods: {
@@ -354,14 +364,15 @@ export default {
 			margin: 4px;
 		}
 
-		&__filepicker span,
-		&__default span,
-		&__shipped span {
+		.check-icon {
 			display: none;
 		}
 
-		&--active:not(.icon-loading) span {
-			display: block !important;
+		&--active:not(.icon-loading) {
+			.check-icon {
+				// Show checkmark
+				display: block !important;
+			}
 		}
 	}
 }