mirror of
https://github.com/moodle/moodle.git
synced 2025-08-03 08:09:47 +02:00
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
This commit is contained in:
Sam Hemelryk
parent
a799631bb1
commit
2a203eee8d
11 changed files with 141 additions and 202 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
8
lib/yui/src/dock/js/dock.js
vendored
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
10
theme/bootstrapbase/javascript/dock.js
Normal 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');
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,51 +1,62 @@
|
|||
.dockbutton {
|
||||
.btn;
|
||||
display: list-item;
|
||||
padding: 0;
|
||||
@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;
|
||||
div#dock {
|
||||
display: inline;
|
||||
}
|
||||
#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,43 +69,55 @@ 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 {
|
||||
border-bottom: 1px solid @white;
|
||||
padding: 0.5em 1em;
|
||||
h2 {
|
||||
padding: 10px;
|
||||
.nav-header;
|
||||
font-size: 1.1em;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid @white;
|
||||
}
|
||||
.commands {
|
||||
width: 60px;
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
display: block;
|
||||
text-align: right;
|
||||
top: 6px;
|
||||
}
|
||||
.commands > a,
|
||||
.commands > span {
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
> 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,
|
||||
|
|
@ -103,55 +126,38 @@ 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_hd {
|
||||
h2 {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid @white;
|
||||
}
|
||||
.commands {
|
||||
float: left;
|
||||
right: auto;
|
||||
left: 0px;
|
||||
text-align: left;
|
||||
top: 6px;
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.dir-rtl.has_dock {
|
||||
margin-left: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue