diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/page-editor.js index eacc5dad8..0cdeaa886 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/page-editor.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/page-editor.js @@ -34,6 +34,9 @@ function makeRichTextEditable(id) { var closestObj = input.closest('.object'); + /* Events for when CSS transitions end, for various browsers */ + var transitionEvents = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'; + richText.hallo({ toolbar: 'halloToolbarFixed', toolbarCssClass: (closestObj.hasClass('full')) ? 'full' : (closestObj.hasClass('stream-field')) ? 'stream-field' : '', @@ -46,6 +49,17 @@ function makeRichTextEditable(id) { } }).bind('paste', function(event, data) { setTimeout(removeStyling, 1); + /* Reset the position of Hallo toolbar after the input boxes finish resizing */ + }).bind('halloactivated', function(event, data) { + $(event.target).one(transitionEvents, function(e) { + data.turnOn(); + }); + $(event.target).addClass('expanded'); + }).bind('hallodeactivated', function(event, data) { + $(event.target).one(transitionEvents, function(e) { + data.turnOff(); + }); + $(event.target).removeClass('expanded'); }); } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss index 1319db505..1dbea12c6 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss @@ -132,7 +132,7 @@ padding-bottom:1em; @include transition(padding .2s ease); - &.inEditMode{ + &.expanded{ padding-top:5em; /* to provide space for editor buttons */ padding-bottom:2em; }