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

@@ -39,6 +39,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

@@ -54,6 +54,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

@@ -14,6 +14,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;
@@ -33,6 +34,7 @@ public function __construct(
 		HighContrastTheme $highContrastTheme,
 		DarkHighContrastTheme $darkHighContrastTheme,
 		DyslexiaFont $dyslexiaFont,
+		ReducedMotion $motionSickness,
 	) {
 
 		// Register themes
@@ -43,6 +45,7 @@ public function __construct(
 			$highContrastTheme->getId() => $highContrastTheme,
 			$darkHighContrastTheme->getId() => $darkHighContrastTheme,
 			$dyslexiaFont->getId() => $dyslexiaFont,
+			$motionSickness->getId() => $motionSickness,
 		];
 	}
 
@@ -84,33 +87,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);
 	}
 
 	/**
@@ -124,7 +116,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,60 @@
+<?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,
+	) {
+	}
+
+	public function getCustomCss(): string {
+		return '';
+	}
+
+	public function getMeta(): array {
+		return [];
+	}
+
+	public function getId(): string {
+		return 'reduced-motion';
+	}
+
+	public function getType(): int {
+		return ITheme::TYPE_SUPPLEMENTARY;
+	}
+
+	public function getTitle(): string {
+		return $this->l->t('Reduced motion');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Motion sickness reduction');
+	}
+
+	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.');
+	}
+
+	public function getCSSVariables(): array {
+		$variables = [
+			'--animation-quick' => '0',
+			'--animation-slow' => '0',
+		];
+
+		return $variables;
+	}
+
+	public function getMediaQuery(): string {
+		return '(prefers-reduced-motion: reduce)';
+	}
+}