feat(theming): add option for reduce animation

apps/theming/REUSE.toml

@@ -16,7 +16,7 @@ SPDX-FileCopyrightText = "2012-2019 Abbie Gonzalez <https://abbiecod.es|support@
 SPDX-License-Identifier = "OFL-1.1-RFN"
 
 [[annotations]]
-path = ["img/dark-highcontrast.jpg", "img/dark.jpg", "img/default-source.svg", "img/default.jpg", "img/light-highcontrast.jpg", "img/light.jpg", "img/opendyslexic.jpg"]
+path = ["img/dark-highcontrast.jpg", "img/dark.jpg", "img/default-source.svg", "img/default.jpg", "img/light-highcontrast.jpg", "img/light.jpg", "img/opendyslexic.jpg", "img/reduced-motion.jpg"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2022 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"

apps/theming/composer/composer/autoload_classmap.php

@@ -40,6 +40,7 @@
     'OCA\\Theming\\Themes\\DyslexiaFont' => $baseDir . '/../lib/Themes/DyslexiaFont.php',
     'OCA\\Theming\\Themes\\HighContrastTheme' => $baseDir . '/../lib/Themes/HighContrastTheme.php',
     'OCA\\Theming\\Themes\\LightTheme' => $baseDir . '/../lib/Themes/LightTheme.php',
+    'OCA\\Theming\\Themes\\ReducedMotion' => $baseDir . '/../lib/Themes/ReducedMotion.php',
     'OCA\\Theming\\ThemingDefaults' => $baseDir . '/../lib/ThemingDefaults.php',
     'OCA\\Theming\\Util' => $baseDir . '/../lib/Util.php',
 );

apps/theming/composer/composer/autoload_static.php

@@ -55,6 +55,7 @@ class ComposerStaticInitTheming
         'OCA\\Theming\\Themes\\DyslexiaFont' => __DIR__ . '/..' . '/../lib/Themes/DyslexiaFont.php',
         'OCA\\Theming\\Themes\\HighContrastTheme' => __DIR__ . '/..' . '/../lib/Themes/HighContrastTheme.php',
         'OCA\\Theming\\Themes\\LightTheme' => __DIR__ . '/..' . '/../lib/Themes/LightTheme.php',
+        'OCA\\Theming\\Themes\\ReducedMotion' => __DIR__ . '/..' . '/../lib/Themes/ReducedMotion.php',
         'OCA\\Theming\\ThemingDefaults' => __DIR__ . '/..' . '/../lib/ThemingDefaults.php',
         'OCA\\Theming\\Util' => __DIR__ . '/..' . '/../lib/Util.php',
     );

apps/theming/lib/ITheme.php

