From daf92b07306d17fe7fce1548d46dd949963e6283 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Fri, 26 Jun 2015 14:15:40 +0100
Subject: [PATCH] altered styling of stream controls to be more like all other
 buttons. Now grouped with .button-group, which is also documented in
 styleguide.

---
 .../templates/wagtailstyleguide/base.html     | 16 ++++++
 .../wagtailadmin/scss/components/forms.scss   | 51 +++++++++++++++----
 .../scss/components/streamfield.scss          | 42 ++++++++-------
 .../wagtailadmin/block_forms/list_member.html |  8 +--
 .../block_forms/stream_member.html            |  8 +--
 .../edit_handlers/inline_panel_child.html     |  2 +-
 6 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
index f4e859987..6b8ecbe4c 100644
--- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
@@ -301,6 +301,22 @@
             
         </section>
 
+        <section id="button-groups">
+            <h2>Button groups</h2>
+            <p>Adds rounding to first and last items only</p>
+            <div class="button-group">
+                <button>button element</button>
+                <button>button element</button>
+                <button>button element</button>
+            </div>
+            <br />
+            <div class="button-group">
+                <button class="icon text-replace yes icon-tick">A proper button</button>
+                <a href="#" class="button icon text-replace white icon-cog">A link button</a>
+                <span class="button icon text-replace no icon-bin">A non-link button</span>
+            </div>
+        </section>
+
         <section id="dropdowns">
             <h2>Dropdown buttons</h2>
 
diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss
index 96cb1f941..5b4d1742b 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss
@@ -238,12 +238,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         }
     }
 
-    &:hover{
-        background-color: $color-button-hover;
-        color:white;
-        border-color:transparent;
-    }
-
     &.yes{
         background-color: $color-button-yes;
         border:1px solid $color-button-yes;
@@ -366,6 +360,16 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         border:0 !important;
     }
 
+    &:hover{
+        background-color: $color-button-hover;
+        color:white;
+        border-color:transparent;
+
+        &.hover-no{
+            background-color: $color-button-no;
+        }
+    }
+
     @media screen and (min-width: $breakpoint-mobile){
         font-size:0.95em;
         padding:0 1.4em;
@@ -439,6 +443,36 @@ input[type=submit], input[type=reset], input[type=button], button{
     }
 }
 
