Hello Stalski,

Since your module is going to be a central piece of a project that I'm working on, I've been looking deeper into it, and had a few findings, questions and ideas.

#1. In shouts.module, in theme_shoutform_message(), there's an option to "clear" the shout. The span doesn't have a class, so one needs to use template.php to alter the function. The span is pushed right up against the message, so this seems to almost be a requirement for any kind of decent looking presentation.
My suggestion is to replace:

$clear = '<span>'.l(t('Clear'), 'shout/clear', $options).'</span>';

with:

$clear = '<span class="shout_clear">'.l(t('Clear'), 'shout/clear', $options).'</span>';

#2. I personally find it helpful to have the "time ago" right next to the latest shout. That way if people stumble on the person's profile, and find under the latest shout that "Andrey is making popcorn", they won't want to come over to my place if it was posted 10 days ago and popcorn is already stale if it's even still there.
So my next suggestion is to add the time ago right before the $clear in theme_shoutform_message().

Attached is a patch against the Jan.25 dev that implements #1 and #2.

#3. I was wondering why the hb_activity uses UNIX Timestamp and shouts uses the MySQL date format?

#4. I plan to use the shouts module here as it's used on Facebook, and I'm using form_alter to add the username before the box and add a default_value of "is" into the empty shoutbox. I'm quite happy doing it my way, but I think some might find it useful to have an option to automatically do this. I'll attach a screenshot, so you get an idea of what I mean.

CommentFileSizeAuthor
#10 shouts-patch-2009-03-21.txt1.06 KBmr.andrey
#7 shouts-2009-02-09.txt1.97 KBmr.andrey
#4 shouts-2008-02-02.txt4.73 KBmr.andrey
#3 shouts-facebook.jpg165.5 KBmr.andrey
#3 shouts-2008-02-01.txt4.28 KBmr.andrey
#2 heartbeat-patch-2009-01-28-3.txt3.11 KBmr.andrey
#1 heartbeat-patch-2009-01-28-2.txt3.1 KBmr.andrey
heartbeat-shoutbox-a-la-facebook.jpg157.22 KBmr.andrey
heartbeat-patch-2009-01-28.txt2.51 KBmr.andrey

Comments

mr.andrey’s picture

mr.andrey commented
Status: Active » Needs review
StatusFileSize
new heartbeat-patch-2009-01-28-2.txt3.1 KB

Here is an updated patch that takes into account the AHAH, and replaces "0 sec ago" with "a moment ago" for times ago < 60 secs.

mr.andrey’s picture

mr.andrey commented
StatusFileSize
new heartbeat-patch-2009-01-28-3.txt3.11 KB

Oops, forgot to t() the "a moment" string. Updated patch here.

mr.andrey’s picture

mr.andrey commented
Title: Shouts features, patch for time ago » Shouts features, patch for time ago, incorrect time format, other
StatusFileSize
new shouts-2008-02-01.txt4.28 KB
new shouts-facebook.jpg165.5 KB

Attached is an updated patch to shouts.module for the above features plus addressing the following issues:
#365800: Time format incorrect
#366200: "Post shout" and "Post new shout" serving the same purpose
http://drupal.org/node/363671#comment-1219685 (form-submit through NON-AJAX gives blank statuses)

Patched against Jan.25 dev

Facebook status replication

I'm using the shouts module like Facebook status updates. Attached is a screenshot of how it looks (almost exactly like facebook, with jquery and all).

To replicate that functionality, add this to form_alter:

  // HEARTBEAT SHOUTBOX
  if ($form_id == 'shouts_shout_form') {		
	$account = user_load(array('uid' => arg(1)));
	$form['#prefix'] = "<div class='shoutbox-pre-status'>".$account->name."&nbsp;</div>".$form['#prefix'];

	drupal_add_js ('
	  $(document).ready(function(){
	    $(".shoutbox-input-name").hide();
	    $(".shoutbox-input-submit").hide();
		$("#edit-shout").val("What\'s happening in your world?");
		$("#edit-shout").css({"color" : "#666"});
		var adjWidth = $(".shoutbox-input-name").width();
	    $("#edit-shout").focus(function(){
	      $(".shoutbox-input-name").show();
		  $("#edit-shout").width($("#edit-shout").width() - $(".shoutbox-input-name").width() - 4); // account for padding
	      $(".shoutbox-input-submit").show();
		  $("#edit-shout").val("is ");
		  $("#edit-shout").css({"color" : "#000"});
		});
		$("#edit-shout").blur(function(){
	      $(".shoutbox-input-name").hide();
		  $("#edit-shout").width($("#edit-shout").width() + $(".shoutbox-input-name").width() + 4); // account for padding
	      $(".shoutbox-input-submit").hide();
		  $("#edit-shout").val("What\'s happening in your world?");
		  $("#edit-shout").css({"color" : "#666"});
		});	  });
	','inline');

	$form['shout']['#prefix'] = "<table class='shoutbox-input-wrapper'><tr><td><table class='shoutbox-input'><tr><td class='shoutbox-input-name'>".$user->name."</td><td class='shoutbox-input-status'>";
	$form['shout']['#suffix'] = "</td></tr></table></td><td class='shoutbox-input-submit'>";
	$form['shout']['#title'] = '';
	$form['shout']['#default_value'] = 'is ';
	$form['shout']['#size'] = 40;
	$form['shout']['#maxlength'] = 190;
	$form['submit']['#suffix'] = "</td></tr></table>";
  }

Optional CSS styles:

/* --- HEARTBEAT --- */
.heartbeat_status_table {
  margin:0;
  padding:0;
  border: solid #E6E6E6;
  border-width: 0 1px 1px 0;
  background-color:#FFFDE1;
  font-size: 14px;
}
/* top */
.shoutbox-pre-status {
  display:inline;
}
#shout-wrapper,
#shout-wrapper div {
  display:inline;
}
#shout-wrapper .shout-ago {
  margin-left:5px;
  color:#666;
  font-style:italic;
  font-size:10px;
}
.shout-clear {
  margin-left: 5px;
  font-size:11px;
}
/* bottom */
table.shoutbox-input-wrapper {
  margin: 5px 0 5px;
}
table.shoutbox-input {
  font-size:14px;
  margin-top:6px;
  margin-right:5px;
  /*border: 1px solid #90a9c2;*/
  border:1px solid #ccc;
  background: #fff;
  margin:0;
}
table.shoutbox-input td {
  padding:2px;
}
#shouts-shout-form {
  margin-bottom:0;
}
#edit-shout-wrapper {
  display:inline
}
.shoutbox-input-name {
  color: #666;
  overflow-x:hidden;
}
#shouts-shout-form #edit-shout {
  font-size:14px;
  border: 0;
  width:300px;
}
#shouts-shout-form #edit-submit {
  font-size:14px;
  display:inline;
  width:60px;
  border:1px solid #90a9c2;
  background: #d8e4f0;
  padding:1px;
}

