Refactoring navigation
This commit is contained in:
parent
d7605da60f
commit
bc35492cee
4 changed files with 127 additions and 98 deletions
|
|
@ -27,94 +27,21 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
{{navigation}}
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<!-- Title and Icon -->
|
||||
<a class="navbar-brand" href="/">
|
||||
<span class="glyphicon glyphicon-record" style="color: red; top: 15px;"></span>
|
||||
<b>HAL</b>
|
||||
</a>
|
||||
<!-- Hamburger button for smaller screens -->
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Main navigation -->
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-left">
|
||||
{{#rootNav}}
|
||||
{{^.getSubNavs().length}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}" >{{.getName()}}</a>
|
||||
</li>
|
||||
{{/.getSubNavs().length}}
|
||||
{{#.getSubNavs().length}}
|
||||
<li class="dropdown {{#.isActive()}}active{{/.isActive()}}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{.getName()}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{{#.getSubNavs()}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}">{{.getName()}}</a>
|
||||
</li>
|
||||
{{/.getSubNavs()}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/.getSubNavs().length}}
|
||||
{{/rootNav}}
|
||||
</ul>
|
||||
<div class="row">
|
||||
{{#side_navigation}}
|
||||
{{side_navigation}}
|
||||
|
||||
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
|
||||
{{/side_navigation}}
|
||||
{{^side_navigation}}<div class="main">{{/side_navigation}}
|
||||
{{alerts}}
|
||||
{{content}}
|
||||
</div>
|
||||
|
||||
<!-- User navigation -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="glyphicon glyphicon-user"></span>
|
||||
<strong>{{user.getUsername()}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<div align="center">
|
||||
<img src="{{user.getAvatarUrl()}}" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
{{#userNav}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}">{{.getName()}}</a>
|
||||
</li>
|
||||
{{/userNav}}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
{{#showSubNav}}
|
||||
<!-- Sub navigation -->
|
||||
<div class="col-sm-3 col-md-2 sidebar">
|
||||
<ul id="sub-navbar" class="nav nav-sidebar">
|
||||
{{#subNav}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}">{{.getName()}}</a>
|
||||
</li>
|
||||
{{/subNav}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/showSubNav}}
|
||||
|
||||
{{#showSubNav}}<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">{{/showSubNav}}
|
||||
{{^showSubNav}}<div class="main">{{/showSubNav}}
|
||||
{{alerts}}
|
||||
{{content}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
65
hal-core/resource/resource/web/main_nav.tmpl
Normal file
65
hal-core/resource/resource/web/main_nav.tmpl
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<!-- Title and Icon -->
|
||||
<a class="navbar-brand" href="/">
|
||||
<span class="glyphicon glyphicon-record" style="color: red;"></span>
|
||||
<b>HAL</b>
|
||||
</a>
|
||||
<!-- Hamburger button for smaller screens -->
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Main navigation -->
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-left">
|
||||
{{#rootNav}}
|
||||
{{^.getSubNavs().length}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}" >{{.getName()}}</a>
|
||||
</li>
|
||||
{{/.getSubNavs().length}}
|
||||
{{#.getSubNavs().length}}
|
||||
<li class="dropdown {{#.isActive()}}active{{/.isActive()}}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{.getName()}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{{#.getSubNavs()}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}">{{.getName()}}</a>
|
||||
</li>
|
||||
{{/.getSubNavs()}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/.getSubNavs().length}}
|
||||
{{/rootNav}}
|
||||
</ul>
|
||||
|
||||
<!-- User navigation -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="glyphicon glyphicon-user"></span>
|
||||
<strong>{{user.getUsername()}}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<div align="center">
|
||||
<img src="{{user.getAvatarUrl()}}" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
{{#userNav}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}">{{.getName()}}</a>
|
||||
</li>
|
||||
{{/userNav}}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
10
hal-core/resource/resource/web/main_nav_side.tmpl
Normal file
10
hal-core/resource/resource/web/main_nav_side.tmpl
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!-- Sub navigation -->
|
||||
<div class="col-sm-3 col-md-2 sidebar">
|
||||
<ul id="sub-navbar" class="nav nav-sidebar">
|
||||
{{#subNav}}
|
||||
<li {{#.isActive()}}class="active"{{/.isActive()}}>
|
||||
<a href="{{.getURL()}}">{{.getName()}}</a>
|
||||
</li>
|
||||
{{/subNav}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -12,22 +12,29 @@ import zutil.parser.Templator;
|
|||
import zutil.ui.Navigation;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
|
||||
public abstract class HalWebPage implements HttpPage{
|
||||
private static final String TEMPLATE = HalContext.RESOURCE_WEB_ROOT + "/main_index.tmpl";
|
||||
private static final String TEMPLATE_MAIN = HalContext.RESOURCE_WEB_ROOT + "/main_index.tmpl";
|
||||
private static final String TEMPLATE_NAVIGATION = HalContext.RESOURCE_WEB_ROOT + "/main_nav.tmpl";
|
||||
private static final String TEMPLATE_SIDE_NAVIGATION = HalContext.RESOURCE_WEB_ROOT + "/main_nav_side.tmpl";
|
||||
|
||||
private static Navigation rootNav = Navigation.createRootNav();
|
||||
private static Navigation userNav = Navigation.createRootNav();
|
||||
|
||||
private String pageId;
|
||||
private boolean showSubNav;
|
||||
|
||||
|
||||
public HalWebPage(String id){
|
||||
this.pageId = id;
|
||||
this.showSubNav = true;
|
||||
}
|
||||
|
||||
|
||||
public String getId(){
|
||||
return pageId;
|
||||
}
|
||||
|
|
@ -41,19 +48,39 @@ public abstract class HalWebPage implements HttpPage{
|
|||
try {
|
||||
DBConnection db = HalContext.getDB();
|
||||
|
||||
Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
|
||||
tmpl.set("user", User.getLocalUser(db));
|
||||
tmpl.set("showSubNav", showSubNav);
|
||||
if (showSubNav) {
|
||||
List<Navigation> breadcrumb = Navigation.getBreadcrumb(Navigation.getPagedNavigation(header));
|
||||
if (!breadcrumb.isEmpty())
|
||||
tmpl.set("subNav", breadcrumb.get(1).createPagedNavInstance(header).getSubNavs());
|
||||
// Prepare common template data
|
||||
|
||||
Map<String,Object> data = new HashMap<>();
|
||||
data.put("page", Navigation.getPagedNavigation(header));
|
||||
data.put("user", User.getLocalUser(db));
|
||||
data.put("rootNav", rootNav.createPagedNavInstance(header).getSubNavs());
|
||||
data.put("userNav", userNav.createPagedNavInstance(header).getSubNavs());
|
||||
|
||||
List<Navigation> breadcrumb = Navigation.getBreadcrumb(Navigation.getPagedNavigation(header));
|
||||
if (!breadcrumb.isEmpty()) {
|
||||
data.put("breadcrumb", breadcrumb);
|
||||
data.put("subNav", breadcrumb.get(1).createPagedNavInstance(header).getSubNavs());
|
||||
}
|
||||
tmpl.set("rootNav", rootNav.createPagedNavInstance(header).getSubNavs());
|
||||
tmpl.set("userNav", userNav.createPagedNavInstance(header).getSubNavs());
|
||||
tmpl.set("content", httpRespond(session, cookie, request));
|
||||
tmpl.set("alerts", HalAlertManager.getInstance().generateAlerts()); // do last so we don't miss any alerts
|
||||
out.print(tmpl.compile());
|
||||
|
||||
// Create templates
|
||||
|
||||
Templator navigationTemplate = new Templator(FileUtil.find(TEMPLATE_NAVIGATION));
|
||||
navigationTemplate.setAll(data);
|
||||
|
||||
Templator subNavigationTemplate = null;
|
||||
if (showSubNav) {
|
||||
subNavigationTemplate = new Templator(FileUtil.find(TEMPLATE_SIDE_NAVIGATION));
|
||||
subNavigationTemplate.setAll(data);
|
||||
}
|
||||
|
||||
Templator main = new Templator(FileUtil.find(TEMPLATE_MAIN));
|
||||
main.setAll(data);
|
||||
main.set("navigation", navigationTemplate);
|
||||
main.set("side_navigation", subNavigationTemplate);
|
||||
main.set("content", httpRespond(session, cookie, request));
|
||||
main.set("alerts", HalAlertManager.getInstance().generateAlerts()); // do last so we don't miss any alerts
|
||||
|
||||
out.print(main.compile());
|
||||
} catch (Exception e) {
|
||||
throw new IOException(e);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue