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

Theme Selector: Improve UI

XMLWordPrintable

    • MOODLE_404_STABLE
    • MDL-78425-master
    • Hide

      Automated testing

      Covered in new Behat test admin/tests/behat/theme_selector.feature

      Manual testing (modal)

      1. Log in as Admin
      2. Go to Site Admin -> Appearance -> Theme selector
      3. CONFIRM you see two cards for Boost and Classic themes
      4. Assuming Boost is your default, CONFIRM you see 'Current theme' on the Boost card.
      5. Click on the info icon on the Boost card.
      6. CONFIRM that the modal loads
      7. CONFIRM that the modal contains the screenshot enlarged, description and 'current theme' text.
      8. Close the modal window.
      9. Click on the info icon on the Classic card.
      10. Click the 'Select theme' button
      11. CONFIRM that the page is reloaded with Classic as your selected theme.
      12. CONFIRM that Classic is now in the first position in the list of themes (current theme will always be shown first).
      13. Click on the info icon for each card while in Classic theme and CONFIRM that the behaviour is the same as when Boost was the theme.
      14. With all modal windows closed, this time click the 'Select theme' button on the Boost card.
      15. CONFIRM that the page is reloaded with Boost as your selected theme.
      16. CONFIRM that Boost is now in the first position in the list of themes.
      Show
      Automated testing Covered in new Behat test admin/tests/behat/theme_selector.feature Manual testing (modal) Log in as Admin Go to S ite Admin -> Appearance -> Theme selector CONFIRM you see two cards for Boost and Classic themes Assuming Boost is your default, CONFIRM you see 'Current theme' on the Boost card. Click on the info icon on the Boost card. CONFIRM that the modal loads CONFIRM that the modal contains the screenshot enlarged, description and 'current theme' text. Close the modal window. Click on the info icon on the Classic card. Click the 'Select theme' button CONFIRM that the page is reloaded with Classic as your selected theme. CONFIRM that Classic is now in the first position in the list of themes (current theme will always be shown first). Click on the info icon for each card while in Classic theme and CONFIRM that the behaviour is the same as when Boost was the theme. With all modal windows closed, this time click the 'Select theme' button on the Boost card. CONFIRM that the page is reloaded with Boost as your selected theme. CONFIRM that Boost is now in the first position in the list of themes.
    • 6
    • Team Hedgehog 2023 Sprint 3.2, Team Hedgehog 2023 Sprint 3.3, Team Hedgehog 2023 Review 3, Team Hedgehog 2023 Sprint 4.1
    • Medium

      In MDL-77793 good work was done to both remove the legacy theme selector and improve the UX by reducing the number of clicks for an admin to change the site theme.

      In this tracker we want to improve the UX and UI of selecting a site theme.

      The current table layout is outdated, a modern layout using the "card format" that we use for course info etc. will improve the UI layout and will also allow future improvements like easier access to theme settings and surfacing where are themes are used in other contexts (such as user and course contexts).

      This tracker is limited to implementing the "card view" for site theme selection

      Notes:

      • The current theme selector table based layout is full with responsive. This will need to be changed to a fixed width layout for the card view
      • Clicking the "magnifying glass" icon on the theme card should show a modal that contains:
        • a larger theme image: this is fixed sized and aspect ratio (based on the modal, e.g. mobile, desktop). We may need to update developer docs to let theme devs know what the min size and aspect ratio for the theme preview image needs to be.
        • An indicator if this is the current theme or not
        • The theme description. This should be plain text with no HTML formatting. Again we may need to update the developer docs
      • For this task we are NOT implementing the "settings" button on the card, but this will be implemented in MDL-78426
      • Clicking the "select theme" button should:
        • Select the theme
        • cause the cache purge and page reload with the new theme
        • Update the "select theme" button to "current theme"
      • Theme cards should be ordered by selected site theme first them in alphabetical order of theme name

        1. (1) 12 Passed -- (Master)MDL-78425.png
          (1) 12 Passed -- (Master)MDL-78425.png
          73 kB
        2. (1) 13 Passed -- (Master)MDL-78425.png
          (1) 13 Passed -- (Master)MDL-78425.png
          203 kB
        3. (1) 16 Passed -- (Master)MDL-78425.png
          (1) 16 Passed -- (Master)MDL-78425.png
          64 kB
        4. (1) 4 Passed -- (Master)MDL-78425.png
          (1) 4 Passed -- (Master)MDL-78425.png
          57 kB
        5. (1) 7 Passed -- (Master)MDL-78425.png
          (1) 7 Passed -- (Master)MDL-78425.png
          174 kB
        6. aligned-icon.png
          aligned-icon.png
          91 kB
        7. cards-comparison.png
          cards-comparison.png
          187 kB
        8. misaligned-icon.png
          misaligned-icon.png
          122 kB
        9. modal-comparison.png
          modal-comparison.png
          418 kB
        10. modals-with-choosereadme.mp4
          1.03 MB
        11. Screen 1.png
          Screen 1.png
          251 kB
        12. Screen 2.png
          Screen 2.png
          218 kB
        13. strip-html.png
          strip-html.png
          107 kB

            david.woloszyn@moodle.com David Woloszyn
            matt.porritt@moodle.com Matt Porritt
            Safat Shahin Safat Shahin
            Jun Pataleta Jun Pataleta
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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