From a6bab4e6493e33a9ce03a6f6fb0afc602d096280 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Thu, 15 Jan 2015 15:00:21 +0000
Subject: [PATCH] preliminary styling of streamblock fields

---
 .../templates/wagtailstyleguide/base.html     | 12 ++-
 wagtail/wagtailadmin/blocks.py                |  6 +-
 wagtail/wagtailadmin/edit_handlers.py         | 14 ++++
 .../wagtailadmin/scss/components/forms.scss   | 54 +++++++-------
 .../scss/layouts/page-editor.scss             | 74 +++++++++++++++++++
 .../wagtailadmin/block_forms/field.html       |  2 +-
 .../wagtailadmin/block_forms/list_member.html |  2 +-
 .../wagtailadmin/block_forms/sequence.html    | 24 +++---
 .../block_forms/sequence_member.html          | 12 ++-
 .../block_forms/stream_member.html            |  2 +-
 .../edit_handlers/inline_panel_child.html     |  6 +-
 .../includes/editorspicks_form.html           |  6 +-
 12 files changed, 162 insertions(+), 52 deletions(-)

diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
index 53697e82d..358bc71bd 100644
--- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
@@ -230,6 +230,8 @@
         <section id="buttons">
             <h2>Buttons</h2>
 
+            <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
+
             <a href="#" class="button">button</a>
 
             <a href="#" class="button button-secondary">button-secondary</a>
@@ -250,8 +252,6 @@
 
             <div class="button no bicolor icon icon-cog">button on a div</div>
 
-            <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
-
             <button>button</button>
 
             <button class="button-small">small button</button>
@@ -261,6 +261,14 @@
             <input type="submit" class="bicolor icon icon-plus" value="bicolor only supported on button elements" />
 
             <button class="icon icon-view">button</button>
+
+            <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>
+
+            <button class="button-small icon text-replace white icon-tick">A proper button</button>
+            <a href="#" class="button button-small icon text-replace white icon-cog">A link button</a>
+            <span class="button button-small icon text-replace white icon-bin">A non-link button</span>
         </section>
 
         <section id="dropdowns">
diff --git a/wagtail/wagtailadmin/blocks.py b/wagtail/wagtailadmin/blocks.py
index 2bd9dffb2..2e1e4d23a 100644
--- a/wagtail/wagtailadmin/blocks.py
+++ b/wagtail/wagtailadmin/blocks.py
@@ -322,10 +322,12 @@ class BaseStructBlock(Block):
             for child_rendering in child_renderings
         ])
 
+       
+        # Can these be rendered with a template?
         if self.label:
-            return format_html("<label>{0}</label> <ul>{1}</ul>", self.label, list_items)
+            return format_html('<div class="struct-block"><label>{0}</label> <ul>{1}</ul></div>', self.label, list_items)
         else:
