MDL-38923 theme_bootstrapbase: pre-integration fixups

* Fixed the way we added the block class to the dock panel in dock.js
* Added a class to the h2 that is used to test dock title width
* Fixed RTL alignment issues as best I could at present
* Fixed overlap of dock + navbar on small screens
* Fixed the docked block width to be constrained to the available space
* Fixed hidden actions on docked blocks

lib/yui/build/moodle-core-dock/moodle-core-dock-debug.js

@@ -193,7 +193,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
     }
 
     // We need to fix a font-size - sorry theme designers.
-    test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
+    test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
     BODY.insert(test, 0);
     width = test.one('span').get('offsetWidth') * 1.2;
     height = test.one('span').get('offsetHeight');

lib/yui/build/moodle-core-dock/moodle-core-dock.js

@@ -192,7 +192,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
     }
 
     // We need to fix a font-size - sorry theme designers.
-    test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
+    test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
     BODY.insert(test, 0);
     width = test.one('span').get('offsetWidth') * 1.2;
     height = test.one('span').get('offsetHeight');

lib/yui/src/dock/js/dock.js

@@ -191,7 +191,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
     }
 
     // We need to fix a font-size - sorry theme designers.
-    test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
+    test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
     BODY.insert(test, 0);
     width = test.one('span').get('offsetWidth') * 1.2;
     height = test.one('span').get('offsetHeight');

theme/bootstrapbase/javascript/dock.js

@@ -1,10 +1,57 @@
 /**
  * Customise the dock for this theme.
+ *
+ * Tasks we do within this function:
+ *   - Add 'block' as a class to the dock panel so that its items are styled the same as they are when being displayed
+ *     in page as blocks.
+ *   - Constrain the width of the docked block to the window width using a responsible max-width.
+ *   - Handle the opening/closing of the Bootstrap collapsible navbar on small screens.
  */
-function customise_dock_for_theme() {
+function customise_dock_for_theme(dock) {
     // Add the "block" class to docked blocks.
     // This prevents having to restyle all docked blocks and simply use standard block styling.
-    M.core_dock.on('dock:panelgenerated', function(){
+    // First we wait until the panel has been generated.
-        Y.all('.dockeditempanel_content').addClass('block');
+    dock.on('dock:panelgenerated', function() {
+        // Then we wait until the panel it is being shown for the first time.
+        dock.get('panel').once('dockpanel:beforeshow', function() {
+            // Finally we add the block class.
+            Y.all('.dockeditempanel_content').addClass('block');
+        });
+        dock.get('panel').on('dockpanel:beforeshow', function() {
+            var content = Y.all('.dockeditempanel_content');
+            // Finally set a responsible max width.
+            content.setStyle('maxWidth', content.get('winWidth') - dock.get('dockNode').get('offsetWidth') - 10);
+        });
+    });
+
+    // Handle the opening/closing of the bootstrap collapsible navbar on small screens.
+    // This is a complex little bit of JS because we need to simulate Bootstrap actions in order to measure height changes
+    // in the dom and apply them as spacing to the dock.
+    dock.on('dock:initialised', function() {
+        var navbar = Y.one('header.navbar'),
+            navbarbtn = Y.one('header.navbar .btn-navbar'),
+            navcollapse = Y.one('header.navbar .nav-collapse'),
+            container = Y.one('#dock .dockeditem_container'),
+            margintop = null,
+            newmargintop = null,
+            diff = null;
+        if (navbar && navbarbtn && container) {
+            margintop = parseInt(container.getStyle('marginTop').replace(/px$/, ''), 10);
+            diff = margintop - parseInt(navbar.get('offsetHeight'), 10);
+            navbarbtn.ancestor().on('click', function() {
+                // We need to fake the collapsible region being active, this JS *ALWAYS* executes before the bootstrap JS.
+                navcollapse.toggleClass('active');
+                if (!this.hasClass('active')) {
+                    newmargintop = (parseInt(navbar.get('offsetHeight'), 10) + diff);
+                    container.setStyle('marginTop', newmargintop + 'px');
+                } else {
+                    container.setStyle('marginTop', margintop + 'px');
+                }
+                // Undo the simulation.
+                navcollapse.toggleClass('active');
+                // Tell the dock things have changed so that it automatically resizes things.
+                dock.fire('dock:itemschanged');
+            }, navbarbtn);
+        }
     });
 }

theme/bootstrapbase/less/moodle/dock.less

@@ -1,19 +1,20 @@
 @dockWidth: 36px;
 @dockTitleMargin: 3px;
 @dockPanelWidth: (768px / 2);
+@dockTitleFontSize: 11px;
 
 /**
  * This styles the H2 node the dock creates to test the width before making its title rotation.
  * We need to apply these EXACT styles to the #dock .dockedtitle h2 to be sure things are spaced correctly.
  */
-.transform-test-node {
+.transform-test-heading {
     font-family: @sansFontFamily;
-    font-size: 1.2em;
+    font-size: @dockTitleFontSize;
     line-height: @dockWidth;
     text-align: center;
     font-weight: bold;
-    margin:0;
+    margin: 0;
-    padding:0;
+    padding: 0;
 }
 
 body.has_dock {
@@ -51,7 +52,7 @@ body.has_dock {
         padding:0;
         cursor: pointer;
         h2 {
-            .transform-test-node;
+            .transform-test-heading;
         }
         .filterrotate {
             margin-left: 8px;
@@ -119,13 +120,6 @@ body.has_dock {
                 cursor: pointer;
             }
         }
-        a.editing_move,
-        a.editing_edit,
-        a.editing_roles,
-        a.editing_delete,
-        a.editing_hide {
-            display: none;
-        }
     }
 }
 
@@ -138,25 +132,16 @@ body.has_dock {
         left: auto;
         right: 0%;
         .dockedtitle {
-            border-bottom: 1px solid darken(@grayLighter, 10%);
+            h2 {
-            border-top: 1px solid @grayLighter;
+                line-height: @dockWidth - @dockTitleFontSize;
-            cursor: pointer;
+            }
         }
     }
     #dockeditempanel {
         right: 100%;
         .dockeditempanel_hd {
-            h2 {
-                padding: 10px;
-                margin: 0;
-                border-bottom: 1px solid @white;
-            }
             .commands {
-                float: left;
-                right: auto;
-                left: 0px;
                 text-align: left;
-                top: 6px;
             }
         }
     }