Commit aad8c716 authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-56561 admin: Style admin page listing entire admin tree

It was an unstyled list of links. This changes it to tabs with sub-headings.
parent 92919053
......@@ -605,6 +605,26 @@ class navigation_node implements renderable {
return false;
}
/**
* To better balance the admin tree, we want to group all the short top branches together.
*
* This means < 8 nodes and no subtrees.
*
* @return bool
*/
public function is_short_branch() {
$limit = 8;
if ($this->children->count() >= $limit) {
return false;
}
foreach ($this->children as $child) {
if ($child->has_children()) {
return false;
}
}
return true;
}
/**
* Finds the active node.
*
......
......@@ -15,29 +15,128 @@
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_admin/admin_settings_links
@template core/settings_link_page
Displays the admin tree as a list of grouped links.
Example context (json):
{
"name": "test",
"id": "test0",
"checked": true,
"label": "Do you like crackers?"
"node": {
"text": "Root of menu",
"key": "test0",
"display": true,
"children": [
{
"text": "Child of menu",
"key": "test1",
"display": true,
"children": []
}
]
}
}
}}
<div class="container">
<div class="row">
<div class="col-md-6 push-md-3">
<div class="card">
<div class="card-block">
{{#node}}
{{> core/settings_link_page_single }}
{{/node}}
<ul class="nav nav-tabs" role="tablist">
<!-- First the top most node and immediate children -->
<li class="active"> <a href="#link{{node.key}}" data-toggle="tab" role="tab">{{node.text}}</a> </li>
<!-- Now the first level children with sub nodes -->
{{#node.children}}
{{#children.count}}
{{#display}}
{{^is_short_branch}}
<li> <a href="#link{{key}}" data-toggle="tab" role="tab">{{text}}</a> </li>
{{/is_short_branch}}
{{/display}}
{{/children.count}}
{{/node.children}}
</ul>
<div class="tab-content">
<div class="tab-pane active" id="link{{node.key}}" role="tabpanel">
<div class="well">
<div class="container-fluid">
<div class="row">
<div class="span6 offset6">
<ul class="unstyled indented-list">
{{#node.children}}
{{^children.count}}
{{#display}}
<li><a href="{{{action}}}">{{text}}</a></li>
{{/display}}
{{/children.count}}
{{/node.children}}
</ul>
</div>
</div>
{{#node.children}}
{{#display}}
{{#children.count}}
{{#is_short_branch}}
<hr>
<div class="row">
<div class="span6">
<h4>{{text}}<h4>
</div>
<div class="span6">
<ul class="unstyled indented-list">
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
</ul>
</div>
</div>
{{/is_short_branch}}
{{/children.count}}
{{/display}}
{{/node.children}}
</div>
</div>
</div>
{{#node.children}}
{{#children.count}}
<div class="tab-pane" id="link{{key}}" role="tabpanel">
<div class="well">
<div class="container-fluid">
<div class="row">
<div class="span6">
<h4>{{text}}<h4>
</div>
<div class="span6">
<ul class="unstyled">
{{#children}}
{{#display}}
{{^children.count}}
<li><a href="{{{action}}}">{{text}}</a></li>
{{/children.count}}
{{/display}}
{{/children}}
</ul>
</div>
</div>
{{#children}}
{{#display}}
{{#children.count}}
<hr>
<div class="row">
<div class="span6">
<h4>{{text}}<h4>
</div>
<div class="span6">
<ul class="unstyled indented-list">
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
</ul>
</div>
</div>
{{/children.count}}
{{/display}}
{{/children}}
</div>
</div>
</div>
{{/children.count}}
{{/node.children}}
</div>
......@@ -21,19 +21,26 @@
Example context (json):
{
"text": "Root of menu",
"key": "test0",
"display": true,
"children": []
}
}}
<ul class="nav m-l-2">
{{#has_action}}
<li class="nav-item"><a class="nav-link" href="{{{action}}}">{{text}}</a></li>
{{/has_action}}
{{^has_action}}
<li class="nav-item">{{text}}</li>
{{/has_action}}
{{#display}}
{{#action}}
<li><a href="{{{action}}}">{{text}}</a></li>
{{/action}}
{{^action}}
<li><strong>{{text}}</strong></li>
{{/action}}
{{#children.count}}
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
<li>
<ul class="unstyled indented-list">
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
</ul>
</li>
{{/children.count}}
</ul>
{{/display}}
......@@ -39,4 +39,5 @@ $breadcrumb-divider-rtl: "◀" !default;
@import "moodle/sticky-footer";
@import "moodle/popover-region";
@import "moodle/tool_usertours";
@import "moodle/responsive-tabs";
@import "moodle/bs2-compat";
.nav.nav-tabs {
@include media-breakpoint-down(sm) {
.nav-item {
float: none;
}
.nav-link.active {
@include border-radius($border-radius);
border-color: $nav-tabs-border-color;
}
}
}
{{!
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/>.
}}
{{!
@template core/settings_link_page
Displays the admin tree as a list of grouped links.
Example context (json):
{
"node": {
"text": "Root of menu",
"key": "test0",
"display": true,
"children": [
{
"text": "Child of menu",
"key": "test1",
"display": true,
"children": []
}
]
}
}
}}
<ul class="nav nav-tabs" role="tablist">
<!-- First the top most node and immediate children -->
<li class="nav-item">
<a class="nav-link active" href="#link{{node.key}}" data-toggle="tab" role="tab">{{node.text}}</a>
</li>
<!-- Now the first level children with sub nodes -->
{{#node.children}}
{{#children.count}}
{{#display}}
{{^is_short_branch}}
<li class="nav-item">
<a class="nav-link" href="#link{{key}}" data-toggle="tab" role="tab">{{text}}</a>
</li>
{{/is_short_branch}}
{{/display}}
{{/children.count}}
{{/node.children}}
</ul>
<div class="tab-content">
<div class="tab-pane active" id="link{{node.key}}" role="tabpanel">
<div class="card">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-sm-6 push-sm-6">
<ul class="list-unstyled">
{{#node.children}}
{{^children.count}}
{{#display}}
<li><a href="{{{action}}}">{{text}}</a></li>
{{/display}}
{{/children.count}}
{{/node.children}}
</ul>
</div>
</div>
{{#node.children}}
{{#display}}
{{#children.count}}
{{#is_short_branch}}
<hr>
<div class="row">
<div class="col-sm-6">
<h4>{{text}}<h4>
</div>
<div class="col-sm-6">
<ul class="list-unstyled">
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
</ul>
</div>
</div>
{{/is_short_branch}}
{{/children.count}}
{{/display}}
{{/node.children}}
</div>
</div>
</div>
</div>
{{#node.children}}
{{#children.count}}
<div class="tab-pane" id="link{{key}}" role="tabpanel">
<div class="card">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h4>{{text}}<h4>
</div>
<div class="col-sm-6">
<ul class="list-unstyled">
{{#children}}
{{#display}}
{{^children.count}}
<li><a href="{{{action}}}">{{text}}</a></li>
{{/children.count}}
{{/display}}
{{/children}}
</ul>
</div>
</div>
{{#children}}
{{#display}}
{{#children.count}}
<hr>
<div class="row">
<div class="col-sm-6">
<h4>{{text}}<h4>
</div>
<div class="col-sm-6">
<ul class="list-unstyled">
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
</ul>
</div>
</div>
{{/children.count}}
{{/display}}
{{/children}}
</div>
</div>
</div>
</div>
{{/children.count}}
{{/node.children}}
</div>
{{!
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/>.
}}
{{!
@template core/settings_link_page_single
Displays the admin tree as a list of grouped links.
Example context (json):
{
"text": "Root of menu",
"key": "test0",
"display": true,
"children": []
}
}}
{{#display}}
{{#action}}
<li><a href="{{{action}}}">{{text}}</a></li>
{{/action}}
{{^action}}
<li><strong>{{text}}</strong></li>
{{/action}}
{{#children.count}}
<li>
<ul class="list-unstyled m-l-2">
{{#children}}
{{> core/settings_link_page_single }}
{{/children}}
</ul>
</li>
{{/children.count}}
{{/display}}
......@@ -2403,3 +2403,4 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
}
}
}
......@@ -89,3 +89,7 @@ input[id$="_clearbutton"],
input[type="reset"] {
.btn-warning
}
// Used in page listing all admin settings.
ul.indented-list {
margin-left: 20px;
}
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment