Skip to content

Commit

Permalink
improve comments layout in issue view
Browse files Browse the repository at this point in the history
  • Loading branch information
zegenie committed Jul 28, 2014
1 parent 7f89fd8 commit 2631503
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 67 deletions.
16 changes: 6 additions & 10 deletions modules/main/templates/_comment.inc.php
@@ -1,7 +1,7 @@
<?php $options = (isset($issue)) ? array('issue' => $issue) : array(); ?>
<?php if ($comment->isViewableByUser($tbg_user)): ?>
<div class="comment<?php if ($comment->isSystemComment()): ?> system_comment<?php endif; if (!$comment->isPublic()): ?> private_comment<?php endif; ?> <?php if ($comment->isMwSyntax()) echo ' syntax_mw'; ?><?php if ($comment->isMdSyntax()) echo ' syntax_md'; ?>" id="comment_<?php echo $comment->getID(); ?>"<?php if ($comment->isSystemComment()): ?> style="display: none;"<?php endif; ?>>
<div style="position: relative; overflow: visible; padding: 5px;" id="comment_view_<?php echo $comment->getID(); ?>" class="comment_main">
<div id="comment_view_<?php echo $comment->getID(); ?>" class="comment_main">
<div id="comment_<?php echo $comment->getID(); ?>_header" class="commentheader">
<a href="#comment_<?php echo $comment->getID(); ?>" class="comment_hash">#<?php echo $comment->getCommentNumber(); ?></a>
<?php if ((TBGContext::isProjectContext() && !TBGContext::getCurrentProject()->isArchived()) || !TBGContext::isProjectContext()) : ?>
Expand All @@ -13,19 +13,15 @@
<a href="javascript:void(0)" class="button button-icon button-silver" onclick="$$('.comment_editor').each(Element.hide);$('comment_edit_<?php echo $comment->getID(); ?>').show();"><?php echo image_tag('edit.png', array('title' => __('Edit'))); ?></a>
<?php endif; ?>
<?php if ($comment->canUserDelete($tbg_user)): ?>
<a href="javascript:void(0)" class="button button-icon button-silver" onclick="$('comment_delete_confirm_<?php echo $comment->getID(); ?>').toggle();"><?php echo image_tag('delete.png', array('title' => __('Delete'))); ?></a>
<?php echo javascript_link_tag(image_tag('delete.png'), array('class' => 'button button-icon button-silver', 'onclick' => "TBG.Main.Helpers.Dialog.show('".__('Do you really want to delete this comment?')."', '".__('Please confirm that you want to delete this comment.')."', {yes: {click: function() {TBG.Main.Comment.remove('".make_url('comment_delete', array('comment_id' => $comment->getID()))."', ".$comment->getID()."); }}, no: { click: TBG.Main.Helpers.Dialog.dismiss }});")); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="commenttitle">
<?php if ($comment->isSystemComment()): ?>
<?php echo __('Comment posted on behalf of %user', array('%user' => '<div style="display: inline;">'.get_component_html('main/userdropdown', array('user' => $comment->getPostedBy(), 'size' => 'small')).'</div>')); ?>
<?php elseif(!$comment->isPublic()): ?>
<?php if(!$comment->isPublic()): ?>
<?php echo image_tag('icon_locked.png', array('style' => 'float: left; margin-right: 3px;', 'title' => __('Access to this comment is restricted'))); ?>
<?php echo __('Private comment posted by %user', array('%user' => '<div style="display: inline;">'.get_component_html('main/userdropdown', array('user' => $comment->getPostedBy(), 'size' => 'small')).'</div>')); ?>
<?php else: ?>
<?php echo __('Comment posted by %user', array('%user' => '<div style="display: inline;">'.get_component_html('main/userdropdown', array('user' => $comment->getPostedBy(), 'size' => 'small')).'</div>')); ?>
<?php endif; ?>
<?php echo include_component('main/userdropdown', array('user' => $comment->getPostedBy(), 'size' => 'large')); ?>
</div>
<div class="commentdate" id="comment_<?php echo $comment->getID(); ?>_date">
<?php if ($comment->isReply()): ?>
Expand All @@ -35,15 +31,15 @@
<?php endif; ?>
</div>
</div>
<div class="rounded_box lightyellow borderless shadowed comment_delete" id="comment_delete_confirm_<?php echo $comment->getID(); ?>" style="display: none; width: 300px; position: absolute; right: 0; top: 0; padding: 5px; z-index: 20;">
<?php /* <div class="rounded_box lightyellow borderless shadowed comment_delete" id="comment_delete_confirm_<?php echo $comment->getID(); ?>" style="display: none; width: 300px; position: absolute; right: 0; top: 0; padding: 5px; z-index: 20;">
<h5><?php echo __('Really delete this comment?'); ?></h5>
<div id="comment_delete_controls_<?php echo $comment->getID(); ?>" style="text-align: right; font-size: 12px;">
<a href="javascript:void(0)" onclick="TBG.Main.Comment.remove('<?php echo make_url('comment_delete', array('comment_id' => $comment->getID())); ?>', <?php echo $comment->getID(); ?>)" class="xboxlink"><?php echo __('Yes');?></a> :: <a href="javascript:void(0)" onclick="$('comment_delete_confirm_<?php echo $comment->getID(); ?>').hide();" class="xboxlink"><?php echo __('No'); ?></a>
</div>
<div id="comment_delete_indicator_<?php echo $comment->getID(); ?>" style="display: none;">
<?php echo image_tag('spinning_16.gif', array('class' => 'spinning')); ?>
</div>
</div>
</div> */ ?>
<div class="commentbody article" id="comment_<?php echo $comment->getID(); ?>_body">
<?php echo $comment->getParsedContent($options); ?>
<br style="clear: both;">
Expand Down
5 changes: 1 addition & 4 deletions modules/main/templates/_comments.inc.php
@@ -1,11 +1,8 @@
<?php $module = (isset($module)) ? $module : 'core'; ?>
<?php if ($target_type == TBGComment::TYPE_ISSUE): ?>
<div style="float: right; padding: 5px;"><label><?php echo __('Show system-generated comments'); ?><input type="checkbox" id="comments_show_system_comments_toggle" onchange="$$('#comments_box .system_comment').each(function (elm) { $(elm).toggle(); })" /></label></div>
<?php endif; ?>
<?php if ($tbg_user->canPostComments() && ((TBGContext::isProjectContext() && !TBGContext::getCurrentProject()->isArchived()) || !TBGContext::isProjectContext())): ?>
<?php if (!isset($show_button) || $show_button == true): ?>
<ul class="simple_list" id="add_comment_button_container">
<li id="comment_add_button"><input class="button button-green first last" type="button" onclick="$$('.comment_editor').each(Element.hide);$('comment_add_button').hide(); $('comment_add').show();$('comment_bodybox').focus();" value="<?php echo __('Post comment'); ?>"></li>
<li id="comment_add_button"><input class="button button-green first last" type="button" onclick="TBG.Main.Comment.showPost();" value="<?php echo __('Post comment'); ?>"></li>
</ul>
<?php endif; ?>
<div id="comment_add" class="comment_add comment_editor" style="<?php if (!(isset($comment_error) && $comment_error)): ?>display: none; <?php endif; ?>margin-top: 5px;">
Expand Down
78 changes: 49 additions & 29 deletions modules/main/templates/viewissue.html.php
Expand Up @@ -366,6 +366,55 @@
</fieldset>
<?php include_component('main/issuemaincustomfields', array('issue' => $issue)); ?>
<?php TBGEvent::createNew('core', 'viewissue_right_bottom', $issue)->trigger(); ?>
<fieldset class="comments">
<legend class="viewissue_comments_header">
<?php echo __('Comments (%count)', array('%count' => '<span id="viewissue_comment_count">'.$issue->countUserComments().'</span>')); ?>
<div class="dropper_container">
<?php echo image_tag('icon-mono-settings.png', array('class' => 'dropper')); ?>
<ul class="simple_list rounded_box white shadowed more_actions_dropdown dropdown_box popup_box leftie">
<li><a href="javascript:void(0);" id="comments_show_system_comments_toggle" onclick="$$('#comments_box .system_comment').each(function (elm) { $(elm).toggle(); });" /><?php echo __('Toggle system-generated comments'); ?></a></li>
</ul>
</div>
<ul class="simple_list button_container" id="add_comment_button_container">
<li id="comment_add_button"><input class="button button-silver first last" type="button" onclick="TBG.Main.Comment.showPost();" value="<?php echo __('Post comment'); ?>"></li>
</ul>
</legend>
<div id="viewissue_comments">
<?php include_template('main/comments', array('target_id' => $issue->getID(), 'target_type' => TBGComment::TYPE_ISSUE, 'show_button' => false, 'comment_count_div' => 'viewissue_comment_count', 'save_changes_checked' => $issue->hasUnsavedChanges(), 'issue' => $issue, 'forward_url' => make_url('viewissue', array('project_key' => $issue->getProject()->getKey(), 'issue_no' => $issue->getFormattedIssueNo()), false))); ?>
</div>
</fieldset>
<fieldset class="viewissue_history">
<legend class="viewissue_history_header">
<?php echo __('History'); ?>
<?php echo image_tag('spinning_16.gif', array('style' => 'display: none;', 'id' => 'viewissue_log_loading_indicator')); ?>
<div class="button_container" id="viewissue_history_button_container">
<input class="button button-silver first last" type="button" onclick="TBG.Issues.showLog('<?php echo make_url('issue_log', array('project_key' => $issue->getProject()->getKey(), 'issue_id' => $issue->getID())); ?>');" value="<?php echo __('Show issue history'); ?>">
</div>
</legend>
<div id="viewissue_log_items"></div>
</fieldset>
<?php TBGEvent::createNew('core', 'viewissue_before_tabs', $issue)->trigger(); ?>
<div class="tab_menu inset" id="viewissue_tabs">
<ul id="viewissue_menu">
<li id="tab_affected"><?php echo javascript_link_tag(image_tag('viewissue_tab_affected.png') . '<span>'.__('Affects (%count)', array('%count' => '</span><span id="viewissue_affects_count" class="tab_count">'.$affected_count.'</span>')), array('onclick' => "TBG.Main.Helpers.tabSwitcher('tab_affected', 'viewissue_menu');")); ?></li>
<?php TBGEvent::createNew('core', 'viewissue_tabs', $issue)->trigger(); ?>
</ul>
</div>
<div id="viewissue_menu_panes">
<?php TBGEvent::createNew('core', 'viewissue_tab_panes_front', $issue)->trigger(); ?>
<div id="tab_log_pane" style="padding-top: 0; margin: 5px; display: none;">
<div id="viewissue_log_loading_indicator"><?php echo image_tag('spinning_32.gif'); ?></div>
<div id="viewissue_log_items">
</div>
</div>
<div id="tab_affected_pane" style="padding-top: 0; margin: 0 5px 0 5px; display: none;">
<div id="viewissue_affected">
<?php include_component('main/issueaffected', array('issue' => $issue)); ?>
</div>
</div>
<?php TBGEvent::createNew('core', 'viewissue_tab_panes_back', $issue)->trigger(); ?>
</div>
<?php TBGEvent::createNew('core', 'viewissue_after_tabs', $issue)->trigger(); ?>
</div>
</div>
<div id="issue_details_container">
Expand All @@ -382,35 +431,6 @@
</div>
</div>
</div>
<?php TBGEvent::createNew('core', 'viewissue_before_tabs', $issue)->trigger(); ?>
<div style="clear: both; height: 30px; margin: 20px 5px 0 5px;" class="tab_menu inset">
<ul id="viewissue_menu">
<li id="tab_comments" class="selected"><?php echo javascript_link_tag(image_tag('viewissue_tab_comments.png') . '<span>'.__('Comments (%count)', array('%count' => '</span><span id="viewissue_comment_count" class="tab_count">'.$issue->countUserComments().'</span>')), array('onclick' => "TBG.Main.Helpers.tabSwitcher('tab_comments', 'viewissue_menu');")); ?></li>
<li id="tab_affected"><?php echo javascript_link_tag(image_tag('viewissue_tab_affected.png') . '<span>'.__('Affects (%count)', array('%count' => '</span><span id="viewissue_affects_count" class="tab_count">'.$affected_count.'</span>')), array('onclick' => "TBG.Main.Helpers.tabSwitcher('tab_affected', 'viewissue_menu');")); ?></li>
<?php TBGEvent::createNew('core', 'viewissue_tabs', $issue)->trigger(); ?>
<li id="tab_log"><?php echo javascript_link_tag(image_tag('viewissue_tab_log.png') . '<span>'.__('History'), array('onclick' => "TBG.Issues.showLog('".make_url('issue_log', array('project_key' => $issue->getProject()->getKey(), 'issue_id' => $issue->getID()))."');")).'</span>'; ?></li>
</ul>
</div>
<div id="viewissue_menu_panes">
<?php TBGEvent::createNew('core', 'viewissue_tab_panes_front', $issue)->trigger(); ?>
<div id="tab_comments_pane" style="padding-top: 0; margin: 5px;" class="comments">
<div id="viewissue_comments">
<?php include_template('main/comments', array('target_id' => $issue->getID(), 'target_type' => TBGComment::TYPE_ISSUE, 'comment_count_div' => 'viewissue_comment_count', 'save_changes_checked' => $issue->hasUnsavedChanges(), 'issue' => $issue, 'forward_url' => make_url('viewissue', array('project_key' => $issue->getProject()->getKey(), 'issue_no' => $issue->getFormattedIssueNo()), false))); ?>
</div>
</div>
<div id="tab_log_pane" style="padding-top: 0; margin: 5px; display: none;">
<div id="viewissue_log_loading_indicator"><?php echo image_tag('spinning_32.gif'); ?></div>
<div id="viewissue_log_items">
</div>
</div>
<div id="tab_affected_pane" style="padding-top: 0; margin: 0 5px 0 5px; display: none;">
<div id="viewissue_affected">
<?php include_component('main/issueaffected', array('issue' => $issue)); ?>
</div>
</div>
<?php TBGEvent::createNew('core', 'viewissue_tab_panes_back', $issue)->trigger(); ?>
</div>
<?php TBGEvent::createNew('core', 'viewissue_after_tabs', $issue)->trigger(); ?>
</div>
<div id="workflow_transition_container" style="display: none;">
<?php if ($issue->isWorkflowTransitionsAvailable()): ?>
Expand Down
4 changes: 2 additions & 2 deletions modules/publish/templates/showarticle.html.php
Expand Up @@ -61,7 +61,7 @@
<h4>
<?php echo __('Article attachments (%count)', array('%count' => count($attachments))); ?>
<?php if (TBGSettings::isUploadsEnabled() && $article->canEdit()): ?>
<button class="button button-silver" onclick="$('attach_file').show();"><?php echo __('Attach a file'); ?></button>
<button class="button button-silver" onclick="TBG.Main.showUploader('<?php echo make_url('get_partial_for_backdrop', array('key' => 'uploader', 'mode' => 'article', 'article_name' => $article_name)); ?>');"><?php echo __('Attach a file'); ?></button>
<?php else: ?>
<button class="button button-silver disabled" onclick="TBG.Main.Helpers.Message.error('<?php echo __('File uploads are not enabled'); ?>');"><?php echo __('Attach a file'); ?></button>
<?php endif; ?>
Expand All @@ -72,7 +72,7 @@
<h4>
<?php echo __('Article comments (%count)', array('%count' => TBGComment::countComments($article->getID(), TBGComment::TYPE_ARTICLE))); ?>
<?php if ($tbg_user->canPostComments() && ((TBGContext::isProjectContext() && !TBGContext::getCurrentProject()->isArchived()) || !TBGContext::isProjectContext())): ?>
<button id="comment_add_button" class="button button-silver" onclick="$$('.comment_editor').each(Element.hide);$('comment_add_button').hide(); $('comment_add').show();$('comment_bodybox').focus();"><?php echo __('Post comment'); ?></button>
<button id="comment_add_button" class="button button-silver" onclick="TBG.Main.Comment.showPost();"><?php echo __('Post comment'); ?></button>
<?php endif; ?>
</h4>
<?php include_template('main/comments', array('target_id' => $article->getID(), 'target_type' => TBGComment::TYPE_ARTICLE, 'show_button' => false, 'comment_count_div' => 'article_comment_count', 'forward_url' => make_url('publish_article', array('article_name' => $article->getName())))); ?>
Expand Down
12 changes: 11 additions & 1 deletion thebuggenie/js/thebuggenie.js
Expand Up @@ -1436,6 +1436,13 @@ TBG.Main.setToggleState = function (url, state) {
TBG.Main.Helpers.ajax(url, {});
}

