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

Developing a User Menu

XMLWordPrintable

    • MOODLE_28_STABLE
    • MOODLE_28_STABLE
    • MDL-45893-master-v3
    • Hide

      Please examine the accesibility of this in a screenreader as well as standard browsers.

      #1: Basic functionality
      On Base and Clean, using both a LTR language (e.g. English) and a RTL language (e.g. Hebrew):

      • Go to the root of your Moodle site, without being logged in.
        • Observe that there is a message telling you that you are not logged in, along with a login link, in the top right (or top left, for RTL).
      • Login as an administrator.
        • Observe that there is now a user dropdown in place of the login link in the top right (or top left, for RTL).
      • Go through each option in the user dropdown, ensuring that the links go where they should and that no anomalies are encountered while using it.
      • Add a custom menu with multiple levels (the default one is fine.)
      • Enable displayloginfailures.
      • Create a course and display it.
      • Use the Administration block to switch roles to something else.
        • Observe that the user dropdown now tells you that you're viewing as the role you picked.
        • Observe that the user dropdown now contains a new option next to the log out option, for switching back to your original role.
      • Use the dropdown to switch back to your original role.
      • Enrol some users in the course you just created.
      • Go to the course participants page, and view the profile of one of the participants. Use the "login as" link in the Administration block.
        • Observe that the user dropdown now visually reflects that you're logged in as yourself, logged in asthe user you selected.
      • Add or upgrade a plugin and start the DB upgrade process.
        • Observe that the user dropdown is not visible during this process.
      • Login as a guest.
        • Observe that the user dropdown now contains a single item, for logging in.
      • Log out, and intentionally mis-authenticate as one of your users a few times. Finally log in as that user.
        • Observe that the user dropdown now tells you about the failed login attempts.
      • Clean only
        • Go to the theme settings for Clean and invert the colors of the navbar. Repeat the entirety of this test (#1).
      • Testing pages with $PAGE->layout_options['nologinlinks'] enabled
        • On Base:
          • Enable quiz | browsersecurity, using a Full screen popup with some JavaScript security during quiz attempts.
          • Create a quiz with one question.
          • Login as a student and take the quiz.
            • Observe that the user dropdown no longer opens during the quiz, but still displays relevant data to you.
        • On Clean:
          • Edit theme/bootstrapbase/config.php and on line 92, add 'nologinlinks' => true to the options array for mydashboard.
          • Go to your dashboard (click the user dropdown, select 'my home').
            • Observe that the user dropdown is now disabled on that screen.

      #2: Responsive testing
      -On Clean, using both a LTR language and a RTL:
      Resize the screen to less than 980px wide.
      Observe that the user menu and the custom menu (if present) have now compressed into two hamburger-ish buttons.
      Test out both menus and verify that no anomalies occur.
      Go to the theme settings for Clean and invert the colors of the navbar. Repeat the entirety of this test (#2).

      #3: MNet

      • Use MNet to link your site with another site.
        On Base and Clean:
      • Login to your site as a user from the linked site.
      • Verify that the user dropdown now tells you that you're a user from that linked site.

      #4: Statistics
      On Clean:
      Set up statistics on your server and run the associated cron job such that statistics are available for viewing.
      View statistics about your site.
      Observe that the page has inserted a menu into the navbar.

      Show
      Please examine the accesibility of this in a screenreader as well as standard browsers. #1: Basic functionality On Base and Clean , using both a LTR language (e.g. English) and a RTL language (e.g. Hebrew): Go to the root of your Moodle site, without being logged in. Observe that there is a message telling you that you are not logged in, along with a login link, in the top right (or top left, for RTL). Login as an administrator. Observe that there is now a user dropdown in place of the login link in the top right (or top left, for RTL). Go through each option in the user dropdown, ensuring that the links go where they should and that no anomalies are encountered while using it. Add a custom menu with multiple levels (the default one is fine.) Enable displayloginfailures . Create a course and display it. Use the Administration block to switch roles to something else. Observe that the user dropdown now tells you that you're viewing as the role you picked. Observe that the user dropdown now contains a new option next to the log out option, for switching back to your original role. Use the dropdown to switch back to your original role. Enrol some users in the course you just created. Go to the course participants page, and view the profile of one of the participants. Use the "login as" link in the Administration block. Observe that the user dropdown now visually reflects that you're logged in as yourself, logged in asthe user you selected. Add or upgrade a plugin and start the DB upgrade process. Observe that the user dropdown is not visible during this process. Login as a guest. Observe that the user dropdown now contains a single item, for logging in. Log out, and intentionally mis-authenticate as one of your users a few times. Finally log in as that user. Observe that the user dropdown now tells you about the failed login attempts. Clean only Go to the theme settings for Clean and invert the colors of the navbar. Repeat the entirety of this test (#1). Testing pages with $PAGE->layout_options ['nologinlinks'] enabled On Base : Enable quiz | browsersecurity , using a Full screen popup with some JavaScript security during quiz attempts. Create a quiz with one question. Login as a student and take the quiz. Observe that the user dropdown no longer opens during the quiz, but still displays relevant data to you. On Clean : Edit theme/bootstrapbase/config.php and on line 92, add 'nologinlinks' => true to the options array for mydashboard. Go to your dashboard (click the user dropdown, select 'my home'). Observe that the user dropdown is now disabled on that screen. #2: Responsive testing -On Clean , using both a LTR language and a RTL: Resize the screen to less than 980px wide. Observe that the user menu and the custom menu (if present) have now compressed into two hamburger-ish buttons. Test out both menus and verify that no anomalies occur. Go to the theme settings for Clean and invert the colors of the navbar. Repeat the entirety of this test (#2). #3: MNet Use MNet to link your site with another site. On Base and Clean : Login to your site as a user from the linked site. Verify that the user dropdown now tells you that you're a user from that linked site. #4: Statistics On Clean : Set up statistics on your server and run the associated cron job such that statistics are available for viewing. View statistics about your site. Observe that the page has inserted a menu into the navbar.
    • 100
    • FRONTEND Sprint 14

      Adding a User Menu, in the bootstrapbase themes; refer to the specification to know what it should contain, and how to implement it.

      The general approach here is to refactor the existing navbar's capabilities, allowing it to support multiple dropdowns without adversely affecting existing DOM structure (which would necessitate every theme re-targeting its styles).

      Update 10/06/2014: The user menu is being rendered fine, but the current solution doesn't quite encapsulate everything that'll need to happen with the navbar; in particular, page_heading_menu() stuff isn't handled by this solution as it doesn't really make sense for that stuff to live in a dropdown.

      Update 24/06/2014: Okay, this turned out to be huge.

      • The new user_menu renderable is an extension of the custom_menu renderable, constructed with references to a user, a course, a page and an array of flags (at present, the only thing that makes sense to set a priori is guest, a boolean flag).
        • Basing the new renderable on the custom_menu allows for it to be easily displayed in Base-based themes as well.
        • A minor bug in custom_menu's YUI3 dropdown code was fixed: in brief, the logic was looking for a dropdown attribute on the node that was clicked (e.target) instead of the node that the event was actually wired to (e.currentTarget).
      • custom_menu renderables have been extended by way of MDL-46022 and have also gained the ability to assign CSS suffix flags to {{custom_menu_item}}s - which is necessary for us to avoid having to hardcode icons into the renderer PHP.
      • In order to support multiple collapsible menus, it was necessary to create an entire bootstrap_navbar renderable which renders the body > header element and renders out a collection of menus. Bootstrap javascript has been patched to allow for multiple navbar items.
      • Responsive styles have been provided.

        1. fullsize_asrole.png
          94 kB
          Jetha Chan
        2. fullsize_asuser.png
          95 kB
          Jetha Chan
        3. fullsize_closed.png
          84 kB
          Jetha Chan
        4. fullsize_open.png
          102 kB
          Jetha Chan
        5. responsive979_closed.png
          78 kB
          Jetha Chan
        6. responsive979_open.png
          68 kB
          Jetha Chan
        7. responsive979custommenu_open.png
          62 kB
          Jetha Chan
        8. usermenu.png
          24 kB
          Dan Poltawski

            jethac Jetha Chan
            fred Frédéric Massart
            Damyon Wiese Damyon Wiese
            Dan Poltawski Dan Poltawski
            Frédéric Massart Frédéric Massart
            Votes:
            4 Vote for this issue
            Watchers:
            15 Start watching this issue

              Created:
              Updated:
              Resolved:

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