IBX-7329: Enhancing UX: Name Updates for Product 4.6 LTS+

features/personas/AddLocation.feature

@@ -7,7 +7,7 @@ Feature: Verify that an Editor with Content Type limitation on content/create po
     And I log in as "Add" with password "Passw0rd-42"
     And I go to "Content structure" in "Content" tab
     And I navigate to content "NewArticle" of type "Article" in root
-    And I am using the DXP in "Expert" mode
+    And I am using the DXP with Focus mode disabled
     When I switch to "Locations" tab in Content structure
     And I add a new Location under "root/Destination"
     Then there exists Content view Page for "root/Destination/NewArticle"

src/bundle/Controller/User/UserModeController.php → src/bundle/Controller/User/FocusModeController.php

@@ -8,16 +8,16 @@
 
 namespace Ibexa\Bundle\AdminUi\Controller\User;
 
-use Ibexa\AdminUi\Form\Data\User\UserModeChangeData;
-use Ibexa\AdminUi\Form\Type\User\UserModeChangeType;
-use Ibexa\AdminUi\UserSetting\UserMode;
+use Ibexa\AdminUi\Form\Data\User\FocusModeChangeData;
+use Ibexa\AdminUi\Form\Type\User\FocusModeChangeType;
+use Ibexa\AdminUi\UserSetting\FocusMode;
 use Ibexa\Contracts\AdminUi\Controller\Controller;
 use Ibexa\User\UserSetting\UserSettingService;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 
