added better means of identifying form errors across tabs

wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less

@@ -7,6 +7,7 @@
         width:48%;
         float:left;
         padding:0;
+        position:relative;
 
         &:before,&:after{
             display:none;
@@ -35,6 +36,24 @@
 
     a.errors{
         color:@color-red !important;
+
+        &:after{
+            .border-radius(50%);
+            .box-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
+            position:absolute;
+            right:-0.5em;
+            top:-0.5em;
+            z-index:5;           
+            min-width:1em;
+            color:white;
+            background:@color-red;
+            border:2px solid darken(@color-red,20%);
+            content:attr(data-count);
+            padding:0 0.3em;
+            line-height:1.4em;
+            text-align:center;
+            font-size:0.8em;
+        }
     }
 
     li.active a{

wagtail/wagtailadmin/static/wagtailadmin/js/core.js

@@ -108,27 +108,29 @@ $(function(){
     });
 
     /* Header search behaviour */
-    var search_current_index = 0;
-    var search_next_index = 0;
+    if(window.headerSearch){
+        var search_current_index = 0;
+        var search_next_index = 0;
 
-    $(window.headerSearch.termInput).on('input', function() {
-        clearTimeout($.data(this, 'timer'));
-        var wait = setTimeout(search, 200);
-        $(this).data('timer', wait);
-    });   
+        $(window.headerSearch.termInput).on('input', function() {
+            clearTimeout($.data(this, 'timer'));
+            var wait = setTimeout(search, 200);
+            $(this).data('timer', wait);
+        });   
 
-    function search () {
-        search_next_index++;
-        var index = search_next_index;
-        $.ajax({
-            url: window.headerSearch.url,
-            data: {q: $(window.headerSearch.termInput).val()},
-            success: function(data, status) {
-                if (index > search_current_index) {
-                    search_current_index = index;
-                    $(window.headerSearch.targetOutput).html(data);
-                }
-            },
-        });
-    };
+        function search () {
+            search_next_index++;
+            var index = search_next_index;
+            $.ajax({
+                url: window.headerSearch.url,
+                data: {q: $(window.headerSearch.termInput).val()},
+                success: function(data, status) {
+                    if (index > search_current_index) {
+                        search_current_index = index;
+                        $(window.headerSearch.targetOutput).html(data);
+                    }
+                },
+            });
+        };
+    }
 });

wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js

@@ -236,11 +236,23 @@ function initSlugCleaning(){
 }
 
 function initErrorDetection(){
+    var errorSections = {};
+
+    // first count up all the errors
     $('.error-message').each(function(){
         var parentSection = $(this).closest('section');
 
-        $('.tab-nav a[href=#'+ parentSection.attr('id') +']').addClass('errors');
-    })
+        if(!errorSections[parentSection.attr('id')]){
+            errorSections[parentSection.attr('id')] = 0;
+        }
+
+        errorSections[parentSection.attr('id')] = errorSections[parentSection.attr('id')]+1;
+    });
+
+    // now identify them on each tab
+    for(var index in errorSections) {
+        $('.tab-nav a[href=#'+ index +']').addClass('errors').attr('data-count', errorSections[index]);
+    }    
 }
 
 $(function() {