Ticket #7731: 7731.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"></span><p>' . __( 'Loading messages. Please wait.', 'buddypress' ) . '</p></div>',
+                'howto' => '<div class="bp-feedback info"><span class="bp-icon"></span><p>' .
+                        __( 'Click on the message title to preview a message. Double click on the message title to open the full conversation.', 'buddypress' ) .
+                        __( 'Use ctrl+d or ctrl+u to toggle the message preview down or up in the list. Use ctrl+enter to open a selected conversation.', 'buddypress' ) .
+                        '</p></div>',
                 'bulk_actions' => bp_nouveau_messages_get_bulk_actions(),
+                'howtoBulk' => '<div class="bp-feedback info"><span class="bp-icon"></span><p>' . __( 'Use the select box to define your bulk action and click on the &#10003; button to apply.', 'buddypress' ) . '</p></div>',
         );
 
         // Star private messages.

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

@@ -365 +365 @@
                         } );
 
                         return bp.ajax.send( options );
+                },
+
+                /**
+                 * Get the "at" index for a model satisfying the requested attribute.
+                 *
+                 * @param  {object} attribute An object containing the attribute key and value.
+                 * @return {integer}          The "at" position into the collection.
+                 */
+                getAt: function( attribute ) {
+                        var key = _.first( _.keys( attribute ) ),
+                            at = -1;
+
+                        _.each( this.models, function( model, index ) {
+                                if ( attribute[ key ] === model.get( key ) ) {
+                                        at = index;
+                                }
+                        } );
+
+                        return at;
                 }
         } );
 
@@ -655 +674 @@
 
                         this.collection.on( 'reset', this.cleanContent, this );
                         this.collection.on( 'add', this.addThread, this );
+
+                        $( document ).on( 'keydown', _.bind( this.keyAction, this ) );
                 },
 
                 requestThreads: function() {
@@ -671 +692 @@
 
                 threadsFetched: function() {
                         bp.Nouveau.Messages.removeFeedback();
+
+                        bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howto, 'info' );
                 },
 
                 threadsFetchError: function( collection, response ) {
@@ -693 +716 @@
                         this.views.add( '#message-threads', new bp.Views.userThread( { model: thread } ) );
                 },
 
+                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 +738 @@
                         }
 
                         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 +759 @@
                         var id = target.data( 'thread-id' );
 
                         bp.Nouveau.Messages.router.navigate( 'view/' + id, { trigger: true } );
+                },
+
+                keyAction: function( event ) {
+                        if ( ! event.ctrlKey ) {
+                                return;
+                        }
+
+                        // Catch enter/arrow events
+                        if ( 13 !== event.keyCode && 68 !== event.keyCode && 85 !== event.keyCode ) {
+                                return;
+                        }
+
+                        var model;
+                        bp.Nouveau.Messages.removeFeedback();
+
+                        if ( 13 === event.keyCode ) {
+                                model = _.find( this.collection.models, function( model ) {
+                                        return true === model.get( 'active' );
+                                } );
+
+                                if ( ! model.get( 'id' ) ) {
+                                        return;
+                                }
+
+                                bp.Nouveau.Messages.router.navigate( 'view/' + model.get( 'id' ), { trigger: true } );
+                        } else {
+                                var active = this.collection.getAt( { active: true } ), unactivate = active;
+
+                                if ( 85 === event.keyCode ) {
+                                        active -= 1;
+                                } else {
+                                        active +=1;
+                                }
+
+                                if ( active >= 0 && active < this.collection.length && unactivate !== active ) {
+                                        model = this.collection.at( active );
+                                        this.setActiveThread( model.get( 'id' ) );
+                                }
+                        }
                 }
         } );
 
@@ -794 +863 @@
 
                         if ( hasChecked ) {
                                 $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).removeClass( 'bp-hide' );
+
+                                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 +998 @@
 
                         if ( isChecked ) {
                                 $( this.el ).find( '.bulk-actions-wrap' ).removeClass( 'bp-hide' ).addClass( 'bp-show' );
+
+                                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;