Browse Source

Feature/commenting streamfield hover fix (#7131)

* Fix streamfield comment buttons not showing on hover

* Fix hover colour change only happening for some comment buttons
Jacob Topp-Mugglestone 3 years ago
parent
commit
c652e67c5e

+ 10 - 2
client/scss/components/_forms.scss

@@ -525,8 +525,7 @@ li.inline:first-child {
         top: 0;
     }
 
-    li.model_choice_field,
-    li.char_field {
+    .field:not(.block_field) {
         &:hover {
             .field-comment-control button {
                 opacity: 1;
@@ -535,6 +534,15 @@ li.inline:first-child {
         }
     }
 
+    .object {
+        &:hover {
+            .field-comment-control--object button {
+                opacity: 1;
+                pointer-events: initial;
+            }
+        }
+    }
+
     .object.model_choice_field {
         .object-help {
             right: 153px;

+ 2 - 1
wagtail/admin/templates/wagtailadmin/shared/field.html

@@ -26,7 +26,8 @@
     {% if show_add_comment_button %}
         <div class="field-comment-control">
             <button type="button" data-component="add-comment-button" data-comment-add class="u-hidden" aria-label="{% trans 'Add comment' %}">
-                <svg class="icon icon-comment-add initial" aria-hidden="true" focusable="false"><use href="#icon-comment-add"></use></svg>
+                <svg class="icon icon-comment-add initial icon-default" aria-hidden="true" focusable="false"><use href="#icon-comment-add"></use></svg>
+                <svg class="icon icon-comment-add initial icon-reversed" aria-hidden="true" focusable="false"><use href="#icon-comment-add-reversed"></use></svg>
             </button>
         </div>
     {% endif %}