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

Multiple small fixes to messaging appearance

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.6
    • 3.6
    • Messages
    • MOODLE_36_STABLE
    • MOODLE_36_STABLE
    • MDL-64099-master
    • 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.

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

      And many other small tweaks (see following comments).

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

            ryanwyllie Ryan Wyllie
            barbararamiro Barbara Ramiro
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Jun Pataleta Jun Pataleta
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

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