Skip to content

GitLab

Commit bdc86285 authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon
Browse files
Options

Style nested comments (bug: 1465107) 

Make replybutton works when comments are in a block

behatnotneeded: styling only

Change-Id: If2d71568f57c7aa4e75797259bcc69a8a8b5722c
parent 2a824503
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 120 deletions
htdocs/artefact/comment/lib.php
View file @ bdc86285
......@@ -742,9 +742,7 @@ class ArtefactTypeComment extends ArtefactType {
$lastcomment = self::last_public_comment($data->view, $data->artefact);
$editableafter = time() - 60 * get_config_plugin('artefact', 'comment', 'commenteditabletime');
foreach ($data->data as &$item) {
if ($item->indent > 0) {
$item->indentwidth = 100 - $item->indent * 2;
}
$item->ts = strtotime($item->ctime);
$item->date = format_date($item->ts, 'strftimedatetime');
if ($item->ts < strtotime($item->lastcontentupdate)) {
......@@ -1012,7 +1010,7 @@ class ArtefactTypeComment extends ArtefactType {
return array(
'name' => 'delete_comment',
'renderer' => 'div',
'class' => 'form-as-button pull-left delete-comment',
'class' => 'form-as-button pull-left delete-comment comment-action',
'elements' => array(
'comment' => array('type' => 'hidden', 'value' => $id),
'submit' => array(
......
htdocs/js/viewmenu.js
View file @ bdc86285
......@@ -81,6 +81,7 @@ function isTinyMceUsed() {
}
jQuery(function($j) {
// Watchlist
if ($j('#toggle_watchlist_link').length) {
$j('#toggle_watchlist_link').click(function (e) {
e.preventDefault();
......@@ -94,6 +95,7 @@ jQuery(function($j) {
});
}
// Copy view
var copyurl = $j("#copyview-button").attr('href');
$j("#copyview-button").on('click', function(event) {
if (event.currentTarget.href.match(/collection=(.*)/)) {
......@@ -111,11 +113,9 @@ jQuery(function($j) {
window.location = copyurl;
});
// Set up the onclick method for all comment reply buttons
$j('.feedbacktable').on('click', '.commentreplyto', null, function(e){
e.preventDefault();
var replybutton = $j(this);
function setupCommentButton(element) {
// Set up the onclick method for all comment reply buttons
var replybutton = $j(element);
// Each comment stores its ID as a "replyto" data attribute
var replyto = replybutton.data('replyto');
var canpublicreply = replybutton.data('canpublicreply');
......@@ -161,11 +161,33 @@ jQuery(function($j) {
$j('#add_feedback_form_ispublic_container').append(msg);
}
}
// Open the comment feedback form (as if you clicked on it)
$j('#add_feedback_link a').focus();
$j('#add_feedback_link a').click();
jQuery('html, body').animate({ scrollTop: jQuery('#add_feedback_link').offset().top }, 'fast');
}
$j('#feedbacktable').on('click', '.js-reply', null, function(e){
var replybutton = $j(this);
e.preventDefault();
setupCommentButton(replybutton);
return false;
if (replybutton.parents('.js-feedbackbase').length) {
$j('#add_feedback_heading').focus();
jQuery('html, body').animate({ scrollTop: jQuery('#add_feedback_heading').offset().top }, 'fast');
return false;
}
if (replybutton.parents('.js-feedbackblock').length) {
var commentModal = $j('#add_feedback_link').attr('data-target');
var target = $j(commentModal);
dock.show(target, false, true);
}
});
$j('.js-add-comment-modal').on('click', function(e) {
var replyviewContent = $j('#comment_reply_parent').children();
e.preventDefault();
// Remove any previous "reply to" comment that was being displayed
replyviewContent.remove();
$j('input#add_feedback_form_replyto').val('');
});
});
htdocs/theme/raw/plugintype/artefact/comment/blocktype/comment/templates/comment.tpl
View file @ bdc86285
......@@ -4,12 +4,12 @@
</div>
{elseif $feedback}
{* Do not change the id because it is used by paginator.js *}
<div id="feedbacktable" class="feedbacktable feedbackblock fullwidth">
<div id="feedbacktable" class="feedbacktable js-feedbackblock fullwidth">
{$feedback->tablerows|safe}
</div>
{$feedback->pagination|safe}
{if $enablecomments}
<a id="add_feedback_link" class="feedback link-blocktype last" href="#" data-toggle="modal-docked" data-target="#feedback-form">
<a id="add_feedback_link" class="js-add-comment-modal feedback link-blocktype" href="#" data-toggle="modal-docked" data-target="#feedback-form">
<span class="icon icon-plus"></span>
{str tag=addcomment section=artefact.comment}
</a>
......
htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl
View file @ bdc86285
<!-- The "feedbacktable" class is used as an identifier by Javascript -->
<div class="list-group list-group-lite feedbacktable">
<div class="list-group list-group-lite">
{foreach from=$data item=item}
{if $item->indentwidth}<div style="margin-left:auto; margin-right:0px; width:{$item->indentwidth}%">{/if}
<div id="comment{$item->id}" class="comment-item list-group-item {if $item->pubmessage}list-group-item-warning{elseif $item->deletedmessage}deleted {/if} {cycle name=rows values='r0,r1'} {if !$item->deletedmessage && $item->attachments}has-attachment{/if}">
<div id="comment{$item->id}" class="comment-item list-group-item {if $item->pubmessage}list-group-item-warning{elseif $item->deletedmessage}deleted {/if} {cycle name=rows values='r0,r1'} {if $item->indent} indent-{$item->indent}{/if} {if !$item->deletedmessage && $item->attachments}has-attachment{/if}">
<div class="comment-heading clearfix">
<span class="user-icon small-icon pull-left mls mts mrm">
{if $item->author}
......@@ -46,7 +45,7 @@
<div class="btn-group btn-group-top comment-item-buttons">
{if !$onview}
{if $item->canedit}
<a href="{$WWWROOT}artefact/comment/edit.php?id={$item->id}&amp;view={$viewid}" class="btn btn-default">
<a href="{$WWWROOT}artefact/comment/edit.php?id={$item->id}&amp;view={$viewid}" class="btn btn-default comment-action form-as-button pull-left">
<span class="icon icon-pencil icon-lg"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
......@@ -56,16 +55,10 @@
{$item->deleteform|safe}
{/if}
{if $item->canreply}
<button class="btn btn-default pull-left commentreplyto last"
id="commentreplyto{$item->id}"
title="{str tag=reply section=artefact.comment}"
data-replyto="{$item->id}"
data-canprivatereply="{$item->canprivatereply}"
data-canpublicreply="{$item->canpublicreply}"
>
<span class="icon icon-reply icon-lg"></span>
<span class="sr-only">{str tag=reply section=artefact.comment}</span>
</button>
<button class="btn btn-default pull-left commentreplyto comment-action js-reply" id="commentreplyto{$item->id}" title="{str tag=reply section=artefact.comment}" data-replyto="{$item->id}" data-canprivatereply="{$item->canprivatereply}" data-canpublicreply="{$item->canpublicreply}">
<span class="icon icon-reply icon-lg"></span>
<span class="sr-only">{str tag=reply section=artefact.comment}</span>
</button>
{/if}
</div>
</div>
......@@ -136,6 +129,5 @@
</div>
{/if}
</div>
{if $item->indentwidth}</div>{/if}
{/foreach}
</div>
htdocs/theme/raw/plugintype/artefact/comment/templates/replyplaceholder.tpl
View file @ bdc86285
<div class="commentreplyview feedbacktable"><div class="hidden" id="comment_reply_parent" class="replyto"><h4>{str tag="replyto" section="artefact.comment"}</h4></div></div>
<div class="hidden add_feedback_form_forcepublic_message add_feedback_form_privacy_message">{str tag="forcepubliccomment" section="artefact.comment"}</div>
<div class="hidden add_feedback_form_forceprivate_message add_feedback_form_privacy_message">{str tag="forceprivatecomment" section="artefact.comment"}</div>
<div class="commentreplyview feedbacktable">
<div class="hidden replyto" id="comment_reply_parent">
<h4>{str tag="replyto" section="artefact.comment"}</h4>
</div>
</div>
<div class="hidden add_feedback_form_forcepublic_message add_feedback_form_privacy_message">
{str tag="forcepubliccomment" section="artefact.comment"}
</div>
<div class="hidden add_feedback_form_forceprivate_message add_feedback_form_privacy_message">
{str tag="forceprivatecomment" section="artefact.comment"}
</div>
htdocs/theme/raw/sass/components/_btn-group.scss
View file @ bdc86285
......@@ -4,28 +4,17 @@
.btn-group .form-as-button:first-child:not(.last) {
.btn {
@include border-right-radius(0);
border-right:0;
@include border-right-radius(0);
border-right-width: 0;
}
}
.btn-group .form-as-button ~ .form-as-button {
.btn {
@include border-left-radius(0);
@include border-left-radius(0);
}
}
// Custom for comment list
.form-as-button.delete-comment {
display: inline-block;
margin-top: -1px;
margin-left: -1px;
@include border-right-radius(0);
+ .btn {
margin-left: -1px;
}
}
.btn-group .form-as-button div.last {
display: inline-block;
margin: 0;
......@@ -38,4 +27,17 @@
}
}
// Custom for comment list
.comment-action:not(:first-child) {
margin-left: -1px;
}
.comment-action {
&.btn,
.btn {
@include border-right-radius(3px);
border-right-width: 1px !important; // Overriding standard styling above
padding-top: 3px !important; // Override standard btn padding
}
}
htdocs/theme/raw/sass/components/_list-group.scss
View file @ bdc86285
......@@ -146,7 +146,6 @@ h4.list-group-item-heading {
}
.list-group {
.list-group-item {
border-width: 1px 0;
border-radius: 0;
}
&:last-child .list-group-item:last-child{
......
htdocs/theme/raw/sass/features/_comment.scss
View file @ bdc86285
.comment-item {
@include clearfix;
.col-width-100 &,
.viewfooter &,
.modal-docked.active & {
&.list-group-item {
margin-bottom: 0;
border-top-width: 0;
}
&.list-group-item:first-child {
border-top-width: 1px;
}
.col-width-100 &,
.viewfooter &,
.modal-docked.active & {
@media (min-width: $screen-md-min) {
.comment-text {
float: left;
......@@ -51,4 +59,34 @@
border-bottom: 0;
}
}
}
// Indetation for nested comments
@for $i from 1 through 5 {
&.indent-#{$i} {
$width: 100 - percentage(($i * 2)/100);
width: $width;
margin-left: auto;
margin-right: 0;
.user-icon {
max-width: 35px;
display: block;
}
h5 {
margin-top: 3px;
}
}
}
// Nested comments
// Hide reply to comment button for 15.10
.modal-body & {
.commentreplyto {
display: none;
}
}
.commentreplyview & {
border-top-width: 1px;
width: 100%;
}
}
\ No newline at end of file
htdocs/theme/raw/sass/features/_user-pages.scss
View file @ bdc86285
......@@ -30,19 +30,6 @@
padding: 0;
}
h1,
h2,
.panel-body h3,
.feedcontent h3,
.mce-content-body,
h4,
h5,
h6,
.list-group-item-heading {
font-family: $font-family-base;
font-weight: bold;
}
h1 {
border-bottom: 0px none;
padding: 0;
......
htdocs/theme/raw/sass/layout/panel/_panel-secondary.scss
View file @ bdc86285
......@@ -10,6 +10,12 @@
> .panel-heading {
font-family: $font-family-serif;
}
&.blockinstance.panel {
background-color: transparent;
.panel-heading {
background-color: $panel-default-heading-bg;
}
}
> .panel-heading, .panel-heading-nested {
border-bottom: 2px solid $panel-default-border;
padding-left: 8px;
......
htdocs/theme/raw/templates/artefact/artefact.tpl
View file @ bdc86285
......@@ -89,21 +89,20 @@
</div>
<div class="viewfooter ptxl">
{if $feedback->count || $enablecomments}
<h4 class="title">{str tag="Comments" section="artefact.comment"}</h4>
{if $feedback->count == 0}
<hr />
{/if}
{* Do not change the id because it is used by paginator.js *}
<div id="feedbacktable" class="commentlist feedbackbase">
{$feedback->tablerows|safe}
</div>
<div class="comment-container">
{if $feedback->count || $enablecomments}
<h4 class="title">{str tag="Comments" section="artefact.comment"}</h4>
{* Do not change the id because it is used by paginator.js *}
<div id="feedbacktable" class="feedbacktable commentlist js-feedbackbase">
{$feedback->tablerows|safe}
</div>
{$feedback->pagination|safe}
{$feedback->pagination|safe}
{/if}
<div id="viewmenu" class="view-menu">
{include file="view/viewmenuartefact.tpl"}
{/if}
<div id="viewmenu" class="view-menu">
{include file="view/viewmenuartefact.tpl"}
</div>
</div>
{if $LOGGEDIN}
......
htdocs/theme/raw/templates/skin/style.tpl
View file @ bdc86285
......@@ -78,6 +78,7 @@ body > .main-content > .row {
#viewh1 {
color: {$view_text_heading_color};
font-family: {$view_heading_font_family|safe};
font-weight: bold;
}
......
htdocs/theme/raw/templates/view/view.tpl
View file @ bdc86285
......@@ -110,6 +110,7 @@
{/if}
{if $feedback->position eq 'base'}
<div class="comment-container">
{if $feedback->count || $enablecomments}
<h3 class="title">
{str tag="Comments" section="artefact.comment"}
......@@ -118,11 +119,16 @@
<hr />
{/if}
{* Do not change the id because it is used by paginator.js *}
<div id="feedbacktable" class="feedbacktable feedbackbase fullwidth">
<div id="feedbacktable" class="feedbacktable js-feedbackbase fullwidth">
{$feedback->tablerows|safe}
</div>
{$feedback->pagination|safe}
{/if}
{if $enablecomments}
{include file="view/viewmenu.tpl"}
{/if}
</div>
{/if}
{if $feedback->position eq 'blockinstance' && $enablecomments}
......@@ -145,8 +151,6 @@
</div>
</div>
</div>
{elseif $feedback->position eq 'base' && $enablecomments}
{include file="view/viewmenu.tpl"}
{/if}
{if $LOGGEDIN}
......
htdocs/theme/raw/templates/view/viewmenu.tpl
View file @ bdc86285
<div id="viewmenu" class="view-menu ptxl pbl">
<ul class="nav nav-tabs" role="tablist">
<li id="add_feedback_link" class="feedback active" role="presentation">
<a href="#comment-form" aria-controls="comment-form" role="tab" data-toggle="tab">
<span class="icon icon-lg icon-comments prm"></span>
{str tag=addcomment section=artefact.comment}
</a>
</li>
</ul>
<div id="add-comment" class="add-comment-container ptxl pbl">
<h3 id="add_feedback_heading">
<span class="icon icon-comments prm"></span>
{str tag=addcomment section=artefact.comment}
</h3>
<div class="tab-panel">
<div role="tabpanel" class="tab-pane active" id="comment-form">
{$addfeedbackform|safe}
</div>
<div class="addcommentform" id="comment-form">
{$addfeedbackform|safe}
</div>
</div>
\ No newline at end of file
htdocs/theme/raw/templates/view/viewmenuartefact.tpl
View file @ bdc86285
{if $enablecomments || $LOGGEDIN}
<div id="add-comment" class="add-comment-container ptxl pbl">
{if $enablecomments}
<ul class="nav nav-tabs" role="tablist">
<li id="add_feedback_link" class="feedback active" role="presentation">
<a href="#comment-form" aria-controls="comment-form" role="tab" data-toggle="tab">
<span class="icon icon-lg icon-comments prm"></span>
{str tag=addcomment section=artefact.comment}
</a>
</li>
</ul>
<h3 id="add_feedback_heading">
<span class="icon icon-comments prm"></span>
{str tag=addcomment section=artefact.comment}
</h3>
{/if}
<div class="tab-panel">
<div role="tabpanel" class="tab-pane active" id="comment-form">
{$addfeedbackform|safe}
</div>
<div class="addcommentform" id="comment-form">
{$addfeedbackform|safe}
</div>
{/if}
</div>
{/if}
\ No newline at end of file
test/behat/features/artefact/comment/add_delete_comments.feature
View file @ bdc86285
......@@ -13,11 +13,9 @@ Background:
Scenario: Public comment by page owner, public reply by third party
Given I log in as "pageowner" with password "password"
And I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "Comment 1" in WYSIWYG editor "add_feedback_form_message_ifr"
And I wait "1" seconds
And I press "Comment"
And I follow "Add comment"
And I fill in "Comment 2" in WYSIWYG editor "add_feedback_form_message_ifr"
And I press "Comment"
And I delete the "Comment 2" row
......@@ -35,7 +33,6 @@ Scenario: Comments update the page's mtime
# Public comment updates page last updated
And I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "Public comment" in WYSIWYG editor "add_feedback_form_message_ifr"
And I wait "1" seconds
And I press "Comment"
......@@ -45,7 +42,6 @@ Scenario: Comments update the page's mtime
# Private comment updates page last updated
And I go to portfolio page "page2"
And I follow "Add comment"
And I fill in "Private comment" in WYSIWYG editor "add_feedback_form_message_ifr"
And I uncheck "Make public"
And I wait "1" seconds
......
test/behat/features/artefact/comment/threaded_comments.feature
View file @ bdc86285
......@@ -23,7 +23,6 @@ Background:
Scenario: Public comment by page owner, public reply by third party
Given I log in as "pageowner" with password "password"
And I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "Public comment by pageowner" in WYSIWYG editor "add_feedback_form_message_ifr"
And I check "Make public"
And I press "Comment"
......@@ -41,7 +40,6 @@ Scenario: Public comment by page owner, public reply by third party
Scenario: Public comment by non-owner, owner can private reply, another non-owner cannot private reply
Given I log in as "pagecommenter" with password "password"
And I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "Public comment by pagecommenter" in WYSIWYG editor "add_feedback_form_message_ifr"
And I check "Make public"
And I press "Comment"
......@@ -67,7 +65,6 @@ Scenario: Public comment by non-owner, owner can private reply, another non-owne
Scenario: Private comment by commenter, private reply by page owner, private counter-reply by page commenter
Given I log in as "pagecommenter" with password "password"
And I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "Private comment by pagecommenter" in WYSIWYG editor "add_feedback_form_message_ifr"
And I uncheck "Make public"
And I press "Comment"
......@@ -100,7 +97,6 @@ Scenario: Private comment by commenter, private reply by page owner, private cou
Scenario: No private replies to anonymous comments
Given I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "Name" with "Anonymous User"
# No WYSIWYG editor for anonymous users
And I fill in "Message" with "Public comment by anonymous user"
......@@ -119,7 +115,6 @@ Scenario: No private replies to anonymous comments
Scenario: No replies to deleted comments
Given I log in as "pageowner" with password "password"
And I go to portfolio page "page1"
And I follow "Add comment"
And I fill in "I will delete this comment" in WYSIWYG editor "add_feedback_form_message_ifr"
And I check "Make public"
When I press "Comment"
......
test/behat/features/view/sharedwithme.feature
View file @ bdc86285
......@@ -26,19 +26,16 @@ Scenario: Testing that views & collections are collated properly
Given I log in as "userA" with password "Password1"
And I choose "Pages" in "Portfolio"
And I follow "P1A"
And I follow "Add comment"
And I fill in "I am on P1A" in WYSIWYG editor "add_feedback_form_message_ifr"
And I press "Comment"
And I choose "Pages" in "Portfolio"
And I follow "P1B"
And I follow "Add comment"
And I fill in "I am on P1B" in WYSIWYG editor "add_feedback_form_message_ifr"
And I press "Comment"
And I choose "Pages" in "Portfolio"
And I follow "P2"
And I follow "Add comment"
And I fill in "I am on P2" in WYSIWYG editor "add_feedback_form_message_ifr"
And I press "Comment"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment