Reduce style variety for comments

refs #5543
Icinga · Oct 27, 2015 · ec9e615 · ec9e615
1 parent f951e29
commit ec9e615
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 64 deletions.
diff --git a/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml b/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
@@ -1,4 +1,4 @@
-<span class="comment-header">
+<div class="comment-header">
 <?php if ($comment->objecttype === 'service'): ?>
     <?= $this->icon('service', $this->translate('Service')) ?> <?= $this->qlink(
         $comment->host_display_name . ': ' . $comment->service_display_name,
@@ -28,27 +28,31 @@
         )
     ) ?>
 <?php endif ?>
-    <?= $this->translate('by') ?>
-    <?= $this->escape($comment->author) ?>
-    <?= $this->timeAgo($comment->timestamp) ?>
-    <span class="pull-right" data-base-target="_self">
-        <?= $comment->persistent ? $this->icon('attach', 'This comment is persistent.') : '' ?>
-        <?= $comment->expiration ? $this->icon('clock', sprintf(
-            $this->translate('This comment expires %s.'),
-            $this->timeUntil($comment->expiration)
-        )) : '' ?>
-    <?php if (isset($delCommentForm)) {
-        $delCommentForm = clone $delCommentForm;
-        $delCommentForm->populate(
-            array(
-                'comment_id'            => $comment->id,
-                'comment_is_service'    => isset($comment->service_description)
-            )
-        );
-        echo $delCommentForm;
-    } ?>
+    <span class="comment-meta">
+        <?= $this->translate('by') ?>
+        <?= $this->escape($comment->author) ?>
+        <?= $this->timeAgo($comment->timestamp) ?>
+        <span class="meta-icons" data-base-target="_self">
+            <?= $comment->persistent ? $this->icon('attach', 'This comment is persistent.') : '' ?>
+            <?= $comment->expiration ? $this->icon('clock', sprintf(
+                $this->translate('This comment expires %s.'),
+                $this->timeUntil($comment->expiration)
+            )) : '' ?>
+        <?php if (isset($delCommentForm)) {
+            $deleteButton = clone $delCommentForm;
+            /** @var \Icinga\Module\Monitoring\Forms\Command\Object\DeleteCommentCommandForm $deleteButton */
+            $deleteButton->setAttrib('class', $deleteButton->getAttrib('class') . ' remove-comment');
+            $deleteButton->populate(
+                array(
+                    'comment_id'            => $comment->id,
+                    'comment_is_service'    => isset($comment->service_description)
+                )
+            );
+            echo $deleteButton;
+        } ?>
+        </span>
     </span>
-</span>
+</div>
 <p class="comment-text">
     <?= $this->escape($comment->comment) ?>
 </p>
diff --git a/modules/monitoring/application/views/scripts/partials/comment/comment-header.phtml b/modules/monitoring/application/views/scripts/partials/comment/comment-header.phtml
@@ -1,6 +1,6 @@
 <table>
   <tr>
-    <td class="comment-col">
+    <td class="icon-col">
         <?= $this->render('partials/comment/comment-description.phtml') ?>
     </td>
     <td>

diff --git a/modules/monitoring/application/views/scripts/partials/comment/comments-header.phtml b/modules/monitoring/application/views/scripts/partials/comment/comments-header.phtml
@@ -7,7 +7,7 @@
         }
     ?>
     <tr>
-        <td class="comment-col">
+        <td class="icon-col">
             <?= $this->partial('partials/comment/comment-description.phtml', array('comment' => $comment)) ?>
         </td>
         <td>

