Khoros Atlas Logo

Honored Contributor
Honored Contributor

Private Messenger v3 styling and layout

Jump to solution

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:

Screenshot 2019-11-07 at 14.24.53.png

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?

If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.
7 Replies 7
Honored Contributor Honored Contributor
Honored Contributor

Re: Private Messenger v3 styling and layout

Jump to solution

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 πŸ™‚ 

Stephen

Checkout some of the stuff i've built using the platform:

Community l Ideation l Blog l Product Hubs l Check & Report l Service Status 



My latest Ideas: Vanity URL Manager l @mention Roles l  LSW Password Policy


Reply
Loading...
Honored Contributor Honored Contributor
Honored Contributor

Re: Private Messenger v3 styling and layout

Jump to solution

@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?

DanK_0-1573432340113.png

0 Kudos
Reply
Loading...
Khoros Staff SuzieH
Khoros Staff

Re: Private Messenger v3 styling and layout

Jump to solution

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.

Reply
Loading...
Khoros Staff SuzieH
Khoros Staff

Re: Private Messenger v3 styling and layout

Jump to 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.

privateNotesPageV3annotated.png

 

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.

privateNoteConversationsV3annotated.png

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.

threadedNotesListItemV3annotated.png

Reply
Loading...
Highlighted
Honored Contributor
Honored Contributor

Re: Private Messenger v3 styling and layout

Jump to solution

Perfect. This is exactly what was needed. Thanks to the whole team for pulling this together and contributing. πŸ€œπŸ€›

If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.
Reply
Loading...
Frequent Advisor
Frequent Advisor

Re: Private Messenger v3 styling and layout

Jump to solution
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.
Reply
Loading...
Khoros Staff SuzieH
Khoros Staff

Re: Private Messenger v3 styling and layout

Jump to solution

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. 

0 Kudos
Reply
Loading...