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

Improve styling of summary modal

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.4
    • Fix Version/s: 3.4
    • Component/s: Calendar
    • Labels:
    • Testing Instructions:
      Hide

      Note

      Please check the appearance of the summary modal on both the Clean and Boost themes.

      General testing to confirm for each event type

      1. Each section of the summary body should be marked with an icon as follows:
        • Clock icon for the event time
        • Calendar icon for the event type (“User event”, “Site event” etc)
        • Paragraph align left icon for the event description
        • Category event icon (matching the EVENTS KEY block) for the category
        • Course event icon (matching the EVENTS KEY block) for the course
        • Group event icon (matching the EVENTS KEY block) for the group name
        • Rss subscription icon for the event source a subscription event
        • Edit and Delete should be buttons (not icons)
      2. The footer should be hidden when it has no content. The only event type that will have footer content any more is the activity events which still contain a link back to the activity.
      3. Boost only The modal header should be the colour of the event type (matching the colours defined in the EVENTS KEY block on the side). For activity events, the color will be the same assigned to course event.

      Setup

      NOTE: Instead of creating all the events manually, it's recommended to use data-generation tool such as https://github.com/andrewnicols/moodle-datagenerator . It'll avoid you to create some of the events.

      1. Log in as admin
      2. Create a course
      3. Enrol a user as a teacher in the course (t1)
      4. Create a group in the course (g1)
      5. Create an assignment activity in the course (make sure it has a due date)
      6. Create a quiz activity in the course and make sure it has a quiz open date

      Site event

      1. Log in as admin
      2. Navigate to the calendar
      3. Click “new event” and change the type of event to “Site”
      4. Fill out the form and save the event
      5. Click the newly created event on the calendar to open the summary modal
      6. CONFIRM that the modal appears as described in the “general testing” above
        • Note: If you are viewing the summary as an admin user you will see the delete and edit icons. All other users won’t see those icons.

      Category event

      1. Log in as admin
      2. Navigate to the calendar
      3. Click “new event” and change the type of event to “Category”
      4. Fill out the form and save the event
      5. Click the newly created event on the calendar to open the summary modal
      6. CONFIRM that the modal appears as described in the “general testing” above
        • Note: If you are viewing the summary as an admin user you will see the delete and edit icons. All other users won’t see those icons.
        • You should see a link to the category in the summary body

      User event

      1. Log in as admin
      2. Navigate to the calendar
      3. Click “new event” and change the type of event to “User” (this is the default)
      4. Fill out the form (you can add a description if you like) and save the event
      5. Click the newly created event on the calendar to open the summary modal
      6. CONFIRM that the modal appears as described in the “general testing” above
        • Note: You will only see this event if you are the owner of it which means you should always see both the delete and edit buttons

      Activity event

      1. Log in as t1
      2. Navigate to the calendar
      3. Click on the assignment due date event
      4. CONFIRM that the modal appears as described in the “general testing” above
        • Note: This summary modal will have a footer with a link that says “Go to activity”. 
      5. Click on the quiz open event
      6. CONFIRM that the modal appears as described in the “general testing” above
        • Note: This summary modal will have a footer with a link that says “Go to activity”.

      Course event

      1. Log in as t1
      2. Navigate to the calendar
      3. Click “new event” and change the type of event to “Course”
      4. Fill out the form (you can add a description if you like) and save the event
      5. Click the newly created event on the calendar to open the summary modal
      6. CONFIRM that the modal appears as described in the “general testing” above
        • Note: If you are viewing the summary as a teacher (t1) user you will see the delete and edit icons. All other users won’t see those icons.
        • You should see a link to the course in the summary body

      Group event

      1. Log in as t1
      2. Navigate to the calendar
      3. Click “new event” and change the type of event to “Group”
      4. Fill out the form (you can add a description if you like) and save the event
      5. Click the newly created event on the calendar to open the summary modal
      6. CONFIRM that the modal appears as described in the “general testing” above
        • Note: If you are viewing the summary as a teacher (t1) user you will see the delete and edit icons. All other users won’t see those icons.
        • You should see a link to the course in the summary body
        • You should the group name in the summary body

      Subscription event

      1. Log in as t1
      2. Navigate to the calendar
      3. Click “Manage subscriptions”
      4. In the import calendar section add a calendar
        • You can get a calendar URL from google calendar:
          1. Go to google calendar
          2. In the “other calendars” section on the left hover over a calendar (such as the Moodle development calendar) and open the little context menu (three vertical dots)
          3. Select “settings”
          4. Scroll down to the “Integrate calendar” section and copy the “Public address in iCal format” URL
        • Set the type of event to “User events”
        • Click “add”
      5. After the importing has completed (it should import some non zero amount of events) navigate back to the calendar
      6. Click on one of the imported events (they are created as “User events” so will have the same colour)
      7. CONFIRM that the modal appears as described in the “general testing” above
        • You should see the “event source” in the summary body

      RTL Test

      1. Log in as admin
      2. Install an RTL language (such as Arabic)
        • Site administration > Language > Language packs
      3. Navigate to the calendar
      4. Change the language to the RTL language (drop down in nav bar)
      5. Click on an event
      6. CONFIRM the modal looks correct with an RTL language
        • The summary body content should flip with the icons on the right instead

      Modal title text

      Calendar

      1. Click on one of the calendar events to bring up the event summary modal
      2. CONFIRM that the focus outline now appears around the whole header rather than inside the content

      Other

      1. Log in as admin
      1. View the profile of another user
      1. Click the message button
      1. Send the user a message
      1. Click edit up the top right of the message area
      1. Click delete all up the top left
      1. CONFIRM that the confirmation modal opens and the focus outline appears to be around the whole header

       

      Show
      Note Please check the appearance of the summary modal on both the Clean and Boost themes. General testing to confirm for each event type Each section of the summary body should be marked with an icon as follows: Clock icon for the event time Calendar icon for the event type (“User event”, “Site event” etc) Paragraph align left icon for the event description Category event icon (matching the EVENTS KEY block) for the category Course event icon (matching the EVENTS KEY block) for the course Group event icon (matching the EVENTS KEY block) for the group name Rss subscription icon for the event source a subscription event Edit and Delete should be buttons (not icons) The footer should be hidden when it has no content. The only event type that will have footer content any more is the activity events which still contain a link back to the activity. Boost only The modal header should be the colour of the event type (matching the colours defined in the EVENTS KEY block on the side). For activity events, the color will be the same assigned to course event. Setup NOTE: Instead of creating all the events manually, it's recommended to use data-generation tool such as https://github.com/andrewnicols/moodle-datagenerator . It'll avoid you to create some of the events. Log in as admin Create a course Enrol a user as a teacher in the course (t1) Create a group in the course (g1) Create an assignment activity in the course (make sure it has a due date) Create a quiz activity in the course and make sure it has a quiz open date Site event Log in as admin Navigate to the calendar Click “new event” and change the type of event to “Site” Fill out the form and save the event Click the newly created event on the calendar to open the summary modal CONFIRM that the modal appears as described in the “general testing” above Note: If you are viewing the summary as an admin user you will see the delete and edit icons. All other users won’t see those icons. Category event Log in as admin Navigate to the calendar Click “new event” and change the type of event to “Category” Fill out the form and save the event Click the newly created event on the calendar to open the summary modal CONFIRM that the modal appears as described in the “general testing” above Note: If you are viewing the summary as an admin user you will see the delete and edit icons. All other users won’t see those icons. You should see a link to the category in the summary body User event Log in as admin Navigate to the calendar Click “new event” and change the type of event to “User” (this is the default) Fill out the form (you can add a description if you like) and save the event Click the newly created event on the calendar to open the summary modal CONFIRM that the modal appears as described in the “general testing” above Note: You will only see this event if you are the owner of it which means you should always see both the delete and edit buttons Activity event Log in as t1 Navigate to the calendar Click on the assignment due date event CONFIRM that the modal appears as described in the “general testing” above Note: This summary modal will have a footer with a link that says “Go to activity”.  Click on the quiz open event CONFIRM that the modal appears as described in the “general testing” above Note: This summary modal will have a footer with a link that says “Go to activity”. Course event Log in as t1 Navigate to the calendar Click “new event” and change the type of event to “Course” Fill out the form (you can add a description if you like) and save the event Click the newly created event on the calendar to open the summary modal CONFIRM that the modal appears as described in the “general testing” above Note: If you are viewing the summary as a teacher (t1) user you will see the delete and edit icons. All other users won’t see those icons. You should see a link to the course in the summary body Group event Log in as t1 Navigate to the calendar Click “new event” and change the type of event to “Group” Fill out the form (you can add a description if you like) and save the event Click the newly created event on the calendar to open the summary modal CONFIRM that the modal appears as described in the “general testing” above Note: If you are viewing the summary as a teacher (t1) user you will see the delete and edit icons. All other users won’t see those icons. You should see a link to the course in the summary body You should the group name in the summary body Subscription event Log in as t1 Navigate to the calendar Click “Manage subscriptions” In the import calendar section add a calendar You can get a calendar URL from google calendar: Go to google calendar In the “other calendars” section on the left hover over a calendar (such as the Moodle development calendar) and open the little context menu (three vertical dots) Select “settings” Scroll down to the “Integrate calendar” section and copy the “Public address in iCal format” URL Set the type of event to “User events” Click “add” After the importing has completed (it should import some non zero amount of events) navigate back to the calendar Click on one of the imported events (they are created as “User events” so will have the same colour) CONFIRM that the modal appears as described in the “general testing” above You should see the “event source” in the summary body RTL Test Log in as admin Install an RTL language (such as Arabic) Site administration > Language > Language packs Navigate to the calendar Change the language to the RTL language (drop down in nav bar) Click on an event CONFIRM the modal looks correct with an RTL language The summary body content should flip with the icons on the right instead Modal title text Calendar Click on one of the calendar events to bring up the event summary modal CONFIRM  that the focus outline now appears around the whole header rather than inside the content Other Log in as admin View the profile of another user Click the  message  button Send the user a message Click  edit  up the top right of the message area Click  delete all  up the top left CONFIRM  that the confirmation modal opens and the focus outline appears to be around the whole header  
    • Affected Branches:
      MOODLE_34_STABLE
    • Fixed Branches:
      MOODLE_34_STABLE
    • Pull Master Branch:
      MDL-59936-master

      Description

      Improve the styling for displaying the summary info in the modal when you click on an event in the calendar view.

      Probably need to speak to Barbs and/or Al for help.

        Attachments

        1. 59936_after_buttonless.png
          59936_after_buttonless.png
          2.35 MB
        2. 59936_after_buttonless.png
          59936_after_buttonless.png
          2.35 MB
        3. focus_after.png
          focus_after.png
          41 kB
        4. focus_before.png
          focus_before.png
          41 kB
        5. new_boost.png
          new_boost.png
          447 kB
        6. new_clean.png
          new_clean.png
          489 kB
        7. old_boost.png
          old_boost.png
          1.40 MB
        8. old_clean.png
          old_clean.png
          1.45 MB

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                8 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  13/Nov/17