feat(theming): Add checkbox for force enable / disable blurry background

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/theming/lib/Listener/BeforePreferenceListener.php b/apps/theming/lib/Listener/BeforePreferenceListener.php
index 5eaf84d5226b23a1c4677e71ff83f0c48fe3489b..1190c20c2d4c7d418871229bb687d2f8449aa9d3 100644 (file)
--- a/apps/theming/lib/Listener/BeforePreferenceListener.php
+++ b/apps/theming/lib/Listener/BeforePreferenceListener.php
@@ -33,6 +33,12 @@ use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventListener;
 
 class BeforePreferenceListener implements IEventListener {
+
+       /**
+        * @var string[]
+        */
+       private const ALLOWED_KEYS = ['force_enable_blur_filter', 'shortcuts_disabled'];
+
        public function __construct(
                private IAppManager $appManager,
        ) {
@@ -54,13 +60,22 @@ class BeforePreferenceListener implements IEventListener {
        }
 
        private function handleThemingValues(BeforePreferenceSetEvent|BeforePreferenceDeletedEvent $event): void {
-               if ($event->getConfigKey() !== 'shortcuts_disabled') {
+               if (!in_array($event->getConfigKey(), self::ALLOWED_KEYS)) {
                        // Not allowed config key
                        return;
                }
 
                if ($event instanceof BeforePreferenceSetEvent) {
-                       $event->setValid($event->getConfigValue() === 'yes');
+                       switch ($event->getConfigKey()) {
+                               case 'force_enable_blur_filter':
+                                       $event->setValid($event->getConfigValue() === 'yes' || $event->getConfigValue() === 'no');
+                                       break;
+                               case 'shortcuts_disabled':
+                                       $event->setValid($event->getConfigValue() === 'yes');
+                                       break;
+                               default:
+                                       $event->setValid(false);
+                       }
                        return;
                }
 

diff --git a/apps/theming/lib/Settings/Personal.php b/apps/theming/lib/Settings/Personal.php
index f24aaa2f8f83f2c76b2d4091cd547be64312011a..eb61e1262713edad4db568c5bbaaff72bc9bb39d 100644 (file)
--- a/apps/theming/lib/Settings/Personal.php
+++ b/apps/theming/lib/Settings/Personal.php
@@ -74,6 +74,7 @@ class Personal implements ISettings {
                $this->initialStateService->provideInitialState('themes', array_values($themes));
                $this->initialStateService->provideInitialState('enforceTheme', $enforcedTheme);
                $this->initialStateService->provideInitialState('isUserThemingDisabled', $this->themingDefaults->isUserThemingDisabled());
+               $this->initialStateService->provideInitialState('enableBlurFilter', $this->config->getUserValue($this->userId, 'theming', 'force_enable_blur_filter', ''));
                $this->initialStateService->provideInitialState('navigationBar', [
                        'userAppOrder' => json_decode($this->config->getUserValue($this->userId, 'core', 'apporder', '[]'), true, flags:JSON_THROW_ON_ERROR),
                        'enforcedDefaultApp' => $forcedDefaultApp

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index d941bf9c1db2f498ce2c01a10e01de2dd5a5a79e..75d88962243c7d6b9f8d70ee2051af5dc971d5b9 100644 (file)
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -51,6 +51,14 @@
                                        type="font"
                                        @change="changeFont" />
                        </div>
+
+                       <h3>{{ t('theming', 'Misc accessibility options') }}</h3>
+                       <NcCheckboxRadioSwitch type="checkbox"
+                               :checked="enableBlurFilter === 'yes'"
+                               :indeterminate="enableBlurFilter === ''"
+                               @update:checked="changeEnableBlurFilter">
+                               {{ t('theming', 'Enable blur background filter (may increase GPU load)') }}
+                       </NcCheckboxRadioSwitch>
                </NcSettingsSection>
 
                <NcSettingsSection :name="t('theming', 'Background')"
@@ -93,6 +101,7 @@ import UserAppMenuSection from './components/UserAppMenuSection.vue'
 const availableThemes = loadState('theming', 'themes', [])
 const enforceTheme = loadState('theming', 'enforceTheme', '')
 const shortcutsDisabled = loadState('theming', 'shortcutsDisabled', false)
+const enableBlurFilter = loadState('theming', 'enableBlurFilter', '')
 
 const isUserThemingDisabled = loadState('theming', 'isUserThemingDisabled')
 
@@ -115,6 +124,8 @@ export default {
                        enforceTheme,
                        shortcutsDisabled,
                        isUserThemingDisabled,
+
+                       enableBlurFilter,
                }
        },
 
@@ -240,6 +251,22 @@ export default {
                        }
                },
 
+               async changeEnableBlurFilter() {
+                       this.enableBlurFilter = this.enableBlurFilter === 'no' ? 'yes' : 'no'
+                       await axios({
+                               url: generateOcsUrl('apps/provisioning_api/api/v1/config/users/{appId}/{configKey}', {
+                                       appId: 'theming',
+                                       configKey: 'force_enable_blur_filter',
+                               }),
+                               data: {
+                                       configValue: this.enableBlurFilter,
+                               },
+                               method: 'POST',
+                       })
+                       // Refresh the styles
+                       this.$emit('update:background')
+               },
+
                updateBodyAttributes() {
                        const enabledThemesIDs = this.themes.filter(theme => theme.enabled === true).map(theme => theme.id)
                        const enabledFontsIDs = this.fonts.filter(font => font.enabled === true).map(font => font.id)

diff --git a/apps/theming/tests/Settings/PersonalTest.php b/apps/theming/tests/Settings/PersonalTest.php
index 8e7ee4fb602e5df0d6ead9bf7624008fa6381f6c..d9327eaed8026d81f655861c0a3ba6412063ddb0 100644 (file)
--- a/apps/theming/tests/Settings/PersonalTest.php
+++ b/apps/theming/tests/Settings/PersonalTest.php
@@ -47,14 +47,15 @@ use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
+use PHPUnit\Framework\MockObject\MockObject;
 use Test\TestCase;
 
 class PersonalTest extends TestCase {
-       private IConfig $config;
-       private ThemesService $themesService;
-       private IInitialState $initialStateService;
-       private ThemingDefaults $themingDefaults;
-       private IAppManager $appManager;
+       private IConfig|MockObject $config;
+       private ThemesService|MockObject $themesService;
+       private IInitialState|MockObject $initialStateService;
+       private ThemingDefaults|MockObject $themingDefaults;
+       private IAppManager|MockObject $appManager;
        private Personal $admin;
 
        /** @var ITheme[] */
@@ -129,12 +130,13 @@ class PersonalTest extends TestCase {
 
                $this->initialStateService->expects($this->exactly(5))
                        ->method('provideInitialState')
-                       ->withConsecutive(
+                       ->willReturnMap([
                                ['themes', $themesState],
+                               ['enableBlurFilter', ''],
                                ['enforceTheme', $enforcedTheme],
                                ['isUserThemingDisabled', false],
                                ['navigationBar', ['userAppOrder' => [], 'enforcedDefaultApp' => 'forcedapp']],
-                       );
+                       ]);
 
                $expected = new TemplateResponse('theming', 'settings-personal');
                $this->assertEquals($expected, $this->admin->getForm());
@@ -176,6 +178,7 @@ class PersonalTest extends TestCase {
                                $config,
                                $l10n,
                                $appManager,
+                               null,
                        ),
                        'light' => new LightTheme(
                                $util,
@@ -186,6 +189,7 @@ class PersonalTest extends TestCase {
                                $config,
                                $l10n,
                                $appManager,
+                               null,
                        ),
                        'dark' => new DarkTheme(
                                $util,
@@ -196,6 +200,7 @@ class PersonalTest extends TestCase {
                                $config,
                                $l10n,
                                $appManager,
+                               null,
                        ),
                        'light-highcontrast' => new HighContrastTheme(
                                $util,
@@ -206,6 +211,7 @@ class PersonalTest extends TestCase {
                                $config,
                                $l10n,
                                $appManager,
+                               null,
                        ),
                        'dark-highcontrast' => new DarkHighContrastTheme(
                                $util,
@@ -216,6 +222,7 @@ class PersonalTest extends TestCase {
                                $config,
                                $l10n,
                                $appManager,
+                               null,
                        ),
                        'opendyslexic' => new DyslexiaFont(
                                $util,
@@ -226,6 +233,7 @@ class PersonalTest extends TestCase {
                                $config,
                                $l10n,
                                $appManager,
+                               null,
                        ),
                ];
        }