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.

Made by reissbaker, h4rry, clizzin, ssorallen, and spikebrehm.

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 */
/* @author: clizzin, reissbaker, and spikebrehm */

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

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

.message {
  overflow: auto;
}

.image {
  max-height: 600px !important;
}

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

grove-ui.js

/* Add this to the User Scripts of your Fluid App */
/* @author: reissbaker, h4rry, and ssorallen */

// Only show user name and avatar for first message in a group of messages
!function(window, document, $, App) {
  var updateUI = (function() {
    var initialized = false,
        USERPIC_SELECTOR = '.userpic img';

    // clean up the look of an individual message
    var cleanMessage = function($message) {
      $message.find(USERPIC_SELECTOR).css('visibility', 'hidden');
      $message.find('.user').css('visibility', 'hidden');
      $message.find('.separator').hide();
      $message.css('margin-top', '-5px');
    };

    // loop through all unseen messages, calling `cleanMessage` on ones that need to be cleaned.
    return function() {
      var index, $prevMessage, $pic, $prevPic, $message,
          $messages = $('.message-list li' + (!initialized ? '' : ':visible'));

      initialized = true;

      for(index = $messages.length - 1; index >= 0; index--) {
        $message = $($messages[index]);
        if($message.attr('data-seen')) break;
        $message.attr('data-seen', true);
        $prevMessage = $message.prev();

        if($prevMessage) {
          $pic = $message.find(USERPIC_SELECTOR);
          $prevPic = $prevMessage.find(USERPIC_SELECTOR);
          if($prevPic.attr('src') === $pic.attr('src')) cleanMessage($message);
        }
      }
    };
  }());

  $(window).load(function() {
    // shift+up and shift+down to move between channels

    var shiftChannel = function(delta) {
      var dir = (delta < 0) ? 'prev' : 'next';
      $('#channel-nav .selected')[dir]().find('a').click();
      updateUI();
      return false;
    };

    $(document).bind('keydown', function(e){
      var shifted = e.shiftKey;
      if (e.keyCode == 40 && shifted) return shiftChannel(1);
      if (e.keyCode == 38 && shifted) return shiftChannel(-1);
    });
    $('.main-wrapper').click(function(){ App.channelView.focusMessageForm(); })

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

You can stay outside the App global by clicking the room links and letting their code handle the routing. This gets you to the next room:

 $('#channel-nav .selected').next().find('a').click()

And this'll get you to the previous room:

$('#channel-nav .selected').prev().find('a').click()

var shiftChannel = function(delta) {
    var dir = (delta > 0) ? 'prev' : 'next';
    $('#channel-nav .selected')[dir]().find('a').click();
};

Nice. Merged in!

Nice stuff. Grove keeps getting better :)