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

Multiple small fixes to messaging appearance

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.6
    • Fix Version/s: 3.6
    • Component/s: Messages
    • Labels:
    • Testing Instructions:
      Hide

      Please test these UI changes on:

      1. Clean and Boost themes
      2. Supported browsers
      3. LTR and RTL display

      For these tests you will need to have a set where the messaging system has been used:

      • have at least 20 test users
      • have one primary test user that has send a received a number of messages
      • have a messaging group with messages and a group image
      • have a number of starred conversations

      Test user names Bold

      1. Navigate to a conversation, either group or messages
      2. Verify the user names are in bold

      Space between speech bubbles

      1. In a conversation verify the distance between speech bubbles is at least 16px

      Smaller participants text

      1. Open a group conversation an look at the header
      2. Verify the line showing the number of participants is muted (grayed out) and smaller than the course name shown above

      Hover over effects & section headers

      1. Hover over the group conversation header
      2. Verify text is not underlined on hover
      3. Hover over the sections “Starred”, “Group messages” and “Messages” in the main window
      4. Verify the section headers show no underline on hover
      5. Verify the background shade is a bit darker on hover for section header.
      6. Verify the section header text is in bold

      Group image location

      1. Look at the group image in a group conversation in the overview page and the conversation page
      2. Verify the image aligns to the top of its container

      Deleting messages

      1. Open a conversation
      2. Click some of the messages
      3. Verify the delete icon in the message drawer footer is located on the right side.
      4. Verify the icons used to check messages match the design in MDL-64106

      Show name of sender in group conversation

      1. Open 2 browser windows (one private session)
      2. Log in as 2 different users members of the same group conversation
      3. In both windows open the conversation
      4. Write something in the conversation
      5. Wait for both windows to show to last message
      6. Navigate back to the overview pages
      7. Verify the correct name is shown in the group messaging preview (You or the other user name)

      Borders

      1. Open views Messages, Groups, Starred, Contacts
      2. Verify there are borders between messages and contacts.
      3. Do a search
      4. Verify there are borders between found search results

      Badge shape

      1. Send another user a message
      2. Log in as the other user
      3. Open the drawer and verify the unread count badge has a square shape in boost and a rounder square in clean

      Long sender names

      1. Change the name of a user to something very long.
      2. Send a message
      3. Verify the message box shows the user name truncated

      Move timestamp

      1. On the overview page verify the timestamps are located in the top right of its container

      Scroll bars on collapse

      1. Ensure your OS shows scrollbars at all time
      2. In the overview page click the group messaging section
      3. Verify there is no visible scrollbar when opening this section.
      Show
      Please test these UI changes on: Clean and Boost themes Supported browsers LTR and RTL display For these tests you will need to have a set where the messaging system has been used: have at least 20 test users have one primary test user that has send a received a number of messages have a messaging group with messages and a group image have a number of starred conversations Test user names Bold Navigate to a conversation, either group or messages Verify the user names are in bold Space between speech bubbles In a conversation verify the distance between speech bubbles is at least 16px Smaller participants text Open a group conversation an look at the header Verify the line showing the number of participants is muted (grayed out) and smaller than the course name shown above Hover over effects & section headers Hover over the group conversation header Verify text is not underlined on hover Hover over the sections “Starred”, “Group messages” and “Messages” in the main window Verify the section headers show no underline on hover Verify the background shade is a bit darker on hover for section header. Verify the section header text is in bold Group image location Look at the group image in a group conversation in the overview page and the conversation page Verify the image aligns to the top of its container Deleting messages Open a conversation Click some of the messages Verify the delete icon in the message drawer footer is located on the right side. Verify the icons used to check messages match the design in MDL-64106 Show name of sender in group conversation Open 2 browser windows (one private session) Log in as 2 different users members of the same group conversation In both windows open the conversation Write something in the conversation Wait for both windows to show to last message Navigate back to the overview pages Verify the correct name is shown in the group messaging preview (You or the other user name) Borders Open views Messages, Groups, Starred, Contacts Verify there are borders between messages and contacts. Do a search Verify there are borders between found search results Badge shape Send another user a message Log in as the other user Open the drawer and verify the unread count badge has a square shape in boost and a rounder square in clean Long sender names Change the name of a user to something very long. Send a message Verify the message box shows the user name truncated Move timestamp On the overview page verify the timestamps are located in the top right of its container Scroll bars on collapse Ensure your OS shows scrollbars at all time In the overview page click the group messaging section Verify there is no visible scrollbar when opening this section.
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull Master Branch:
      MDL-64099-master

      Description

      For visual hierarchy, make the user name heavier than the message

      And many other small tweaks (see following comments).

        Attachments

        1. 1.PNG
          179 kB
          Janelle Barcega
        2. 2.PNG
          89 kB
          Janelle Barcega
        3. 3.PNG
          160 kB
          Janelle Barcega
        4. 4.PNG
          131 kB
          Janelle Barcega
        5. 5.PNG
          231 kB
          Janelle Barcega
        6. 6.PNG
          146 kB
          Janelle Barcega
        7. 7.PNG
          160 kB
          Janelle Barcega
        8. 8.PNG
          96 kB
          Janelle Barcega
        9. 9.PNG
          96 kB
          Janelle Barcega
        10. boost_right_left_border.png
          51 kB
          Sara Arjona (@sarjona)
        11. IE_CleanTheme.png
          115 kB
          Janelle Barcega
        12. image-2018-11-28-13-56-07-641.png
          119 kB
          Janelle Barcega
        13. last-message-individual.png
          20 kB
          Jun Pataleta
        14. msging_problems.png
          27 kB
          Jake Dallimore
        15. rectangle_badges.png
          170 kB
          Sara Arjona (@sarjona)
        16. screenshot-1.png
          4 kB
          Jun Pataleta
        17. screenshot-2.png
          20 kB
          Jun Pataleta
        18. screenshot-3.png
          24 kB
          Janelle Barcega
        19. screenshot-4.png
          47 kB
          Janelle Barcega
        20. screenshot-5.png
          89 kB
          Janelle Barcega
        21. screenshot-6.png
          190 kB
          Janelle Barcega
        22. screenshot-7.png
          43 kB
          Janelle Barcega
        23. Screenshot from 2018-11-26 13-25-02.png
          22 kB
          Jun Pataleta
        24. speech bubbles.png
          181 kB
          Barbara Ramiro

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  3/Dec/18