Styling: re-organize and style comments

This commit is contained in:
Thomas Gelf 2015-06-03 14:56:23 +02:00
parent d4a9f4fd98
commit 6e1ba30acc
3 changed files with 168 additions and 63 deletions

View File

@ -1,62 +1,90 @@
<tr>
<th><?= $this->translate('Comments'); ?></th>
<td>
<?php if ($this->hasPermission('monitoring/command/comment/add')) {
/** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
if ($object->getType() === $object::TYPE_HOST) {
echo $this->qlink(
$this->translate('Add comment'),
'monitoring/host/add-comment',
array('host' => $object->getName()),
array(
'icon' => 'comment',
'data-base-target' => '_self',
'title' => $this->translate('Add a new comment to this host')
)
);
} else {
echo $this->qlink(
$this->translate('Add comment'),
'monitoring/service/add-comment',
array('host' => $object->getHost()->getName(), 'service' => $object->getName()),
array(
'icon' => 'comment',
'data-base-target' => '_self',
'title' => $this->translate('Add a new comment to this service')
)
);
}
} else {
echo '&#45;';
} ?>
</td>
</tr>
<?php
foreach ($object->comments as $comment) {
// Ticket hook sample
$commentText = $this->tickets ? preg_replace_callback(
$this->tickets->getPattern(),
array($this->tickets, 'createLink'),
$this->escape($comment->comment)
) : $this->escape($comment->comment);
$addLink = '';
?>
<tr>
<th><?= $this->escape($comment->author); ?> (<?= $this->timeAgo($comment->timestamp); ?>)</th>
<td data-base-target="_self">
<?php if (isset($delCommentForm)) { // Form is unset if the current user lacks the respective permission
$delCommentForm = clone $delCommentForm;
$delCommentForm->populate(
array(
'comment_id' => $comment->id,
'comment_is_service' => isset($comment->service_description)
)
);
echo $delCommentForm;
} ?>
<span class="sr-only">(<?= $this->translate('Comment'); ?>): </span><?= str_replace(array('\r\n', '\n'), '<br>', $commentText); ?>
</td>
</tr>
<?php } // endforeach ?>
if ($this->hasPermission('monitoring/command/comment/add')) {
/** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
if ($object->getType() === $object::TYPE_HOST) {
$addLink = $this->qlink(
$this->translate('Add comment'),
'monitoring/host/add-comment',
array('host' => $object->getName()),
array(
'icon' => 'comment',
'data-base-target' => '_self',
'title' => $this->translate('Add a new comment to this host')
)
);
} else {
$addLink = $this->qlink(
$this->translate('Add comment'),
'monitoring/service/add-comment',
array('host' => $object->getHost()->getName(), 'service' => $object->getName()),
array(
'icon' => 'comment',
'data-base-target' => '_self',
'title' => $this->translate('Add a new comment to this service')
)
);
}
}
if (empty($object->comments) && ! $addLink) {
return;
}
?>
<tr>
<th><?php
echo $this->translate('Comments');
if (! empty($object->comments) && $addLink) {
echo '<br />' . $addLink;
}
?></th>
<td data-base-target="_self">
<?php if (empty($object->comments)): ?>
<?= $addLink ?>
<?php else: ?>
<ul class="inline-comments">
<?php foreach ($object->comments as $comment): ?>
<?php
// Ticket hook sample
$commentText = $this->tickets ? preg_replace_callback(
$this->tickets->getPattern(),
array($this->tickets, 'createLink'),
$this->escape($comment->comment)
) : $this->escape($comment->comment);
// Form is unset if the current user lacks the respective permission
if (isset($delCommentForm)) {
$deleteButton = clone($delCommentForm);
$deleteButton->populate(
array(
'comment_id' => $comment->id,
'comment_is_service' => isset($comment->service_description)
)
);
} else {
$deleteButton = '';
}
?>
<li class="comment-item">
<h4>
<span class="author"><?= $this->escape($comment->author) ?></span>
<?= $this->timeAgo($comment->timestamp) ?>
<?= $deleteButton ?>
</h4>
<p><span class="sr-only">(<?= $this->translate('Comment'); ?>): </span><?= str_replace(array('\r\n', '\n'), '<br>', $commentText) ?></p>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</td>
</tr>

View File

@ -13,9 +13,8 @@ if (! empty($object->contacts)) {
}
printf(
"<tr><th>%s</th><td>%s %s</td></tr>\n",
"<tr><th>%s</th><td class=\"go-ahead\">%s</td></tr>\n",
$this->translate('Contacts'),
$this->icon('user'),
implode(', ', $list)
);
@ -33,9 +32,8 @@ if (! empty($object->contactgroups)) {
}
printf(
"<tr><th>%s</th><td>%s %s</td></tr>\n",
"<tr><th>%s</th><td class=\"go-ahead\">%s</td></tr>\n",
$this->translate('Contactgroups'),
$this->icon('users'),
implode(', ', $list)
);

View File

@ -189,6 +189,33 @@ table.avp form.object-features div.header h4 {
margin: 0;
}
table.avp {
th {
font-weight: normal;
font-size: 0.9em;
padding-top: 0.2em;
padding-bottom: 0.3em;
}
td {
color: #666;
padding-bottom: 0.3em;
th, td {
padding: 0;
}
}
a, button.link-like {
color: @colorPetrol;
}
.go-ahead {
a, button.link-like {
color: #222;
}
}
}
table.avp .customvar ul {
list-style-type: none;
margin: 0;
@ -242,3 +269,55 @@ td.state {
text-transform: capitalize;
}
}
.inline-comments {
padding: 0;
margin: 0;
.time-ago {
font-style: italic;
color: #919191;
}
li {
list-style-type: none;
margin-bottom: 8px;
}
h4 {
border-bottom: 1px solid gray;
font-weight: normal;
font-size: inherit;
color: inherit;
margin: 0;
}
h4 .author {
font-weight: bold;
}
h4 form {
display: none;
}
h4 form {
float: right;
}
li:hover h4 {
background: #F9F9F9;
position: relative;
form {
display: inline;
}
}
p {
margin: 0;
a {
color: #222;
}
}
}