Ticket #7731: 7731.05.patch

src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

@@ -122 +122 @@
 <script type="text/html" id="tmpl-bp-messages-thread">
         <div class="thread-cb">
                 <input class="message-check" type="checkbox" name="message_ids[]" id="bp-message-thread-{{data.id}}" value="{{data.id}}">
-                <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select this message', 'buddypress' ); ?></label>
-        </div>
-        <div class="thread-from">
-                <a class="user-link" href="{{data.sender_link}}">
-                        <img class="avatar" src="{{data.sender_avatar}}" alt="" />
-                        <span class="user-name">{{data.sender_name}}</span>
-                </a>
+                <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select message:', 'buddypress' ); ?> {{data.subject}}</label>
         </div>
+
+        <# if ( ! data.recipientsCount ) { #>
+                <div class="thread-from">
+                        <a class="user-link" href="{{data.sender_link}}">
+                                <img class="avatar" src="{{data.sender_avatar}}" alt="" />
+                                <span class="bp-screen-reader-text"><?php esc_html_e( 'From:', 'buddypress' ); ?></span>
+                                <span class="user-name">{{data.sender_name}}</span>
+                        </a>
+                </div>
+        <# } else {
+                var recipient = _.first( data.recipients );
+                #>
+                <div class="thread-to">
+                        <a class="user-link" href="{{recipient.user_link}}">
+                                <img class="avatar" src="{{recipient.avatar}}" alt="" />
+                                <span class="bp-screen-reader-text"><?php esc_html_e( 'To:', 'buddypress' ); ?></span>
+                                <span class="user-name">{{recipient.user_name}}</span>
+                        </a>
+
+                        <# if ( data.toOthers ) { #>
+                                <span class="num-recipients">{{data.toOthers}}</span>
+                        <# } #>
+                </div>
+        <# } #>
+
         <div class="thread-content" data-thread-id="{{data.id}}">
                 <div class="thread-subject">
                         <span class="thread-count">({{data.count}})</span>
-                        <span class="subject"><# print( data.subject ); #></span>
+                        <a class="subject" href="#view/{{data.id}}">{{data.subject}}</a>
                 </div>
-                <p class="excerpt"><# print( data.excerpt ); #></p>
+                <p class="excerpt">{{data.excerpt}}</p>
         </div>
         <div class="thread-date">
                 <time datetime="{{data.date.toISOString()}}">{{data.display_date}}</time>

src/bp-templates/bp-nouveau/css/buddypress-rtl.css

@@ -2963 +2963 @@
         flex: 1 2 5%;
 }
 
-#message-threads li .thread-from {
+#message-threads li .thread-from,
+#message-threads li .thread-to {
         -webkit-flex: 1 2 20%;
         -moz-flex: 1 2 20%;
         -ms-flex: 1 2 20%;
@@ -2971 +2972 @@
         flex: 1 2 20%;
 }
 
-#message-threads li .thread-from img.avatar {
+#message-threads li .thread-from img.avatar,
+#message-threads li .thread-to img.avatar {
         float: right;
         margin: 0 0 0 10px;
 }
 
-#message-threads li .thread-from .user-name {
+#message-threads li .thread-from .user-name,
+#message-threads li .thread-to .user-name {
         display: inline-block;
         line-height: 1.1;
 }
 
+#message-threads li .thread-from .num-recipients,
+#message-threads li .thread-to .num-recipients {
+        color: #737373;
+        font-weight: 400;
+        font-size: 12px;
+        margin: 0;
+}
+
 #message-threads li .thread-content {
         -webkit-flex: 1 2 60%;
         -moz-flex: 1 2 60%;
@@ -3001 +3012 @@
         background-color: #fafafa;
 }
 
-#message-threads li.selected .thread-subject .subject {
-        color: #5087e5;
+#message-threads li.unread {
+        font-weight: 700;
 }
 
-#message-threads li .thread-content {
-        cursor: pointer;
+#message-threads li.selected .thread-subject .subject {
+        color: #5087e5;
 }
 
 #message-threads li .thread-content .excerpt {
@@ -3016 +3027 @@
 }
 
 #message-threads li .thread-content .thread-from,
+#message-threads li .thread-content .thread-to,
 #message-threads li .thread-content .thread-subject {
         font-size: 13px;
 }
 
 @media screen and (min-width: 46.8em) {
         #message-threads li .thread-content .thread-from,
+        #message-threads li .thread-content .thread-to,
         #message-threads li .thread-content .thread-subject {
                 font-size: 16px;
         }

