Implement dropdown-fixed mode.

modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm

@@ -11,8 +11,8 @@
     <div class="layout control-toolbar edita-toolbar">
         <div class="layout-cell toolbar-item">
             <div data-control="toolbar">
-                <div class="dropdown">
-                    <a href="#" data-toggle="dropdown" class="btn tb-icon tb-formatting"></a>
+                <div class="dropdown dropdown-fixed">
+                    <button data-toggle="dropdown" class="btn tb-icon tb-formatting"></button>
                     <ul class="dropdown-menu" data-dropdown-title="Formatting">
                         <li><a href="#" rel="quote" tabindex="-1" class="oc-icon-quote-right">Quote</a></li>
                         <li><a href="#" rel="code" tabindex="-1" class="oc-icon-code">Code</a></li>

modules/system/assets/ui/js/dropdown.js

@@ -94,7 +94,7 @@
         }
     })
 
-    $(document).on('hidden.bs.dropdown', '.dropdown', function(){
+    $(document).on('hidden.bs.dropdown', '.dropdown', function() {
         var dropdown = $(this).data('oc.dropdown')
         if (dropdown !== undefined) {
             dropdown.css('display', 'none')
@@ -104,4 +104,34 @@
         $(document.body).removeClass('dropdown-open');
     })
 
+    /*
+     * Fixed positioned dropdowns
+     * - Useful for dropdowns inside hidden overflow containers
+     */
+
+    var $dropdown, $container, $target
+
+    function fixDropdownPosition() {
+        var position = $container.offset()
+
+        $dropdown.css({
+            position: 'fixed',
+            top: position.top - $(window).scrollTop() + $target.outerHeight(),
+            left: position.left
+        })        
+    }
+
+    $(document).on('shown.bs.dropdown', '.dropdown.dropdown-fixed', function(event, eventData) {
+        $container = $(this)
+        $dropdown = $('.dropdown-menu', $container)
+        $target = $(eventData.relatedTarget)
+        fixDropdownPosition()
+
+        $(window).on('scroll.oc.dropdown', fixDropdownPosition)
+    })
+
+    $(document).on('hidden.bs.dropdown', '.dropdown.dropdown-fixed', function() {
+        $(window).off('scroll.oc.dropdown', fixDropdownPosition)
+    })
+
 }(window.jQuery);

modules/system/assets/ui/js/toolbar.js

@@ -50,20 +50,6 @@
             update()
         })
 
