More interactive magic for inline replies: placeholder at the end of list

This commit is contained in:
Brion Vibber 2011-02-28 16:13:16 -08:00
parent 3b456b4ffe
commit 62712b794a
4 changed files with 33 additions and 4 deletions

View File

@ -591,6 +591,9 @@ var SN = { // StatusNet
// See if the form's already open... // See if the form's already open...
var replyForm = $('.notice-reply-form', list); var replyForm = $('.notice-reply-form', list);
if (replyForm.length == 0) { if (replyForm.length == 0) {
// Remove placeholder if any
$('li.notice-reply-placeholder').remove();
// Create the reply form entry at the end // Create the reply form entry at the end
var replyItem = $('li.notice-reply', list); var replyItem = $('li.notice-reply', list);
if (replyItem.length == 0) { if (replyItem.length == 0) {
@ -672,6 +675,19 @@ var SN = { // StatusNet
$('.form_disfavor').live('click', function() { SN.U.FormXHR($(this)); return false; }); $('.form_disfavor').live('click', function() { SN.U.FormXHR($(this)); return false; });
}, },
NoticeInlineReplyPlaceholder: function(notice) {
var id = $($('.notice_id', notice)[0]).text();
var list = notice.find('ul.threaded-notices');
var placeholder = $('<li class="notice-reply-placeholder">' +
'<input class="placeholder">' +
'</li>');
placeholder.click(function() {
SN.U.NoticeInlineReplyTrigger(id);
});
placeholder.find('input').val(SN.msg('reply_comment'));
list.append(placeholder);
},
/** /**
* Setup function -- DOES NOT apply immediately. * Setup function -- DOES NOT apply immediately.
* *
@ -679,7 +695,11 @@ var SN = { // StatusNet
* Uses 'live' rather than 'bind', so applies to future as well as present items. * Uses 'live' rather than 'bind', so applies to future as well as present items.
*/ */
NoticeInlineReplySetup: function() { NoticeInlineReplySetup: function() {
$('') $('.threaded-notices').each(function() {
var list = $(this);
var notice = list.closest('.notice');
SN.U.NoticeInlineReplyPlaceholder(notice);
});
$('.replyform').live('submit', function(event) { $('.replyform').live('submit', function(event) {
//SN.U.FormXHR($(this)); //SN.U.FormXHR($(this));
var form = $(this); var form = $(this);

2
js/util.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -314,6 +314,9 @@ class Action extends HTMLOutputter // lawsuit
// TRANS: Inline reply form submit button: submits a reply comment. // TRANS: Inline reply form submit button: submits a reply comment.
$messages['reply_submit'] = _m('BUTTON', 'Comment'); $messages['reply_submit'] = _m('BUTTON', 'Comment');
// TRANS: Placeholder text for inline reply form. Clicking in this box will turn it into a mini notice form.
$messages['reply_comment'] = _m('Add a comment...');
$messages = array_merge($messages, $this->getScriptMessages()); $messages = array_merge($messages, $this->getScriptMessages());
Event::handle('EndScriptMessages', array($this, &$messages)); Event::handle('EndScriptMessages', array($this, &$messages));

View File

@ -1124,11 +1124,17 @@ border-top-style:solid;
.threaded-notices .notice-reply { .threaded-notices .notice-reply {
margin: 8px; margin: 8px;
} }
.threaded-notices .notice-reply textarea { .threaded-notices .notice-reply textarea,
.threaded-notices .notice-reply-placeholder input.placeholder {
margin-left: 0; margin-left: 0;
width: 95%; width: 95%;
} }
.threaded-notices .notice-reply input.submit { .threaded-notices .notice-reply-placeholder input.placeholder {
color: gray;
margin-left: 8px; /* ?? */
margin-bottom: 8px;
}
.threaded-notices .notice-reply .controls {
text-align: right; text-align: right;
} }