src/bp-templates/bp-nouveau/css/buddypress.css

@@ -2963 +2963 @@
         flex: 1 2 5%;
 }
 
-#message-threads li .thread-from {
+#message-threads li .thread-from,
+#message-threads li .thread-to {
         -webkit-flex: 1 2 20%;
         -moz-flex: 1 2 20%;
         -ms-flex: 1 2 20%;
@@ -2971 +2972 @@
         flex: 1 2 20%;
 }
 
-#message-threads li .thread-from img.avatar {
+#message-threads li .thread-from img.avatar,
+#message-threads li .thread-to img.avatar {
         float: left;
         margin: 0 10px 0 0;
 }
 
-#message-threads li .thread-from .user-name {
+#message-threads li .thread-from .user-name,
+#message-threads li .thread-to .user-name {
         display: inline-block;
         line-height: 1.1;
 }
 
+#message-threads li .thread-from .num-recipients,
+#message-threads li .thread-to .num-recipients {
+        color: #737373;
+        font-weight: 400;
+        font-size: 12px;
+        margin: 0;
+}
+
 #message-threads li .thread-content {
         -webkit-flex: 1 2 60%;
         -moz-flex: 1 2 60%;
@@ -3001 +3012 @@
         background-color: #fafafa;
 }
 
-#message-threads li.selected .thread-subject .subject {
-        color: #5087e5;
+#message-threads li.unread {
+        font-weight: 700;
 }
 
-#message-threads li .thread-content {
-        cursor: pointer;
+#message-threads li.selected .thread-subject .subject {
+        color: #5087e5;
 }
 
-#message-threads li .thread-content .excerpt {
+#message-threads li .thread-content .excerpt,
+#message-threads li .thread-content .num-recipients {
         color: #737373;
         font-size: 12px;
         margin: 0;
 }
 
 #message-threads li .thread-content .thread-from,
+#message-threads li .thread-content .thread-to,
 #message-threads li .thread-content .thread-subject {
         font-size: 13px;
 }
 
 @media screen and (min-width: 46.8em) {
         #message-threads li .thread-content .thread-from,
+        #message-threads li .thread-content .thread-to,
         #message-threads li .thread-content .thread-subject {
                 font-size: 16px;
         }

src/bp-templates/bp-nouveau/includes/messages/functions.php

@@ -107 +107 @@
                         'unstar' => __( 'Unstarring message(s). Please wait.', 'buddypress' ),
                 ),
                 'bulk_actions'  => bp_nouveau_messages_get_bulk_actions(),
+                'howto'         => __( 'Click on the message title to preview it in the Active conversation box below.', 'buddypress' ),
+                'howtoBulk'     => __( 'Use the select box to define your bulk action and click on the ✓ button to apply.', 'buddypress' ),
+                'toOthers'      => array(
+                        'one'  => __( '(and 1 other)', 'buddypress' ),
+                        'more' => __( '(and %d others)', 'buddypress' ),
+                ),
         );
 
         // Star private messages.

src/bp-templates/bp-nouveau/js/buddypress-messages.js

@@ -634 +634 @@
                 tagName   : 'div',
 
                 events: {
-                        'click .thread-content'       : 'changePreview',
-                        'dblclick .thread-content'    : 'loadSingleView'
+                        'click .subject' : 'changePreview',
                 },
 
                 initialize: function() {
@@ -666 +665 @@
 
                 threadsFetched: function() {
                         bp.Nouveau.Messages.removeFeedback();
+
+                        // Inform the user about how to use the UI.
+                        bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howto, 'info' );
                 },
 
                 threadsFetchError: function( collection, response ) {
@@ -688 +690 @@
                         this.views.add( '#message-threads', new bp.Views.userThread( { model: thread } ) );
                 },
 
