Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

MDL-39388 bootstrapbase: Add bootstrap tab renderer

This adds a renderer that outputs standard bootstrap HTML for tabs,
deletes styles that were previously required to make Moodle tab HTML
superficially resemble Bootstrap, and tweak the responsive code that
makes tabs stack on phones to account for the change too.
  • Loading branch information...
commit 9c2ec10b271a2a99e6cdb50a6b3bd09cc073bf50 1 parent cf5a329
David Scotson authored
View
1  theme/bootstrapbase/less/moodle.less
@@ -31,7 +31,6 @@ body {
// New Moodle stuff that builds on Bootstrap.
@import "moodle/blocks";
@import "moodle/forms";
-@import "moodle/tabs";
@import "moodle/modules";
@import "moodle/backup-restore";
@import "moodle/tables";
View
30 theme/bootstrapbase/less/moodle/responsive.less
@@ -62,27 +62,33 @@
}
@media (max-width: 480px) {
- // copied from tabs.less stacked-navs
- .tabtree > ul {
- border: none;
- }
- .tabtree > ul > li {
+ // make tabs act like nav-stacked
+ // (mostly) copied from bootstrap/navs.less
+ .nav-tabs > li {
float: none;
}
- .tabtree > ul > li > a {
+ .nav-tabs > li > a {
+ margin-right: 0; // no need for the gap between nav items
+ }
+ .nav-tabs {
+ border-bottom: 0;
+ }
+ .nav-tabs > li > a {
border: 1px solid #ddd;
.border-radius(0);
}
- .tabtree > ul > li.first > a {
+ .nav-tabs > .active > a,
+ .nav-tabs > .active > a:hover {
+ border: 1px solid #ddd;
+ }
+ .nav-tabs > li:first-child > a {
.border-top-radius(4px);
}
- .tabtree > ul > li.last > a,
- .tabtree > ul > li.last > a:hover {
- border: 1px solid #ddd;
+ .nav-tabs > li:last-child > a {
.border-bottom-radius(4px);
}
- .tabtree > ul > li > a:hover,
- .tabtree > ul > li > a:focus {
+ .nav-tabs > li > a:hover,
+ .nav-tabs > li > a:focus {
border-color: #ddd;
z-index: 2;
}
View
65 theme/bootstrapbase/less/moodle/tabs.less
@@ -1,65 +0,0 @@
-/* tabs.less */
-// This is an opinionated file. It intentionally doesn't add code if it's
-// only purpose is to support some of the wackier features of the
-// Moodle tabs API i.e. having the current tab name also be a link,
-// having multiple selected tabs at the same time, or having disabled tabs.
-// There's some code in core that suggests these features are used, but some manual
-// testing suggests they aren't. Some bugs to follow on those issues.
-
-.tabtree {
- margin: 1em 0;
-}
-.tabtree ul {
- border-left: 0;
- border-right: 0;
- border-bottom: 1px solid #ddd;
- border-top: 0;
- padding: 0;
- margin: 0;
-}
-.tabtree:after,
-.tabtree:before,
-.tabtree ul:before,
-.tabtree ul:after {
- display: table;
- content: "";
-}
-.tabtree:after,
-.tabtree ul:after {
- clear: both;
-}
-.tabtree li {
- display: block;
- float: left;
- margin-bottom: -1px;
-}
-.tabtree a {
- display: block;
- padding-right: 12px;
- padding-left: 12px;
- margin-right: 2px;
- padding-top: 8px;
- padding-bottom: 8px;
- text-decoration: none;
- line-height: @baseLineHeight;
- border: 1px solid transparent;
- .border-radius(4px 4px 0 0);
- &:hover,
- &:focus {
- border-color: @grayLighter @grayLighter #ddd;
- background-color: @grayLighter;
- text-decoration: none;
- }
-}
-.tabtree .here > a,
-.tabtree .here > a:hover,
-.tabtree .here > a:focus {
- color: @gray;
- background-color: @bodyBackground;
- border: 1px solid #ddd;
- border-bottom-color: transparent;
- cursor: default;
-}
-.tabtree .here .empty { // empty second level
- display: none;
-}
View
39 theme/bootstrapbase/renderers/core.php
@@ -161,4 +161,43 @@ protected function render_custom_menu_item(custom_menu_item $menunode, $level =
}
return $content;
}
+
+ /**
+ * Renders tabtree
+ *
+ * @param tabtree $tabtree
+ * @return string
+ */
+ protected function render_tabtree(tabtree $tabtree) {
+ if (empty($tabtree->subtree)) {
+ return '';
+ }
+ $firstrow = $secondrow = '';
+ foreach ($tabtree->subtree as $tab) {
+ $firstrow .= $this->render($tab);
+ if (($tab->selected || $tab->activated) && !empty($tab->subtree) && $tab->subtree !== array()) {
+ $secondrow = $this->tabtree($tab->subtree);
+ }
+ }
+ return html_writer::tag('ul', $firstrow, array('class' => 'nav nav-tabs')) . $secondrow;
+ }
+
+ /**
+ * Renders tabobject (part of tabtree)
+ *
+ * This function is called from {@link core_renderer::render_tabtree()}
+ * and also it calls itself when printing the $tabobject subtree recursively.
+ *
+ * @param tabobject $tabobject
+ * @return string HTML fragment
+ */
+ protected function render_tabobject(tabobject $tab) {
+ if ($tab->selected or $tab->activated) {
+ return html_writer::tag('li', html_writer::tag('a', $tab->text), array('class' => 'active'));
+ } else if ($tab->inactive) {
+ return html_writer::tag('li', html_writer::tag('a', $tab->text), array('class' => 'disabled'));
+ } else {
+ return html_writer::tag('li', html_writer::tag('a', $tab->text, array('href' => $tab->link)));
+ }
+ }
}
View
2  theme/bootstrapbase/style/moodle.css
1 addition, 1 deletion not shown
Please sign in to comment.
Something went wrong with that request. Please try again.