themes/openwrt: rework menu and header area

4 files changed, 172 insertions, 262 deletions

diff --git a/themes/openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/openwrt/htdocs/luci-static/openwrt.org/cascade.css
index bada73b99..aaba385e5 100644
--- a/themes/openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -24,6 +24,71 @@ body {
 	padding: 0;
 }
 
+ul.tabmenu {
+	margin: 0;
+	clear: both;
+	display: block;
+	vertical-align: bottom;
+	font-size: 90%;
+	padding: 5px 0 0 5px;
+}
+
+div.tabmenu2 {
+	background-color: #AAAAAA;
+	background-image: url(tabbg.png);
+	background-repeat: repeat-x;
+	margin-top: -1px;
+	border: 1px solid #444444;
+	border-bottom: none;
+}
+
+div.tabmenu3,
+div.tabmenu4,
+div.tabmenu5 {
+	background-color: #AAAAAA;
+	background-image: url(tabbg.png);
+	background-repeat: repeat-x;
+	border: none;
+}
+
+ul.tabmenu li {
+	float: left;
+	display: block;
+	overflow: hidden;
+}
+
+ul.tabmenu li a {
+	text-decoration: none;
+	color: #444444;
+	display: block;
+	padding: 3px 8px;
+	margin: 0 2px;
+	line-height: 1.3em;
+	border: 1px solid transparent;
+	border-bottom: none;
+	font-size: 85%;
+}
+
+ul.tabmenu li.active a {
+	font-weight: bold;
+	color: #000000;
+	background: #f5f5f5;
+	border: 1px solid #AAAAAA;
+	border-bottom: none;
+}
+
+ul.tabmenu li a:hover {
+	color: #444444;
+	border-color: #444444;
+}
+
+ul.l1 li a {
+	background-color: #AAAAAA;
+	background-image: url(tabbg.png);
+	background-repeat: repeat-x;
+	border-color: #444444;
+}
+
 abbr,
 acronym {
 	font-style: normal;
@@ -79,106 +144,13 @@ code {
 	background-color: white;
 }
 
-#header {
-	min-height: 98px;
-	background-image: url(header.png);
-	background-repeat: no-repeat;
-	background-position: left center;
-	background-color: #557788;
-	color: #ffffff;
-	text-align: right;
-}
-
-#header h1 {
-	padding: 1em 1em 0 1em;
-}
-
-#header p {
-	padding: 0 1em 1em 1em;
-}
-
-#header h1,
-#header p {
-	font-size: 70%;
-	font-weight: normal;
-	line-height: 160%;
-	text-align: right;
-}
-
-ul.dropdowns {
+div.hostinfo {
 	float: left;
 	margin: 0;
 	padding: 0;
 	width: auto;
-	list-style: none;
-}
-
-html>body ul.dropdowns {
-	position: relative;
-}
-
-ul.dropdowns li,
-ul.dropdowns ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-ul.dropdowns li {
-	float: left;
-	position: relative;
-	white-space: nowrap;
-}
-
-ul.dropdowns li ul {
-	position: absolute;
-	z-index: 1000;
-	top: auto;
-	min-width: 10em;
-}
-
-ul.dropdowns li li {
-	float: none;
-	position: relative;
-}
-
-ul.dropdowns li a {
-	display: block;
-}
-
-ul.dropdowns ul li ul {
-	top: 0;
-}
-
-ul.dropdowns li ul,
-ul.dropdowns li.over ul ul,
-ul.dropdowns li.focus ul ul,
-ul.dropdowns li:hover ul ul,
-ul.dropdowns li.over ul ul ul,
-ul.dropdowns li.focus ul ul ul,
-ul.dropdowns li:hover ul ul ul,
-ul.dropdowns li.over ul ul ul ul,
-ul.dropdowns li.focus ul ul ul ul,
-ul.dropdowns li:hover ul ul ul ul {
-	left: -3000px;
-}
-
-ul.dropdowns li.over ul,
-ul.dropdowns li.focus ul,
-ul.dropdowns li:hover ul {
-	left: 0;
-}
-
-ul.dropdowns ul li.over ul,
-ul.dropdowns ul li.focus ul,
-ul.dropdowns ul li:hover ul,
-ul.dropdowns ul ul li.over ul,
-ul.dropdowns ul ul li.focus ul,
-ul.dropdowns ul ul li:hover ul,
-ul.dropdowns ul ul ul li.over ul,
-ul.dropdowns ul ul ul li.focus ul,
-ul.dropdowns ul ul ul li:hover ul {
-	left: 100%;
+	font-size: 80%;
+	padding: 0.5em;
 }
 
 #menubar {
@@ -193,24 +165,6 @@ ul.dropdowns ul ul ul li:hover ul {
 	background-color: #557788;
 }
 
-#menubar ul.dropdowns {
-	min-height: 1.8em;
-	background: #000000;
-	color: #ffffff;
-}
-
-#menubar ul.dropdowns li ul {
-	background: #000000;
-	color: #ffffff;
-	border-width: 0 1px 1px 1px;
-	border-style: solid;
-	border-color: #444444;
-}
-
-#menubar ul.dropdowns ul li ul {
-	border-width: 1px;
-}
-
 html #menubar a:link,
 html #menubar a:visited {
 	position: relative;
