Merge pull request #4548 from Icinga/fix/compress-comment-detail

Compress comment detail in Hosts detail and Comments list.

library/Icinga/Web/View/helpers/string.php

@@ -23,3 +23,14 @@ $this->addHelperFunction('markdown', function ($content, $containerAttribs = nul
 
     return '<section' . $this->propertiesToString($containerAttribs) . '>' . Markdown::text($content) . '</section>';
 });
+
+$this->addHelperFunction('markdownLine', function ($content, $containerAttribs = null) {
+    if (! isset($containerAttribs['class'])) {
+        $containerAttribs['class'] = 'markdown inline';
+    } else {
+        $containerAttribs['class'] .= ' markdown inline';
+    }
+
+    return '<section' . $this->propertiesToString($containerAttribs) . '>' .
+        Markdown::line($content) . '</section>';
+});

modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml

@@ -79,4 +79,4 @@
     } ?>
     </span>
 </div>
-<?= $this->nl2br($this->markdown($comment->comment, isset($textId) ? ['id' => $textId] : null)) ?>
+<?= $this->nl2br($this->markdownLine($comment->comment, isset($textId) ? ['id' => $textId,  'class' => 'caption'] : [ 'class' => 'caption'])) ?>

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

@@ -39,13 +39,14 @@ if (empty($object->comments) && ! $addLink) {
         echo '<br>' . $addLink;
     }
     ?></th>
-    <td data-base-target="_self">
+    <td data-base-target="_next">
     <?php if (empty($object->comments)):
         echo $addLink;
     else: ?>
         <dl class="comment-list">
         <?php foreach ($object->comments as $comment): ?>
             <dt>
+                <a href="<?=  $this->href('monitoring/comment/show', array('comment_id' => $comment->id)) ?>">
                 <?= $this->escape($comment->author) ?>
                 <span class="comment-time">
                     <?= $this->translate('commented') ?>
@@ -73,9 +74,10 @@ if (empty($object->comments) && ! $addLink) {
                     );
                     echo $deleteButton;
                 } ?>
+                </a>
             </dt>
             <dd>
-                <?= $this->nl2br($this->createTicketLinks($this->markdown($comment->comment))) ?>
+                <?= $this->nl2br($this->createTicketLinks($this->markdownLine($comment->comment, [ 'class' => 'caption']))) ?>
             </dd>
         <?php endforeach ?>
         </dl>

modules/monitoring/public/css/tables.less

@@ -28,6 +28,19 @@
   float: right;
 }
 
+.caption {
+  height: 3em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  img {
+    max-height: 1em;
+  }
+}
+
 // Type information for backends in the monitoring config
 .config-label-meta {
   font-size: @font-size-small;

public/css/icinga/main.less

@@ -46,6 +46,49 @@
   > *:last-child {
     margin-bottom: 0;
   }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  a {
+    border-bottom: 1px @text-color-light dotted;
+
+    &:hover, &:focus {
+      border-bottom: 1px @text-color solid;
+      text-decoration: none;
+    }
+
+    img {
+      max-width: 32em;
+    }
+
+    &.with-thumbnail {
+      img {
+        padding: 1px;
+      }
+
+      &:hover, &:focus {
+        img {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+
+    th {
+      text-align: left;
+      background-color: @gray-lighter;
+    }
+
+    &, th, td {
+      border: 1px solid @gray-light;
+    }
+  }
 }
 
 .no-wrap {