Commit 536f0460 authored by Damyon Wiese's avatar Damyon Wiese Committed by Dan Poltawski
Browse files

MDL-55402 theme_noname: Convert bootstrapbase to bs4

All moodle less files are converted to sass with layouts etc
written as mustache templates.

Bootstrap 4 sass files are imported to scss/bootstrap.

Part of MDL-55071
parent 3ba00238
......@@ -610,7 +610,7 @@ class core_renderer extends renderer_base {
*/
public function standard_top_of_body_html() {
global $CFG;
$output = $this->page->requires->get_top_of_body_code();
$output = $this->page->requires->get_top_of_body_code($this);
if ($this->page->pagelayout !== 'embedded' && !empty($CFG->additionalhtmltopofbody)) {
$output .= "\n".$CFG->additionalhtmltopofbody;
}
......@@ -4245,6 +4245,22 @@ EOD;
return $this->render_context_header($contextheader);
}
/**
* Renders the skip links for the page.
*
* @param array $links List of skip links.
* @return string HTML for the skip links.
*/
public function render_skip_links($links) {
$context = [ 'links' => []];
foreach ($links as $url => $text) {
$context['links'][] = [ 'url' => $url, 'text' => $text];
}
return $this->render_from_template('core/skip_links', $context);
}
/**
* Renders the header bar.
*
......
......@@ -1531,17 +1531,12 @@ class page_requirements_manager {
* Normally, this method is called automatically by the code that prints the
* <head> tag. You should not normally need to call it in your own code.
*
* @param renderer_base $renderer
* @return string the HTML code to go at the start of the <body> tag.
*/
public function get_top_of_body_code() {
public function get_top_of_body_code(renderer_base $renderer) {
// First the skip links.
$links = '';
$attributes = array('class' => 'skip');
foreach ($this->skiplinks as $url => $text) {
$links .= html_writer::link('#'.$url, $text, $attributes);
}
$output = html_writer::tag('div', $links, array('class'=>'skiplinks')) . "\n";
$this->js_init_call('M.util.init_skiplink');
$output = $renderer->render_skip_links($this->skiplinks);
// YUI3 JS needs to be loaded early in the body. It should be cached well by the browser.
$output .= $this->get_yui3lib_headcode();
......
<div class="skiplinks">
{{#links}}
<a href="{{{url}}}" class="skip">{{{text}}}</a>
{{/links}}
</div>
{{#js}}
require(['core/yui'], function(Y) {
M.util.init_skiplink(Y);
});
{{/js}}
\ No newline at end of file
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
namespace theme_noname\output;
use html_writer;
use tabobject;
use tabtree;
use custom_menu_item;
use custom_menu;
defined('MOODLE_INTERNAL') || die;
/**
* Renderers to align Moodle's HTML with that expected by Bootstrap
*
* @package theme_noname
* @copyright 2012 Bas Brands, www.basbrands.nl
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class core_renderer extends \core_renderer {
/** @var custom_menu_item language The language menu if created */
protected $language = null;
/**
* The standard tags that should be included in the <head> tag
* including a meta description for the front page
*
* @return string HTML fragment.
*/
public function standard_head_html() {
global $SITE, $PAGE;
$output = parent::standard_head_html();
if ($PAGE->pagelayout == 'frontpage') {
$summary = s(strip_tags(format_text($SITE->summary, FORMAT_HTML)));
if (!empty($summary)) {
$output .= "<meta name=\"description\" content=\"$summary\" />\n";
}
}
return $output;
}
/*
* This renders the navbar.
* Uses bootstrap compatible html.
*/
public function navbar() {
$items = $this->page->navbar->get_items();
if (empty($items)) {
return '';
}
$breadcrumbs = array();
foreach ($items as $item) {
$item->hideicon = true;
$breadcrumbs[] = $this->render($item);
}
$list_items = '<li>'.join(" </li><li>", $breadcrumbs).'</li>';
$title = '<span class="accesshide" id="navbar-label">'.get_string('pagepath').'</span>';
return $title . '<nav aria-labelledby="navbar-label"><ul class="breadcrumb">' .
$list_items . '</ul></nav>';
}
/*
* Overriding the custom_menu function ensures the custom menu is
* always shown, even if no menu items are configured in the global
* theme settings page.
*/
public function custom_menu($custommenuitems = '') {
global $CFG;
if (empty($custommenuitems) && !empty($CFG->custommenuitems)) {
$custommenuitems = $CFG->custommenuitems;
}
$custommenu = new custom_menu($custommenuitems, current_language());
return $this->render_custom_menu($custommenu);
}
/*
* This renders the bootstrap top menu.
*
* This renderer is needed to enable the Bootstrap style navigation.
*/
protected function render_custom_menu(custom_menu $menu) {
global $CFG;
$langs = get_string_manager()->get_list_of_translations();
$haslangmenu = $this->lang_menu() != '';
if (!$menu->has_children() && !$haslangmenu) {
return '';
}
if ($haslangmenu) {
$strlang = get_string('language');
$currentlang = current_language();
if (isset($langs[$currentlang])) {
$currentlang = $langs[$currentlang];
} else {
$currentlang = $strlang;
}
$this->language = $menu->add($currentlang, new moodle_url('#'), $strlang, 10000);
foreach ($langs as $langtype => $langname) {
$this->language->add($langname, new moodle_url($this->page->url, array('lang' => $langtype)), $langname);
}
}
$content = '<ul class="nav">';
foreach ($menu->get_children() as $item) {
$content .= $this->render_custom_menu_item($item, 1);
}
return $content.'</ul>';
}
/*
* This code renders the custom menu items for the
* bootstrap dropdown menu.
*/
protected function render_custom_menu_item(custom_menu_item $menunode, $level = 0 ) {
static $submenucount = 0;
$content = '';
if ($menunode->has_children()) {
if ($level == 1) {
$class = 'dropdown';
} else {
$class = 'dropdown-submenu';
}
if ($menunode === $this->language) {
$class .= ' langmenu';
}
$content = html_writer::start_tag('li', array('class' => $class));
// If the child has menus render it as a sub menu.
$submenucount++;
if ($menunode->get_url() !== null) {
$url = $menunode->get_url();
} else {
$url = '#cm_submenu_'.$submenucount;
}
$content .= html_writer::start_tag('a', array('href'=>$url, 'class'=>'dropdown-toggle', 'data-toggle'=>'dropdown', 'title'=>$menunode->get_title()));
$content .= $menunode->get_text();
if ($level == 1) {
$content .= '<b class="caret"></b>';
}
$content .= '</a>';
$content .= '<ul class="dropdown-menu">';
foreach ($menunode->get_children() as $menunode) {
$content .= $this->render_custom_menu_item($menunode, 0);
}
$content .= '</ul>';
} else {
// The node doesn't have children so produce a final menuitem.
// Also, if the node's text matches '####', add a class so we can treat it as a divider.
if (preg_match("/^#+$/", $menunode->get_text())) {
// This is a divider.
$content = '<li class="divider">&nbsp;</li>';
} else {
$content = '<li>';
if ($menunode->get_url() !== null) {
$url = $menunode->get_url();
} else {
$url = '#';
}
$content .= html_writer::link($url, $menunode->get_text(), array('title' => $menunode->get_title()));
$content .= '</li>';
}
}
return $content;
}
/**
* This code renders the navbar button to control the display of the custom menu
* on smaller screens.
*
* Do not display the button if the menu is empty.
*
* @return string HTML fragment
*/
public function navbar_button() {
global $CFG;
if (empty($CFG->custommenuitems) && $this->lang_menu() == '') {
return '';
}
$iconbar = html_writer::tag('span', '', array('class' => 'icon-bar'));
$button = html_writer::tag('a', $iconbar . "\n" . $iconbar. "\n" . $iconbar, array(
'class' => 'btn btn-navbar',
'data-toggle' => 'collapse',
'data-target' => '.nav-collapse'
));
return $button;
}
/**
* 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 and (!$tab->linkedwhenselected)) 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 {
if (!($tab->link instanceof moodle_url)) {
// backward compartibility when link was passed as quoted string
$link = "<a href=\"$tab->link\" title=\"$tab->title\">$tab->text</a>";
} else {
$link = html_writer::link($tab->link, $tab->text, array('title' => $tab->title));
}
$params = $tab->selected ? array('class' => 'active') : null;
return html_writer::tag('li', $link, $params);
}
}
}
......@@ -29,29 +29,114 @@ $THEME->sheets = ['build'];
$THEME->editor_sheets = ['editor'];
$THEME->layouts = [
'standard' => [
'file' => 'default.php',
'regions' => ['side-pre', 'side-post'],
],
// Most backwards compatible layout without the blocks - this is the layout used by default.
'base' => array(
'file' => 'columns1.php',
'regions' => array(),
),
// Standard layout with blocks, this is recommended for most pages with general information.
'standard' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
// Main course page.
'course' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('langmenu' => true),
),
'coursecategory' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
// Part of course, typical for modules - default page layout if $cm specified in require_login().
'incourse' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
),
// The site home page.
'frontpage' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('nonavbar' => true),
),
// Server administration scripts.
'admin' => array(
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
// My dashboard page.
'mydashboard' => array(
'file' => 'columns3.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre',
'options' => array('langmenu' => true),
),
// My public page.
'mypublic' => array(
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
'login' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('langmenu' => true),
),
// 'course' => [],
// 'coursecategory' => [],
// 'incourse' => [],
// 'frontpage' => [],
// 'admin' => [],
// 'mydashboard' => [],
// 'mypublic' => [],
// 'report' => [],
// 'login' => [],
// General purpose.
// 'embedded' => [],
// 'frametop' => [],
// 'maintenance' => [],
// 'popup' => [],
// 'print' => [],
// 'redirect' => [],
// 'secure' => [],
// Pages that appear in pop-up windows - no navigation, no blocks, no header.
'popup' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nonavbar' => true),
),
// No blocks and minimal footer - used for legacy frame layouts only!
'frametop' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nocoursefooter' => true),
),
// Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.
'embedded' => array(
'file' => 'embedded.php',
'regions' => array()
),
// Used during upgrade and install, and for the 'This site is undergoing maintenance' message.
// This must not have any blocks, links, or API calls that would lead to database or cache interaction.
// Please be extremely careful if you are modifying this layout.
'maintenance' => array(
'file' => 'maintenance.php',
'regions' => array(),
),
// Should display the content and basic headers only.
'print' => array(
'file' => 'columns1.php',
'regions' => array(),
'options' => array('nofooter' => true, 'nonavbar' => false),
),
// The pagelayout used when a redirection is occuring.
'redirect' => array(
'file' => 'embedded.php',
'regions' => array(),
),
// The pagelayout used for reports.
'report' => array(
'file' => 'columns2.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
// The pagelayout used for safebrowser and securewindow.
'secure' => array(
'file' => 'secure.php',
'regions' => array('side-pre', 'side-post'),
'defaultregion' => 'side-pre'
)
];
// $THEME->javascripts = array();
......
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A one column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT
];
echo $OUTPUT->render_from_template('theme_noname/columns1', $templatecontext);
\ No newline at end of file
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A two column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT,
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-3 col-md-pull-9'),
];
echo $OUTPUT->render_from_template('theme_noname/columns2', $templatecontext);
\ No newline at end of file
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* A three column layout for the noname theme.
*
* @package theme_noname
* @copyright 2016 Damyon Wiese
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$templatecontext = [
'sitename' => format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))),
'output' => $OUTPUT,
'sidepreblocks' => $OUTPUT->blocks('side-pre', 'col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9'),
'sidepostblocks' => $OUTPUT->blocks('side-post', 'col-md-3')
];
echo $OUTPUT->render_from_template('theme_noname/columns3', $templatecontext);
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Default layout.
*
* @package theme_noname
* @copyright 2016 Frédéric Massart - FMCorz.net
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$regionmain = 'span9 pull-right';
$sidepre = 'span3 desktop-first-column';
if (right_to_left()) {
$regionmain = 'span9';
$sidepre = 'span3 pull-right';
}
echo $OUTPUT->doctype() ?>
<html <?php echo $OUTPUT->htmlattributes(); ?>>
<head>
<title><?php echo $OUTPUT->page_title(); ?></title>
<link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); ?>" />
<?php echo $OUTPUT->standard_head_html() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body <?php echo $OUTPUT->body_attributes('two-column'); ?>>
<?php echo $OUTPUT->standard_top_of_body_html() ?>
<header role="banner" class="navbar navbar-fixed-top moodle-has-zindex">
<nav role="navigation" class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php
echo format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID)));