From 35e9bfc2ce9212f1b65ac1ca5225715cef0502c7 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Thu, 5 Feb 2015 16:49:49 +0000
Subject: [PATCH] ongoing stream menu work

---
 .../static/wagtailadmin/js/blocks/sequence.js | 15 +++++++++--
 .../static/wagtailadmin/js/blocks/stream.js   |  8 ------
 .../scss/layouts/page-editor.scss             | 25 +++++++++++++------
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js b/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js
index 2ced19a9f..090154fc7 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js
+++ b/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/sequence.js
@@ -10,10 +10,14 @@ For example, they don't assume the presence of a 'delete' button - it's up to th
         var self = {};
         self.prefix = prefix;
         self.container = $('#' + self.prefix + '-container');
-        self.menu = $('.stream-menu', self.container);
+        self.menu = $('> .stream-menu', self.container);
 
         var indexField = $('#' + self.prefix + '-order');
 
+        self.menu.click(function(){
+            self.menu.toggleClass('stream-menu-closed');
+        });
+
         self.delete = function() {
             sequence.deleteMember(self);
         };
@@ -30,7 +34,7 @@ For example, they don't assume the presence of a 'delete' button - it's up to th
             self.container.fadeOut();
         };
         self._markAdded = function() {
-            self.menu.addClass('closed');
+            self.menu.addClass('stream-menu-closed');
             self.container.hide();
             self.container.slideDown();
         };
@@ -40,6 +44,12 @@ For example, they don't assume the presence of a 'delete' button - it's up to th
         self.setIndex = function(i) {
             indexField.val(i);
         };
+        self.showMenu = function(){
+            self.menu.removeClass('stream-menu-closed');
+        };
+        self.hideMenu = function(){
+            self.menu.addClass('stream-menu-closed')
+        }
 
         return self;
     };
@@ -49,6 +59,7 @@ For example, they don't assume the presence of a 'delete' button - it's up to th
         var countField = $('#' + opts.prefix + '-count');
         /* NB countField includes deleted items; for the count of non-deleted items, use members.length */
         var members = [];
+        self.menu = countField.siblings('.stream-menu');
 
         self.getCount = function() {
             return parseInt(countField.val(), 10);
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/stream.js b/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/stream.js
index 0099b2312..47649e3bd 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/stream.js
+++ b/wagtail/wagtailadmin/static/wagtailadmin/js/blocks/stream.js
@@ -12,14 +12,6 @@
             listMemberTemplates[childBlock.name] = template;
         }
 
-        $('.stream-menu').addClass('stream-menu-closed');
-        $(document).on('mouseover','.stream-menu',function(){
-            $(this).removeClass('stream-menu-closed');
-        }).on('mouseout', '.stream-menu', function(){
-            $(this).addClass('stream-menu-closed')
-        });
-
-
         return function(elementPrefix) {
             var sequence = Sequence({
                 'prefix': elementPrefix,
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index f814c5747..1e4684b38 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -277,18 +277,27 @@
             background-color:$color-grey-5;
         }
         li{
-            display:inline;
+            @include column(2);
+            padding-bottom:$grid-gutter-width;
         }
 
         button{
+            background-color:$color-grey-4;
+            border:0;
+            color:$color-grey-2;
             height:auto;
+            display:block;
+            width:100%;
+            padding:0 0 0.5em 0;
+            text-overflow:ellipsis;
+
             &:before{
                 display:block;
                 font-family:wagtail;
                 font-size:3em;
-                width:3em;
-                height:3em;
-                line-height:3em;
+                width:100%;
+                height:2em;
+                line-height:2em;
                 text-align:center;
             }
         }
@@ -313,10 +322,10 @@
 
         &.stream-menu-closed{
             ul{
-                /*height:0px;*/
-            }
-
-           
+                height:0px;
+                padding:0;
+                overflow:hidden;
+            }           
         }
     }
     .sequence-member .stream-menu{