Merge pull request #3780 from jow-/theme-openwrt-2020
[RFC/RFT] themes: add new theme OpenWrt 2020
This commit is contained in:
Jo-Philipp Wich
GitHub
commit
eed3edfe6b
9 changed files with 2112 additions and 0 deletions
14
themes/luci-theme-openwrt-2020/Makefile
Normal file
14
themes/luci-theme-openwrt-2020/Makefile
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
#
|
||||||
|
# Copyright (C) 2020 Jo-Philipp Wich <jo@mein.io>
|
||||||
|
#
|
||||||
|
# This is free software, licensed under the Apache License, Version 2.0 .
|
||||||
|
#
|
||||||
|
|
||||||
|
include $(TOPDIR)/rules.mk
|
||||||
|
|
||||||
|
LUCI_TITLE:=LuCI modern OpenWrt theme
|
||||||
|
LUCI_DEPENDS:=
|
||||||
|
|
||||||
|
include ../../luci.mk
|
||||||
|
|
||||||
|
# call BuildPackage - OpenWrt buildroot signature
|
||||||
Binary file not shown.
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.2 98">
|
||||||
|
<path d="m 40.5,50.8 a 6.6,6.6 0 1 0 0,13.2 6.6,6.6 0 0 0 0,-13.2 m -40.5,-33.9 7,6.8 a 47.5,47.5 0 0 1 67.2,0 l 7,-6.8 a 57.2,57.2 0 0 0 -81.2,0" style="fill:#fff" />
|
||||||
|
<path d="m 12.5,29.2 6.8,7 a 30,30 0 0 1 42.6,0 l 6.8,-7 a 39.7,39.7 0 0 0 -56.3,0" style="fill:#fff" />
|
||||||
|
<path d="m 24.8,41.6 6.8,6.9 a 12.6,12.6 0 0 1 18,0 l 6.8,-6.9 a 22.3,22.3 0 0 0 -31.6,0" style="fill:#fff" />
|
||||||
|
<path d="m 64.9,39.7 a 30.2,30.2 0 1 1 -48.7,0 l -6.9,-7 a 39.9,39.9 0 1 0 62.5,0 z" style="fill:#072342" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 626 B |
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="132 132 264 264">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="g" cx="0%" cy="0%" r="60%">
|
||||||
|
<stop offset=".8" style="stop-opacity:1" />
|
||||||
|
<stop offset="1" style="stop-opacity:.5" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<path style="fill:url(#g)" d="M 264 132 A 132 132 0 0 0 132 264 A 132 132 0 0 0 264 396 A 132 132 0 0 0 396 264 A 132 132 0 0 0 264 132 z M 264 170 A 94 94 0 0 1 359 264 A 94 94 0 0 1 264 359 A 94 94 0 0 1 170 264 A 94 94 0 0 1 264 170 z " />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 582 B |
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
if [ "$PKG_UPGRADE" != 1 ]; then
|
||||||
|
uci batch <<-EOF
|
||||||
|
set luci.themes.OpenWrt2020=/luci-static/openwrt2020
|
||||||
|
set luci.main.mediaurlbase=/luci-static/openwrt2020
|
||||||
|
commit luci
|
||||||
|
EOF
|
||||||
|
fi
|
||||||
|
|
||||||
|
exit 0
|
||||||
Loading…
Reference in a new issue