Skip to content

Instantly share code, notes, and snippets.

@clizzin
Forked from reissbaker/grove-ui.js
Created April 12, 2012 04:30
Show Gist options
  • Save clizzin/2364590 to your computer and use it in GitHub Desktop.
Save clizzin/2364590 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.
  • 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.

/* 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;
}
// 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(); })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment