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

Apply styling to both Primary & Secondary menus

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull Master Branch:
      MDL-72091-rebase-3
    • Testing Instructions:
      Hide

      Behat passes

      Please perform these test on the major supported browsers; Chrome, Safari, Firefox, Edge

      Primary navigation styles

      1. Login as admin
      2. Click on the dashboard, mycourses, Site administration links on the primary navigation
      3. Verify you see the hover styles for each menu item and a blue underline and bold text on the active menu item

      The result should be similar to:

      1. Use the tab key to navigate through all items in the top navbar
      2. All items should show a clearly visible focus outline
      3. Verify that the users name does not appear within the navbar on Boost

      Secondary navigation styles

      1. Navigate to a course
      2. Verify the secondary navigation is visible and styled like the screenshot below
      3. Verify you see the hover styles for each menu item and a blue underline and bold text on the active menu item.
      4. Select a link in the "More" dropdown
      5. Verify the more dropdown shows as the active item
      6. Click the more dropdown again
      7. Verify the current active menu item is clearly visible

      Theme classic tests

      1. Navigate to /admin/search.php
      2. Verify you see the admin tabs with a "More" dropdown with the same styling as used in theme Boost
      3. Verify you see the current user name in the top navbar
      Show
      Behat passes Please perform these test on the major supported browsers; Chrome, Safari, Firefox, Edge Primary navigation styles Login as admin Click on the dashboard, mycourses, Site administration links on the primary navigation Verify you see the hover styles for each menu item and a blue underline and bold text on the active menu item The result should be similar to: Use the tab key to navigate through all items in the top navbar All items should show a clearly visible focus outline Verify that the users name does not appear within the navbar on Boost Secondary navigation styles Navigate to a course Verify the secondary navigation is visible and styled like the screenshot below Verify you see the hover styles for each menu item and a blue underline and bold text on the active menu item. Select a link in the "More" dropdown Verify the more dropdown shows as the active item Click the more dropdown again Verify the current active menu item is clearly visible Theme classic tests Navigate to /admin/search.php Verify you see the admin tabs with a "More" dropdown with the same styling as used in theme Boost Verify you see the current user name in the top navbar
    • Story Points:
      1
    • Sprint:
      Navigation push 4, Navigation push 5, Navigation push 6

      Description

      Given we try to integrate only the plain functionality within the initial navigation epic, we need to ensure that the new navigations match the supplied figma designs i.e. Underline styling for tab groups, padding etc.

      It is suggested that we need to grep for other tab groups to ensure consistency amongst UI elements.

      Requirements taken from MDL-72087:

      1. Remove the users name
      2. Remove the separating line after the notifications & messages icons
      3. Change the icons to use the non filled variants
      4. Append a dropdown arrow next to the users image to indicate the existence of a menu

        Attachments

        1. unique-ids.png
          unique-ids.png
          1.23 MB
        2. submenu.png
          submenu.png
          330 kB
        3. siteadmin.png
          siteadmin.png
          180 kB
        4. Secondary navigation styles & Theme classic tests.png
          Secondary navigation styles & Theme classic tests.png
          234 kB
        5. secondary navigation.png
          secondary navigation.png
          582 kB
        6. Screenshot 2021-09-29 at 16.57.37.png
          Screenshot 2021-09-29 at 16.57.37.png
          11 kB
        7. Primary navigation styles_Test Passed 2.avi
          967 kB
        8. Primary navigation styles_Test Passed1.png
          Primary navigation styles_Test Passed1.png
          120 kB
        9. doubleline.png
          doubleline.png
          12 kB
        10. active-page.png
          active-page.png
          183 kB
        11. active-item-dashboard.png
          active-item-dashboard.png
          30 kB
        12. active element.png
          active element.png
          653 kB

          Issue Links

            Activity

              People

              Assignee:
              mathewmay Mathew May
              Reporter:
              mathewmay Mathew May
              Peer reviewer:
              Bas Brands Bas Brands
              Integrator:
              Ilya Tregubov Ilya Tregubov
              Tester:
              Gladys Basiana Gladys Basiana
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              0 Vote for this issue
              Watchers:
              12 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 1 day, 2 hours, 30 minutes
                  1w 1d 2h 30m