summaryrefslogtreecommitdiffhomepage
path: root/themes/luci-theme-openwrt-2020/luasrc/view
diff options
context:
space:
mode:
authorJo-Philipp Wich <jo@mein.io>2020-03-23 22:31:50 +0100
committerJo-Philipp Wich <jo@mein.io>2020-03-26 09:54:40 +0100
commit63b5f63a420a4f096dda4e67bf811ba2d1e842df (patch)
tree31ad354f556ce598f5f2a0f0484f2502e722eac4 /themes/luci-theme-openwrt-2020/luasrc/view
parent0fb2f8f1d1d8748b56522cc81cf68d5aa04b9f50 (diff)
themes: add new theme OpenWrt 2020
Introduce a new theme modelled after the logo guidelines published in https://openwrt.org/_media/docs/guide-graphic-designer/openwrt-logo-usage-guidelines.pdf Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'themes/luci-theme-openwrt-2020/luasrc/view')
-rw-r--r--themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/footer.htm16
-rw-r--r--themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm236
2 files changed, 252 insertions, 0 deletions
diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/footer.htm b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/footer.htm
new file mode 100644
index 0000000000..07be0d65a3
--- /dev/null
+++ b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/footer.htm
@@ -0,0 +1,16 @@
+<%#
+ Copyright 2020 Jo-Philipp Wich <jo@mein.io>
+ Licensed to the public under the Apache License 2.0.
+-%>
+
+<div class="clear"></div>
+</div>
+</div>
+
+<p class="luci">
+ <% local ver = require "luci.version" -%>
+ Powered by <%= ver.luciname %> (<%= ver.luciversion %>)
+</p>
+
+</body>
+</html>
diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
new file mode 100644
index 0000000000..ad1a84c407
--- /dev/null
+++ b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm
@@ -0,0 +1,236 @@
+<%#
+ Copyright 2020 Jo-Philipp Wich <jo@mein.io>
+ Licensed to the public under the Apache License 2.0.
+-%>
+
+<%
+ local sys = require "luci.sys"
+ local util = require "luci.util"
+ local http = require "luci.http"
+ local disp = require "luci.dispatcher"
+ local ver = require "luci.version"
+
+ local boardinfo = util.ubus("system", "board") or { }
+
+ local node = disp.context.dispatched
+ local path = table.concat(disp.context.path, "-")
+
+ http.prepare_content("text/html; charset=UTF-8")
+-%>
+
+<html lang="<%=luci.i18n.context.lang%>">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
+<link rel="icon" href="<%=media%>/favicon.png" type="image/svg+xml" />
+<script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%>"></script>
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+ (function() {
+ function get_children(node) {
+ var children = [];
+
+ for (var k in node.children) {
+ if (!node.children.hasOwnProperty(k))
+ continue;
+
+ if (!node.children[k].satisfied)
+ continue;
+
+ if (!node.children[k].hasOwnProperty('title'))
+ continue;
+
+ children.push(Object.assign(node.children[k], { name: k }));
+ }
+
+ return children.sort(function(a, b) {
+ return ((a.order || 1000) - (b.order || 1000));
+ });
+ }
+
+ function handle_mainmenu_expand(ev) {
+ var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
+
+ document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
+ if (li !== a.parentNode)
+ li.classList.remove('active');
+ });
+
+ if (!ul2)
+ return;
+
+ if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
+ ul2.classList.add('align-left');
+
+ ul1.classList.add('active');
+ a.parentNode.classList.add('active');
+ a.blur();
+
+ ev.preventDefault();
+ ev.stopPropagation();
+ }
+
+ function render_mainmenu(tree, url, level) {
+ var l = (level || 0) + 1,
+ ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
+ children = get_children(tree);
+
+ if (children.length == 0 || l > 2)
+ return E([]);
+
+ for (var i = 0; i < children.length; i++) {
+ var isActive = (L.env.dispatchpath[l] == children[i].name),
+ activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
+
+ ul.appendChild(E('li', { 'class': activeClass }, [
+ E('a', {
+ 'href': L.url(url, children[i].name),
+ 'click': (l == 1) ? handle_mainmenu_expand : null,
+ }, [ _(children[i].title) ]),
+ render_mainmenu(children[i], url + '/' + children[i].name, l)
+ ]));
+ }
+
+ if (l == 1) {
+ var container = document.querySelector('#mainmenu');
+
+ container.firstElementChild.appendChild(ul);
+ container.style.display = '';
+ }
+
+ return ul;
+ }
+
+ function render_modemenu(tree) {
+ var ul = document.querySelector('#modemenu'),
+ children = get_children(tree);
+
+ for (var i = 0; i < children.length; i++) {
+ var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+ ul.appendChild(E('li', {}, [
+ E('a', {
+ 'href': L.url(children[i].name),
+ 'class': isActive ? 'active' : null
+ }, [ _(children[i].title) ])
+ ]));
+
+ if (isActive)
+ render_mainmenu(children[i], children[i].name);
+ }
+
+ if (ul.children.length > 1)
+ ul.style.display = '';
+ }
+
+ function render_tabmenu(tree, url, level) {
+ var container = document.querySelector('#tabmenu'),
+ l = (level || 0) + 1,
+ ul = E('ul', { 'class': 'cbi-tabmenu' }),
+ children = get_children(tree),
+ activeNode = null;
+
+ if (children.length == 0)
+ return E([]);
+
+ for (var i = 0; i < children.length; i++) {
+ var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
+ activeClass = isActive ? ' cbi-tab' : '',
+ className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+ ul.appendChild(E('li', { 'class': className }, [
+ E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+ ]));
+
+ if (isActive)
+ activeNode = children[i];
+ }
+
+ container.appendChild(ul);
+ container.style.display = '';
+
+ if (activeNode)
+ container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));
+
+ return ul;
+ }
+
+ function toggle_sidebar(ev) {
+ var btn = ev.currentTarget,
+ bar = document.querySelector('#mainmenu');
+
+ if (btn.classList.contains('active')) {
+ btn.classList.remove('active');
+ bar.classList.remove('active');
+ }
+ else {
+ btn.classList.add('active');
+ bar.classList.add('active');
+ }
+ }
+
+ document.addEventListener('luci-loaded', function(ev) {
+ var tree = <%= luci.http.write_json(luci.dispatcher.menu_json() or {}) %>,
+ node = tree,
+ url = '';
+
+ render_modemenu(tree);
+
+ if (L.env.dispatchpath.length >= 3) {
+ for (var i = 0; i < 3 && node; i++) {
+ node = node.children[L.env.dispatchpath[i]];
+ url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+ }
+
+ if (node)
+ render_tabmenu(node, url);
+ }
+
+ document.querySelector('#menubar > .navigation').addEventListener('click', toggle_sidebar);
+ });
+ })();
+//]]></script>
+<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
+</head>
+<body class="lang_<%=luci.i18n.context.lang%>" data-page="<%= pcdata(path) %>">
+
+<p class="skiplink">
+<span id="skiplink1"><a href="#navigation"><%:Skip to navigation%></a></span>
+<span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
+</p>
+
+<div id="menubar">
+ <h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>
+
+ <span class="hostname"><%=(boardinfo.hostname or "?")%></span>
+ <span class="distversion"><%=ver.distversion%></span>
+ <span class="indicators">
+ <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
+ <span id="xhr_poll_status_on" style="display:none"><%:Refreshing%></span>
+ <span id="xhr_poll_status_off" style="display:none"><%:Paused%></span>
+ </span>
+ </span>
+
+ <ul id="modemenu" style="display:none"></ul>
+
+</div>
+
+<div id="maincontainer">
+ <div id="mainmenu" style="display:none">
+ <div></div>
+ </div>
+
+ <div id="maincontent">
+ <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" and path ~= "admin-system-admin-password" then -%>
+ <div class="alert-message warning">
+ <h4><%:No password set!%></h4>
+ <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
+ <% if disp.lookup("admin/system/admin") then %>
+ <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
+ <% end %>
+ </div>
+ <%- end -%>
+
+ <div id="tabmenu" style="display:none"></div>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-17 02:46:18 +0000