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 @@ EOD;
             } 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->layouts = array(
 $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/javascript/dockmod.js

@@ -1,85 +0,0 @@
-function customise_dock_for_theme() {
-  var dock = M.core_dock;
-  dock.on('dock:itemschanged', theme_dockmod_handle_spans);
-  dock.on('dock:panelgenerated', theme_dockmod_blockstyle);
-}
-
-//Add the "block" class to docked blocks. This prevents having to restyle
-//all docked blocks and simply use standard block styling
-function theme_dockmod_blockstyle() {
-  Y.all('.dockeditempanel_content').each(function(dockblock){
-    dockblock.addClass('block');
-  });
-}
-
-//On docking and undocking the bootstrap spans have to change to
-//dock properly
-function theme_dockmod_handle_spans() {
-
-  var prepopulatedblockregions = 0;
-  var postpopulatedblockregions = 0;
-
-  var blockspre = 0;
-  var blockspost = 0;
-
-  var maincontent = Y.one('#region-main');
-  var regionpre = Y.one('#block-region-side-pre');
-  var regionpost = Y.one('#block-region-side-post');
-  var ltr = Y.one('body.dir-ltr');
-  var mainwrapper = Y.one('#region-bs-main-and-pre');
-  if (!ltr) {
-    var mainwrapper = Y.one('#region-bs-main-and-post');
-  }
-
-  var body = Y.one('body');
-
-  if (Y.all('.block.dock_on_load').size()>0) {
-    // Do not resize during initial load
-    return;
-  }
-
-  if (body.hasClass('blocks-moving')) {
-    // open up blocks during blocks positioning
-    return;
-  }
-
-
-  if (body.hasClass('two-column')) {
-
-    var prehasblocks = (regionpre.all('.block').size() > 0);
-    if (prehasblocks) {
-      regionpre.addClass('span3');
-      maincontent.removeClass('span12');
-      maincontent.addClass('span9');
-    } else {
-      regionpre.removeClass('span3');
-      maincontent.removeClass('span9');
-      maincontent.addClass('span12');
-    }
-  } else {
-
-    var prehasblocks = (regionpre.all('.block').size() > 0);
-    if (prehasblocks) {
-      regionpre.addClass('span4');
-      maincontent.removeClass('span12');
-      maincontent.addClass('span8');
-    } else {
-      regionpre.removeClass('span4');
-      maincontent.removeClass('span8');
-      maincontent.addClass('span12');
-    }
-
-    var posthasblocks = (regionpost.all('.block').size() > 0);
-    if (posthasblocks) {
-      regionpost.addClass('span3');
-      mainwrapper.removeClass('span12');
-      mainwrapper.addClass('span9');
-    } else {
-      mainwrapper.removeClass('span9');
-      mainwrapper.addClass('span12');
-      regionpost.removeClass('span3');
-    }
-  }
-  return;
-
-}

theme/bootstrapbase/less/moodle/core.less

@@ -9,37 +9,42 @@
     display:none;
 }
 
-.empty-region-side-pre #block-region-side-pre,
+.empty-region-side-pre #block-region-side-pre, // Pre region is empty.
-.empty-region-side-post #block-region-side-post {
+.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-post #region-bs-main-and-pre.span9, // LTR with no post area.
-.empty-region-side-pre #region-bs-main-and-post.span9,
+.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 {
+.empty-region-side-post #region-bs-main-and-post.span9 #region-main.span8, // RTL with no post area.
-    /** LTR with no post area.
+.jsenabled.docked-region-side-post #region-bs-main-and-pre.span9, // LTR with all post blocks docked.
-        RTL with no pre area.
+.jsenabled.docked-region-side-post #region-bs-main-and-post.span9 #region-main.span8,
-        RTL with no post area. **/
+.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 {
+.empty-region-side-pre #region-bs-main-and-pre.span9 #region-main, // LTR with no pre area.
-    /** 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 {
+.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
-    /** increase the span size by 1 **/
+.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);
     }
-.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
+    #block-region-side-pre.span4 {
-    /** decrease the span size by 1 **/
+        /** Decrease the span size by 1 **/
         .fluid-span(3);
     }
+}
 
