Merge pull request #486 from davecranwell/feature/help-messages

Added block help messages, suitable for use in any screen where information/instructions need to be conveyed to the user

wagtail/contrib/wagtailstyleguide/static/wagtailstyleguide/scss/styleguide.scss

@@ -1,6 +1,6 @@
-@import "../variables.scss";
-@import "../mixins.scss";
-@import "../grid.scss";
+@import "wagtailadmin/scss/variables.scss";
+@import "wagtailadmin/scss/mixins.scss";
+@import "wagtailadmin/scss/grid.scss";
 
 section{
     border-top:1px solid $color-grey-3;
@@ -50,6 +50,9 @@ section{
     .color-green{
         background-color:$color-green;
     }
+    .color-blue{
+        background-color:$color-blue;
+    }
     .color-grey-1{
         background-color:$color-grey-1;
     }

wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/styleguide.scss" type="text/x-scss" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailstyleguide/scss/styleguide.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
@@ -22,6 +22,7 @@
             <ul class="unlist">
                 <li><a href="#palette">Colour palette</a></li>
                 <li><a href="#typography">Typography</a></li>
+                <li><a href="#help">Help text</a></li>
                 <li><a href="#listings">Listings</a></li>
                 <li><a href="#buttons">Buttons</a></li>
                 <li><a href="#dropdowns">Dropdown buttons</a></li>
@@ -59,6 +60,7 @@
                 <li class="color-red">color-red</li>
                 <li class="color-orange">color-orange</li>
                 <li class="color-green">color-green</li>
+                <li class="color-blue">color-blue</li>
             </ul>
            
         </section>
@@ -88,6 +90,25 @@
 
         </section>
 
+        <section id="help">
+            <h2>Help text</h2>
+
+            <p>Help text is not to be confused with the messages that appear in a banner drop down from the top of the screen. Help text are permanent instructions, visible on every page view, that explain or warn about something.
+
+            <div class="help-block help-info">
+                This is help text that might be just for information, explaining what happens next, or drawing the user's attention to something they're about to do
+            </div>
+
+            <div class="help-block help-warning">
+                A warning message might be output in cases where a user's action could have serious consequences
+            </div>
+
+            <div class="help-block help-critical">
+                A critical message would probably be rare, in cases where a particularly brittle or dangerously destructive action could be performed and needs to be warned about.
+            </div>
+
+        </section>
+
         <section id="listings">
             <h2>Listings</h2>
 

wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss

@@ -194,6 +194,13 @@ a.tag:hover{
     }
 }
 
+/* general image style */
+img{
+    max-width:100%;
+    height:auto;
+    border: 3px solid $color-grey-4;
+}
+
 
 /* make a block-level element inline */
 .inline{

wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss

@@ -1,3 +1,10 @@
+/* 
+    Messages are specific to Django's "Messaging" system which adds messages into the session, 
+    for display on the next page visited. These appear as an animated banner at the top of the page.
+
+    For inline help text, see typography.scss
+*/
+
 .messages{
     position:relative;
     z-index:5;

wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss

@@ -0,0 +1,102 @@
+h1,h2,h3,h4,h5,h6{
+    font-weight:normal;
+}
+
+h1{
+    line-height:1.3em;
+    font-size:1.5em;
+    text-transform:uppercase;
+    color:$color-grey-1;
+    font-weight:600;
+
+    span{
+        text-transform:none;
+        font-weight:300;
+    }
+
+    .homepage &{
+        text-transform:none;
+    }
+}
+h2{
+    text-transform:uppercase;
+    font-size:1.3em;
+    font-family:Open Sans;
+    font-weight:600;
+    color:$color-grey-2;
+
+    .page-explorer &{
+        text-transform:none;
+    }
+}
+a{
+    outline:none;
+    color:$color-link;
+    text-decoration:none;
+
+    &:hover{
+        color:$color-link-hover;
+    }
+}
+
+code{
+    @include box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
+    background-color:$color-fieldset-hover;
+    padding:2px 5px;
+}
+
+kbd{
+    @include border-radius(3px);
+    font-family:Open Sans, Arial, sans-serif;
+    border:1px solid $color-grey-2;
+    border-color:rgba(0,0,0,0.2);
+    padding:0.3em 0.5em;
+}
+
+/* Help text formatters */
+
+.help-block{
+    padding:1em;
+    margin:1em 0;
+}
+    .help-info, .help-warning, .help-critical{
+        @include border-radius(3px);
+        border:1px solid $color-grey-4;
+        padding-left:3.5em;
+        position:relative;
+
+        &:before{
+            font-family:wagtail;
+            position:absolute;
+            left:1em;
+            top:0.7em;
+            content:"?";
+            font-size:1.4em;
+        }
+    }
+    .help-info{
+        border-color:$color-blue;
+
+        &:before{
+            color:$color-blue;
+        }
+    }
+
+    .help-warning{
+        border-color:$color-orange;
+
+        &:before{
+            color:$color-orange;
+            content:"!";
+        }
+    }
+
+    .help-critical{
+        border-color:$color-red;
+
+        &:before{
+            color:$color-red;
+            content:"!";
+        }
+    }
+

wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss

@@ -4,6 +4,7 @@
 
 @import "components/explorer.scss";
 @import "components/icons.scss";
+@import "components/typography.scss";
 @import "components/tabs.scss";
 @import "components/dropdowns.scss";
 @import "components/modals.scss";
@@ -35,67 +36,6 @@ body{
     }
 }
 
-h1,h2,h3,h4,h5,h6{
-    font-weight:normal;
-}
-
-h1{
-    line-height:1.3em;
-    font-size:1.5em;
-    text-transform:uppercase;
-    color:$color-grey-1;
-    font-weight:600;
-
-    span{
-        text-transform:none;
-        font-weight:300;
-    }
-
-    .homepage &{
-        text-transform:none;
-    }
-}
-h2{
-    text-transform:uppercase;
-    font-size:1.3em;
-    font-family:Open Sans;
-    font-weight:600;
-    color:$color-grey-2;
-
-    .page-explorer &{
-        text-transform:none;
-    }
-}
-a{
-    outline:none;
-    color:$color-link;
-    text-decoration:none;
-
-    &:hover{
-        color:$color-link-hover;
-    }
-}
-
-code{
-    @include box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
-    background-color:$color-fieldset-hover;
-    padding:2px 5px;
-}
-
-kbd{
-    @include border-radius(3px);
-    font-family:Open Sans, Arial, sans-serif;
-    border:1px solid $color-grey-2;
-    border-color:rgba(0,0,0,0.2);
-    padding:0.3em 0.5em;
-}
-
-img{
-    max-width:100%;
-    height:auto;
-    border: 3px solid $color-grey-4;
-}
-
 .browsermessage{
     background-color:$color-red;
     color:white;

wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss

@@ -27,6 +27,7 @@ $breakpoint-desktop-larger: 100em; /* 1600px */
 $color-teal: #43b1b0;
 $color-teal-darker: darken($color-teal, 10%);
 $color-teal-dark: #246060;
+$color-blue: #71b2d4;
 $color-red: #cd3238;
 $color-orange:#e9b04d;
 $color-green: #189370;