diff --git a/modules/monitoring/application/views/scripts/show/components/comments.phtml b/modules/monitoring/application/views/scripts/show/components/comments.phtml
@@ -36,37 +36,37 @@ if (empty($object->comments) && ! $addLink) {
     <th><?php
     echo $this->translate('Comments');
     if (! empty($object->comments) && $addLink) {
-        echo '<br />' . $addLink;
+        echo '<br>' . $addLink;
     }
     ?></th>
     <td data-base-target="_self">
     <?php if (empty($object->comments)):
         echo $addLink;
     else: ?>
-        <dl class="feed-list">
-        <?php foreach ($object->comments as $comment):
-            // Form is unset if the current user lacks the respective permission
-            if (isset($delCommentForm)) {
-                $deleteButton = clone($delCommentForm);
-                /** @var \Icinga\Module\Monitoring\Forms\Command\Object\DeleteCommentCommandForm $deleteButton */
-                $deleteButton->setAttrib('class', $deleteButton->getAttrib('class') . ' pull-right');
-                $deleteButton->populate(
-                    array(
-                        'comment_id'            => $comment->id,
-                        'comment_is_service'    => isset($comment->service_description)
-                    )
-                );
-            } else {
-                $deleteButton = '';
-            }
-            ?>
-            <dt class="feed-author clearfix">
+        <dl class="comment-list">
+        <?php foreach ($object->comments as $comment): ?>
+            <dt class="comment-header">
                 <?= $this->escape($comment->author) ?>
-                <span class="text-small"><?= $this->translate('commented') ?></span>
-                <?= $this->timeAgo($comment->timestamp) ?>
-            <?php if ($deleteButton): ?>
-                    <?= $deleteButton ?>
-            <?php endif ?>
+                <span class="comment-meta">
+                    <?= $this->translate('commented') ?>
+                    <?= $this->timeAgo($comment->timestamp) ?>
+                <?php if (isset($delCommentForm)): // Form is unset if the current user lacks the respective permission ?>
+                    <span class="meta-icons">
+                    <?php
+                        $deleteButton = clone($delCommentForm);
+                        /** @var \Icinga\Module\Monitoring\Forms\Command\Object\DeleteCommentCommandForm $deleteButton */
+                        $deleteButton->setAttrib('class', $deleteButton->getAttrib('class') . ' remove-comment');
+                        $deleteButton->populate(
+                            array(
+                                'comment_id'            => $comment->id,
+                                'comment_is_service'    => isset($comment->service_description)
+                            )
+                        );
+                        echo $deleteButton;
+                    ?>
+                    </span>
+                <?php endif ?>
+                </span>
             </dt>
             <dd class="comment-text">
                 <?= str_replace(array('\r\n', '\n'), '<br>', $this->createTicketLinks($comment->comment)) ?>

diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
@@ -16,11 +16,6 @@
   }
 }
 
-.comment-text {
-  .text-small();
-  font-family: @font-family-fixed;
-}
-
 .content-centered {
   .text-center();
   margin: 0 auto;
@@ -91,33 +86,50 @@ a:hover > .icon-cancel {
   }
 }
 
-dl.feed-list {
-  dd {
-    // Reset default margin
-    margin: 0;
-  }
-
-  dt {
+.comment-list {
+  > .comment-header {
     border-bottom: 1px solid @gray-lighter;
     margin-top: @vertical-padding;
 
-    .icon-cancel {
-      display: none;
-    }
-
     &:hover {
       background-color: @gray-lightest;
-      .icon-cancel {
+
+      > .comment-meta > .meta-icons > .remove-comment {
         display: block;
       }
     }
 
     &:first-child {
       margin-top: 0;
     }
+
+    > .comment-meta > .meta-icons > .remove-comment {
+      display: none;
+    }
   }
 }
 
+.comment-header {
+  .clearfix();
+}
+
+.comment-meta {
+  color: @text-color-light;
+  font-size: @font-size-small;
+  vertical-align: middle;
+
+  > .meta-icons {
+    float: right;
+    margin-top: 0.2em;
+  }
+}
+
+.comment-text {
+  // Reset margin
+  margin: 0;
+  margin-top: @vertical-padding / 2;
+}
+
 dl.name-value-list {
   dd {
     // Reset default margin