TBG.Main.Comment.showPost = function() {
$$('.comment_editor').each(Element.hide);
$('comment_add_button').hide();
$('comment_add').show();
$('comment_bodybox').focus();
}

TBG.Main.Comment.remove = function(url, comment_id) {
TBG.Main.Helpers.ajax(url, {
loading: {
Expand All @@ -1445,6 +1452,7 @@ TBG.Main.Comment.remove = function(url, comment_id) {
success: {
remove: ['comment_delete_indicator_' + comment_id, 'comment_delete_confirm_' + comment_id, 'comment_' + comment_id],
callback: function() {
TBG.Main.Helpers.Dialog.dismiss();
if ($('comments_box').childElements().size() == 0) $('comments_none').show();
}
},
Expand Down Expand Up @@ -3465,7 +3473,6 @@ TBG.Issues.showWorkflowTransition = function(transition_id) {
};

TBG.Issues.showLog = function(url) {
TBG.Main.Helpers.tabSwitcher('tab_log', 'viewissue_menu');
if ($('viewissue_log_items').childElements().size() == 0) {
TBG.Main.Helpers.ajax(url, {
url_method: 'get',
Expand Down Expand Up @@ -5439,5 +5446,8 @@ jQuery(document).ready(function(){
$("body").on("click", ".dropper", function() {
TBG.Main.Helpers.toggler($(this));
});
$("body").on("click", ".popup_box", function() {
TBG.Main.Profile.clearPopupsAndButtons();
});
})(jQuery);
});
1 change: 1 addition & 0 deletions thebuggenie/themes/firehouse/firehouse.css
Expand Up @@ -350,6 +350,7 @@ footer img { margin: 4px 3px -6px 0; }

/* comments and commits styling */
.comment { padding-bottom: 0; clear: both; }
.comment_main { position: relative; overflow: visible; padding: 5px; }
.comment:target .comment_main { border: 1px dotted #CCC; background-color: #F0F7FF; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.comment.syntax_md p, .comment.syntax_md pre, .comment.syntax_md code, .article.syntax_md p, .article.syntax_md pre, .article.syntax_md code { margin: 0 0 16px; }
.comment_delete { margin-top: 10px !important; }
Expand Down

0 comments on commit 2631503

Please sign in to comment.