@@ -17,6 +17,11 @@ interface ITheme {
 
 	public const TYPE_THEME = 1;
 	public const TYPE_FONT = 2;
+	/**
+	 * A supplementary theme where multiple can be active at the same time.
+	 * @since 33.0.0
+	 */
+	public const TYPE_SUPPLEMENTARY = 3;
 
 	/**
 	 * Unique theme id

apps/theming/lib/Service/ThemesService.php

@@ -15,6 +15,7 @@
 use OCA\Theming\Themes\DyslexiaFont;
 use OCA\Theming\Themes\HighContrastTheme;
 use OCA\Theming\Themes\LightTheme;
+use OCA\Theming\Themes\ReducedMotion;
 use OCP\IConfig;
 use OCP\IUser;
 use OCP\IUserSession;
@@ -34,6 +35,7 @@ public function __construct(
 		HighContrastTheme $highContrastTheme,
 		DarkHighContrastTheme $darkHighContrastTheme,
 		DyslexiaFont $dyslexiaFont,
+		ReducedMotion $motionSickness,
 	) {
 
 		// Register themes
@@ -44,6 +46,7 @@ public function __construct(
 			$highContrastTheme->getId() => $highContrastTheme,
 			$darkHighContrastTheme->getId() => $darkHighContrastTheme,
 			$dyslexiaFont->getId() => $dyslexiaFont,
+			$motionSickness->getId() => $motionSickness,
 		];
 	}
 
@@ -85,33 +88,22 @@ public function getThemes(): array {
 	 * @return string[] the enabled themes
 	 */
 	public function enableTheme(ITheme $theme): array {
-		$themesIds = $this->getEnabledThemes();
+		$enabledThemeIds = $this->getEnabledThemes();
 
 		// If already enabled, ignore
-		if (in_array($theme->getId(), $themesIds)) {
-			return $themesIds;
+		if (in_array($theme->getId(), $enabledThemeIds)) {
+			return $enabledThemeIds;
 		}
 
-		/** @var ITheme[] */
-		$themes = array_filter(array_map(function ($themeId) {
-			return $this->getThemes()[$themeId];
-		}, $themesIds));
-
-		// Filtering all themes with the same type
-		$filteredThemes = array_filter($themes, function (ITheme $t) use ($theme) {
-			return $theme->getType() === $t->getType();
-		});
-
-		// Retrieve IDs only
-		/** @var string[] */
-		$filteredThemesIds = array_map(function (ITheme $t) {
-			return $t->getId();
-		}, array_values($filteredThemes));
-
-		$enabledThemes = array_merge(array_diff($themesIds, $filteredThemesIds), [$theme->getId()]);
-		$this->setEnabledThemes($enabledThemes);
+		// for other types then supplementary themes we need to filter out themes with the same type
+		if ($theme->getType() !== ITheme::TYPE_SUPPLEMENTARY) {
+			$allThemes = $this->getThemes();
+			$enabledThemeIds = array_filter($enabledThemeIds, fn (string $themeId) => $allThemes[$themeId]->gettype() !== $theme->gettype());
+		}
 
-		return $enabledThemes;
+		$enabledThemeIds[] = $theme->getId();
+		$this->setEnabledThemes($enabledThemeIds);
+		return array_values($enabledThemeIds);
 	}
 
 	/**
@@ -125,7 +117,7 @@ public function disableTheme(ITheme $theme): array {
 
 		// If enabled, removing it
 		if (in_array($theme->getId(), $themesIds)) {
-			$enabledThemes = array_diff($themesIds, [$theme->getId()]);
+			$enabledThemes = array_values(array_diff($themesIds, [$theme->getId()]));
 			$this->setEnabledThemes($enabledThemes);
 			return $enabledThemes;
 		}

apps/theming/lib/Themes/ReducedMotion.php

@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ITheme;
+use OCP\IL10N;
+
+class ReducedMotion implements ITheme {
+
+	public function __construct(
+		private IL10N $l,
+	) {
+	}
+
+	#[\Override]
+	public function getCustomCss(): string {
+		return '';
+	}
+
+	#[\Override]
+	public function getMeta(): array {
+		return [];
+	}
+
+	#[\Override]
+	public function getId(): string {
+		return 'reduced-motion';
+	}
+
+	#[\Override]
+	public function getType(): int {
+		return ITheme::TYPE_SUPPLEMENTARY;
+	}
+
+	#[\Override]
+	public function getTitle(): string {
+		return $this->l->t('Reduced motion');
+	}
+
+	#[\Override]
+	public function getEnableLabel(): string {
+		return $this->l->t('Motion sickness reduction');
+	}
+
+	#[\Override]
+	public function getDescription(): string {
+		return $this->l->t('Prevents animations, such as scaling or panning large objects, that can trigger discomfort for those with vestibular motion disorders.');
+	}
+
+	#[\Override]
+	public function getCSSVariables(): array {
+		$variables = [
+			'--animation-quick' => '0',
+			'--animation-slow' => '0',
+		];
+
+		return $variables;
+	}
+
+	#[\Override]
+	public function getMediaQuery(): string {
+		return '(prefers-reduced-motion: reduce)';
+	}
+}

apps/theming/src/components/ThemeList.vue

@@ -0,0 +1,136 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { ITheme } from './ThemeListItem.vue'
+
+import axios, { isAxiosError } from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { generateOcsUrl } from '@nextcloud/router'
+import { ref } from 'vue'
+import ThemeListItem from './ThemeListItem.vue'
+import { logger } from '../utils/logger.ts'
+
+const props = defineProps<{
+	/**
+	 * Label of this list
+	 */
+	label: string
+
+	/**
+	 * Allow to select multiple themes
+	 */
+	multiple?: boolean
+
+	/**
+	 * The list of available themes
+	 */
+	themes: ITheme[]
+}>()
+
+const emit = defineEmits<{
+	updated: []
+}>()
+
+const name = 'themes-' + Math.random().toString(16).slice(6)
+const enforcedTheme = loadState('theming', 'enforceTheme', '')
+
+const loading = ref(false)
+
+/**
+ * Enable or disable a theme
+ *
+ * @param theme - The theme toggled
+ * @param state - The new enabled state
+ */
+async function toggleTheme(theme: ITheme, state: boolean) {
+	if (theme.id === enforcedTheme) {
+		return
+	}
+
+	if (loading.value) {
+		return
+	}
+
+	if (theme.enabled === state) {
+		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 the theme was disabled, we need to enable the default theme
+				const defaultTheme = props.themes.find((t) => t.id === 'default')
+				if (defaultTheme && !defaultTheme.enabled) {
+					await axios.put(generateOcsUrl('apps/theming/api/v1/theme/{themeId}/enable', { themeId: defaultTheme.id }))
+					defaultTheme.enabled = true
+				}
+			}
+		} else {
+			await axios.put(generateOcsUrl('apps/theming/api/v1/theme/{themeId}/enable', { themeId: theme.id }))
+			if (!props.multiple) {
+				const otherTheme = props.themes.find((t) => t.id !== theme.id && t.enabled)
+				if (otherTheme) {
+					await axios.delete(generateOcsUrl('apps/theming/api/v1/theme/{themeId}', { themeId: otherTheme.id }))
+					otherTheme.enabled = false
+				}
+			}
+		}
+		theme.enabled = state
+		emit('updated')
+	} catch (error) {
+		let message = ''
+		if (isAxiosError(error) && error.response?.data.ocs?.meta?.message) {
+			message = `${error.response.data.ocs.meta.message}. ${message}`
+		}
+		showError(t('theming', 'Failed to update theme.') + message)
+
+		logger.error('Failed to update theme', { error })
+	} finally {
+		loading.value = false
+	}
+}
+</script>
+
+<template>
+	<ul :aria-label="label" class="theme-list">
+		<ThemeListItem
+			v-for="theme in themes"
+			:key="theme.id"
+			:modelValue="theme.enabled"
+			:enforced="theme.id === enforcedTheme"
+			:loading
+			:theme
+			:unique="!multiple"
+			:name
+			@update:modelValue="toggleTheme(theme, $event)" />
+	</ul>
+</template>
+
+<style scoped>
+.theme-list {
+	--gap: 30px;
+	display: grid;
+	margin-top: var(--gap);
+	column-gap: var(--gap);
+	row-gap: var(--gap);
+}
+
+@media (max-width: 1440px) {
+	.theme-list {
+		display: flex;
+		flex-direction: column;
+	}
+}
+</style>