Private Messenger v3 styling and layout

[Claudius]

Availability of Private Messenger v3 was announced starting with Community 19.9. I am currently working to make it available in our community. Our skin is based on the Responsive skin and right now the main empty inbox screen looks like this:

Part of the feature release it would be very helpful for Khoros to share some screenshots (or ideally a working example implementation) of how the OOTB experience was designed to look like. I assume it's not what I see above as the three three dot menus have really poor usability.

Can we get screenshots / mocks or ideally a working implementation here on atlas please?

[Fellsteruk]

Soon to be in the same boat, just asked for it to be enabled in stage so i can force it into our responsive skin to make use of what seems to be a step forward but as i can see from your screenshot that looks kinda messy...

Said it before and i'll say it again bring back the power user group forum where we could play with an untouched environment will the latest features to see how they look and work as intended without... I wont hold my breath for what mine looks like maybe i'll show you mine as you've shown me yours 🙂 

[DanK]

@Claudius yours is a little better that what it looks like for me (see below). I couldn't agree more, we need a way to see what the OOTB experience is supposed to look like and function so we can customise to suit. Even a basic wireframe would be good.

What is our designer supposed to work from here?

[SuzieH]

Hi @Claudius and @DanK,

I just met with the Private Messages v3 engineering team this morning about the new and updated quilts with PM v3. I'll be adding the information into our Private Messages EA documentation later today so that we can distribute the content to our EA customers. The documentation will include images of each quilt with callouts identifying the components, as well as a guide to changes made to existing pages and forms.

[SuzieH · Accepted solution]

@Claudius @DanK 

These aren't the full details yet, but hopefully, this will get you started. Private Messages v3 uses these pages/quilts:

• Private Notes Page
• Private Notes Conversations
• Threaded Notes List Item

I haven't worked out whether we are exposing the new equivalent to the Notes Compose quilt that was used with PMv2.

The Private Notes Page default XML looks like this when you move to v3:

<quilt layout="one-column" nestable="false" disableTopCssClass="false">
  <add to="main-content">
    <component id="threads"/>
    <component id="messages"/>
  </add>
  <add to="common-header">
    <component id="quilt:Header"/>
    <component id="common.widget.core-node-icon" wrapper="lia-page-header"/>
    <component id="common.widget.page-title" wrapper="lia-page-header"/>
  </add>
  <remove from="sub-header-main" for="Header">
    <component id="common.widget.breadcrumb"/>
    <component id="community.widget.page-options"/>
    <component id="common.widget.search-form"/>
  </remove>
  <remove from="header-right" for="Header">
    <component id="common.widget.search-form-toggle"/>
  </remove>
</quilt>

• In 19.9, the engineers changed the layout to two-column.side-main, but have changed it back to one-column for 19.10.
• common-header no longer includes primary-post-button.
• main-content now includes the threads and messages components. Those components replace the tabs component used with v2.
• common.widget.breadcrumb and community.widget.page-options are now removed from sub-header-main for Header
• The Privates Notes Page uses infinite scroll with v3. We will be changing the default of the Number of Private Messages to display setting in Admin to 20. That is the new recommended minimum.

Private Notes Page

PrivateNotesPage.quilt.xml

The Private Notes Page displays private message thread topics in a users private message inbox and outbox on the left side and displays thread messages on the right side.

The threads component renders the thread list. The messages component renders the tread messages. The messages component uses the Private Note Conversations quilt to control the layout and display of the thread messages.

Private Note Conversations quilt

PrivateNoteConversations.quilt.xml

The Private Note Conversations quilt is used by the messages component on the Private Notes Page. The header component renders the thread topic author details. The comments component renders the private message subject, topic, and replies in the tread. Each thread item listed by the comments component uses the Threaded Notes List Item quilt to render the author, datetime, subject, body, and attachments in a thread reply.

Threaded Notes List Item quilt

ThreadedNotesListItem.quilt.xml

Individual thread items listed in comments component of the Private Note Conversations quilt (used by the threads component in the Private Notes Page) use the Threaded Notes List Item quilt to render out the details of thread replies.

[Claudius]

Perfect. This is exactly what was needed. Thanks to the whole team for pulling this together and contributing. 🤜🤛

[mhock]

The new UI is awesome and the content of the thread made me smile. That is
a song my family has sung for decades. Beats Lorem ipsum any day of the
week.

[SuzieH]

Follow up:

According to the Engineering team, we no longer use a page (like the Notes Compose page used with PM v2) for the modal that sends a private message, so it appears that there is no way to customize this unless you have access to the form XML, which I believe is only accessible by Khoros Services.

Likewise the Private Notes Page 'threads' does not use a quilt the way that the 'messages' component does. I'm guessing that any customization to hide details included in the 'threads' side of the page would have to be done using CSS. 

[i_am_ryan]

This is what ours looks like in staging. The message list and message box areas are very compact and it's an odd experience to get the mouse in there and scroll down to see more content.

Feels off to me.