-final class UserModeController extends Controller
+final class FocusModeController extends Controller
 {
     private const RETURN_URL_PARAM = 'returnUrl';
 
@@ -30,15 +30,15 @@ public function __construct(UserSettingService $userSettingService)
 
     public function changeAction(Request $request, ?string $returnUrl): Response
     {
-        $data = new UserModeChangeData();
-        $data->setMode($this->userSettingService->getUserSetting(UserMode::IDENTIFIER)->value === UserMode::EXPERT);
+        $data = new FocusModeChangeData();
+        $data->setEnabled($this->userSettingService->getUserSetting(FocusMode::IDENTIFIER)->value === FocusMode::FOCUS_MODE_ON);
 
         $form = $this->createForm(
-            UserModeChangeType::class,
+            FocusModeChangeType::class,
             $data,
             [
                 'action' => $this->generateUrl(
-                    'ibexa.user_mode.change',
+                    'ibexa.focus_mode.change',
                     [
                         self::RETURN_URL_PARAM => $returnUrl,
                     ]
@@ -50,15 +50,15 @@ public function changeAction(Request $request, ?string $returnUrl): Response
         $form->handleRequest($request);
         if ($form->isSubmitted() && $form->isValid()) {
             $this->userSettingService->setUserSetting(
-                UserMode::IDENTIFIER,
-                $data->getMode() ? UserMode::EXPERT : UserMode::SMART
+                FocusMode::IDENTIFIER,
+                $data->isEnabled() ? FocusMode::FOCUS_MODE_ON : FocusMode::FOCUS_MODE_OFF
             );
 
             return $this->createRedirectToReturnUrl($request);
         }
 
         return $this->render(
-            '@ibexadesign/ui/user_mode_form.html.twig',
+            '@ibexadesign/ui/focus_mode_form.html.twig',
             [
                 'form' => $form->createView(),
             ]

src/bundle/DependencyInjection/Configuration/Parser/AdminUiParser.php

@@ -8,7 +8,7 @@
 
 namespace Ibexa\Bundle\AdminUi\DependencyInjection\Configuration\Parser;
 
-use Ibexa\AdminUi\UserSetting\UserMode;
+use Ibexa\AdminUi\UserSetting\FocusMode;
 use Ibexa\Bundle\Core\DependencyInjection\Configuration\AbstractParser;
 use Ibexa\Bundle\Core\DependencyInjection\Configuration\SiteAccessAware\ContextualizerInterface;
 use Symfony\Component\Config\Definition\Builder\NodeBuilder;
@@ -21,14 +21,14 @@
  *   system:
  *      default: # configuration per siteaccess or siteaccess group
  *          admin_ui:
- *              default_user_mode: smart
+ *              default_focus_mode: on
  * ```
  */
 final class AdminUiParser extends AbstractParser
 {
     private const MODES = [
-        'expert' => UserMode::EXPERT,
-        'smart' => UserMode::SMART,
+        'off' => FocusMode::FOCUS_MODE_OFF,
+        'on' => FocusMode::FOCUS_MODE_ON,
     ];
 
     /**
@@ -52,9 +52,9 @@ public function addSemanticConfig(NodeBuilder $nodeBuilder): void
     {
         $root = $nodeBuilder->arrayNode('admin_ui');
         $root->children()
-            ->enumNode('default_user_mode')
-                ->info('Default user mode setting')
-                ->values(['smart', 'expert'])
+            ->enumNode('default_focus_mode')
+                ->info('Default focus mode value')
+                ->values(['on', 'off'])
             ->end()
         ->end();
     }
@@ -67,14 +67,14 @@ private function addUserModeParameters(
         string $currentScope,
         ContextualizerInterface $contextualizer
     ): void {
-        $userMode = $settings['default_user_mode'];
+        $userMode = $settings['default_focus_mode'];
 
         if (!array_key_exists($userMode, self::MODES)) {
             return;
         }
 
         $contextualizer->setContextualParameter(
-            'admin_ui.default_user_mode',
+            'admin_ui.default_focus_mode',
             $currentScope,
             self::MODES[$userMode]
         );

src/bundle/Resources/config/default_parameters.yaml

@@ -77,4 +77,4 @@ parameters:
 
     ibexa.admin_ui.content_tree.node_factory.max_location_ids_in_single_aggregation: 100
 
-    ibexa.site_access.config.default.admin_ui.default_user_mode: '1'
+    ibexa.site_access.config.default.admin_ui.default_focus_mode: '1'

src/bundle/Resources/config/routing.yaml

@@ -965,9 +965,9 @@ ibexa.permission.limitation.language.content_read:
         contentInfoId: \d+
 
 
-### User Mode
+### Focus Mode
 
-ibexa.user_mode.change:
-    path: /user/change-mode
-    controller: 'Ibexa\Bundle\AdminUi\Controller\User\UserModeController::changeAction'
+ibexa.focus_mode.change:
+    path: /user/focus-mode
+    controller: 'Ibexa\Bundle\AdminUi\Controller\User\FocusModeController::changeAction'
     methods: [GET, POST]

src/bundle/Resources/config/services/controllers.yaml

@@ -191,7 +191,7 @@ services:
         tags:
             - controller.service_arguments
 
-    Ibexa\Bundle\AdminUi\Controller\User\UserModeController:
+    Ibexa\Bundle\AdminUi\Controller\User\FocusModeController:
         parent: Ibexa\Contracts\AdminUi\Controller\Controller
         autowire: true
         tags:

src/bundle/Resources/config/services/twig.yaml

@@ -26,7 +26,7 @@ services:
         tags:
             - { name: twig.extension }
 
-    Ibexa\Bundle\AdminUi\Templating\Twig\UserModeExtension:
+    Ibexa\Bundle\AdminUi\Templating\Twig\FocusModeExtension:
         tags:
             - { name: twig.extension }
 

src/bundle/Resources/config/services/user_settings.yaml

@@ -30,7 +30,7 @@ services:
         tags:
             - { name: ibexa.user.setting.group, identifier: mode, priority: -10 }
 
-    Ibexa\AdminUi\UserSetting\UserMode:
+    Ibexa\AdminUi\UserSetting\FocusMode:
         tags:
-            - { name: ibexa.user.setting.value, identifier: user_mode, group: mode, priority: 10 }
-            - { name: ibexa.user.setting.mapper.form, identifier: user_mode }
+            - { name: ibexa.user.setting.value, identifier: focus_mode, group: mode, priority: 10 }
+            - { name: ibexa.user.setting.mapper.form, identifier: focus_mode }

src/bundle/Resources/encore/ibexa.js.config.js

@@ -38,8 +38,8 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.form.autosubmit.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.anchor.navigation'),
     path.resolve(__dirname, '../public/js/scripts/admin.context.menu'),
+    path.resolve(__dirname, '../public/js/scripts/admin.distraction.free.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
-    path.resolve(__dirname, '../public/js/scripts/admin.user.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),

src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js

@@ -0,0 +1,65 @@
+(function (global, doc) {
+    let activeFieldEdit = null;
+    const DISTRACTION_FREE_MODE_ENABLE_EVENT_NAME = 'ibexa-distraction-free:enable';
+    const DISTRACTION_FREE_DISABLE_EVENT_NAME = 'ibexa-distraction-free:disable';
+    const distractionFreeModeEnableBtns = doc.querySelectorAll('.ibexa-field-edit__distraction-free-mode-control-btn--enable');
+    const distractionFreeModeDisableBtns = doc.querySelectorAll('.ibexa-field-edit__distraction-free-mode-control-btn--disable');
+    const changeDistractionFreeModeState = (active) => {
+        if (!activeFieldEdit) {
+            return;
+        }
+
+        const dispatchEventName = active ? DISTRACTION_FREE_MODE_ENABLE_EVENT_NAME : DISTRACTION_FREE_DISABLE_EVENT_NAME;
+        const editorSourceElement = activeFieldEdit.querySelector('.ibexa-data-source__richtext');
+        const editorInstance = editorSourceElement.ckeditorInstance;
+
+        activeFieldEdit.classList.toggle('ibexa-field-edit--distraction-free-mode-active', active);
+        editorInstance.set('distractionFreeModeActive', active);
+
+        doc.body.dispatchEvent(
+            new CustomEvent(dispatchEventName, {
+                detail: {
+                    activeFieldEdit,
+                },
+            }),
+        );
+
+        if (!active) {
+            activeFieldEdit = null;
+        }
+    };
+    const handleKeyPress = (event) => {
+        if (event.key === 'Escape') {
+            changeDistractionFreeModeState(false);
+        }
+    };
+
+    distractionFreeModeEnableBtns.forEach((btn) => {
+        btn.addEventListener(
+            'click',
+            ({ currentTarget }) => {
+                activeFieldEdit = currentTarget.closest('.ibexa-field-edit');
+                changeDistractionFreeModeState(true);
+            },
+            false,
+        );
+    });
+    distractionFreeModeDisableBtns.forEach((btn) => {
+        btn.addEventListener('click', () => changeDistractionFreeModeState(false), false);
+    });
+
+    doc.body.addEventListener(
+        DISTRACTION_FREE_MODE_ENABLE_EVENT_NAME,
+        () => {
+            doc.body.addEventListener('keydown', handleKeyPress, false);
+        },
+        false,
+    );
+    doc.body.addEventListener(
+        DISTRACTION_FREE_DISABLE_EVENT_NAME,
+        () => {
+            doc.body.removeEventListener('keydown', handleKeyPress, false);
+        },
+        false,
+    );
+})(window, window.document);

src/bundle/Resources/public/js/scripts/admin.focus.mode.js

@@ -1,65 +1,12 @@
 (function (global, doc) {
-    let activeFieldEdit = null;
-    const FOCUS_MODE_ENABLE_EVENT_NAME = 'ibexa-focus-mode:enable';
-    const FOCUS_MODE_DISABLE_EVENT_NAME = 'ibexa-focus-mode:disable';
-    const focusModeEnableBtns = doc.querySelectorAll('.ibexa-field-edit__focus-mode-control-btn--enable');
-    const focusModeDisbaleBtns = doc.querySelectorAll('.ibexa-field-edit__focus-mode-control-btn--disable');
-    const changeFocusModeState = (active) => {
-        if (!activeFieldEdit) {
-            return;
-        }
-
-        const dispatchEventName = active ? FOCUS_MODE_ENABLE_EVENT_NAME : FOCUS_MODE_DISABLE_EVENT_NAME;
-        const editorSourceElement = activeFieldEdit.querySelector('.ibexa-data-source__richtext');
-        const editorInstance = editorSourceElement.ckeditorInstance;
-
-        activeFieldEdit.classList.toggle('ibexa-field-edit--focus-mode-active', active);
-        editorInstance.set('focusModeActive', active);
-
-        doc.body.dispatchEvent(
-            new CustomEvent(dispatchEventName, {
-                detail: {
-                    activeFieldEdit,
-                },
-            }),
-        );
-
-        if (!active) {
-            activeFieldEdit = null;
-        }
-    };
-    const handleKeyPress = (event) => {
-        if (event.key === 'Escape') {
-            changeFocusModeState(false);
-        }
-    };
-
-    focusModeEnableBtns.forEach((btn) => {
-        btn.addEventListener(
-            'click',
-            ({ currentTarget }) => {
-                activeFieldEdit = currentTarget.closest('.ibexa-field-edit');
-                changeFocusModeState(true);
-            },
-            false,
-        );
-    });
-    focusModeDisbaleBtns.forEach((btn) => {
-        btn.addEventListener('click', () => changeFocusModeState(false), false);
-    });
-
-    doc.body.addEventListener(
-        FOCUS_MODE_ENABLE_EVENT_NAME,
-        () => {
-            doc.body.addEventListener('keydown', handleKeyPress, false);
-        },
-        false,
-    );
-    doc.body.addEventListener(
-        FOCUS_MODE_DISABLE_EVENT_NAME,
-        () => {
-            doc.body.removeEventListener('keydown', handleKeyPress, false);
-        },
-        false,
-    );
+    const FORM_SELECTOR = 'form[name=focus_mode_change]';
+    const form = doc.querySelector(FORM_SELECTOR);
+
+    if (form) {
+        form.querySelectorAll('input[type=checkbox]').forEach((input) => {
+            input.addEventListener('change', () => {
+                form.submit();
+            });
+        });
+    }
 })(window, window.document);