Grove UI improvements

README.md

Make the Grove web client look like this

• Only show the user name and avatar for the first message in a group of messages by that user.
• Indent the messages so they all start at the same spot.
• Use Shift-Up and Shift-Down to switch between channels.
• Focus the message input field whenever you click anywhere in the window.
• Eliminate the annoying image flash between when it's inserted and when it's resized.

Props to reissbaker and h4rry for the foundations of this gist.

This is an Airbnb nerds production. If you like this, check out other sweet JS work.

grove-ui.css

/* Add this to the User Styles of your Fluid App */

.content {
  float: left;
  width: 80%;
}

.user {
  float: left;
  width: 100px;
}

.message {
  overflow: auto;
}

/* This bit looks janky if your window is too narrow. :( */
.attachments {
  margin-left: 94px;
}

.attachments .image {
  max-height: 200px;
  max-width: 200px;
}

grove-ui.js

// Add this to the User Scripts of your Fluid App

// Only show user name and avatar for first message in a group of messages
// Thanks to reissbaker for the first iteration of this functionality.

window.onload = function(e) {
  !function($, App) {
    var initialized = false;
    var updateUI = function() {
      var $pic, $picLI, index, $prevLI, $prevPic, 
          $picSeparator, $picContent,
          $pics = $('.userpic img' + (!initialized ? '' : ':visible')),
          SPACING = '3px';

      initialized = true;

      for(index = $pics.length - 1; index >= 0; index--) {
        $pic = $($pics[index]);
        $picLI = $pic.closest('li');
        if($picLI.attr('data-seen')) break;

        $picLI.attr('data-seen', true);
        $prevLI = $picLI.prev();

        if($prevLI) {
          $prevPic = $prevLI.find('.userpic img');
          $picSeparator = $picLI.find('.separator');
          if($prevPic.attr('src') === $pic.attr('src')) {
            $pic.css('visibility', 'hidden');
            $picLI.find('.user').css('visibility', 'hidden');
            $picSeparator.hide();
            $picLI.css('margin-top', '-5px');
          }
        }
      }
    };

    App.on('newMessage', updateUI);
    App.on('newPrivateMessage', updateUI);
    App.on('routeClicked', updateUI);
    updateUI();
  }(jQuery, App)
}

// shift+up and shift+down to move between channels
// Thanks to h4rry for this bit.

$(document).bind('keydown', function(e){
  var shifted = e.shiftKey;

  if (e.keyCode == 40 && shifted) {
       var length = App.channels.length - 1,
           curIndex = App.channels.indexOf(currentChannel),
           nextIndex = curIndex + 1;
       if (nextIndex > length) nextIndex = 0;
       App.router.routePath(App.channels.at(nextIndex).get('app_url'))
       return false;
    }

  if (e.keyCode == 38 && shifted) {
       var length = App.channels.length - 1,
           curIndex = App.channels.indexOf(currentChannel),
           nextIndex = curIndex - 1;
       if (nextIndex < 0) nextIndex = length;
       App.router.routePath(App.channels.at(nextIndex).get('app_url'))
       return false;
  }
});

$('.main-wrapper').click(function(){ App.channelView.focusMessageForm(); })