stream-controls > sequence-controls. Add buttons now have bicolor plus icon.

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss

@@ -18,6 +18,10 @@ li.sequence-member{
         }
     }
 
+    &:hover .object-help{
+        opacity:1;
+    }
+
    
     .struct-block .fields{
         @include column(10);
@@ -66,8 +70,8 @@ li.sequence-member{
     }
 }
 
-/* Image chooser has special display in streamfields */
-.widget-admin_image_chooser{
+/* Image chooser as direct descendant of top-level streamfield has special display */
+.sequence-member-inner > .widget-admin_image_chooser{
     label{
         display:none;
     }
@@ -97,6 +101,10 @@ li.sequence-member{
             margin:0;
         }
     }
+    .actions li{
+        display:inline-block;
+        float:none;
+    }
 }
 
 /*
@@ -114,8 +122,8 @@ should be borderless and full-width
     }
 }
 
-/* Object controls */
-.stream-controls{
+/* Controls for ordering and deletion of items in a sequence */
+.sequence-controls{
     @include border-radius(5px);
     @include transition(opacity 0.2s ease);
     opacity:0;
@@ -176,7 +184,7 @@ should be borderless and full-width
     }       
 }
 
-/* list controls are slightly different as they require close proximity to their associated fields */
+/* list controls are slightly different as they require closer proximity to their associated fields */
 .list-controls{
     top:1.5em
 }
@@ -343,8 +351,7 @@ should be borderless and full-width
     visibility:hidden;
 }
 .sequence-member:hover{
-    .stream-controls, 
-    .list-controls{
+    .sequence-controls{
         visibility:visible;
         opacity:1;
     }
@@ -352,4 +359,11 @@ should be borderless and full-width
         visibility:visible;
         opacity:1;
     }
-}
+}
+
+@media screen and (min-width: $breakpoint-mobile){
+    .object li.sequence-member:hover .object-help{
+        opacity:1;
+    }
+
+}

wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -406,6 +406,13 @@ footer .preview{
             padding-left:3em;
         }
 
+        &.stream-field{
+            &:hover .object-help,
+            .object-help{
+                opacity:0
+            }
+        }
+
         &.full{
             fieldset{
                 @include column(11);

wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list.html

@@ -10,5 +10,5 @@
 {% endblock %}
 
 {% block footer %}
-    <button type="button" id="{{ prefix }}-add">{% trans "Add another" %}</button>
+    <button type="button" id="{{ prefix }}-add" class="bicolor icon icon-plus">{% trans "Add another" %}</button>
 {% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block header_controls %}
-    <div class="stream-controls list-controls">
+    <div class="sequence-controls list-controls">
         <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up button-secondary button-nostroke">{% trans 'Move up' %}</button>
         <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down button-secondary button-nostroke">{% trans 'Move down' %}</button>
         <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace no icon-bin button-secondary button-nostroke">{% trans 'Delete' %}</button>

wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html

@@ -1,6 +1,6 @@
 {% extends "wagtailadmin/block_forms/sequence.html" %}]
 
-{% block sequence_type_class %}list{% endblock %}
+{% block sequence_type_class %}stream{% endblock %}
 
 {% block header %}
     {% if list_members_html %}

wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block header_controls %}
-    <div class="stream-controls">
+    <div class="sequence-controls">
         <h3><label{% if child.id_for_label %} for="{{ child.id_for_label }}"{% endif %}>{{ child.block.label }}</label></h3>
         <div class="buttons">
             <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon button-nobg button-neutral text-replace icon-order-up">{% trans 'Move up' %}</button>