@@ -251,63 +205,6 @@ html #menubar a:visited.warning {
 	font-weight: bold;
 }
 
-#menubar ul.dropdowns li.over>a,
-#menubar ul.dropdowns li.focus>a,
-#menubar ul.dropdowns li:hover>a {
-	font-weight: bold;
-}
-
-.lang_de #submenu_mini_system { min-width: 13.3em; }
-* html .lang_de #submenu_mini_system { width: 13.3em; }
-
-.lang_pt-br #submenu_mini_network { min-width: 14em; }
-* html .lang_pt-br #submenu_mini_network { width: 14em; }
-
-.lang_pt-br #submenu_mini_system { min-width: 11.5em; }
-* html .lang_pt-br #submenu_mini_system { width: 11.5em; }
-
-.lang_ru #submenu_mini_system { min-width: 18em; }
-* html .lang_ru #submenu_mini_system { width: 18em; }
-
-.lang_pt-br #submenu_admin_index { min-width: 11em; }
-* html .lang_pt-br #submenu_admin_index { width: 11em; }
-
-.lang_ru #submenu_admin_index { min-width: 15.5em; }
-* html .lang_ru #submenu_admin_index { width: 15.5em; }
-
-.lang_ru #submenu_admin_status { min-width: 10.5em; }
-* html .lang_ru #submenu_admin_status { width: 10.5em; }
-
-.lang_de #submenu_admin_system { min-width: 13.3em; }
-* html .lang_de #submenu_admin_system { width: 13.3em; }
-
-.lang_fr #submenu_admin_system { min-width: 14.5em; }
-* html .lang_fr #submenu_admin_system { width: 14.5em; }
-
-.lang_pt-br #submenu_admin_system { min-width: 11.5em; }
-* html .lang_pt-br #submenu_admin_system { width: 11.5em; }
-
-.lang_ru #submenu_admin_system { min-width: 18em; }
-* html .lang_ru #submenu_admin_system { width: 18em; }
-
-#submenu_admin_services_chillispot { min-width: 15.5em; }
-* html #submenu_admin_services_chillispot { width: 15.5em; }
-
-#submenu_admin_services_coovachilli { min-width: 15em; }
-* html #submenu_admin_services_coovachilli { width: 15em; }
-
-.lang_ru #submenu_admin_network_routes { min-width: 15.3em; }
-* html .lang_ru #submenu_admin_network_routes { width: 15.3em; }
-
-#submenu_admin_network_firewall { min-width: 14em; }
-* html #submenu_admin_network_firewall { width: 14em; }
-
-.lang_de #submenu_admin_network_firewall { min-width: 16.5em; }
-* html .lang_de #submenu_admin_network_firewall { width: 16.5em; }
-
-.lang_pt-br #submenu_admin_network_firewall { min-width: 15em; }
-* html .lang_pt-br #submenu_admin_network_firewall { width: 15em; }
-
 #modemenu {
 	width: auto;
 	background: #000000;
@@ -342,17 +239,20 @@ textarea#syslog {
 	font-family: monospace;
 }
 
-#maincontent {
+#maincontainer {
 	clear: both;
 	width: 80%;
 	margin: 0 auto;
+}
+
+#maincontent {
 	padding: 0.5em;
 	background: #f5f5f5;
 	color: #000000;
+	font-size: 80%;
 	border-width: 0 1px 1px 1px;
 	border-style: solid;
 	border-color: #444444;
-	font-size: 80%;
 }
 
 #maincontent h2 {
