MDL-38923 theme_bootstrapbase: tidied up dock implementation

Also:
* Changed to a CSS based compacting solution
* Converted dock colours to variables
* RTL fixes for the dock

lib/outputrenderers.php

@@ -3267,6 +3267,9 @@ public function body_css_classes(array $additionalclasses = array()) {
             } else {
                 $additionalclasses[] = 'empty-region-'.$region;
             }
+            if ($this->page->blocks->region_completely_docked($region, $this)) {
+                $additionalclasses[] = 'docked-region-'.$region;
+            }
         }
         foreach ($this->page->layout_options as $option => $value) {
             if ($value) {

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

@@ -204,12 +204,10 @@ M.core.dock.fixTitleOrientation = function(title, text) {
 
     // Move the title into position
     title.setStyles({
-        'margin' : '0',
-        'padding' : '0',
         'position' : 'relative',
         'fontSize' : fontsize,
         'width' : width,
-        'top' : width/2
+        'top' : (width - height)/2
     });
 
     // Positioning is different when in RTL mode.
@@ -760,14 +758,16 @@ DOCK.prototype = {
             showregions = false,
             i;
         // First look for understood regions.
-        Y.all(SELECTOR.blockregion).each(function(){
+        Y.all(SELECTOR.blockregion).each(function(region){
             var regionname = region.getData('blockregion');
             if (region.all('.block').size() > 0) {
                 populatedblockregions++;
                 BODY.addClass('used-region-'+regionname);
                 BODY.removeClass('empty-region-'+regionname);
+                BODY.removeClass('docked-region-'+regionname);
             } else {
                 BODY.addClass('empty-region-'+regionname);
+                BODY.addClass('docked-region-'+regionname);
                 BODY.removeClass('used-region-'+regionname);
             }
         });

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

@@ -203,12 +203,10 @@ M.core.dock.fixTitleOrientation = function(title, text) {
 
     // Move the title into position
     title.setStyles({
-        'margin' : '0',
-        'padding' : '0',
         'position' : 'relative',
         'fontSize' : fontsize,
         'width' : width,
-        'top' : width/2
+        'top' : (width - height)/2
     });
 
     // Positioning is different when in RTL mode.
@@ -753,14 +751,16 @@ DOCK.prototype = {
             showregions = false,
             i;
         // First look for understood regions.
-        Y.all(SELECTOR.blockregion).each(function(){
+        Y.all(SELECTOR.blockregion).each(function(region){
             var regionname = region.getData('blockregion');
             if (region.all('.block').size() > 0) {
                 populatedblockregions++;
                 BODY.addClass('used-region-'+regionname);
                 BODY.removeClass('empty-region-'+regionname);
+                BODY.removeClass('docked-region-'+regionname);
             } else {
                 BODY.addClass('empty-region-'+regionname);
+                BODY.addClass('docked-region-'+regionname);
                 BODY.removeClass('used-region-'+regionname);
             }
         });

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

@@ -202,12 +202,10 @@ M.core.dock.fixTitleOrientation = function(title, text) {
 
     // Move the title into position
     title.setStyles({
-        'margin' : '0',
-        'padding' : '0',
         'position' : 'relative',
         'fontSize' : fontsize,
         'width' : width,
-        'top' : width/2
+        'top' : (width - height)/2
     });
 
     // Positioning is different when in RTL mode.
@@ -758,14 +756,16 @@ DOCK.prototype = {
             showregions = false,
             i;
         // First look for understood regions.
-        Y.all(SELECTOR.blockregion).each(function(){
+        Y.all(SELECTOR.blockregion).each(function(region){
             var regionname = region.getData('blockregion');
             if (region.all('.block').size() > 0) {
                 populatedblockregions++;
                 BODY.addClass('used-region-'+regionname);
                 BODY.removeClass('empty-region-'+regionname);
+                BODY.removeClass('docked-region-'+regionname);
             } else {
                 BODY.addClass('empty-region-'+regionname);
+                BODY.addClass('docked-region-'+regionname);
                 BODY.removeClass('used-region-'+regionname);
             }
         });

theme/bootstrapbase/config.php

@@ -154,7 +154,7 @@
 $THEME->javascripts = array(
 );
 $THEME->javascripts_footer = array(
-    'moodlebootstrap', 'dockmod'
+    'moodlebootstrap', 'dock'
 );
 
 if (core_useragent::is_ie() && !core_useragent::check_ie_version('9.0')) {

theme/bootstrapbase/javascript/dock.js

@@ -0,0 +1,10 @@
+/**
+ * Customise the dock for this theme.
+ */
+function customise_dock_for_theme() {
+    // 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(){
+        Y.all('.dockeditempanel_content').addClass('block');
+    });
+}

theme/bootstrapbase/less/moodle/core.less

@@ -9,37 +9,42 @@
     display:none;
 }
 
-.empty-region-side-pre #block-region-side-pre,
-.empty-region-side-post #block-region-side-post {
+.empty-region-side-pre #block-region-side-pre, // Pre region is empty.
+.empty-region-side-post #block-region-side-post, // Post region is empty.
+.jsenabled.docked-region-side-post #block-region-side-post, // All post blocks are docked.
+.jsenabled.docked-region-side-pre #block-region-side-pre { // All pre blocks are docked.
     display:none;
 }
 
-.empty-region-side-post #region-bs-main-and-pre.span9,
-.empty-region-side-pre #region-bs-main-and-post.span9,
-.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8 {
-    /** LTR with no post area.
-        RTL with no pre area.
-        RTL with no post area. **/
+.empty-region-side-post #region-bs-main-and-pre.span9, // LTR with no post area.
+.empty-region-side-pre #region-bs-main-and-post.span9, // RTL with no pre area.
+.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area.
+.jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked.
+.jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8,
+.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 { // RTL with all pre blocks docked.
     width: 100%;
 }
 
-.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main {
-    /** LTR with no pre area. **/
+.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area.
+.jsenabled.docked-region-side-pre #region-bs-main-and-pre.span9 #region-main { // LTR with all pre blocks docked.
     float:none;
     width:100%;
 }
 
-.empty-region-side-post.used-region-side-pre #region-main.span8 {
-    /** increase the span size by 1 **/
-    .fluid-span(9);
-}
-.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
-    /** decrease the span size by 1 **/
-    .fluid-span(3);
+.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
+.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
+    #region-main.span8 {
+        /** Increase the span size by 1 **/
+        .fluid-span(9);
+    }
+    #block-region-side-pre.span4 {
+        /** Decrease the span size by 1 **/
+        .fluid-span(3);
+    }
 }
 
-.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 {
-    /** RTL with no pre area. **/
+.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area.
+.jsenabled.docked-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 { // RTL with all pre blocks docked.
     float: right;
 }