mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
navigation-dock MDL-22560 Major changes to he way the dock works
* Themes can now check if a region is completely docked * Dock now delegates events to improve performance * Dock now completely YUI3 * No longer uses YUI overlay instead has custom control
This commit is contained in:
Sam Hemelryk
parent
8cb4148657
commit
7e4617f7a6
12 changed files with 766 additions and 711 deletions
|
|
@ -44,6 +44,7 @@ $THEME->sheets = array(
|
|||
'blocks',
|
||||
'calendar',
|
||||
'course',
|
||||
'dock',
|
||||
'grade',
|
||||
'message',
|
||||
'question',
|
||||
|
|
|
|||
|
|
@ -2,16 +2,18 @@
|
|||
|
||||
$hassidepre = $PAGE->blocks->region_has_content('side-pre', $OUTPUT);
|
||||
$hassidepost = $PAGE->blocks->region_has_content('side-post', $OUTPUT);
|
||||
$showsidepre = $hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT);
|
||||
$showsidepost = $hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT);
|
||||
|
||||
$custommenu = $OUTPUT->custom_menu();
|
||||
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
|
||||
|
||||
$bodyclasses = array();
|
||||
if ($hassidepre && !$hassidepost) {
|
||||
if ($showsidepre && !$showsidepost) {
|
||||
$bodyclasses[] = 'side-pre-only';
|
||||
} else if ($hassidepost && !$hassidepre) {
|
||||
} else if ($showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'side-post-only';
|
||||
} else if (!$hassidepost && !$hassidepre) {
|
||||
} else if (!$showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'content-only';
|
||||
}
|
||||
if ($hascustommenu) {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,18 @@ $hasfooter = (empty($PAGE->layout_options['nofooter']));
|
|||
$hassidepre = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-pre', $OUTPUT));
|
||||
$hassidepost = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-post', $OUTPUT));
|
||||
|
||||
$showsidepre = ($hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT));
|
||||
$showsidepost = ($hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT));
|
||||
|
||||
$custommenu = $OUTPUT->custom_menu();
|
||||
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
|
||||
|
||||
$bodyclasses = array();
|
||||
if ($hassidepre && !$hassidepost) {
|
||||
if ($showsidepre && !$showsidepost) {
|
||||
$bodyclasses[] = 'side-pre-only';
|
||||
} else if ($hassidepost && !$hassidepre) {
|
||||
} else if ($showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'side-post-only';
|
||||
} else if (!$hassidepost && !$hassidepre) {
|
||||
} else if (!$showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'content-only';
|
||||
}
|
||||
if ($hascustommenu) {
|
||||
|
|
@ -82,7 +85,6 @@ echo $OUTPUT->doctype() ?>
|
|||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
28
theme/base/style/dock.css
Normal file
28
theme/base/style/dock.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* Whilst the dock isn't supported by the base theme this CSS is here so that those
|
||||
* themes that do want to use the dock will have a starting point at least
|
||||
*/
|
||||
|
||||
/* Put a margin on the body if the dock is shown */
|
||||
body.has_dock {margin-left:30px;}
|
||||
|
||||
/** For the dock itself */
|
||||
#dock {width:30px;position:fixed;top:0px;left:0px;height:100%;background-color:#FFF;border-right:1px solid #000;z-index:11000;}
|
||||
#dock.nothingdocked {visibility: hidden;display:none;}
|
||||
#dock .dockeditem .firstdockitem {margin-top:1em;}
|
||||
#dock .dockeditem .dockedtitle {border-bottom:1px solid #000;border-top:1px solid #000;cursor:pointer;}
|
||||
#dock .dockeditem .dockedtitle h2 {font-size:0.8em;line-height:100%;text-align:center;}
|
||||
#dock .dockeditem .dockedtitle .filterrotate {margin-left:8px;}
|
||||
#dock .controls {position:absolute;bottom:1em;text-align:center;width:100%;}
|
||||
#dock .controls img {cursor:pointer;}
|
||||
|
||||
/** For the panel the docked blocks are shown in */
|
||||
#dockeditempanel {min-width:200px;position:relative;z-index:12000;left:100%;}
|
||||
#dockeditempanel.dockitempanel_hidden {display:none;}
|
||||
#dockeditempanel .dockeditempanel_content {background-color:#fff;border:1px solid #000;z-index:12050;}
|
||||
#dockeditempanel .dockeditempanel_bd {overflow:auto;width:auto;}
|
||||
#dockeditempanel .dockeditempanel_bd .block_docked {margin:10px;}
|
||||
#dockeditempanel .dockeditempanel_hd {border-bottom:1px solid #000;text-align:right;}
|
||||
#dockeditempanel .dockeditempanel_hd h2 {display:inline;margin:0;padding-right:1em;}
|
||||
#dockeditempanel .dockeditempanel_hd .commands {display:inline;}
|
||||
#dockeditempanel .dockeditempanel_hd .commands img {margin-right:2px;vertical-align:middle;}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
|
||||
function customise_dock_for_theme() {
|
||||
if (!M.core_dock) {
|
||||
return false;
|
||||
}
|
||||
// Throw a lightbox for the navigation boxes
|
||||
M.core_dock.cfg.panel.modal = true;
|
||||
return true;
|
||||
}
|
||||
|
|
@ -1,54 +1,28 @@
|
|||
/** Core overrides **/
|
||||
body.has_dock {margin-left:30px;margin-right:30px;}
|
||||
/* For the dock and items on the dock */
|
||||
#dock {background-image:url([[pix:theme|vgradient]]);background-repeat: repeat-y;background-position:100% 0;background-color:#DDD;border-right-color:#AAA;}
|
||||
#dock .dockeditem_container {margin-top:10px;}
|
||||
#dock .dockeditem {background-color:#DDD;}
|
||||
#dock .dockeditem .firstdockitem {margin-top:1em;}
|
||||
#dock .dockeditem .dockedtitle {border-color:#AAA;background-image:url([[pix:theme|vgradient]]);background-position:90% 0;background-repeat: repeat-y;}
|
||||
#dock .dockeditem .dockedtitle.activeitem {background-position:80% 0;}
|
||||
#dock .dockeditem .dockedtitle h2 {margin:12px 0px;}
|
||||
|
||||
/* This CSS is for the dock */
|
||||
.dock {width:30px;position:fixed;top:0px;left:0px;height:100%;background-image:url([[pix:theme|vgradient]]);background-repeat: repeat-y;background-position:100% 0;background-color:#DDD;border-right:1px solid #AAA;z-index:2002;}
|
||||
.dock .dockeditem {background-color:#DDD;}
|
||||
.dock .dockeditem .firstdockitem {margin-top:1em;}
|
||||
.dock .dockeditem .dockedtitle {border-bottom:1px solid #AAA;border-top:1px solid #CCC;cursor:pointer;background-image:url([[pix:theme|vgradient]]);background-position:90% 0;background-repeat: repeat-y;}
|
||||
.dock .dockeditem .dockedtitle.activeitem {background-position:80% 0;}
|
||||
.dock .dockeditem .dockedtitle h2 {font-size:0.8em;line-height:100%;text-transform:uppercase;text-align:center;margin:12px 0px;}
|
||||
.dock .block_tree .current_branch {}
|
||||
.dock .controls {position:absolute;bottom:1em;text-align:center;width:100%;}
|
||||
.dock .controls img {cursor:pointer;}
|
||||
.dock .bd.oversized_content {overflow-y:auto;overflow-x:visible;height:inherit;}
|
||||
.dock .bd.oversized_content .content {margin:6px 6px 6px 0px;padding-bottom:6px;}
|
||||
.dock .yui-panel .hd {text-align:right;border-width:0 0 1px 0;padding:3px 5px;}
|
||||
.dock .yui-panel .hd .commands img {margin-right:2px;}
|
||||
|
||||
/**.dock .bd .content .blockcommands {text-align:right;border:1px solid #AAA;border-width:0 0 1px 1px;background-image:url([[pix:theme|hgradient]]);background-repeat: repeat-x;}**/
|
||||
/** YUI overrides **/
|
||||
.yui-skin-sam .dock .yui-panel {border-width:1px 2px 1px 1px;border-color:#AAA;min-width:150px;}
|
||||
.yui-skin-sam .dock .yui-panel .bd {border-width:0;background-color:#FAFAFA;}
|
||||
/** Override the above if the dock is on the right **/
|
||||
.dock.dock_right_vertical {left:auto;right:0px;border-width:0px 0px 1px 5px;}
|
||||
.dock.dock_right_vertical .commands {text-align:right;}
|
||||
.yui-skin-sam .dock.dock_right_vertical .yui-panel {border-width:1px 0 1px 5px;}
|
||||
/** For the panel the docked blocks are shown in */
|
||||
#dockeditempanel .dockeditempanel_content {border-color:#AAA;}
|
||||
#dockeditempanel .dockeditempanel_hd {border-bottom-color:#AAA;padding:3px 5px;background-image:url([[pix:theme|hgradient]]);}
|
||||
#dockeditempanel .dockeditempanel_hd h2 {font-size:80%;color:#999;}
|
||||
|
||||
/* block expansion code */
|
||||
.block_js_expansion .block_tree {overflow-x:scroll;}
|
||||
.block_js_expansion.mouseover .content {width:200%;z-index:1000;position:relative;}
|
||||
.block_js_expansion.mouseover .content .block_tree {width:100%; background-color:#FAFAFA; padding-bottom:0px;}
|
||||
|
||||
/* CSS for shadows */
|
||||
.divshadow div {position:absolute;width:3px;height:3px;background-color:#333;}
|
||||
.divshadow .shadow_top {top:-3px;right:0px;width:100%;}
|
||||
.divshadow .shadow_bottom {bottom:-3px;right:0px;width:100%;}
|
||||
.divshadow .shadow_left {top:0px;left:-3px;height:100%;}
|
||||
.divshadow .shadow_right {bottom:0px;right:-3px;height:100%;}
|
||||
.divshadow .shadow_top_right {top:-3px;right:-3px;}
|
||||
.divshadow .shadow_bottom_right {bottom:-3px;right:-3px;}
|
||||
.divshadow .shadow_top_left {top:-3px;left:-3px;}
|
||||
.divshadow .shadow_bottom_left {bottom:-3px;left:-3px;}
|
||||
|
||||
/** IE stylings */
|
||||
.ie6 .block .block_tree {width:160px;overflow-x:scroll;}
|
||||
.ie7 .block .block_tree {overflow-x:scroll;}
|
||||
.ie6 .block_tree .tree_item {width:100%;}
|
||||
.ie6 .dock {position:absolute;}
|
||||
.ie6 .dock hr {display:none;margin:0px;height:0px;padding:0px;}
|
||||
.ie6 .dock li p {background-color:inherit;}
|
||||
.ie6 .dock .bd.oversized_content .content, .ie7 .dock .bd.oversized_content .content {padding-bottom:0px;}
|
||||
.ie6 #dock {position:absolute;}
|
||||
.ie6 #dock hr {display:none;margin:0px;height:0px;padding:0px;}
|
||||
.ie6 #dock li p {background-color:inherit;}
|
||||
.ie6 #dock .bd.oversized_content .content, .ie7 #dock .bd.oversized_content .content {padding-bottom:0px;}
|
||||
.ie6 .block_js_expansion.mouseover .content, .ie7 .block_js_expansion.mouseover .content{ padding-bottom:2px;}
|
||||
.ie6 .dock .bd.oversized_content {width:100%;}
|
||||
.ie7 .dock .bd.oversized_content {width:400px;}
|
||||
.ie6 #dock .bd.oversized_content {width:100%;}
|
||||
Loading…
Add table
Add a link
Reference in a new issue