From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Fri, 30 Nov 2018 20:53:03 +0000 (-0500)
Subject: Bug 1511158 - Enhance comment action button style
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1e24d1b766aa9f7c113c1e0a10e7231030a4e064;p=thirdparty%2Fbugzilla.git

Bug 1511158 - Enhance comment action button style
---

diff --git a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
index 05e8833f1..03aa91639 100644
--- a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
@@ -123,7 +123,7 @@
           [% Hook.process('user', 'bug/comments.html.tmpl') %]
         </td>
 
-        <td class="comment-actions">
+        <td rowspan="2" class="comment-actions"><div role="group">
           [% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %]
             [% IF comment.is_private %]
               <div class="comment-private edit-hide bz_private">
@@ -158,11 +158,11 @@
                                   "expand_label": "Expanded", "expand_tooltip": "Expanded this comment" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
-        </td>
+        </div></td>
       </tr>
 
       <tr id="cr-[% comment.count FILTER none %]" [%= IF comment.collapsed %]style="display:none"[% END %]>
-        <td colspan="2">
+        <td>
           <h3 class="change-name">
             <a href="[% basepath FILTER none %]show_bug.cgi?id=[% bug.bug_id FILTER none %]#c[% comment.count FILTER none %]">
               [% comment.count == 0 ? "Description" : "Comment " _ comment.count ~%]
@@ -236,17 +236,17 @@
           [% END %]
           [% Hook.process('user', 'bug/changes.html.tmpl') %]
         </td>
-        <td class="comment-actions">
+        <td rowspan="2" class="comment-actions"><div role="group">
           <button type="button" class="change-spinner minor iconic" id="as-[% id FILTER none %]"
                   title="Collapse this change" aria-label="Collapse" aria-expanded="true"
                   data-strings='{ "collapse_label": "Collapse", "collapse_tooltip": "Collapse this change",
                                   "expand_label": "Expanded", "expand_tooltip": "Expanded this change" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
-        </td>
+        </div></td>
       </tr>
       <tr id="ar-[% id FILTER none %]">
-        <td colspan="2">
+        <td>
           <h3 class="change-name">
             <a href="[% basepath FILTER none %]show_bug.cgi?id=[% bug.bug_id FILTER none %]#[% id FILTER none %]">Updated</a>
           </h3>
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index b7ce55d19..c1ec87dd5 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -604,11 +604,8 @@ h3.change-name {
 }
 
 .comment-actions {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    vertical-align: top;
-    padding: 2px 2px 0 0 !important;
+    padding: 0 8px 0 0 !important;
+    vertical-align: middle;
 }
 
 .comment-private {
@@ -616,6 +613,12 @@ h3.change-name {
     margin: 0 8px;
 }
 
+.comment-actions > [role="group"] {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
 .comment-actions button {
     outline: 0;
     margin: 0;
@@ -637,6 +640,8 @@ h3.change-name {
 
 .comment-actions button.iconic .icon::before {
     font-family: 'Material Icons';
+    font-size: 16px;
+    vertical-align: middle;
 }
 
 .comment-actions .tag-btn .icon::before {
@@ -655,10 +660,6 @@ h3.change-name {
     content: '\E145';
 }
 
-.change-spinner {
-    width: 29px;
-}
-
 .comment-text {
     white-space: pre-wrap;
     line-height: 1.2;
@@ -691,7 +692,7 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
 }
 
 .comment-tags {
-    padding: 0 8px 2px 8px !important;
+    padding: 0 8px !important;
 }
 
 .comment-tag {