+
+.button-group{
+    @include clearfix;
+
+    input[type=submit], input[type=reset], input[type=button], .button, button {
+        @include border-radius(0);
+        float:left;
+        margin-right:1px;
+        margin-left:0;
+
+        &:only-child{
+            @include border-radius(3);
+        }
+        &:first-child{
+            @include border-radius(3px 0 0 3px);
+        }
+        &:last-child{
+            @include border-radius(0 3px 3px 0);
+            margin-right:0;
+        }
+    }
+
+    &.button-group-square{
+        &,input[type=submit], input[type=reset], input[type=button], .button, button{
+            @include border-radius(0);
+        }
+    }
+}
+
+
 .multiple{
     padding:0;
     max-width:1024px - 50px;
@@ -475,9 +509,7 @@ input[type=submit], input[type=reset], input[type=button], button{
         right:1em;
         top:1em;
         color:white;
-        overflow:hidden;
-        @include border-radius(2px);
-        
+
         li{
             float:left;
             margin-right:1px;
@@ -489,6 +521,7 @@ input[type=submit], input[type=reset], input[type=button], button{
 
         .disabled{
             display:none;
+            visibility:hidden;
         }
     }
 
diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss
index 4b37cea25..121d8e76c 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss
@@ -8,6 +8,8 @@ li.sequence-member{
 
     &:hover{
         background-color:$color-input-focus;
+        border:1px solid darken($color-input-focus, 10%);
+        border-width:1px 0;
 
         .sequence-member-inner{
             > .struct-block > label,
@@ -45,6 +47,10 @@ li.sequence-member{
         position:relative;
         padding:1.5em 50px;
 
+        .sequence-member:hover{
+            border:0;
+        }
+
         /* sequences within sequences, such as a ListBlock within StructBlock*/
         > .sequence .sequence-inner{
             @include column(10);
@@ -124,25 +130,29 @@ should be borderless and full-width
 
 /* Controls for ordering and deletion of items in a sequence */
 .sequence-controls{
-    @include border-radius(5px);
+    @include border-radius(2px 0 0 0);
     @include transition(opacity 0.2s ease);
+    border:1px solid darken($color-input-focus, 10%);
+    border-width:1px 1px 0 1px;
     opacity:0;
     visibility:hidden;
     position:absolute;
-    top:-1.5em; right:1em;
+    top:-30px; right:0;
     z-index:1;
     overflow:visible;
     background-color:$color-input-focus;
-    padding:0.2rem 1em;
+    padding:0 0 0 1em;
+    height:30px;
 
     h3{
         margin:0;
         font-size:0.7rem;
         display:inline-block;
         margin-right:1em;
-        line-height:1.4rem;
+        line-height:1.8rem;
 
         label{
+            color: $color-teal;
             font-weight:normal;
             text-transform:uppercase;
             float:none;
@@ -153,9 +163,8 @@ should be borderless and full-width
     }
 
     button.icon.text-replace{
-        @include border-radius(50%);
-        width:1.4rem;
-        height:1.4rem;
+        width:1.8rem;
+        height:1.8rem;
 
         &:before{
             line-height:1.3em;
@@ -164,16 +173,9 @@ should be borderless and full-width
     }
 
     /* .buttons only exists for menus in stream_member.html */
-    .buttons{
-        display:inline-block; 
+    .button-group{
+        float:right;
     }
-
-    .buttons,
-    label{
-        @include transition(opacity 0.2s ease);
-        opacity:0.4;
-    }
-
         &:hover .buttons,
         &:hover label{
             opacity:1;
@@ -186,7 +188,13 @@ should be borderless and full-width
 
 /* list controls are slightly different as they require closer proximity to their associated fields */
 .list-controls{
-    top:1.5em
+    @include border-radius(0);
+    background:transparent;
+    top:1.5em;
+    border:0;
+    padding:0;
+    overflow:hidden;
+    height:auto;
 }
 
 .sequence-type-list .object-help{
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
index d7b4c9bb6..131702685 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
@@ -2,9 +2,9 @@
 {% load i18n %}
 
 {% block header_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>
+    <div class="sequence-controls list-controls button-group button-group-square">
+        <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up">{% trans 'Move up' %}</button>
+        <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down">{% trans 'Move down' %}</button>
+        <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace hover-no icon-bin">{% trans 'Delete' %}</button>
     </div>
 {% endblock %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
index fdd5947d1..76bf5e82d 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
@@ -8,10 +8,10 @@
 {% block header_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>
-            <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon button-nobg button-neutral text-replace icon-order-down">{% trans 'Move down' %}</button>
-            <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon button-nobg button-neutral text-replace no icon-bin">{% trans 'Delete' %}</button>
+        <div class="button-group button-group-square">
+            <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up">{% trans 'Move up' %}</button>
+            <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down">{% trans 'Move down' %}</button>
+            <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace hover-no icon-bin">{% trans 'Delete' %}</button>
         </div>
     </div>
 {% endblock %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel_child.html b/wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel_child.html
index 41913f674..a2126f081 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel_child.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel_child.html
@@ -5,7 +5,7 @@
             <li><button type="button" class="icon text-replace white icon-order-up inline-child-move-up" id="{{ child.form.prefix }}-move-up" title="{% trans 'Move up' %}">{% trans "Move up" %}</button></li>
             <li><button type="button" class="icon text-replace white icon-order-down inline-child-move-down" id="{{ child.form.prefix }}-move-down" title="{% trans 'Move down' %}">{% trans "Move down" %}</button></li>
         {% endif %}
-        <li><button type="button" class="icon text-replace white icon-bin" id="{{ child.form.DELETE.id_for_label }}-button" title="{% trans 'Delete' %}">{% trans "Delete" %}</button></li>
+        <li><button type="button" class="icon text-replace white icon-bin hover-no" id="{{ child.form.DELETE.id_for_label }}-button" title="{% trans 'Delete' %}">{% trans "Delete" %}</button></li>
     </ul>
     {{ child.render_form_content }}
 </li>