AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve comments design

Browse Source
This commit is contained in:
Frederic Guillot
2016-03-19 11:56:28 -04:00
parent 9d4ba1471d
commit 344f585a32
8 changed files with 116 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

@@ -3,6 +3,7 @@ Version 1.0.27 (unreleased)
Improvements: Improvements:
* Improve comments design
* Added letter avatar provider * Added letter avatar provider
* Added pluggable Avatar providers * Added pluggable Avatar providers
* Improve task summary sections * Improve task summary sections

1
app/Controller/BoardTooltip.php
View File

@@ -77,6 +77,7 @@ class BoardTooltip extends Base
$task = $this->getTask(); $task = $this->getTask();
$this->response->html($this->template->render('board/tooltip_comments', array( $this->response->html($this->template->render('board/tooltip_comments', array(
'task' => $task,
'comments' => $this->comment->getAll($task['id'], $this->userSession->getCommentSorting()) 'comments' => $this->comment->getAll($task['id'], $this->userSession->getCommentSorting())
))); )));
} }

21
app/Template/board/tooltip_comments.php
View File

@@ -1,16 +1,9 @@
<section> <div class="comment-tooltip">
<?php foreach ($comments as $comment): ?> <?php foreach ($comments as $comment): ?>
<p class="comment-title"> <?= $this->render('comment/show', array(
<?php if (! empty($comment['username'])): ?> 'comment' => $comment,
<span class="comment-username"><?= $this->text->e($comment['name'] ?: $comment['username']) ?></span> @ 'task' => $task,
<?php endif ?> 'hide_actions' => true,
<span class="comment-date"><?= $this->dt->datetime($comment['date_creation']) ?></span> )) ?>
</p>
<div class="comment-inner">
<div class="markdown">
<?= $this->text->markdown($comment['comment']) ?>
</div>
</div>
<?php endforeach ?> <?php endforeach ?>
</section> </div>

6
app/Template/comment/remove.php
View File

@@ -7,7 +7,11 @@
<?= t('Do you really want to remove this comment?') ?> <?= t('Do you really want to remove this comment?') ?>
</p> </p>
<?= $this->render('comment/show', array('comment' => $comment, 'task' => $task, 'preview' => true)) ?> <?= $this->render('comment/show', array(
'comment' => $comment,
'task' => $task,
'hide_actions' => true
)) ?>
<div class="form-actions"> <div class="form-actions">
<?= $this->url->link(t('Yes'), 'comment', 'remove', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'comment_id' => $comment['id']), true, 'btn btn-red') ?> <?= $this->url->link(t('Yes'), 'comment', 'remove', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'comment_id' => $comment['id']), true, 'btn btn-red') ?>

48
app/Template/comment/show.php
View File

@@ -1,30 +1,16 @@
<div class="comment <?= isset($preview) ? 'comment-preview' : '' ?>" id="comment-<?= $comment['id'] ?>"> <div class="comment <?= isset($preview) ? 'comment-preview' : '' ?>" id="comment-<?= $comment['id'] ?>">
<p class="comment-title"> <?= $this->user->avatar($comment['user_id'], $comment['username'], $comment['name'], $comment['email']) ?>
<?= $this->user->avatar($comment['user_id'], $comment['username'], $comment['name'], $comment['email']) ?>
<div class="comment-title">
<?php if (! empty($comment['username'])): ?> <?php if (! empty($comment['username'])): ?>
<span class="comment-username"><?= $this->text->e($comment['name'] ?: $comment['username']) ?></span> @ <span class="comment-username"><?= $this->text->e($comment['name'] ?: $comment['username']) ?></span>
<?php endif ?> <?php endif ?>
<span class="comment-date"><?= $this->dt->datetime($comment['date_creation']) ?></span> <span class="comment-date"><?= $this->dt->datetime($comment['date_creation']) ?></span>
</p> </div>
<div class="comment-inner">
<?php if (! isset($preview)): ?>
<ul class="comment-actions">
<li><a href="#comment-<?= $comment['id'] ?>"><?= t('link') ?></a></li>
<?php if ($editable && ($this->user->isAdmin() || $this->user->isCurrentUser($comment['user_id']))): ?>
<li>
<?= $this->url->link(t('remove'), 'comment', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'comment_id' => $comment['id']), false, 'popover') ?>
</li>
<li>
<?= $this->url->link(t('edit'), 'comment', 'edit', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'comment_id' => $comment['id']), false, 'popover') ?>
</li>
<?php endif ?>
</ul>
<?php endif ?>
<div class="comment-content">
<div class="markdown"> <div class="markdown">
<?php if (isset($is_public) && $is_public): ?> <?php if (isset($is_public) && $is_public): ?>
<?= $this->text->markdown( <?= $this->text->markdown(
@@ -50,6 +36,26 @@
) ?> ) ?>
<?php endif ?> <?php endif ?>
</div> </div>
</div> </div>
</div>
<?php if (! isset($hide_actions)): ?>
<div class="comment-actions">
<ul>
<li>
<i class="fa fa-link fa-fw"></i>
<a href="#comment-<?= $comment['id'] ?>"><?= t('link') ?></a>
</li>
<?php if ($editable && ($this->user->isAdmin() || $this->user->isCurrentUser($comment['user_id']))): ?>
<li>
<i class="fa fa-remove fa-fw"></i>
<?= $this->url->link(t('remove'), 'comment', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'comment_id' => $comment['id']), false, 'popover') ?>
</li>
<li>
<i class="fa fa-edit fa-fw"></i>
<?= $this->url->link(t('edit'), 'comment', 'edit', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'comment_id' => $comment['id']), false, 'popover') ?>
</li>
<?php endif ?>
</ul>
</div>
<?php endif ?>
</div>

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/print.css
View File

