Styling: re-organize and style comments

modules/monitoring/application/views/scripts/show/components/comments.phtml

@@ -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) {
+$addLink = '';
-    // Ticket hook sample
-    $commentText = $this->tickets ? preg_replace_callback(
-        $this->tickets->getPattern(),
-        array($this->tickets, 'createLink'),
-        $this->escape($comment->comment)
-    ) : $this->escape($comment->comment);
 
-    ?>
+if ($this->hasPermission('monitoring/command/comment/add')) {
-    <tr>
+    /** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
-        <th><?= $this->escape($comment->author); ?> (<?= $this->timeAgo($comment->timestamp); ?>)</th>
+    if ($object->getType() === $object::TYPE_HOST) {
-        <td data-base-target="_self">
+        $addLink = $this->qlink(
-            <?php if (isset($delCommentForm)) { // Form is unset if the current user lacks the respective permission
+            $this->translate('Add comment'),
-                $delCommentForm = clone $delCommentForm;
+            'monitoring/host/add-comment',
-                $delCommentForm->populate(
+            array('host' => $object->getName()),
-                    array(
+            array(
-                        'comment_id' => $comment->id,
+                'icon'              => 'comment',
-                        'comment_is_service' => isset($comment->service_description)
+                'data-base-target'  => '_self',
-                    )
+                'title'             => $this->translate('Add a new comment to this host')
-                );
+            )
-                echo $delCommentForm;
+        );
-            } ?>
+    } else {
-            <span class="sr-only">(<?= $this->translate('Comment'); ?>): </span><?= str_replace(array('\r\n', '\n'), '<br>', $commentText); ?>
+        $addLink = $this->qlink(
-        </td>
+            $this->translate('Add comment'),
-    </tr>
+            'monitoring/service/add-comment',
-<?php } // endforeach ?>
+            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>

modules/monitoring/application/views/scripts/show/components/contacts.phtml

@@ -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)
     );
 

modules/monitoring/public/css/module.less

@@ -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;
+        }
+    }
+}