Ticket #7731: 7731.04.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}}
+                                <span class="bp-screen-reader-text"><?php esc_html_e( 'Press Enter to view the full conversation.', 'buddypress' ); ?></span>
+                        </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

@@ -2962 +2962 @@
         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%;
@@ -2970 +2971 @@
         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%;
@@ -3000 +3011 @@
         background-color: #fafafa;
 }
 
+#message-threads li.unread {
+        font-weight: 700;
+}
+
 #message-threads li.selected .thread-subject .subject {
         color: #5087e5;
 }
@@ -3015 +3030 @@
 }
 
 #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

@@ -2962 +2962 @@
         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%;
@@ -2970 +2971 @@
         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%;
@@ -3000 +3011 @@
         background-color: #fafafa;
 }
 
+#message-threads li.unread {
+        font-weight: 700;
+}
+
 #message-threads li.selected .thread-subject .subject {
         color: #5087e5;
 }
@@ -3008 +3023 @@
         cursor: pointer;
 }
 
-#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

@@ -98 +98 @@
                 'nonces' => array(
                         'send' => wp_create_nonce( 'messages_send_message' ),
                 ),
-                'loading' => __( 'Loading messages. Please wait.', 'buddypress' ),
+                'loading'      => __( 'Loading messages. 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. Double click on the message title to open the full conversation.', '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 .thread-content'    : 'changePreview',
+                        'dblclick .thread-content' : 'loadSingleView',
+                        'focus .thread-item'       : 'focusIn',
+                        'keydown .subject'         : 'keyDown'
                 },
 
                 initialize: function() {
@@ -666 +668 @@
 
                 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 +693 @@
                         this.views.add( '#message-threads', new bp.Views.userThread( { model: thread } ) );
                 },
 
+                getActiveThread: function() {
+                        var activeThread = this.collection.findWhere( { active: true } );
+
+                        if ( ! activeThread.get( 'id' ) ) {
+                                return false;
+                        }
+
+                        return activeThread;
+                },
+
+                setActiveThread: function( active ) {
+                        if ( ! active ) {
+                                return;
+                        }
+
+                        _.each( this.collection.models, function( thread ) {
+                                if ( thread.id === active ) {
+                                        thread.set( 'active', true );
+                                } else {
+                                         thread.unset( 'active' );
+                                }
+                        }, this );
+                },
+
                 changePreview: function( event ) {
                         var target = $( event.currentTarget );
 
@@ -696 +725 @@
                         }
 
                         event.preventDefault();
+                        bp.Nouveau.Messages.removeFeedback();
 
                         if ( target.parent( 'li' ).hasClass( 'selected' ) ) {
                                 return;
                         }
 
-                        var selected = target.data( 'thread-id' );
-
-                        _.each( this.collection.models, function( thread ) {
-                                if ( thread.id === selected ) {
-                                        thread.set( 'active', true );
-                                } else {
-                                        thread.unset( 'active' );
-                                }
-                        }, this );
+                        this.setActiveThread( target.data( 'thread-id' ) );
                 },
 
                 loadSingleView: function( event ) {
@@ -724 +746 @@
                         var id = target.data( 'thread-id' );
 
                         bp.Nouveau.Messages.router.navigate( 'view/' + id, { trigger: true } );
+                },
+
+                focusIn: function( event ) {
+                        if ( ! $( event.currentTarget ).hasClass( 'thread-item' ) || $( event.currentTarget ).hasClass( 'selected' ) ) {
+                                return;
+                        }
+
+                        var threadId = $( event.currentTarget ).find( '.thread-content' ).first().data( 'thread-id' );
+
+                        if ( threadId ) {
+                                bp.Nouveau.Messages.removeFeedback();
+                                this.setActiveThread( threadId );
+                        }
+                },
+
+                keyDown: function( event ) {
+                        if ( ! $( event.currentTarget ).closest( '.thread-item' ).hasClass( 'selected' ) ) {
+                                return;
+                        }
+
+                        // Catch enter and space events
+                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+                                return;
+                        }
+
+                        event.preventDefault();
+
+                        var thread = this.getActiveThread();
+
+                        if ( ! _.isNumber( thread.get( 'id' ) ) ) {
+                                return;
+                        }
+
+                        bp.Nouveau.Messages.router.navigate( 'view/' + thread.get( 'id' ), { trigger: true } );
                 }
         } );
 
@@ -732 +788 @@
                 template  : bp.template( 'bp-messages-thread' ),
                 className : 'thread-item',
 
+                attributes: {
+                        'tabIndex': 0
+                },
+
                 events: {
                         'click .message-check' : 'singleSelect'
                 },
@@ -745 +805 @@
                                 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 +866 @@
 
                         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();
                         }
                 },
 
@@ -920 +1002 @@
 
                         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;
 
@@ -144 +157 @@
                         }
 
                         .thread-from,
+                        .thread-to,
                         .thread-subject {
 
                                 @include responsive-font(16);