Merge pull request #61627 from nextcloud/fix/theming-select

fix(theming): allow to unselect a font theme

Author: AndyScherzinger

apps/theming/src/components/ThemeList.vue

@@ -26,6 +26,11 @@ const props = defineProps<{
 	 */
 	multiple?: boolean
 
+	/**
+	 * The default theme if multiple is false
+	 */
+	default?: ITheme
+
 	/**
 	 * The list of available themes
 	 */
@@ -60,18 +65,13 @@ async function toggleTheme(theme: ITheme, state: boolean) {
 		return
 	}
 
-	if (!props.multiple && state === false) {
-		// handled by the radio logic below for the enabled element
-		return
-	}
-
 	try {
 		loading.value = true
 		if (state === false) {
 			await axios.delete(generateOcsUrl('apps/theming/api/v1/theme/{themeId}', { themeId: theme.id }))
-			if (!props.multiple) {
+			if (!props.multiple && props.default) {
 				// If the theme was disabled, we need to enable the default theme
-				const defaultTheme = props.themes.find((t) => t.id === 'default')
+				const defaultTheme = props.themes.find((t) => t.id === props.default!.id)
 				if (defaultTheme && !defaultTheme.enabled) {
 					await axios.put(generateOcsUrl('apps/theming/api/v1/theme/{themeId}/enable', { themeId: defaultTheme.id }))
 					defaultTheme.enabled = true
@@ -112,7 +112,7 @@ async function toggleTheme(theme: ITheme, state: boolean) {
 			:enforced="theme.id === enforcedTheme"
 			:loading
 			:theme
-			:unique="!multiple"
+			:type="multiple ? 'checkbox' : ($props.default ? 'radio' : 'switch')"
 			:name
 			@update:modelValue="toggleTheme(theme, $event)" />
 	</ul>

apps/theming/src/components/ThemeListItem.vue

@@ -31,18 +31,30 @@ const props = defineProps<{
 	/** The theme */
 	theme: ITheme
 	/**
-	 * If true, the theme can be selected exclusively (radio button),
-	 * otherwise it can be selected in addition to other themes (switch)
+	 * The type of the switch.
 	 */
-	unique: boolean
+	type: 'checkbox' | 'radio' | 'switch'
 	/**
 	 * When multiple themes are allowed, this is the name of the input group.
 	 */
 	name?: string
 }>()
 
-const switchType = computed(() => props.unique ? 'radio' : 'checkbox')
 const imageUrl = computed(() => generateFilePath('theming', 'img', props.theme.id + '.jpg'))
+const checkboxValue = computed({
+	get() {
+		if (props.type === 'switch') {
+			return isSelected.value
+		} else if (props.type === 'radio') {
+			return isSelected.value ? props.theme.id : false
+		} else {
+			return isSelected.value ? [props.theme.id] : []
+		}
+	},
+	set() {
+		isSelected.value = !isSelected.value
+	},
+})
 </script>
 
 <template>
@@ -64,13 +76,13 @@ const imageUrl = computed(() => generateFilePath('theming', 'img', props.theme.i
 			<!-- Only show checkbox if we can change themes -->
 			<NcCheckboxRadioSwitch
 				v-show="!enforced"
+				v-model="checkboxValue"
 				class="theming__preview-toggle"
 				:disabled="enforced"
 				:loading
-				:name
-				:type="switchType"
-				:modelValue="isSelected"
-				@update:modelValue="isSelected = !isSelected">
+				:name="type !== 'switch' ? name : undefined"
+				:type
+				:value="type !== 'switch' ? theme.id : undefined">
 				{{ theme.enableLabel }}
 			</NcCheckboxRadioSwitch>
 		</div>

apps/theming/src/views/UserTheming.vue

@@ -15,6 +15,7 @@
 		<ThemeList
 			:label="t('theming', 'Themes')"
 			:themes="mainThemes"
+			:default="defaultTheme"
 			@updated="updateBodyAttributes" />
 
 		<ThemeList
@@ -58,7 +59,7 @@ import axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import { computed, nextTick, ref, useTemplateRef } from 'vue'
+import { computed, nextTick, onBeforeMount, ref, useTemplateRef } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
@@ -77,16 +78,18 @@ const availableThemes = ref(loadState<ITheme[]>('theming', 'themes', []))
 for (const theme of availableThemes.value) {
 	theme.enabled = theme.enabled || false
 }
-if (availableThemes.value.every(({ type, enabled }) => type !== 1 || !enabled)) {
-	const theme = availableThemes.value.find(({ id, type }) => id === 'default' && type === 1)
-	if (theme) {
-		theme.enabled = true
-	}
-}
 
 const mainThemes = computed(() => availableThemes.value.filter((theme) => theme.type === 1))
 const fontThemes = computed(() => availableThemes.value.filter((theme) => theme.type === 2))
 const supplementaryThemes = computed(() => availableThemes.value.filter((theme) => theme.type === 3))
+const defaultTheme = computed(() => mainThemes.value.find((theme) => theme.id === 'default'))
+onBeforeMount(() => {
+	if (availableThemes.value.every(({ type, enabled }) => type !== 1 || !enabled)) {
+		if (defaultTheme.value) {
+			defaultTheme.value.enabled = true
+		}
+	}
+})
 
 const primaryColorSection = useTemplateRef('primaryColor')
 

dist/theming-settings-personal.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './theming-theming-settings-personal-BZm8LyXt.chunk.css';
+@import './theming-theming-settings-personal-Di6TWq9d.chunk.css';
 @import './common-createElementId-DhjFt1I9-C_oBIsvc.chunk.css';
 @import './common-TrashCanOutline-BYHcrfvW.chunk.css';
 @import './common-NcCheckboxRadioSwitch-D8Dfv4iw-CPGkDj-p.chunk.css';