diff --git a/themes/openwrt/htdocs/luci-static/openwrt.org/tabbg.png b/themes/openwrt/htdocs/luci-static/openwrt.org/tabbg.png
new file mode 100644
index 000000000..c84c437cd
--- /dev/null
+++ b/themes/openwrt/htdocs/luci-static/openwrt.org/tabbg.png
diff --git a/themes/openwrt/luasrc/view/themes/openwrt.org/footer.htm b/themes/openwrt/luasrc/view/themes/openwrt.org/footer.htm
index 8df68b14c..736644fba 100644
--- a/themes/openwrt/luasrc/view/themes/openwrt.org/footer.htm
+++ b/themes/openwrt/luasrc/view/themes/openwrt.org/footer.htm
@@ -14,8 +14,8 @@ $Id$
 -%>
 <div class="clear"></div>
 </div>
+</div>
 
 <p class="luci"><a href="<%=controller%>/about">Powered by <%= luci.__appname__ .. " (v" .. luci.__version__ .. ")" %></a></p>
 </body>
 </html>
-
diff --git a/themes/openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/openwrt/luasrc/view/themes/openwrt.org/header.htm
index 0a32055f8..11f6793b7 100644
--- a/themes/openwrt/luasrc/view/themes/openwrt.org/header.htm
+++ b/themes/openwrt/luasrc/view/themes/openwrt.org/header.htm
@@ -1,7 +1,7 @@
 <%#
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
-Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2008-2010 Jo-Philipp Wich <xm@subsignal.org>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +17,8 @@ require("luci.sys")
 local load1, load5, load15 = luci.sys.loadavg()
 local request  = require("luci.dispatcher").context.path
 local category = request[1]