-        $el.on('shown.bs.dropdown', '.dropdown', function(event, eventData) {
-            var $this = $(this),
-                $dropdown = $('.dropdown-menu', $this),
-                $target = $(eventData.relatedTarget),
-                $window = $(window),
-                position = $this.offset()
-
-            $dropdown.css({
-                position: 'fixed',
-                top: position.top - $window.scrollTop() + $target.outerHeight(),
-                left: position.left
-            })
-        })
-
         this.$el.one('dispose-control', this.proxy(this.dispose))
 
         function update() {

modules/system/assets/ui/less/toolbar.less

@@ -127,15 +127,18 @@
     .border-bottom-radius(0);
 
     .toolbar-item {
-        .btn {
+        .btn, .btn-group, .dropdown {
             margin: 0;
             padding: 0;
+        }
+        .btn {
             text-align: center;
             height: 40px;
             width: 40px;
             line-height: 40px;
             zoom: 1;
             color: @color-toolbar-editor-btn-color;
+            background: transparent;
             .user-select(none);
 
             &:before {

modules/system/assets/ui/storm-min.js

@@ -1397,7 +1397,16 @@ if($('.dropdown-overlay',document.body).length==0){$(document.body).prepend($('<
 $(document).on('hidden.bs.dropdown','.dropdown',function(){var dropdown=$(this).data('oc.dropdown')
 if(dropdown!==undefined){dropdown.css('display','none')
 $(this).append(dropdown)}
-$(document.body).removeClass('dropdown-open');})}(window.jQuery);+function($){'use strict';var dismiss='[data-dismiss="callout"]'
+$(document.body).removeClass('dropdown-open');})
+var $dropdown,$container,$target
+function fixDropdownPosition(){var position=$container.offset()
+$dropdown.css({position:'fixed',top:position.top-$(window).scrollTop()+$target.outerHeight(),left:position.left})}
+$(document).on('shown.bs.dropdown','.dropdown.dropdown-fixed',function(event,eventData){$container=$(this)
+$dropdown=$('.dropdown-menu',$container)
+$target=$(eventData.relatedTarget)
+fixDropdownPosition()
+$(window).on('scroll.oc.dropdown',fixDropdownPosition)})
+$(document).on('hidden.bs.dropdown','.dropdown.dropdown-fixed',function(){$(window).off('scroll.oc.dropdown',fixDropdownPosition)})}(window.jQuery);+function($){'use strict';var dismiss='[data-dismiss="callout"]'
 var Callout=function(el){$(el).on('click',dismiss,this.close)}
 Callout.prototype.close=function(e){var $this=$(this)
 var selector=$this.attr('data-target')
@@ -1567,8 +1576,6 @@ var scrollClassContainer=options.scrollClassContainer!==undefined?options.scroll
 $el.dragScroll({scrollClassContainer:scrollClassContainer})
 $('.form-control.growable',$toolbar).on('focus.toolbar',function(){update()})
 $('.form-control.growable',$toolbar).on('blur.toolbar',function(){update()})
-$el.on('shown.bs.dropdown','.dropdown',function(event,eventData){var $this=$(this),$dropdown=$('.dropdown-menu',$this),$target=$(eventData.relatedTarget),$window=$(window),position=$this.offset()
-$dropdown.css({position:'fixed',top:position.top-$window.scrollTop()+$target.outerHeight(),left:position.left})})
 this.$el.one('dispose-control',this.proxy(this.dispose))
 function update(){$(window).trigger('resize')}}
 Toolbar.prototype=Object.create(BaseProto)
@@ -3760,8 +3767,6 @@ var scrollClassContainer=options.scrollClassContainer!==undefined?options.scroll
 $el.dragScroll({scrollClassContainer:scrollClassContainer})
 $('.form-control.growable',$toolbar).on('focus.toolbar',function(){update()})
 $('.form-control.growable',$toolbar).on('blur.toolbar',function(){update()})
-$el.on('shown.bs.dropdown','.dropdown',function(event,eventData){var $this=$(this),$dropdown=$('.dropdown-menu',$this),$target=$(eventData.relatedTarget),$window=$(window),position=$this.offset()
-$dropdown.css({position:'fixed',top:position.top-$window.scrollTop()+$target.outerHeight(),left:position.left})})
 this.$el.one('dispose-control',this.proxy(this.dispose))
 function update(){$(window).trigger('resize')}}
 Toolbar.prototype=Object.create(BaseProto)

modules/system/assets/ui/storm.css

@@ -1432,7 +1432,8 @@ ul.status-list li span.status.info{background:#5bc0de}
 [data-control=toolbar]{white-space:nowrap;width:100%;overflow:hidden}
 #layout-side-panel .control-toolbar,.panel-contents .control-toolbar{padding:20px 0 20px 20px}
 .control-toolbar.edita-toolbar{padding:0;background:#dddddd;border-bottom-right-radius:0;border-bottom-left-radius:0}
-.control-toolbar.edita-toolbar .toolbar-item .btn{margin:0;padding:0;text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.control-toolbar.edita-toolbar .toolbar-item .btn,.control-toolbar.edita-toolbar .toolbar-item .btn-group,.control-toolbar.edita-toolbar .toolbar-item .dropdown{margin:0;padding:0}
+.control-toolbar.edita-toolbar .toolbar-item .btn{text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .control-toolbar.edita-toolbar .toolbar-item .btn:before{font-size:14px !important}
 .control-toolbar.edita-toolbar .toolbar-item .btn:hover{outline:none;background-color:#999999;color:#ffffff}
 .control-toolbar.edita-toolbar .toolbar-item .btn:active{outline:none;background-color:#404040;color:#ffffff}