-.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8 {
+.empty-region-side-pre #region-bs-main-and-post.span9 #region-main.span8, // RTL with no pre area.
-    /** 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;
 }
 

theme/bootstrapbase/less/moodle/dock.less

@@ -1,51 +1,62 @@
-.dockbutton {
+@dockWidth: 36px;
-    .btn;
+@dockTitleMargin: 3px;
-    display: list-item;
+@dockPanelWidth: (768px / 2);
+
+/**
+ * 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 {
+    font-family: @sansFontFamily;
+    font-size: 1.2em;
+    line-height: @dockWidth;
+    text-align: center;
+    font-weight: bold;
+    margin:0;
     padding:0;
 }
 
 body.has_dock {
-   margin-left: 20px;
+    #page {
+        padding-left: (@dockWidth + (@dockTitleMargin * 3));
+    }
     div#dock {
         display: inline;
     }
 }
 
 #dock {
-    width: 36px;
+    width: (@dockWidth + (@dockTitleMargin * 2));
     position: fixed;
-    top: 68px;
+    top: 0;
-    left: 0px;
+    left: 0;
-    height: 90%;
+    height: 100%;
     background-color: transparent;
     border-right: 0 none;
     .nothingdocked {
         visibility: hidden;
         display: none;
     }
+    .dockeditem_container {
+        margin-top: 68px;
+    }
     .dockeditem .firstdockitem {
         margin-top: 1em;
     }
     .dockedtitle {
-        .dockbutton;
+        .btn;
+        display: block;
+        width: @dockWidth;
+        margin: @dockTitleMargin;
+        padding:0;
         cursor: pointer;
-        margin: 2px;
         h2 {
-            font-family: @sansFontFamily;
+            .transform-test-node;
-            font-size: 1em;
-            line-height: 100%;
-            text-align: center;
-            font-weight: bold;
         }
-
         .filterrotate {
             margin-left: 8px;
         }
     }
-    .dockeditempanel_hd h2 {
-      .nav-header;
-      font-size: 1.1em;
-    }
     .controls {
         position: absolute;
         bottom: 1em;
@@ -58,44 +69,56 @@ body.has_dock {
 }
 
 #dockeditempanel {
+    z-index: 12000; /** Required to place the dock panel above the fixed pos navbar */
+    &.dockitempanel_hidden {
+        display: none;
+    }
     min-width: 200px;
     position: relative;
-    z-index: 12000;
     left: 100%;
     padding-left: 5px;
     .dockeditempanel_content {
-        z-index: 12050;
         background-color: @wellBackground;
-        width: 220px;
+        width: @dockPanelWidth;
-        box-shadow: 2px 4px 4px 2px #CCCCCC;
+        border: 1px solid darken(@grayLighter, 10%);
+        .box-shadow(2px 4px 4px 2px @grayLighter);
+        .border-radius(4px);
     }
     .dockeditempanel_bd {
-        overflow: auto;
+        overflow: auto; /** Required to make the content scrollable when it flows over the fixed area of the screen */
-        width: auto;
+        > * {
+            margin: 1em;
+        }
         .block_navigation .block_tree li {
             overflow: visible;
         }
     }
     .dockeditempanel_hd {
-        h2 {
-            padding: 10px;
-            margin: 0;
         border-bottom: 1px solid @white;
+        padding: 0.5em 1em;
+        h2 {
+            .nav-header;
+            font-size: 1.1em;
+            padding:0;
+            margin: 0;
         }
         .commands {
-            width: 60px;
-            float: right;
-            position: absolute;
-            right: 0px;
             display: block;
             text-align: right;
-            top: 6px;
+            > a,
-        }
+            > span {
-        .commands > a,
-        .commands > span {
                 margin-left: 3px;
                 cursor: pointer;
             }
+            img,
+            input {
+                vertical-align: middle;
+                margin-right: 1px;
+            }
+            .hidepanemicon img {
+                cursor: pointer;
+            }
+        }
         a.editing_move,
         a.editing_edit,
         a.editing_roles,
@@ -103,38 +126,25 @@ body.has_dock {
         a.editing_hide {
             display: none;
         }
-        .commands img,
-        .commands input {
-            vertical-align: middle;
-            margin-right: 1px;
     }
-        .commands .hidepanemicon img {
-            cursor: pointer;
-        }
-    }
-
-}
-
-#dockeditempanel.dockitempanel_hidden {
-        display: none;
 }
 
 .dir-rtl {
-    #dockeditempanel {
+    &.has_dock #page {
-    right: 100%;
+        padding-left: 0;
-        .dockeditempanel_hd .commands {
+        padding-right: (@dockWidth + (@dockTitleMargin * 3));
-            text-align: left;
-        }
     }
     #dock {
         left: auto;
         right: 0%;
         .dockedtitle {
-            border-bottom: 1px solid #DDD;
+            border-bottom: 1px solid darken(@grayLighter, 10%);
-            border-top: 1px solid #EEE;
+            border-top: 1px solid @grayLighter;
             cursor: pointer;
         }
     }
+    #dockeditempanel {
+        right: 100%;
         .dockeditempanel_hd {
             h2 {
                 padding: 10px;
@@ -150,8 +160,4 @@ body.has_dock {
             }
         }
     }
-
-body.dir-rtl.has_dock  {
-    margin-left: 0px;
-    margin-right: 20px;
 }