From d631a4b2e5f1a1ad3ee3d62068eb2ee1e258c567 Mon Sep 17 00:00:00 2001
From: Baris Usakli <barisusakli@gmail.com>
Date: Thu, 21 Nov 2013 13:53:19 -0500
Subject: [PATCH] topic.tpl changes, moved users to the bottom of main post,
added reply thread tools buttons under main post, added posts and view count
---
public/src/forum/topic.js | 63 +++++++++++++++++++-------------------
public/templates/topic.tpl | 42 ++++++++++++++++++++-----
2 files changed, 66 insertions(+), 39 deletions(-)
diff --git a/public/src/forum/topic.js b/public/src/forum/topic.js
index f865993289..4ee458b501 100644
--- a/public/src/forum/topic.js
+++ b/public/src/forum/topic.js
@@ -32,12 +32,10 @@ define(function() {
app.addCommasToNumbers();
+ app.enter_room('topic_' + tid);
- var room = 'topic_' + tid,
- adminTools = document.getElementById('thread-tools');
-
- app.enter_room(room);
-
+ if($('#post-container .sub-posts').length)
+ $('.topic-main-buttons').removeClass('hide');
$('.twitter-share').on('click', function () {
window.open(twitter_url, '_blank', 'width=550,height=420,scrollbars=no,status=no');
@@ -61,11 +59,10 @@ define(function() {
if (expose_tools === '1') {
var moveThreadModal = $('#move_thread_modal');
-
- adminTools.style.visibility = 'inherit';
+ $('.thread-tools').removeClass('hide');
// Add events to the thread tools
- $('#delete_thread').on('click', function(e) {
+ $('.delete_thread').on('click', function(e) {
if (thread_state.deleted !== '1') {
bootbox.confirm('Are you sure you want to delete this thread?', function(confirm) {
if (confirm) {
@@ -84,7 +81,7 @@ define(function() {
return false;
});
- $('#lock_thread').on('click', function(e) {
+ $('.lock_thread').on('click', function(e) {
if (thread_state.locked !== '1') {
socket.emit('api:topic.lock', {
tid: tid
@@ -97,7 +94,7 @@ define(function() {
return false;
});
- $('#pin_thread').on('click', function(e) {
+ $('.pin_thread').on('click', function(e) {
if (thread_state.pinned !== '1') {
socket.emit('api:topic.pin', {
tid: tid
@@ -110,7 +107,7 @@ define(function() {
return false;
});
- $('#move_thread').on('click', function(e) {
+ $('.move_thread').on('click', function(e) {
moveThreadModal.modal('show');
return false;
});
@@ -289,7 +286,7 @@ define(function() {
}
};
$('#post-container').on('click', '.post_reply', reply_fn);
- $('#post_reply').on('click', reply_fn);
+ $('.topic-main-buttons').on('click', '.post_reply', reply_fn);
$('#post-container').on('click', '.quote', function() {
if (thread_state.locked !== '1') {
@@ -390,12 +387,15 @@ define(function() {
var userLink = $('<a href="/user/' + userslug + '"></a>').append(userIcon);
userLink.attr('data-uid', uid);
+ var div = $('<div class="inline-block"></div>');
+ div.append(userLink);
+
userLink.tooltip({
- placement: 'left',
+ placement: 'top',
title: username
});
- return userLink;
+ return div;
}
}
@@ -437,7 +437,7 @@ define(function() {
activeEl.find('.anonymous-box').remove();
if(anonymousCount || remainingUsers) {
- var anonLink = $('<i class="icon-user anonymous-box"></i>');
+ var anonLink = $('<div class="anonymous-box inline-block"><i class="icon-user"></i></div>');
activeEl.append(anonLink);
var title = '';
@@ -449,7 +449,7 @@ define(function() {
title = anonymousCount + ' guest(s)';
anonLink.tooltip({
- placement: 'left',
+ placement: 'top',
title: title
});
}
@@ -575,19 +575,19 @@ define(function() {
}
function set_locked_state(locked, alert) {
- var threadReplyBtn = document.getElementById('post_reply'),
+ var threadReplyBtn = $('.topic-main-buttons .post_reply'),
postReplyBtns = document.querySelectorAll('#post-container .post_reply'),
quoteBtns = document.querySelectorAll('#post-container .quote'),
editBtns = document.querySelectorAll('#post-container .edit'),
deleteBtns = document.querySelectorAll('#post-container .delete'),
numPosts = document.querySelectorAll('#post_container li[data-pid]').length,
- lockThreadEl = document.getElementById('lock_thread'),
+ lockThreadEl = $('.lock_thread'),
x;
if (locked === true) {
- lockThreadEl.innerHTML = '<i class="icon-unlock"></i> Unlock Thread';
- threadReplyBtn.disabled = true;
- threadReplyBtn.innerHTML = 'Locked <i class="icon-lock"></i>';
+ lockThreadEl.html('<i class="icon-unlock"></i> Unlock Thread');
+ threadReplyBtn.attr('disabled', true);
+ threadReplyBtn.html('Locked <i class="icon-lock"></i>');
for (x = 0; x < numPosts; x++) {
postReplyBtns[x].innerHTML = 'Locked <i class="icon-lock"></i>';
quoteBtns[x].style.display = 'none';
@@ -607,9 +607,9 @@ define(function() {
thread_state.locked = '1';
} else {
- lockThreadEl.innerHTML = '<i class="icon-lock"></i> Lock Thread';
- threadReplyBtn.disabled = false;
- threadReplyBtn.innerHTML = 'Reply';
+ lockThreadEl.html('<i class="icon-lock"></i> Lock Thread');
+ threadReplyBtn.attr('disabled', false);
+ threadReplyBtn.html('Reply');
for (x = 0; x < numPosts; x++) {
postReplyBtns[x].innerHTML = 'Reply <i class="icon-reply"></i>';
quoteBtns[x].style.display = 'inline-block';
@@ -632,13 +632,14 @@ define(function() {
}
function set_delete_state(deleted) {
- var deleteThreadEl = document.getElementById('delete_thread'),
- deleteTextEl = deleteThreadEl.getElementsByTagName('span')[0],
+ var deleteThreadEl = $('.delete_thread'),
+ deleteTextEl = $('.delete_thread span'),
+ //deleteThreadEl.getElementsByTagName('span')[0],
threadEl = $('#post-container'),
deleteNotice = document.getElementById('thread-deleted') || document.createElement('div');
if (deleted) {
- deleteTextEl.innerHTML = '<i class="icon-comment"></i> Restore Thread';
+ deleteTextEl.html('<i class="icon-comment"></i> Restore Thread');
threadEl.addClass('deleted');
// Spawn a 'deleted' notice at the top of the page
@@ -649,7 +650,7 @@ define(function() {
thread_state.deleted = '1';
} else {
- deleteTextEl.innerHTML = '<i class="icon-trash"></i> Delete Thread';
+ deleteTextEl.html('<i class="icon-trash"></i> Delete Thread');
threadEl.removeClass('deleted');
deleteNotice.parentNode.removeChild(deleteNotice);
@@ -658,10 +659,10 @@ define(function() {
}
function set_pinned_state(pinned, alert) {
- var pinEl = document.getElementById('pin_thread');
+ var pinEl = $('.pin_thread');
if (pinned) {
- pinEl.innerHTML = '<i class="icon-pushpin"></i> Unpin Thread';
+ pinEl.html('<i class="icon-pushpin"></i> Unpin Thread');
if (alert) {
app.alert({
'alert_id': 'thread_pin',
@@ -674,7 +675,7 @@ define(function() {
thread_state.pinned = '1';
} else {
- pinEl.innerHTML = '<i class="icon-pushpin"></i> Pin Thread';
+ pinEl.html('<i class="icon-pushpin"></i> Pin Thread');
if (alert) {
app.alert({
'alert_id': 'thread_pin',
diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl
index 76240725f3..5f40fc78d1 100644
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@@ -20,7 +20,7 @@
<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">{topic_name} <a target="_blank" href="../{topic_id}.rss"><i class="icon-rss-sign"></i></a></span>
</li>
- <div class="thread_active_users active-users pull-right hidden-xs"></div>
+
</ol>
<ul id="post-container" class="container" data-tid="{topic_id}">
@@ -98,6 +98,32 @@
</li>
<!-- END main_posts -->
+ <div>
+ <div class="inline-block">
+ <small><span>posts</span></small>
+ <strong><span class="formatted-number">{postcount}</span></strong> |
+ <small><span>views</span></small>
+ <strong><span class="formatted-number">{viewcount}</span></strong> |
+ <span><small>browsing</small></span>
+ <div class="thread_active_users active-users inline-block"></div>
+ </div>
+ <div class="topic-main-buttons pull-right inline-block">
+ <button class="btn btn-primary btn-lg post_reply" type="button">[[topic:reply]]</button>
+ <div class="btn-group thread-tools hide">
+ <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">[[topic:thread_tools.title]] <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#" class="pin_thread"><i class="icon-pushpin"></i> [[topic:thread_tools.pin]]</a></li>
+ <li><a href="#" class="lock_thread"><i class="icon-lock"></i> [[topic:thread_tools.lock]]</a></li>
+ <li class="divider"></li>
+ <li><a href="#" class="move_thread"><i class="icon-move"></i> [[topic:thread_tools.move]]</a></li>
+ <li class="divider"></li>
+ <li><a href="#" class="delete_thread"><span class="text-error"><i class="icon-trash"></i> [[topic:thread_tools.delete]]</span></a></li>
+ </ul>
+ </div>
+ </div>
+ <div style="clear:both;"></div>
+ </div>
+
<!-- BEGIN posts -->
<a id="post_anchor_{posts.pid}" name="{posts.pid}"></a>
<li class="row post-row sub-posts" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}" itemscope itemtype="http://schema.org/Comment">
@@ -169,17 +195,17 @@
<hr />
- <div class="topic-main-buttons">
- <button id="post_reply" class="btn btn-primary btn-lg post_reply" type="button">[[topic:reply]]</button>
- <div class="btn-group pull-right" id="thread-tools" style="visibility: hidden;">
+ <div class="topic-main-buttons pull-right inline-block hide">
+ <button class="btn btn-primary btn-lg post_reply" type="button">[[topic:reply]]</button>
+ <div class="btn-group thread-tools hide">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">[[topic:thread_tools.title]] <span class="caret"></span></button>
<ul class="dropdown-menu">
- <li><a href="#" id="pin_thread"><i class="icon-pushpin"></i> [[topic:thread_tools.pin]]</a></li>
- <li><a href="#" id="lock_thread"><i class="icon-lock"></i> [[topic:thread_tools.lock]]</a></li>
+ <li><a href="#" class="pin_thread"><i class="icon-pushpin"></i> [[topic:thread_tools.pin]]</a></li>
+ <li><a href="#" class="lock_thread"><i class="icon-lock"></i> [[topic:thread_tools.lock]]</a></li>
<li class="divider"></li>
- <li><a href="#" id="move_thread"><i class="icon-move"></i> [[topic:thread_tools.move]]</a></li>
+ <li><a href="#" class="move_thread"><i class="icon-move"></i> [[topic:thread_tools.move]]</a></li>
<li class="divider"></li>
- <li><a href="#" id="delete_thread"><span class="text-error"><i class="icon-trash"></i> [[topic:thread_tools.delete]]</span></a></li>
+ <li><a href="#" class="delete_thread"><span class="text-error"><i class="icon-trash"></i> [[topic:thread_tools.delete]]</span></a></li>
</ul>
</div>
</div>