Skip to content

Commit

Permalink
feat(comments): the comments form is collapsed if there are comments
Browse files Browse the repository at this point in the history
  • Loading branch information
jdalsem committed Apr 19, 2018
1 parent 4cdaac5 commit c168a45
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 50 deletions.
78 changes: 45 additions & 33 deletions views/default/elements/components/comments.css
Expand Up @@ -6,25 +6,55 @@
position: relative; position: relative;
border-top: 1px solid $(border-color-soft); border-top: 1px solid $(border-color-soft);
margin-top: 2rem; margin-top: 2rem;

> li {
border-color: $(border-color-soft);
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 1rem;

&:last-child {
border-bottom: 1px solid $(border-color-soft);
}

/* Comment highlighting that automatically fades away */
&.elgg-state-highlight {
animation: comment-highlight 5s;
}
}

/* Comments triangle */
&:before {
content: "\25b2";
color: #ffffff;
position: absolute;
text-shadow: 0 -2px 0 $(border-color-soft);
font-size: 1rem;
top: -1rem;
left: 2rem;
margin-right: 1.5rem;
line-height: 1rem;
padding-top: 3px;
pointer-events: none;
}

&.comments-list {
margin-top: 1rem;
}
} }


.elgg-comments .elgg-list > li, .elgg-module-comments {
.elgg-river-comments > li {
border-color: $(border-color-soft);
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 1rem;
}

.elgg-comments > form {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem;
} }


/* Comment highlighting that automatically fades away */ #comments {
.elgg-comments .elgg-state-highlight, .elgg-form-comment-save {
.elgg-river-comments .elgg-state-highlight { margin-top: 1rem;
animation: comment-highlight 5s;
.elgg-field-label {
display: none;
}
}
} }


/* Standard syntax */ /* Standard syntax */
Expand All @@ -36,21 +66,3 @@
background: white; background: white;
} }
} }

/* **************************************
Comments triangle
************************************** */
.elgg-comments .elgg-list:before,
.elgg-river-comments:before {
content: "\25b2";
color: #ffffff;
position: absolute;
text-shadow: 0 -2px 0 $(border-color-soft);
font-size: 1rem;
top: -1rem;
left: 2rem;
margin-right: 1.5rem;
line-height: 1rem;
padding-top: 3px;
pointer-events: none;
}
13 changes: 5 additions & 8 deletions views/default/forms/comment/save.php
Expand Up @@ -23,31 +23,28 @@


$inline = elgg_extract('inline', $vars, false); $inline = elgg_extract('inline', $vars, false);


$entity_guid_input = '';
if ($entity) { if ($entity) {
$entity_guid_input = elgg_view('input/hidden', [ echo elgg_view('input/hidden', [
'name' => 'entity_guid', 'name' => 'entity_guid',
'value' => $entity->guid, 'value' => $entity->guid,
]); ]);
} }


$comment_text = ''; $comment_text = '';
$comment_guid_input = ''; $footer = '';
if ($comment && $comment->canEdit()) { if ($comment && $comment->canEdit()) {
$entity_guid_input = elgg_view('input/hidden', [ echo elgg_view('input/hidden', [
'name' => 'comment_guid', 'name' => 'comment_guid',
'value' => $comment->guid, 'value' => $comment->guid,
]); ]);
$comment_label = elgg_echo("generic_comments:edit"); $comment_label = elgg_echo("generic_comments:edit");
$submit_input = elgg_view('input/submit', ['value' => elgg_echo('save')]); $footer .= elgg_view('input/submit', ['value' => elgg_echo('save')]);
$comment_text = $comment->description; $comment_text = $comment->description;
} else { } else {
$comment_label = elgg_echo("generic_comments:add"); $comment_label = elgg_echo("generic_comments:add");
$submit_input = elgg_view('input/submit', ['value' => elgg_echo('comment')]); $footer .= elgg_view('input/submit', ['value' => elgg_echo('comment')]);
} }


$footer = $entity_guid_input . $comment_guid_input . $submit_input;

if ($inline) { if ($inline) {
$form = elgg_view('input/text', [ $form = elgg_view('input/text', [
'name' => 'generic_comment', 'name' => 'generic_comment',
Expand Down
40 changes: 31 additions & 9 deletions views/default/page/elements/comments.php
Expand Up @@ -26,16 +26,11 @@
$limit = elgg_comments_per_page($entity); $limit = elgg_comments_per_page($entity);
} }


$attr = [ $module_vars = [
'id' => elgg_extract('id', $vars, 'comments'), 'id' => elgg_extract('id', $vars, 'comments'),
'class' => elgg_extract_class($vars, 'elgg-comments'), 'class' => elgg_extract_class($vars, 'elgg-comments'),
]; ];


$content = '';
if ($show_add_form && $entity->canComment()) {
$content .= elgg_view_form('comment/save', [], $vars);
}

$options = [ $options = [
'type' => 'object', 'type' => 'object',
'subtype' => 'comment', 'subtype' => 'comment',
Expand All @@ -44,8 +39,9 @@
'limit' => $limit, 'limit' => $limit,
'preload_owners' => true, 'preload_owners' => true,
'distinct' => false, 'distinct' => false,
'url_fragment' => $attr['id'], 'url_fragment' => $module_vars['id'],
'order_by' => [new OrderByClause('e.guid', $latest_first ? 'DESC' : 'ASC')], 'order_by' => [new OrderByClause('e.guid', $latest_first ? 'DESC' : 'ASC')],
'list_class' => 'comments-list',
]; ];


$show_guid = (int) elgg_extract('show_guid', $vars); $show_guid = (int) elgg_extract('show_guid', $vars);
Expand All @@ -66,10 +62,36 @@
$options['offset'] = (int) floor($count / $limit) * $limit; $options['offset'] = (int) floor($count / $limit) * $limit;
} }


$content .= elgg_list_entities($options); $comments_list = elgg_list_entities($options);

$content = '';
if ($show_add_form && $entity->canComment()) {
$form_vars = [];
if ($comments_list) {
$form_vars['class'] = 'hidden';

$module_vars['menu'] = elgg_view_menu('comments', [
'items' => [
[
'name' => 'add',
'text' => elgg_echo('generic_comments:add'),
'href' => false,
'icon' => 'plus',
'class' => ['elgg-button', 'elgg-button-action'],
'rel' => 'toggle',
'data-toggle-selector' => '.elgg-form-comment-save',
],
],
]);
}

$content .= elgg_view_form('comment/save', $form_vars, $vars);
}

$content .= $comments_list;


if (empty($content)) { if (empty($content)) {
return; return;
} }


echo elgg_format_element('div', $attr, $content); echo elgg_view_module('comments', elgg_echo('comments'), $content, $module_vars);

0 comments on commit c168a45

Please sign in to comment.