+local request2 = require("luci.dispatcher").context.request
+local leaf     = request2[#request2]
 local tree     = luci.dispatcher.node()
 local cattree  = category and luci.dispatcher.node(category)
 local node     = luci.dispatcher.context.dispatched
@@ -33,6 +35,72 @@ end
 require("luci.i18n").loadc("base")
 require("luci.http").prepare_content("application/xhtml+xml")
 
+
+	local function nodeurl(prefix, name, query)
+		local url = controller .. prefix .. name .. "/"
+		if query then
+			url = url .. luci.http.build_querystring(query)
+		end
+		return pcdata(url)
+	end
+
+	local function subtree(prefix, node, level)
+		if not node.nodes or node.hidden then
+			return false
+		end
+
+		if not level then
+			level = 1
+		end
+
+		local index = {}
+		local count = 0
+		for k, n in pairs(node.nodes) do
+			if n.title and n.target then
+				table.insert(index, {name=k, order=n.order or 100})
+				count = count + 1
+			end
+		end
+
+		table.sort(index, function(a, b) return a.order < b.order end)
+
+		if count > 0 then
+%>
+	<div class="tabmenu<%=level%>">
+	<ul class="tabmenu l<%=level%>">
+		<%
+			local selected_node
+			local selected_name
+
+			for j, v in pairs(index) do
+				if #v.name > 0 then
+					local nnode = node.nodes[v.name]
+
+					if nnode._menu_selected then
+						selected_node = nnode
+						selected_name = v.name
+					end
+		%>
+			<li<% if nnode._menu_selected or v.name == leaf then %> class="active"<% end %>>
+				<a href="<%=nodeurl(prefix, v.name, nnode.query)%>"><%=striptags(nnode.title)%></a>
+			</li>
+		<%
+				end
+			end
+		%>
+	</ul>
+	<br style="clear:both" />
+<%
+			if selected_node then
+				subtree(prefix .. selected_name .. "/", selected_node, level + 1)
+			end
+%>
+	</div>
+<%
+		end
+	end
+
+
 -%>
 
 <?xml version="1.0" encoding="utf-8"?>
@@ -59,77 +127,13 @@ require("luci.http").prepare_content("application/xhtml+xml")
 <span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
 </p>
 
-<div id="header">
-<h1><%=luci.version.distname%></h1>
-<p>
-<%=luci.version.distversion%><br />
-<%:Load%>: <%="%.2f" % load1%> <%="%.2f" % load5%> <%="%.2f" % load15%><br />
-<%:Hostname%>: <%=hostname%>
-</p>
-</div>
-
 <div id="menubar">
 <h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>
-<ul id="mainmenu" class="dropdowns">
-<%-
-local function submenu(prefix, node)
-	if not node.nodes or node.hidden then
-		return false
-	end
-	local index = {}
-	local count = 0
-	for k, n in pairs(node.nodes) do
-		if n.title and n.target then
-			table.insert(index, {name=k, order=n.order or 100})
-			count = count + 1
-		end
-	end
-
-	table.sort(index, function(a, b) return a.order < b.order end)
-
-	if count > 0 then
-%>
-<ul id="submenu_<%=string.gsub(string.gsub(prefix, "/", "_"), "^_(.-)_$", "%1")%>">
-<%-
-		for j, v in pairs(index) do
-			if #v.name > 0 then
-				local nnode = node.nodes[v.name]
-				local href = controller .. prefix .. v.name .. "/"
-				href = (nnode.query) and href .. luci.http.build_querystring(nnode.query) or href
-%>
-<li><a<% if nnode._menu_selected then %> class="active"<%end%> href="<%=pcdata(href)%>"><%=striptags(nnode.title)%></a><%-
-submenu(prefix .. v.name .. "/", nnode)
-%></li>
-<%-
-			end
-		end
-%>
-</ul>
-<%
-	end
-end
-
-if cattree and cattree.nodes then
-	local index = {}
-	for k, node in pairs(cattree.nodes) do
-		table.insert(index, {name=k, order=node.order or 100})
-	end
 
-	table.sort(index, function(a, b) return a.order < b.order end)
-
-	for i, k in ipairs(index) do
-		node = cattree.nodes[k.name]
-		if node.title and node.target and not node.hidden then
-			local href = controller.."/"..category.."/"..k.name.."/"
-			href = (k.query) and href .. luci.http.build_querystring(k.query) or href
-%>
-<li><a<% if node._menu_selected then %> class="preactive"<%end%> href="<%=pcdata(href)%>"><%=striptags(node.title)%></a><%
-submenu("/" .. category .. "/" .. k.name .. "/", node)
-%></li><% end
-	end
-end
-%>
-</ul>
+<div class="hostinfo">
+	<%=hostname%> | <%=luci.version.distversion%> |
+	<%:Load%>: <%="%.2f" % load1%> <%="%.2f" % load5%> <%="%.2f" % load15%>
+</div>
 
 <ul id="modemenu"><%
 for k,node in pairs(tree.nodes) do
@@ -151,27 +155,33 @@ if tree.nodes[category] and tree.nodes[category].ucidata then
 		end
 	end
 -%>
-<ul id="savemenu" class="dropdowns">
-<li><% if ucic > 0 then %><a class="warning" href="<%=controller%>/<%=category%>/uci/changes/"><%:Unsaved Changes%>: <%=ucic%></a><%
-submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"])
-else -%>
-<a href="#"><%:Changes%>: 0</a><% end -%>
-</li>
-</ul><% end %>
+<div id="savemenu">
+	<% if ucic > 0 then %>
+		<a class="warning" href="<%=controller%>/<%=category%>/uci/changes/?redir=<%=luci.http.urlencode(tree.nodes[category].nodes["uci"].query)%>"><%:Unsaved Changes%>: <%=ucic%></a>
+	<%- else -%>
+		<a href="#"><%:Changes%>: 0</a>
+	<% end -%>
+</div><% end %>
 
 <div class="clear"></div>
 </div>
-<div id="maincontent">
-	<noscript>
-		<div class="errorbox">
-			<strong><%:Java Script required!%></strong><br />
-			<%:You must enable Java Script in your browser or LuCI will not work properly.%>
-		</div>
-	</noscript>
 
-	<%- if not luci.sys.user.getpasswd("root") then -%>
-	<div class="errorbox">
-		<strong><%:No password set!%></strong><br />
-		<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
+<div id="maincontainer">
+	<div id="tabmenu">
+		<% if category then subtree("/" .. category .. "/", cattree) end %>
 	</div>
-	<%- end -%>
+
+	<div id="maincontent">
+		<noscript>
+			<div class="errorbox">
+				<strong><%:Java Script required!%></strong><br />
+				<%:You must enable Java Script in your browser or LuCI will not work properly.%>
+			</div>
+		</noscript>
+
+		<%- if not luci.sys.user.getpasswd("root") then -%>
+		<div class="errorbox">
+			<strong><%:No password set!%></strong><br />
+			<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
+		</div>
+		<%- end -%>