Link authoring theme with superdesk selected theme (#4316)

superdesk · Aug 31, 2023 · 2acbf68 · 2acbf68
1 parent af8cd7f
commit 2acbf68
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/scripts/apps/authoring/authoring/services/AuthoringThemesService.ts b/scripts/apps/authoring/authoring/services/AuthoringThemesService.ts
@@ -101,5 +101,20 @@ export function AuthoringThemesService(storage, preferencesService) {
         });
     };
 
+    // when the user change theme of application, the theme of editor will inherit the app's
+    service.syncWithApplicationTheme = (appTheme: string, themeObject: any) => {
+        let activeThemeObject = JSON.parse(themeObject);
+
+        if (activeThemeObject.theme === 'default' || activeThemeObject.theme === 'dark') {
+            let activeTheme = appTheme === 'dark-ui'
+                ? {...activeThemeObject, theme: 'dark'}
+                : {...activeThemeObject, theme: 'default'};
+
+            return activeTheme;
+        } else {
+            return activeThemeObject;
+        }
+    };
+
     return service;
 }
diff --git a/scripts/apps/users/directives/UserPreferencesDirective.ts b/scripts/apps/users/directives/UserPreferencesDirective.ts
@@ -14,11 +14,11 @@ import {applyDefault} from 'core/helpers/typescript-helpers';
  *   themselves.
  */
 UserPreferencesDirective.$inject = ['session', 'preferencesService', 'notify', 'asset',
-    'metadata', 'desks', 'modal', '$timeout', '$q', 'userList', 'lodash', 'search'];
+    'metadata', 'desks', 'modal', '$timeout', '$q', 'userList', 'lodash', 'search', 'authThemes'];
 
 export function UserPreferencesDirective(
     session, preferencesService, notify, asset, metadata, desks, modal,
-    $timeout, $q, userList, _, search,
+    $timeout, $q, userList, _, search, authThemes,
 ) {
     // human readable labels for server values
     const LABELS = {
@@ -46,15 +46,6 @@ export function UserPreferencesDirective(
             scope.activeNavigation = null;
             scope.activeTheme = localStorage.getItem('theme');
 
-            scope.$watch('activeTheme', (val) => {
-                if (!val) {
-                    return;
-                }
-
-                localStorage.setItem('theme', val);
-                body.attr('data-theme', val);
-            });
-
             /*
              * Set this to true after adding all the preferences to the scope. If done before, then the
              * directives which depend on scope variables might fail to load properly.
@@ -119,6 +110,9 @@ export function UserPreferencesDirective(
                         if (_.get(preferences, 'desktop:notification.enabled')) {
                             preferencesService.desktopNotification.requestPermission();
                         }
+
+                        localStorage.setItem('theme', scope.activeTheme);
+                        body.attr('data-theme', scope.activeTheme);
                         notify.success(gettext('User preferences saved'));
                         scope.cancel();
                     }, (reason) => {
@@ -422,6 +416,11 @@ export function UserPreferencesDirective(
 
                     p[key] = _.extend(val, scope.preferences[key]);
                 });
+
+                if (orig['editor:theme'] != null) {
+                    p['editor:theme'] = {...orig['editor:theme'], theme: JSON.stringify(authThemes.syncWithApplicationTheme(scope.activeTheme, orig['editor:theme'].theme))};
+                }
+
                 return p;
             }
         },

diff --git a/scripts/apps/users/tests/sdUserPreferences.spec.ts b/scripts/apps/users/tests/sdUserPreferences.spec.ts
@@ -43,6 +43,15 @@ describe('sdUserPreferences directive', () => {
                 category: 'article_defaults',
                 place: '',
             },
+            'editor:theme': {
+                type: 'string',
+                theme: JSON.stringify({
+                    theme: 'default',
+                    headline: 'medium',
+                    abstract: 'medium',
+                    body: 'medium',
+                }),
+            },
         };
 
         metadata.values = {