File diff suppressed because one or more lines are too long

149
assets/css/src/comment.css
View File

@@ -1,79 +1,4 @@
/* comments */ /* sorting */
.comment {
margin-bottom: 20px;
}
.comment:hover {
background: #F7F8E0;
}
.comment-inner {
border-left: 4px solid #333;
padding-bottom: 10px;
padding-left: 20px;
margin-left: 20px;
margin-right: 10px;
}
.comment-preview {
border: 2px solid #000;
border-radius: 3px;
padding: 10px;
}
.comment-preview .comment-inner {
border: none;
padding: 0;
margin: 0;
}
.comment-title {
margin-bottom: 8px;
padding-bottom: 3px;
border-bottom: 1px dotted #aaa;
}
.ui-tooltip .comment-title {
font-size: 80%;
}
.ui-tooltip .comment-inner {
padding-bottom: 0;
}
.comment-actions {
font-size: 0.8em;
padding: 0;
text-align: right;
}
.comment-actions li {
display: inline;
padding-left: 5px;
padding-right: 5px;
border-right: 1px dotted #000;
}
.comment-actions li:last-child {
padding-right: 0;
border: 0;
}
.comment-username {
font-weight: bold;
}
.comment-textarea {
height: 200px;
width: 80%;
max-width: 800px;
}
#comments .comment-textarea {
height: 80px;
width: 500px;
}
.comment-sorting { .comment-sorting {
text-align: right; text-align: right;
font-size: 0.5em; font-size: 0.5em;
@@ -88,3 +13,75 @@
.comment-sorting a:hover { .comment-sorting a:hover {
color: #aaa; color: #aaa;
} }
/* comment container */
.comment {
padding: 5px;
margin-bottom: 15px;
}
.comment:hover {
background: #fafafa;
}
/* comment title */
.comment-title {
border-bottom: 1px dotted #eee;
margin-left: 55px;
margin-bottom: 10px;
}
.comment-username {
font-weight: bold;
font-size: 1.1em;
}
.comment-date {
color: #999;
font-size: 0.7em;
font-weight: 200;
}
/* comment actions */
.comment-actions {
font-size: 0.8em;
margin-left: 55px;
margin-top: 8px;
}
.comment-actions li {
display: inline;
}
.comment-actions a {
color: #999;
text-decoration: none;
}
.comment-actions a:focus,
.comment-actions a:hover {
color: #333;
text-decoration: underline;
}
/* comment content */
.comment-content {
margin-left: 55px;
}
/* comment textarea */
.comment-textarea {
height: 200px;
width: 80%;
max-width: 800px;
}
#comments .comment-textarea {
height: 80px;
width: 500px;
}
/* comment board tooltip */
.comment-tooltip {
min-width: 550px;
}