-                changePreview: function( event ) {
-                        var target = $( event.currentTarget );
-
-                        if ( ! target.hasClass( 'thread-content' ) || $( event.target ).hasClass( 'user-link' ) ) {
-                                return event;
-                        }
-
-                        event.preventDefault();
-
-                        if ( target.parent( 'li' ).hasClass( 'selected' ) ) {
+                setActiveThread: function( active ) {
+                        if ( ! active ) {
                                 return;
                         }
 
-                        var selected = target.data( 'thread-id' );
-
                         _.each( this.collection.models, function( thread ) {
-                                if ( thread.id === selected ) {
+                                if ( thread.id === active ) {
                                         thread.set( 'active', true );
                                 } else {
                                         thread.unset( 'active' );
@@ -712 +704 @@
                         }, this );
                 },
 
-                loadSingleView: function( event ) {
+                changePreview: function( event ) {
                         var target = $( event.currentTarget );
 
-                        if ( ! target.hasClass( 'thread-content' ) || $( event.target ).hasClass( 'user-link' ) ) {
-                                return event;
+                        event.preventDefault();
+                        bp.Nouveau.Messages.removeFeedback();
+
+                        // If the click is done on an active conversation, open it.
+                        if ( $( event.currentTarget ).closest( '.thread-item' ).hasClass( 'selected' ) ) {
+                                this.loadSingleView( event );
+
+                        // Otherwise activate the conversation and display its preview.
+                        } else {
+                                this.setActiveThread( target.closest( '.thread-content' ).data( 'thread-id' ) );
+
+                                $( '.message-action-view' ).focus();
                         }
+                },
 
+                loadSingleView: function( event ) {
                         event.preventDefault();
 
-                        var id = target.data( 'thread-id' );
-
-                        bp.Nouveau.Messages.router.navigate( 'view/' + id, { trigger: true } );
+                        bp.Nouveau.Messages.router.navigate(
+                                'view/' + $( event.currentTarget ).closest( '.thread-content' ).data( 'thread-id' ),
+                                { trigger: true }
+                        );
                 }
         } );
 
@@ -745 +750 @@
                                 this.el.className += ' unread';
                         }
 
+                        if ( 'sentbox' === bp.Nouveau.Messages.box ) {
+                                var recipientsCount = this.model.get( 'recipients' ).length, toOthers = '';
+
+                                if ( 2 === recipientsCount ) {
+                                        toOthers = BP_Nouveau.messages.toOthers.one;
+                                } else if ( 2 < recipientsCount ) {
+                                        toOthers = BP_Nouveau.messages.toOthers.more.replace( '%d', Number( recipientsCount - 1 ) );
+                                }
+
+                                this.model.set( {
+                                        recipientsCount: recipientsCount,
+                                        toOthers: toOthers
+                                }, { silent: true } )
+                        } else if ( this.model.get( 'recipientsCount' )  ) {
+                                this.model.unset( 'recipientsCount', { silent: true } );
+                        }
+
                         this.model.on( 'change:active', this.toggleClass, this );
                         this.model.on( 'change:unread', this.updateReadState, this );
                         this.model.on( 'change:checked', this.bulkSelect, this );
@@ -789 +811 @@
 
                         if ( hasChecked ) {
                                 $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).removeClass( 'bp-hide' );
+
+                                // Inform the user about how to use the bulk actions.
+                                bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howtoBulk, 'info' );
                         } else {
                                 $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).addClass( 'bp-hide' );
+
+                                bp.Nouveau.Messages.removeFeedback();
                         }
                 },
 
@@ -931 +958 @@
 
                         if ( isChecked ) {
                                 $( this.el ).find( '.bulk-actions-wrap' ).removeClass( 'bp-hide' ).addClass( 'bp-show' );
+
+                                // Inform the user about how to use the bulk actions.
+                                bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howtoBulk, 'info' );
                         } else {
                                 $( this.el ).find( '.bulk-actions-wrap' ).addClass( 'bp-hide' );
+
+                                bp.Nouveau.Messages.removeFeedback();
                         }
 
                         _.each( this.collection.models, function( model ) {

src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

@@ -96 +96 @@
                         @include box-item-size(1, 2, 5%);
                 }
 
-                .thread-from {
+                .thread-from,
+                .thread-to {
 
                         @include box-item-size(1, 2, 20%);
 
@@ -109 +110 @@
                                 display: inline-block;
                                 line-height: 1.1;
                         }
+
+                        .num-recipients {
+                                color: $meta-text;
+                                font-weight: 400;
+                                @include font-size(12);
+                                margin: 0;
+                        }
                 }
 
                 .thread-content {
@@ -133 +141 @@
                         }
                 }
 
+                // the unread parent li
+                &.unread {
+                        font-weight: 700;
+                }
+
                 .thread-content {
-                        cursor: pointer;
 
                         .excerpt {
                                 color: $meta-text;
@@ -144 +156 @@
                         }
 
                         .thread-from,
+                        .thread-to,
                         .thread-subject {
 
                                 @include responsive-font(16);