Ticket #7731: 7731.2.patch

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

@@ -3004 +3004 @@
         background-color: #fafafa;
 }
 
+#message-threads li.unread {
+        font-weight: bold;
+}
+
 #message-threads li.selected .thread-subject .subject {
         color: #5087e5;
 }

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

@@ -3004 +3004 @@
         background-color: #fafafa;
 }
 
+#message-threads li.unread {
+        font-weight: bold;
+}
+
 #message-threads li.selected .thread-subject .subject {
         color: #5087e5;
 }

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

@@ -99 +99 @@
                         'send' => wp_create_nonce( 'messages_send_message' ),
                 ),
                 'loading' => '<div class="bp-feedback info"><span class="bp-icon" aria-hidden="true"></span><p>' . __( 'Loading messages. Please wait.', 'buddypress' ) . '</p></div>',
+                'howto' => '<div class="bp-feedback info"><span class="bp-icon" aria-hidden="true"></span><p>' .
+                        __( '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' ) . ' ' .
+                        __( 'Alternatively you can navigate through the conversations list using the <code>tab</code> key of your keyboard and press the <code>enter</code> or <code>space</code> key to open the full active conversation.', 'buddypress' ) .
+                        '</p></div>',
+                        'howtoBulk' => '<div class="bp-feedback info"><span class="bp-icon" aria-hidden="true"></span><p>' . __( 'Use the select box to define your bulk action and click on the &#10003; button to apply.', 'buddypress' ) . '</p></div>',
                 'bulk_actions' => bp_nouveau_messages_get_bulk_actions(),
         );
 

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

@@ -639 +639 @@
                 tagName   : 'div',
 
                 events: {
-                        'click .thread-content'       : 'changePreview',
-                        'dblclick .thread-content'    : 'loadSingleView'
+                        'click .thread-content'    : 'changePreview',
+                        'dblclick .thread-content' : 'loadSingleView',
+                        'focus .thread-item'       : 'focusIn',
+                        'keydown .thread-item'     : 'keyDown'
                 },
 
                 initialize: function() {
@@ -671 +673 @@
 
                 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 ) {
@@ -693 +698 @@
                         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 );
 
@@ -701 +730 @@
                         }
 
                         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 ) {
@@ -729 +751 @@
                         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 ).hasClass( 'thread-item' ) && ! $( event.currentTarget ).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 } );
                 }
         } );
 
@@ -737 +793 @@
                 template  : bp.template( 'bp-messages-thread' ),
                 className : 'thread-item',
 
+                attributes: {
+                        'tabIndex': 0
+                },
+
                 events: {
                         'click .message-check' : 'singleSelect'
                 },
@@ -794 +854 @@
 
                         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();
                         }
                 },
 
@@ -925 +990 @@
 
                         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

@@ -133 +133 @@
                         }
                 }
 
+                // the unread parent li
+                &.unread {
+                        font-weight: bold;
+                }
+
                 .thread-content {
                         cursor: pointer;