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>
This commit is contained in:
Jo-Philipp Wich
parent
0fb2f8f1d1
commit
63b5f63a42
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