moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-03 08:09:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-38923 theme_bootstrapbase: tidied up dock implementation

Browse source 
Also:
* Changed to a CSS based compacting solution
* Converted dock colours to variables
* RTL fixes for the dock
This commit is contained in:
Sam Hemelryk 2014-01-09 11:50:50 +13:00
parent a799631bb1
commit 2a203eee8d
11 changed files with 141 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

3
lib/outputrenderers.php
View file

@ -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) {

8
lib/yui/build/moodle-core-dock/moodle-core-dock-debug.js vendored
View file

@ -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);
}
});

8
lib/yui/build/moodle-core-dock/moodle-core-dock-min.js vendored
View file

File diff suppressed because one or more lines are too long

8
lib/yui/build/moodle-core-dock/moodle-core-dock.js vendored
View file

@ -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);
}
});

8
lib/yui/src/dock/js/dock.js vendored
View file

@ -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);
}
});

2
theme/bootstrapbase/config.php
View file

@ -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')) {

10
theme/bootstrapbase/javascript/dock.js Normal file
View file

@ -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');
});
}

85
theme/bootstrapbase/javascript/dockmod.js
View file

@ -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;
}

37
theme/bootstrapbase/less/moodle/core.less
View file

@ -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 **/
.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);
}
.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
/** decrease the span size by 1 **/
#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;
}

128
theme/bootstrapbase/less/moodle/dock.less
View file

@ -1,51 +1,62 @@
.dockbutton {
.btn;
display: list-item;
@dockWidth: 36px;
@dockTitleMargin: 3px;
@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;
left: 0px;
height: 90%;
top: 0;
left: 0;
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;
font-size: 1em;
line-height: 100%;
text-align: center;
font-weight: bold;
.transform-test-node;
}
.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;
box-shadow: 2px 4px 4px 2px #CCCCCC;
width: @dockPanelWidth;
border: 1px solid darken(@grayLighter, 10%);
.box-shadow(2px 4px 4px 2px @grayLighter);
.border-radius(4px);
}
.dockeditempanel_bd {
overflow: auto;
width: auto;
overflow: auto; /** Required to make the content scrollable when it flows over the fixed area of the screen */
> * {
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;
}
.commands > a,
.commands > span {
> a,
> 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 {
right: 100%;
.dockeditempanel_hd .commands {
text-align: left;
}
&.has_dock #page {
padding-left: 0;
padding-right: (@dockWidth + (@dockTitleMargin * 3));
}
#dock {
left: auto;
right: 0%;
.dockedtitle {
border-bottom: 1px solid #DDD;
border-top: 1px solid #EEE;
border-bottom: 1px solid darken(@grayLighter, 10%);
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;
}

4
theme/bootstrapbase/style/moodle.css
View file

File diff suppressed because one or more lines are too long