Optionally, embed this in user profile using this in user-profile.tpl.php:

	// STATUS (HEARTBEAT)
	$block = module_invoke('shouts', 'block', 'view', '0');
	$shout_form = $block['content'];
	if ($own == true) {
	  $status_edit = "<span class='facebook_status_status_change'>[click to change]</span>";
	  $status_help = "<span class='tip'><a href='javascript:void(0);' onmouseover='return overlib(\"".TIP_FACEBOOK_STATUS."\");' onmouseout='return nd();'><img src='/sites/all/themes/zen_andrey/images/tip.gif'></a></span>";
	}
	$status_picture = theme('imagecache', 'user_image_small', $account->picture, $alt, $alt);
	$status_message = $profile['latest_shout'];
	$profile['heartbeat'] = "<table width='100%' class='heartbeat_status_table'><tr><td width='57' style='padding-bottom:0'>$status_picture</td><td>$shout_form</td></tr></table>";

Note that I'm using imagecache and imagecache_profiles to replicate the user picture functionality. To set that up, follow the instructions for "user_image_small" in imagecache_profiles README.

I would love to see an option to enable this functionality in the core of shouts module. The code's all there, and I imagine the translation of it into the module wouldn't be too hard.

Enjoy,
Andrey.

mr.andrey’s picture

mr.andrey commented
Title: Shouts features, patch for time ago, incorrect time format, other » Shouts features, patch for time ago, incorrect time format, other issues
StatusFileSize
new shouts-2008-02-02.txt4.73 KB

Attached is an updated patch to shouts.module that addresses the following issues:
#365800: Time format incorrect
#366200: "Post shout" and "Post new shout" serving the same purpose
#368072: Clear shout only clears for uid 1
http://drupal.org/node/363671#comment-1219685 (form-submit through NON-AJAX gives blank statuses)

... and adding the following features:
#1. Add a CSS class to the "Clear" span.
#2. Add time-ago to the latest shout

mr.andrey’s picture

mr.andrey commented

Attached is a patch for Feb.08-dev which is an update to previous one that addresses the following:
#1. #366200: "Post shout" and "Post new shout" serving the same purpose
#2. Add time-ago to the latest shout
#3. http://drupal.org/node/363671#comment-1219685 (form-submit through NON-AJAX gives blank statuses)
#4. 

-    $shout_time = '<span class="shout_ago">'.format_interval(($_SERVER['REQUEST_TIME'] - strtotime($time)), 1,'nl').' '.$ago.'</span>';
+    $shout_time = "<span class='shout_ago'>".$date." $ago</span>";

In the Feb.08-dev, the $date variable gives option to show "a momoent ago" rather than 0 sec ago, however it is not used in the line below it.

Features implemented since previous dev:
#365800: Time format incorrect
#368072: Clear shout only clears for uid 1
Add a CSS class to the "Clear" span.

All the Best,
Andrey.

nils.destoop’s picture

nils.destoop commented

Hi Andrey,

I think you forgot to add the patch. :)
Next week, i'll add some default css, to make the shout form look a bit nicer.

mr.andrey’s picture

mr.andrey commented
StatusFileSize
new shouts-2009-02-09.txt1.97 KB

Ah yes, here's the patch. Thanks.

Andrey.

Stalski’s picture

Stalski commented
Assigned: Unassigned » nils.destoop
Stalski’s picture

Stalski commented
Status: Needs review » Closed (fixed)
mr.andrey’s picture

mr.andrey commented
Status: Closed (fixed) » Active
StatusFileSize
new shouts-patch-2009-03-21.txt1.06 KB

This is a patch for Mar-16 dev shouts.module that addresses the following:

#1. #366200: "Post shout" and "Post new shout" serving the same purpose
#2. Add time-ago to the latest shout

Best,
Andrey.

Stalski’s picture

Stalski commented
Assigned: nils.destoop » Stalski
Status: Active » Fixed

Ok applied and fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.