-            return format_html("<ul>{0}</ul>", list_items)
+            return format_html('<div class="struct-block"><ul>{0}</ul></div>', list_items)
 
     def value_from_datadict(self, data, files, prefix):
         return dict([
diff --git a/wagtail/wagtailadmin/edit_handlers.py b/wagtail/wagtailadmin/edit_handlers.py
index d4eac9fe3..a501668ad 100644
--- a/wagtail/wagtailadmin/edit_handlers.py
+++ b/wagtail/wagtailadmin/edit_handlers.py
@@ -632,6 +632,20 @@ Page.settings_panels = [
 from wagtail.wagtailadmin.blocks import StreamBlock
 
 class BaseStreamFieldPanel(BaseFieldPanel):
+    
+    def classes(self):
+        classes = super(BaseStreamFieldPanel, self).classes()
+        classes.append("stream-field")
+        
+        # BaseFieldPanel is essentially for single fields, which are rendered on the front end
+        # with the assumption that the label (singular) will always be promoted to the full-width 
+        # divider bar thing.
+        # This results in all the other labels being promoted similarly, so it's better not to
+        # treat this as a single field, and remove the "single-field" class.
+        classes.remove("single-field")
+        
+        return classes
+
     @classmethod
     def widget_overrides(cls):
         return {cls.field_name: widgets.StreamWidget(block_def=cls.block_def)}
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index fd0832b70..b068b2d78 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -221,9 +221,16 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         background-color:transparent;
     }
 
-    &.icon.text-replace:before{
-        font-size:auto;
-    }
+    /* Buttons which are only an icon */
+    &.icon.text-replace{
+        font-size:0; /* unavoidable duplication of setting in icons.scss */
+        width:1.8rem;
+        height:1.8rem;
+
+        &:before{
+            line-height:1.7em;
+        }
+    }   
     
     &:hover{
         background-color: $color-button-hover;
@@ -382,9 +389,7 @@ input[type=submit], input[type=reset], input[type=button], button{
         @include border-radius(2px);
         
         li{
-            background-color: $color-teal;
             float:left;
-            cursor:pointer;
             margin-right:1px;
 
             &:last-child{
@@ -392,24 +397,6 @@ input[type=submit], input[type=reset], input[type=button], button{
             }
         }
 
-        .icon{
-            padding:0.3em;
-        }
-
-        .icon:before{
-            line-height:2em;
-            width:2em;
-        }
-        .icon:hover{
-            background-color:$color-teal-darker;
-
-            &:before{
-                color:white;
-            }
-        }
-        .icon-bin:hover{
-            background-color:$color-red;
-        }
         .disabled{
             display:none;
         }
@@ -824,9 +811,23 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         height: 3em; 
         line-height:3em;
 
+        &.icon.text-replace{
+            width:2.2rem;
+            height:2.2rem;
+            &:before{
+                line-height:2.1em;
+            }
+        }   
+
         &.button-small{
-            height:2.3em;
-            line-height:2.2em;
+            &.icon.text-replace{
+                height:1.8rem;
+                width:1.8rem;
+
+                &:before{
+                    line-height:1.7em;
+                }
+            }
         }
 
         &.bicolor{
@@ -845,7 +846,8 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
             &:before{
                 line-height:1.85em;
             }
-        }
+        }       
+
     }
 
     /* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index 50e77748d..19d117eca 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -184,6 +184,80 @@
         }
     }
 
+    &.stream-field {
+        > fieldset{
+            @include column(12);
+            padding-left:0;
+            padding-right:0;
+        }
+
+        /* Object controls */
+        .stream-controls{
+            position:absolute;
+            z-index:1;
+            right:1em;
+            top:1em;
+            color:white;
+            overflow:hidden;
+            @include border-radius(2px);
+            
+            li{
+                background-color: $color-teal;
+                float:left;
+                cursor:pointer;
+                margin-right:1px;
+
+                &:last-child{
+                    margin-right:0;
+                }
+            }
+           
+            .disabled{
+                display:none;
+            }
+        }
+
+        .fields > li > .field > label{
+            display:none;
+        }
+        .sequence{
+            @include clearfix;
+            margin:1em 0;
+            border:1px solid lighten($color-grey-4, 3%);
+            padding:0 1.5em;
+        }
+        .sequence-member{
+            position:relative;
+            padding:1em 1.5em;
+            border-bottom:1px solid lighten($color-grey-4, 3%);
+            margin:0 -1.5em;
+
+            .inner > .struct-block > label{
+                display:block;
+                width:100%;
+                float:none;
+            }
+        }
+        .sequence-inner{
+            @include column(10);
+
+            &:nth-of-type(1){
+                @include column(12);
+                padding:0;
+            }
+        }
+        
+
+        .struct-block > ul > li{ /* duplicates forms.scss ln.568 */
+            @include clearfix();
+            padding-top:0.5em;
+            padding-bottom:1.2em;
+        }
+
+
+
+    }
+
     /* special panel for the publishing fields, requires a bit more pizzazz */
     &.publishing{
         h2:before{
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html
index 4c21712ae..ab64da8a7 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html
@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags %}
 <div class="field {{ field|fieldtype }}">
-    {{ field.label_tag }}
+    {{ label_tag }}
     <div class="field-content">
         <div class="input">
             {{ widget }}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
index 8b9d3b471..9d0e1bdec 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
@@ -1,4 +1,4 @@
 {% extends "wagtailadmin/block_forms/sequence_member.html" %}
 {% block header_controls %}
-    <button type="button" id="{{ prefix }}-delete">delete</button>
+    <button type="button" id="{{ prefix }}-delete" class="icon text-replace no icon-bin">delete</button>
 {% endblock %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html
index d052829cc..06ed9738b 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html
@@ -1,11 +1,15 @@
 {# Common HTML structure shared by list and stream blocks #}
-
-{% if label %}<label>{{ label }}</label>{% endif %}
-<input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
-{% block header %}{% endblock %}
-<ul id="{{ prefix }}-list">
-    {% for list_member_html in list_members_html %}
-        {{ list_member_html }}
-    {% endfor %}
-</ul>
-{% block footer %}{% endblock %}
+<div class="sequence">
+    <input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
+    
+    {% if label %}<label>{{ label }}</label>{% endif %}
+    {% block header %}{% endblock %}
+    <div class="sequence-inner">
+        <ul id="{{ prefix }}-list" class="sequence">
+            {% for list_member_html in list_members_html %}
+                {{ list_member_html }}
+            {% endfor %}
+        </ul>
+        {% block footer %}{% endblock %}
+    </div>
+</div>
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html
index 796bfb3fd..6849d2668 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html
@@ -1,8 +1,14 @@
-<li id="{{ prefix }}-container">
+<li id="{{ prefix }}-container" class="sequence-member">
     <input type="hidden" id="{{ prefix }}-deleted" name="{{ prefix }}-deleted" value="">
     <input type="hidden" id="{{ prefix }}-order" name="{{ prefix }}-order" value="{{ index }}">
+    
     {% block hidden_fields %}{% endblock %}
-    {% block header_controls %}{% endblock %}
-    <div>{{ child.render_form }}</div>
+
+    <div class="stream-controls">
+        {% block header_controls %}{% endblock %}
+    </div>
+
+    <div class="inner">{{ child.render_form }}</div>
+
     {% block footer_controls %}{% endblock %}
 </li>
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
index 1e18bd057..916a5c0e1 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block header_controls %}
-    <button type="button" id="{{ prefix }}-delete">delete</button>
+    <button type="button" id="{{ prefix }}-delete" class="stream-control icon text-replace no icon-bin">delete</button>
 {% endblock %}
 
 {% block footer_controls %}
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 0d6bdfde1..3710792f7 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel_child.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel_child.html
@@ -2,10 +2,10 @@
 <li id="inline_child_{{ child.form.prefix }}">
     <ul class="controls">
         {% if can_order %}
-            <li class="icon text-replace white icon-order-up inline-child-move-up" id="{{ child.form.prefix }}-move-up">{% trans "Move up" %}</li>
-            <li class="icon text-replace white icon-order-down inline-child-move-down" id="{{ child.form.prefix }}-move-down">{% trans "Move down" %}</li>
+            <li><button class="icon text-replace white icon-order-up inline-child-move-up" id="{{ child.form.prefix }}-move-up">{% trans "Move up" %}</button></li>
+            <li><button class="icon text-replace white icon-order-down inline-child-move-down" id="{{ child.form.prefix }}-move-down">{% trans "Move down" %}</button></li>
         {% endif %}
-        <li class="icon text-replace white icon-bin" id="{{ child.form.DELETE.id_for_label }}-button">{% trans "Delete" %}</li>
+        <li><button class="icon text-replace white icon-bin" id="{{ child.form.DELETE.id_for_label }}-button">{% trans "Delete" %}</button></li>
     </ul>
     {{ child.render_form_content }}
 </li>
diff --git a/wagtail/wagtailsearch/templates/wagtailsearch/editorspicks/includes/editorspicks_form.html b/wagtail/wagtailsearch/templates/wagtailsearch/editorspicks/includes/editorspicks_form.html
index aae5fdabe..c083fbe0d 100644
--- a/wagtail/wagtailsearch/templates/wagtailsearch/editorspicks/includes/editorspicks_form.html
+++ b/wagtail/wagtailsearch/templates/wagtailsearch/editorspicks/includes/editorspicks_form.html
@@ -1,9 +1,9 @@
 {% load i18n %}
 <li id="inline_child_{{ form.prefix }}"{% if form.DELETE.value %} style="display: none;"{% endif %}>
     <ul class="controls">
-        <li class="icon text-replace icon-order-up inline-child-move-up" id="{{ form.prefix }}-move-up">{% trans "Move up" %}</li>
-        <li class="icon text-replace icon-order-down inline-child-move-down" id="{{ form.prefix }}-move-down">{% trans "Move down" %}</li>
-        <li class="icon text-replace icon-bin" id="{{ form.DELETE.id_for_label }}-button">{% trans "Delete" %}</li>
+        <li><button class="icon text-replace icon-order-up inline-child-move-up" id="{{ form.prefix }}-move-up">{% trans "Move up" %}</button></li>
+        <li><button class="icon text-replace icon-order-down inline-child-move-down" id="{{ form.prefix }}-move-down">{% trans "Move down" %}</button></li>
+        <li><button class="icon text-replace icon-bin" id="{{ form.DELETE.id_for_label }}-button">{% trans "Delete" %}</button></li>
     </ul>
 
     <fieldset>