Skip to content

Instantly share code, notes, and snippets.

@reissbaker
Forked from clizzin/README.md
Created April 12, 2012 05:27
Show Gist options
  • Save reissbaker/2364763 to your computer and use it in GitHub Desktop.
Save reissbaker/2364763 to your computer and use it in GitHub Desktop.
Grove UI improvements

Make the Grove web client look like this

Sweet UI

  • 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.

/* 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;
}
/* 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)
@ssorallen
Copy link

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

@reissbaker
Copy link
Author

Nice. Merged in!

@mieky
Copy link

mieky commented Apr 16, 2012

Nice stuff. Grove keeps getting better :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment