From 7a5c77702fe151556b94274eacfd57f18370aff2 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Wed, 11 Feb 2015 11:57:50 +0000
Subject: [PATCH] improved way of specifying text styles for individual blocks
 or fields within blocks

---
 wagtail/wagtailadmin/blocks.py                | 12 +--
 .../static/wagtailadmin/js/page-editor.js     |  4 +-
 .../scss/layouts/page-editor.scss             | 76 +++++++------------
 .../wagtailadmin/scss/panels/rich-text.scss   |  5 ++
 .../wagtailadmin/block_forms/field.html       |  2 +-
 .../block_forms/sequence_member.html          |  2 +-
 6 files changed, 41 insertions(+), 60 deletions(-)

diff --git a/wagtail/wagtailadmin/blocks.py b/wagtail/wagtailadmin/blocks.py
index fa2b779bc..1042440fa 100644
--- a/wagtail/wagtailadmin/blocks.py
+++ b/wagtail/wagtailadmin/blocks.py
@@ -311,18 +311,12 @@ class FieldBlock(Block):
         #if error:
         #    error_html = str(ErrorList(error.error_list))
         #else:
-        #    error_html = ''        
-
-        if self.meta.classname:
-            classes = self.meta.classname.split(' ')
-        else:
-            classes = None
-
-        
+        #    error_html = ''                
 
         return render_to_string('wagtailadmin/block_forms/field.html', {
+            'name': self.name,
             'label': self.label,
-            'classes': classes,
+            'classes': self.meta.classname,
             'widget': widget_html,
             'label_tag': label_html,
             'field': self.field,
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
index 326ea9ca4..f389bf120 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
+++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
@@ -31,9 +31,11 @@ function makeRichTextEditable(id) {
         removeStylingPending = false;
     }
 
+    var closestObj = input.closest('.object');
+
     richText.hallo({
         toolbar: 'halloToolbarFixed',
-        toolbarCssClass: (input.closest('.object').hasClass('full')) ? 'full' : '',
+        toolbarCssClass: (closestObj.hasClass('full')) ? 'full' : (closestObj.hasClass('stream-field')) ? 'stream-field' : '',
         plugins: halloPlugins
     }).bind('hallomodified', function(event, data) {
         input.val(data.content);
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index c812a8c40..f99dd5e3f 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -2,29 +2,31 @@
 @import "../mixins.scss";
 @import "../grid.scss";
 
-.page-editor .content-wrapper{
-    margin-bottom:10em;
-}
-
-.page-editor .breadcrumb{
-    margin-top:-1.2em;
-    margin-bottom:2em;
-}
-.page-editor .modal .breadcrumb{
-    margin:0;
-    background-color:transparent;
-
-    a{
-        color:$color-grey-2;
+.page-editor {
+    .content-wrapper{
+        margin-bottom:10em;
     }
-    li:hover{
-        background-color:$color-grey-4;
+    .breadcrumb{
+        margin-top:-1.2em;
+        margin-bottom:2em;
     }
-    .home{
-        padding-left:0;
+    .modal .breadcrumb{
+        margin:0;
+        background-color:transparent;
+
+        a{
+            color:$color-grey-2;
+        }
+        li:hover{
+            background-color:$color-grey-4;
+        }
+        .home{
+            padding-left:0;
+        }
     }
 }
 
+/* An object is the basic wrapper around any field or group of fields in the editor interface */
 .object{
     position:relative;
     overflow:hidden;
@@ -273,6 +275,11 @@
             background-color:transparent;
             max-width:1024px;
         }
+
+        .richtext.inEditMode{
+            padding-top:1em;
+            padding-bottom:1em;
+        }
     }
 
     /* Object controls */
@@ -564,6 +571,7 @@
     }
 }
 
+/* Custom styles that make some fields look more important */
 .full input, textarea, .richtext{
     @include nice-padding();
     @include border-radius(0px);
@@ -576,39 +584,11 @@
 .title input,
 .title textarea,
 .title .richtext{
+    font-size:2em;
     font-family:Bitter, Georgia, serif;
 }
 
-.title.h2 input,
-.title.h2 textarea,
-.title.h2 .richtext{
-    font-size:2em;
-}
-
-.title.h3 input,
-.title.h3 textarea
-.title.h3 .richtext{
-    font-size:1.8em;
-}
-
-.title.h4 input,
-.title.h4 textarea,
-.title.h4 .richtext{
-    font-size:1.5em;
-}
-
-.intro input,
-.intro textarea,
-.intro .richtext{
-    font-size:1.4em;
-}
-
-.quote input{
-    font-style: italic;
-}
-
-
-
+/* Footer control bar for perfoming actions on the page */
 footer .preview{
     button, .button{
         background-color:lighten($color-grey-2,10%);
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
index d47ca5ecc..dc0b63c7a 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
@@ -11,6 +11,11 @@
 .hallotoolbar.full{
     margin-left:$mobile-nice-padding;
 }
+/* stream-field is added to hallotoolbar when invoked on a field within a stream-field */
+.hallotoolbar.stream-field{
+    margin-top:0;
+    margin-left:0;
+}
 .hallotoolbar.affixed{
     position:fixed;
     margin-top:0;
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html
index 322237ac7..0118759cc 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html
@@ -1,5 +1,5 @@
 {% load wagtailadmin_tags %}
-<div class="field {{ field|fieldtype }} {% for class in classes %} blockclass-{{ class }}{% endfor %} blockname-{{ label }}">
+<div class="field {{ field|fieldtype }} fieldname-{{ name }} {{ classes }} ">
     {{ label_tag }}
     <div class="field-content">
         <div class="input">
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html
index 60ec704cb..c40fed301 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence_member.html
@@ -1,4 +1,4 @@
-<li id="{{ prefix }}-container" class="sequence-member">
+<li id="{{ prefix }}-container" class="sequence-member sequencename-{{ block_type_name }}">
     <input type="hidden" id="{{ prefix }}-deleted" name="{{ prefix }}-deleted" value="">
     <input type="hidden" id="{{ prefix }}-order" name="{{ prefix }}-order" value="{{ index }}">