Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-78954

Improve action menu subpanel aesthetics and effects

    XMLWordPrintable

Details

    • MOODLE_403_STABLE
    • MOODLE_403_STABLE
    • MDL-78954-master
    • Hide

      To the testers: Please be aware that there were some bugs in the action menu for RLT languages that were not related to this patch. I will provide further details about these issues in the testing instructions.

      Tests setup

      1. Install an RTL language like Hebrew but keep the main language in english.
      2. Copy the attached MDL-78954-testpage.php to the root of your instance
      3. Log in to the instance and go to your LOCAL/MDL-78954-testpage.php to display the test page.

      LTR test

      1. Open the first action menu (Basic example)
        1. Check the last two items have a > chevron.
      2.  Put the mouse over the "Subpanel example" on the opened menu
        1. Check the subpanel has a poping effect when appears.
        2. Check the subpanel drops shadow
      3. Now click the second action menu (Menu left)
        1. Check the last two items have a > chevron.
      4. Click the third action menu (Menu item with icon)
        1. Check the last two items have a > chevron.
      5. Click the fourth action menu (Drawer like example)
        1. Check the last two items have a > chevron.
      6. Click "Subpanel example"  on the opened menu
        1. Check the subpanel has a poping effect when appears.
        2. Check the subpanel drops shadow

      Test reduced motion

      You can either test in reduced motion by:

      Option A: Emulating reduced motion

      1. Emulate the prefers-reduced-motion media in the browser. Each browser do it differently (and it is not easy to find):
        1. Chrome (extract form https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation ):
          1. Open the inspector (F12)
          2. Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu.
          3. Write "reduced" and select "Emulate CSS prefers-reduced-motion"
          4. Refresh the page.
        2. Firefox:
          1. Open a new tab and go the direction "about:config"
          2. In the search bar, type "ui.prefersReducedMotion"
          3. If the value is already created, set it to 1
          4. If the value is not created, create as a number and set it to 1
          5. Refresh the page

      Note: Most probably you want to restore the browser motion. Do do so:

      • Chrome:
        • Open the inspector (F12)
        • Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu.
        • Write "reduced" and select any option similar to "Disable Emulate CSS prefers-reduced-motion"
      • Firefox: 
        • Open a new tab and go the direction "about:config"
        • In the search bar, type "ui.prefersReducedMotion"
        • Remove the entry

      Option B: Turning off animation (Windows)

      1. If you can access your Moodle instance via Windows, you can go to Settings > Ease of Access > Display
      2. Turn off "Show animations in Windows"

      Testing in reduced motion

      1. Open the first action menu (basic example)
      2. Hover the "subpanel example" item to open the subpanel
        1. Check the subpanel opens with no pop effect

      Test RTL

      1. Change the language to any RTL language like Hebrew
      2. Open the first action menu (Basic example)
        1. Check the last two items have a < chevron.
      3. Now click the second action menu (Menu left). Note: the action menu width is not displayed correctly in RTL but is unrelated to this issue.
        1. Check the last two items have a < chevron.
      4. Click the third action menu (Menu item with icon)
        1. Check the last two items have a < chevron.
      5. Click the fourth action menu (Drawer like example)
        1. Check the last two items have a < chevron.
      Show
      To the testers: Please be aware that there were some bugs in the action menu for RLT languages that were not related to this patch. I will provide further details about these issues in the testing instructions. Tests setup Install an RTL language like Hebrew but keep the main language in english. Copy the attached MDL-78954-testpage.php to the root of your instance Log in to the instance and go to your LOCAL/ MDL-78954 -testpage.php to display the test page. LTR test Open the first action menu (Basic example) Check the last two items have a > chevron.  Put the mouse over the "Subpanel example" on the opened menu Check the subpanel has a poping effect when appears. Check the subpanel drops shadow Now click the second action menu (Menu left) Check the last two items have a > chevron. Click the third action menu (Menu item with icon) Check the last two items have a > chevron. Click the fourth action menu (Drawer like example) Check the last two items have a > chevron. Click "Subpanel example"  on the opened menu Check the subpanel has a poping effect when appears. Check the subpanel drops shadow Test reduced motion You can either test in reduced motion by: Option A: Emulating reduced motion Emulate the prefers-reduced-motion media in the browser. Each browser do it differently (and it is not easy to find): Chrome (extract form https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation ): Open the inspector (F12) Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu. Write "reduced" and select "Emulate CSS prefers-reduced-motion" Refresh the page. Firefox: Open a new tab and go the direction " about:config " In the search bar, type " ui.prefersReducedMotion " If the value is already created, set it to 1 If the value is not created, create as a number and set it to 1 Refresh the page Note: Most probably you want to restore the browser motion. Do do so: Chrome: Open the inspector (F12) Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu. Write "reduced" and select any option similar to "Disable Emulate CSS prefers-reduced-motion" Firefox:  Open a new tab and go the direction " about:config " In the search bar, type " ui.prefersReducedMotion " Remove the entry Option B: Turning off animation (Windows) If you can access your Moodle instance via Windows, you can go to Settings > Ease of Access > Display Turn off " Show animations in Windows " Testing in reduced motion Open the first action menu (basic example) Hover the "subpanel example" item to open the subpanel Check the subpanel opens with no pop effect Test RTL Change the language to any RTL language like Hebrew Open the first action menu (Basic example) Check the last two items have a < chevron. Now click the second action menu (Menu left). Note: the action menu width is not displayed correctly in RTL but is unrelated to this issue . Check the last two items have a < chevron. Click the third action menu (Menu item with icon) Check the last two items have a < chevron. Click the fourth action menu (Drawer like example) Check the last two items have a < chevron.
    • 3
    • HQ 2023 Sprint I3.1 Moppies

    Description

      In MDL-78290, a new action menu subpanel was introduced. The new component adds subpanels associated with action menu items displayed on hover, focus or click.

      After a UX review, the current visualizations of the subpanels should have some improvements to make them more consistent and noticeable.

      The complete list of the proposed improvements are:

      • The menu item shows a chevron pointing to the position where the sub panel will open. However, when the menu item has an icon, the item is displaced to the right and not correctly aligned. This is not correct. It is considered a UX standard that when a menu item has a subpanel, the chevron always points to the right (or left in RTL), no matter where the subpanel opens.
      • There is no effect when the subpanels open. and it is noticeable enough.  Showing a sub-panel should have some effect.
      • The panel is floating over the content, but it should have a shadow.

      Attachments

        Issue Links

          Activity

            People

              tusefomal Ferran Recio
              tusefomal Ferran Recio
              Mikel Martín Corrales Mikel Martín Corrales
              Jun Pataleta Jun Pataleta
              Kim Jared Lucas Kim Jared Lucas
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 days, 4 hours, 28 minutes
                  2d 4h 28m

                  Clockify

                    Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.