1 files changed, 72 insertions, 22 deletions

diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index 82d588059a2..e4a1acd3e2a 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -1,53 +1,70 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
 <template>
-	<div class="theming__preview">
-		<div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" />
+	<div :class="'theming__preview--' + theme.id" class="theming__preview">
+		<div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" @click="onToggle" />
 		<div class="theming__preview-description">
 			<h3>{{ theme.title }}</h3>
-			<p>{{ theme.description }}</p>
-			<CheckboxRadioSwitch class="theming__preview-toggle"
+			<p class="theming__preview-explanation">
+				{{ theme.description }}
+			</p>
+			<span v-if="enforced" class="theming__preview-warning" role="note">
+				{{ t('theming', 'Theme selection is enforced') }}
+			</span>
+
+			<!-- Only show checkbox if we can change themes -->
+			<NcCheckboxRadioSwitch v-show="!enforced"
+				class="theming__preview-toggle"
 				:checked.sync="checked"
+				:disabled="enforced"
 				:name="name"
 				:type="switchType">
 				{{ theme.enableLabel }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 
 export default {
 	name: 'ItemPreview',
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 	props: {
-		theme: {
-			type: Object,
-			required: true,
+		enforced: {
+			type: Boolean,
+			default: false,
 		},
 		selected: {
 			type: Boolean,
 			default: false,
 		},
+		theme: {
+			type: Object,
+			required: true,
+		},
 		type: {
 			type: String,
 			default: '',
 		},
-		themes: {
-			type: Array,
-			default: () => [],
+		unique: {
+			type: Boolean,
+			default: false,
 		},
 	},
 	computed: {
 		switchType() {
-			return this.themes.length === 1 ? 'switch' : 'radio'
+			return this.unique ? 'switch' : 'radio'
 		},
 
 		name() {
-			return this.switchType === 'radio' ? this.type : null
+			return !this.unique ? this.type : null
 		},
 
 		img() {
@@ -59,10 +76,14 @@ export default {
 				return this.selected
 			},
 			set(checked) {
-				console.debug('Selecting theme', this.theme, checked)
+				if (this.enforced) {
+					return
+				}
+
+				console.debug('Changed theme', this.theme.id, checked)
 
 				// If this is a radio, we can only enable
-				if (this.switchType === 'radio') {
+				if (!this.unique) {
 					this.$emit('change', { enabled: true, id: this.theme.id })
 					return
 				}
@@ -72,18 +93,33 @@ export default {
 			},
 		},
 	},
+
+	methods: {
+		onToggle() {
+			if (this.enforced) {
+				return
+			}
+
+			if (this.switchType === 'radio') {
+				this.checked = true
+				return
+			}
+
+			// Invert state
+			this.checked = !this.checked
+		},
+	},
 }
 </script>
 <style lang="scss" scoped>
-// We make previews on 16/10 screens
-$ratio: 16;
+@use 'sass:math';
 
 .theming__preview {
+	// We make previews on 16/10 screens
 	--ratio: 16;
 	position: relative;
 	display: flex;
 	justify-content: flex-start;
-	max-width: 800px;
 
 	&,
 	* {
@@ -94,24 +130,38 @@ $ratio: 16;
 		flex-basis: calc(16px * var(--ratio));
 		flex-shrink: 0;
 		height: calc(10px * var(--ratio));
-		margin-right: var(--gap);
+		margin-inline-end: var(--gap);
+		cursor: pointer;
 		border-radius: var(--border-radius);
 		background-repeat: no-repeat;
 		background-position: top left;
 		background-size: cover;
 	}
 
+	&-explanation {
+		margin-bottom: 10px;
+	}
+
 	&-description {
 		display: flex;
 		flex-direction: column;
 
+		h3 {
+			font-weight: bold;
+			margin-bottom: 0;
+		}
+
 		label {
 			padding: 12px 0;
 		}
 	}
+
+	&-warning {
+		color: var(--color-warning);
+	}
 }
 
-@media (max-width: (1024px / 1.5)) {
+@media (max-width: math.div(1024px, 1.5)) {
 	.theming__preview {
 		flex-direction: column;