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

Add sticky footer to the mod_data pages

    XMLWordPrintable

Details

    • MOODLE_401_STABLE
    • MOODLE_401_STABLE
    • MDL-75401-master-integration
    • Hide

      Test 01: sticky footer layout

      1. Create a topics format course with enough activities to have scroll in the course index drawer. If you use mdk you can run: mdk run createcourse.php
      2. Add enough blocks to the course to have scroll in the blocks drawer
      3. Create a database activity in the course and go to the "presets" template tab.
      4. Wait until the sticky footer appears.
      5. Open the course index drawer
        1. Check that the last activity of the course is visible when you scroll down to the bottom of the course index drawer.
      6. Open the blocks drawer
        1. Check the last block is fully visible when you scroll down to the bottom of the blocks drawer.
      7. Open the messaging drawer
        1. Check the messaging drawer appears on top of the sticky footer.

      Test 02: mod_data sticky footer

      1. Create a database activity and do "save and display"
      2. Click on the "Use a preset" button
        1. Check the page has a sticky footer with the "Use preset button" dimmed.
      3. Select the radio button from "Journal" preset
        1. Check the "Use preset" button is enabled now
      4. Click on "Use preset" button
      5. Navigate to "Presets" tab. 
      6. Select the radio button from "Image gallery" preset
      7. Click on the "Use preset" button
        1. Check the "Fields mapping" form has the "Cancel" and "Continue" buttons in the sticky footer.
      8. Click on the "Cancel" button
        1. Check you are again on the presets page
      9. Click the "Image gallery" preset name
        1. Check the preset preview has the "Use preset" button in the sticky footer
      10. Click on the "Use preset button" and accept the default mappings
      11. Go to the "Database" tab and go to add entry
        1. Check you have the cancel, save and "Save and add another" buttons in the sticky footer.
      12. Add some image to the image field and click on the "Save and add another"
        1. Check you go again to the New entry form
      13. Repeat the same 5 times to get some entries.
      14. Upload another image in the New entry form and click on "Save" this time
        1. Check you are now on "Single view"
        2. Check the pagination and the "add entry" button is in the sticky footer
      15. Go to "List view"
        1. Check you have at least the select all, delete and add entry button in the sticky footer
      16. Change the "Entries per page" to 2 and click on Save settings
        1. Check that now you have also the pagination in the sticky footer
      17. Go to the Fields tab
        1. Check you have a "View templates" link in the sticky footer
      18. Click on the edit icon from the title field
        1. Check the Save and cancel buttons are in the sticky footer
      19. Change the filed name to title2 and click the save button
        1. Check you are now in the fields list page again and the title field is now title2
      20. Click on the sticky footer's "View templates" link
        1. Check you are now in the templates tab 
        2. Check you have the "reset" and "save" buttons in the sticky footer
      Show
      Test 01: sticky footer layout Create a topics format course with enough activities to have scroll in the course index drawer. If you use mdk you can run: mdk run createcourse.php Add enough blocks to the course to have scroll in the blocks drawer Create a database activity in the course and go to the "presets" template tab. Wait until the sticky footer appears. Open the course index drawer Check that the last activity of the course is visible when you scroll down to the bottom of the course index drawer. Open the blocks drawer Check the last block is fully visible when you scroll down to the bottom of the blocks drawer. Open the messaging drawer Check the messaging drawer appears on top of the sticky footer. Test 02: mod_data sticky footer Create a database activity and do "save and display" Click on the "Use a preset" button Check the page has a sticky footer with the "Use preset button" dimmed. Select the radio button from "Journal" preset Check the "Use preset" button is enabled now Click on "Use preset" button Navigate to "Presets" tab.  Select the radio button from "Image gallery" preset Click on the "Use preset" button Check the "Fields mapping" form has the "Cancel" and "Continue" buttons in the sticky footer. Click on the "Cancel" button Check you are again on the presets page Click the "Image gallery" preset name Check the preset preview has the "Use preset" button in the sticky footer Click on the "Use preset button" and accept the default mappings Go to the "Database" tab and go to add entry Check you have the cancel, save and "Save and add another" buttons in the sticky footer. Add some image to the image field and click on the "Save and add another" Check you go again to the New entry form Repeat the same 5 times to get some entries. Upload another image in the New entry form and click on "Save" this time Check you are now on "Single view" Check the pagination and the "add entry" button is in the sticky footer Go to "List view" Check you have at least the select all, delete and add entry button in the sticky footer Change the "Entries per page" to 2 and click on Save settings Check that now you have also the pagination in the sticky footer Go to the Fields tab Check you have a "View templates" link in the sticky footer Click on the edit icon from the title field Check the Save and cancel buttons are in the sticky footer Change the filed name to title2 and click the save button Check you are now in the fields list page again and the title field is now title2 Click on the sticky footer's "View templates" link Check you are now in the templates tab  Check you have the "reset" and "save" buttons in the sticky footer
    • 3
    • HQ Sprint 0.3 Database

    Description

      As a teacher
      I want to have a sticky footer always present in the database activity
      so I have a quick access to the main page options

      As designed by UX, the database activity will be the first plugin in moodle to implement the new sticky footer concept. However, the implementation will be used in other future developments.

      The technical specs and the starting code of that issue can be found in MDL-75134.

      This issue is part of the Moodle 4.1 database module project. All the related code to this issue that does not follow the current coding style or presents maintenance problems will be refactored. In this case, the refactored areas are focused on 3 main areas:

      • View entries
      • Templates
      • Presets
      • Fields

      The latest the database activity UX prototype has as new visual element called "sticky footer" that contains the main actions (paginations, action buttons...) of the current page.

       

      In the current version, the pages where sticky footer is present are:

      • Database tab:
        • The list view has the select all/delete buttons, the pagination, and the add entry button
        • The single view has the pagination and the add entry button
        • The add entry form has a save/cancel buttons (the "Save and add another" button is not present in the prototype but for now it will be kept in the sticky footer because the main goal of the issue is to move the current functionalities, not to reimplement them)
      • Templates
        • The template editor has the "reset template", "Save template" buttons, and the "use editor" checkbox
      • Presets
        • The main preset page has the "Use this preset" button
        • The preset preview page has a "use this preset" button
        • The field mapping form has cancel and continue buttons
      • Fields
        • The main fields list page has a "View Templates" link
        • The create field form has the save and cancel buttons

       

      Attachments

        1. MDL-75401_test 1.webm
          844 kB
        2. MDL-75401_test 2.webm
          7.39 MB
        3. MDL-75401_use preset.webm
          1.02 MB
        4. MDL-75401_view template.png
          MDL-75401_view template.png
          48 kB

        Issue Links

          Activity

            People

              tusefomal Ferran Recio
              tusefomal Ferran Recio
              Carlos Escobedo Carlos Escobedo
              Amaia Anabitarte Amaia Anabitarte
              Angelia Dela Cruz Angelia Dela Cruz
              Amaia Anabitarte, Carlos Escobedo, Laurent David, Sabina Abellan, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              9 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                28/Nov/22

                Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 3 days, 6 hours, 55 minutes
                  1w 3d 6h 55m