diff --git src/bp-templates/bp-nouveau/css/buddypress-rtl.css src/bp-templates/bp-nouveau/css/buddypress-rtl.css index 8ca16031f..9dbfd6c1f 100644 --- src/bp-templates/bp-nouveau/css/buddypress-rtl.css +++ src/bp-templates/bp-nouveau/css/buddypress-rtl.css @@ -3004,6 +3004,10 @@ body.register .buddypress-wrap .page ul { background-color: #fafafa; } +#message-threads li.unread { + font-weight: bold; +} + #message-threads li.selected .thread-subject .subject { color: #5087e5; } diff --git src/bp-templates/bp-nouveau/css/buddypress.css src/bp-templates/bp-nouveau/css/buddypress.css index 937c37a67..5c8c814bc 100644 --- src/bp-templates/bp-nouveau/css/buddypress.css +++ src/bp-templates/bp-nouveau/css/buddypress.css @@ -3004,6 +3004,10 @@ body.register .buddypress-wrap .page ul { background-color: #fafafa; } +#message-threads li.unread { + font-weight: bold; +} + #message-threads li.selected .thread-subject .subject { color: #5087e5; } diff --git src/bp-templates/bp-nouveau/includes/messages/functions.php src/bp-templates/bp-nouveau/includes/messages/functions.php index 693e5e51e..2f22ec7b4 100644 --- src/bp-templates/bp-nouveau/includes/messages/functions.php +++ src/bp-templates/bp-nouveau/includes/messages/functions.php @@ -99,6 +99,11 @@ function bp_nouveau_messages_localize_scripts( $params = array() ) { 'send' => wp_create_nonce( 'messages_send_message' ), ), 'loading' => '

' . __( 'Loading messages. Please wait.', 'buddypress' ) . '

', + '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' ) . ' ' . + __( 'Alternatively you can navigate through the conversations list using the tab key of your keyboard and press the enter or space key to open the full active conversation.', 'buddypress' ) . + '

', + 'howtoBulk' => '

' . __( 'Use the select box to define your bulk action and click on the ✓ button to apply.', 'buddypress' ) . '

', 'bulk_actions' => bp_nouveau_messages_get_bulk_actions(), ); diff --git src/bp-templates/bp-nouveau/js/buddypress-messages.js src/bp-templates/bp-nouveau/js/buddypress-messages.js index e706a69f7..c1ddaba16 100644 --- src/bp-templates/bp-nouveau/js/buddypress-messages.js +++ src/bp-templates/bp-nouveau/js/buddypress-messages.js @@ -639,8 +639,10 @@ window.bp = window.bp || {}; 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,6 +673,9 @@ window.bp = window.bp || {}; 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,6 +698,30 @@ window.bp = window.bp || {}; 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,20 +730,13 @@ window.bp = window.bp || {}; } 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,6 +751,40 @@ window.bp = window.bp || {}; 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,6 +793,10 @@ window.bp = window.bp || {}; template : bp.template( 'bp-messages-thread' ), className : 'thread-item', + attributes: { + 'tabIndex': 0 + }, + events: { 'click .message-check' : 'singleSelect' }, @@ -794,8 +854,13 @@ window.bp = window.bp || {}; 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,8 +990,13 @@ window.bp = window.bp || {}; 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 ) { diff --git src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss index 89747071c..5b8330c20 100644 --- src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss +++ src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss @@ -133,6 +133,11 @@ } } + // the unread parent li + &.unread { + font-weight: bold; + } + .thread-content { cursor: pointer;