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. active element.png
          653 kB
          Bas Brands
        2. active-item-dashboard.png
          30 kB
          Bas Brands
        3. active-page.png
          183 kB
          Bas Brands
        4. doubleline.png
          12 kB
          Luca Bösch
        5. Primary navigation styles_Test Passed1.png
          120 kB
          Gladys Basiana
        6. Primary navigation styles_Test Passed 2.avi
          967 kB
          Gladys Basiana
        7. Screenshot 2021-09-29 at 16.57.37.png
          11 kB
          Bas Brands
        8. secondary navigation.png
          582 kB
          Bas Brands
        9. Secondary navigation styles & Theme classic tests.png
          234 kB
          Gladys Basiana
        10. siteadmin.png
          180 kB
          Bas Brands
        11. submenu.png
          330 kB
          Bas Brands
        12. unique-ids.png
          1.23 MB
          Bas Brands

          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