libs/cbi: Improved user interface draft #1

15 files changed, 116 insertions, 45 deletions

diff --git a/libs/cbi/htdocs/luci-static/resources/cbi/add.gif b/libs/cbi/htdocs/luci-static/resources/cbi/add.gif
new file mode 100644
index 000000000..0888abf85
--- /dev/null
+++ b/libs/cbi/htdocs/luci-static/resources/cbi/add.gif
diff --git a/libs/cbi/htdocs/luci-static/resources/cbi/apply.gif b/libs/cbi/htdocs/luci-static/resources/cbi/apply.gif
new file mode 100644
index 000000000..82ae7ed82
--- /dev/null
+++ b/libs/cbi/htdocs/luci-static/resources/cbi/apply.gif
diff --git a/libs/cbi/htdocs/luci-static/resources/cbi/fieldadd.gif b/libs/cbi/htdocs/luci-static/resources/cbi/fieldadd.gif
new file mode 100644
index 000000000..431ff64d1
--- /dev/null
+++ b/libs/cbi/htdocs/luci-static/resources/cbi/fieldadd.gif
diff --git a/libs/cbi/htdocs/luci-static/resources/cbi/help.gif b/libs/cbi/htdocs/luci-static/resources/cbi/help.gif
new file mode 100644
index 000000000..9dfa0e196
--- /dev/null
+++ b/libs/cbi/htdocs/luci-static/resources/cbi/help.gif
diff --git a/libs/cbi/htdocs/luci-static/resources/cbi/reset.gif b/libs/cbi/htdocs/luci-static/resources/cbi/reset.gif
new file mode 100644
index 000000000..c941c1902
--- /dev/null
+++ b/libs/cbi/htdocs/luci-static/resources/cbi/reset.gif
diff --git a/libs/cbi/htdocs/luci-static/resources/cbi/save.gif b/libs/cbi/htdocs/luci-static/resources/cbi/save.gif
new file mode 100644
index 000000000..35e949963
--- /dev/null
+++ b/libs/cbi/htdocs/luci-static/resources/cbi/save.gif
diff --git a/libs/cbi/luasrc/view/cbi/footer.htm b/libs/cbi/luasrc/view/cbi/footer.htm
index 732389c00..b71905820 100644
--- a/libs/cbi/luasrc/view/cbi/footer.htm
+++ b/libs/cbi/luasrc/view/cbi/footer.htm
@@ -14,9 +14,9 @@ $Id$
 -%>
 
 	<div>
-		<input type="submit" name="cbi.apply" value="<%:saveapply%>" />
-		<input type="submit" value="<%:save%>" />
-		<input type="reset" value="<%:reset%>" />
+		<input class="cbi-button cbi-button-apply" type="submit" name="cbi.apply" value="<%:saveapply%>" />
+		<input class="cbi-button cbi-button-save" type="submit" value="<%:save%>" />
+		<input class="cbi-button cbi-button-reset" type="reset" value="<%:reset%>" />
 		<script type="text/javascript">cbi_d_init();</script>
 	</div>
 </form>
diff --git a/libs/cbi/luasrc/view/cbi/full_valuefooter.htm b/libs/cbi/luasrc/view/cbi/full_valuefooter.htm
index a7b56e294..8933016d7 100644
--- a/libs/cbi/luasrc/view/cbi/full_valuefooter.htm
+++ b/libs/cbi/luasrc/view/cbi/full_valuefooter.htm
@@ -14,6 +14,7 @@ $Id$
 -%>
 
 		<% if #self.description > 0 then -%>
+			<span class="cbi-value-helpicon"><img src="<%=resource%>/cbi/help.gif" alt="<%:help%>" /></span>
 			<div class="cbi-value-description"><%=self.description%></div>
 		<%- end %>
 	</div>
diff --git a/libs/cbi/luasrc/view/cbi/nsection.htm b/libs/cbi/luasrc/view/cbi/nsection.htm
index 3f8653109..27db4bfbf 100644
--- a/libs/cbi/luasrc/view/cbi/nsection.htm
+++ b/libs/cbi/luasrc/view/cbi/nsection.htm
@@ -35,7 +35,7 @@ $Id$
 			<legend><%=self.title%></legend>
 		<%- end %>
 		<div class="cbi-section-descr"><%=self.description%></div>
-		<input type="submit" name="cbi.cns.<%=self.config%>.<%=self.section%>" value="<%:cbi_add%>" />
+		<input type="submit" class="cbi-button-add" name="cbi.cns.<%=self.config%>.<%=self.section%>" value="<%:cbi_add%>" />
 	</fieldset>
 <% end %>
 <!-- /nsection -->
diff --git a/libs/cbi/luasrc/view/cbi/tblsection.htm b/libs/cbi/luasrc/view/cbi/tblsection.htm
index 46f7e5115..cfee09f1c 100644
--- a/libs/cbi/luasrc/view/cbi/tblsection.htm
+++ b/libs/cbi/luasrc/view/cbi/tblsection.htm
@@ -12,6 +12,13 @@ You may obtain a copy of the License at
 $Id$
 
 -%>
+<%-
+local rowcnt = 1
+function rowstyle()
+	rowcnt = rowcnt + 1
+	return (rowcnt % 2) + 1
+end
+-%>
 
 <!-- tblsection -->
 <div class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
@@ -26,9 +33,7 @@ $Id$
 			<%- end -%>
 			<%- for i, k in pairs(self.children) do -%>
 				<th class="cbi-section-table-cell"><%=k.title%></th>
-			<%- count = count + 1; end; if self.extedit then -%>
-				<th class="cbi-section-table-cell">&nbsp;</th>
-			<%- count = count + 1; end; if self.addremove then -%>
+			<%- count = count + 1; end; if self.extedit or self.addremove then -%>
 				<th class="cbi-section-table-cell">&nbsp;</th>
 			<%- count = count + 1; end -%>
 			</tr>
@@ -38,9 +43,7 @@ $Id$
 			<%- end -%>
 			<%- for i, k in pairs(self.children) do -%>
 				<th class="cbi-section-table-cell"><%=k.description%></th>
-			<%- end; if self.extedit then -%>
-				<th class="cbi-section-table-cell">&nbsp;</th>
-			<%- end; if self.addremove then -%>
+			<%- end; if self.extedit or self.addremove then -%>
 				<th class="cbi-section-table-cell">&nbsp;</th>
 			<%- end -%>
 			</tr>
@@ -50,7 +53,7 @@ $Id$
 					isempty = false
 					scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
 			-%>
-			<tr class="cbi-section-table-row" id="cbi-<%=self.config%>-<%=section%>">
+			<tr class="cbi-section-table-row<% if self.extedit then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>">
 				<% if not self.anonymous then -%>
 					<th><h3><%=k%></h3></th>
 				<%- end %>
@@ -60,15 +63,10 @@ $Id$
 						<%- if self.extedit then -%>
 							<a href="<%=self.extedit:format(section)%>"><img style="border: none" src="<%=resource%>/cbi/edit.gif" alt="<%:edit%>" /></a>
 						<%- end; if self.addremove then %>
-							<button class="clean" type="submit" value="1" name="cbi.rts.<%=self.config%>.<%=k%>" title="<%:delete%>"><img src="<%=resource%>/cbi/remove.gif" alt="<%:delete%>" /></button>
+							<input type="image" value="<%:cbi_del%>" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:cbi_del%>" title="<%:cbi_del%>" src="<%=resource%>/cbi/remove.gif" />
 						<%- end -%>
 					</td>
 				<%- end -%>
-				<%- if self.addremove then -%>
-					<td class="cbi-section-table-cell">
-						
-					</td>
-				<%- end -%>
 			</tr>
 			<%- end -%>
 
@@ -84,10 +82,10 @@ $Id$
 				<td colspan="<%=count%>" class="cbi-section-table-optionals">
 					<div class="cbi-section-create">
 						<% if self.anonymous then %>
-							<input type="submit" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" value="<%:cbi_add%>" />
+							<input class="cbi-button cbi-button-add" type="submit" value="<%:cbi_add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" title="<%:cbi_add%>" />
 						<% else %>
 							<input type="text" class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" />
-							<input type="submit" value="<%:cbi_add%>" />
+							<input class="cbi-button cbi-button-add" type="submit" value="<%:cbi_add%>" title="<%:cbi_add%>" />
 						<% end %>
 
 						<% if self.err_invalid then %>
diff --git a/libs/cbi/luasrc/view/cbi/tsection.htm b/libs/cbi/luasrc/view/cbi/tsection.htm
index da44cdc13..a81715b0a 100644
--- a/libs/cbi/luasrc/view/cbi/tsection.htm
+++ b/libs/cbi/luasrc/view/cbi/tsection.htm
@@ -43,10 +43,10 @@ $Id$
 	<% if self.addremove then -%>
 		<div class="cbi-section-create">
 			<% if self.anonymous then -%>
-				<input type="submit" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" value="<%:cbi_add%>" />
+				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" value="<%:cbi_add%>" />
 			<%- else -%>
 				<input type="text" class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" />
-				<input type="submit" value="<%:cbi_add%>" />
+				<input type="submit" class="cbi-button cbi-button-add" value="<%:cbi_add%>" />
 			<%- end %>
 
 			<% if self.err_invalid then -%>
diff --git a/libs/cbi/luasrc/view/cbi/ucisection.htm b/libs/cbi/luasrc/view/cbi/ucisection.htm
index e06cb5392..2ae856003 100644
--- a/libs/cbi/luasrc/view/cbi/ucisection.htm
+++ b/libs/cbi/luasrc/view/cbi/ucisection.htm
@@ -31,6 +31,6 @@ $Id$
 		<% end %><% end %>
 		<% end %></script>
 	<% end %>
-		<input type="submit" value="<%:add%>" />
+		<input type="submit" class="cbi-button cbi-button-fieldadd" value="<%:add%>" />
 	</div>
 <% end %>
diff --git a/modules/admin-core/luasrc/tools/webadmin.lua b/modules/admin-core/luasrc/tools/webadmin.lua
index 45bd910ac..b9f18ac40 100644
--- a/modules/admin-core/luasrc/tools/webadmin.lua
+++ b/modules/admin-core/luasrc/tools/webadmin.lua
@@ -14,6 +14,18 @@ $Id$
 ]]--
 
 module("luci.tools.webadmin", package.seeall)
+require("luci.model.uci")
+
+function byte_format(byte)
+	local suff = {"B", "KB", "MB", "GB", "TB"}
+	for i=1, 5 do
+		if byte > 1024 and i < 5 then
+			byte = byte / 1024
+		else
+			return string.format("%.2f %s", byte, suff[i]) 
+		end 
+	end
+end
 
 function cbi_add_networks(field)
 	luci.model.uci.foreach("network", "interface",
diff --git a/modules/admin-full/luasrc/model/cbi/admin_network/network.lua b/modules/admin-full/luasrc/model/cbi/admin_network/network.lua
index 75c9f2818..00c001e50 100644
--- a/modules/admin-full/luasrc/model/cbi/admin_network/network.lua
+++ b/modules/admin-full/luasrc/model/cbi/admin_network/network.lua
@@ -13,6 +13,7 @@ You may obtain a copy of the License at
 $Id$
 ]]--
 require("luci.sys")
+require("luci.tools.webadmin")
 
 
 m = Map("network", translate("interfaces"), translate("a_n_ifaces1"))
@@ -49,11 +50,14 @@ function up.write(self, section, value)
 	os.execute(call .. " " .. section)
 end
 
-ipaddr = s:option(DummyValue, "ipaddr", translate("ipaddress"))
-ipaddr.stateful = true
+hwaddr = s:option(DummyValue, "_hwaddr")
+function hwaddr.cfgvalue(self, section)
+	local ix = self.map:stateget(section, "ifname") or ""
+	return luci.fs.readfile("/sys/class/net/" .. ix .. "/address") or "n/a"
+end
+
 
-ip6addr = s:option(DummyValue, "ip6addr", translate("ip6address"))
-ip6addr.stateful = true
+ipaddr = s:option(DummyValue, "ipaddr")
 
 function ipaddr.cfgvalue(self, section)
 	local ip = self.map:stateget(section, "ipaddr")
@@ -63,20 +67,32 @@ function ipaddr.cfgvalue(self, section)
 	return parsed and parsed:string() or ""
 end
 
-rx = s:option(DummyValue, "_rx")
+txrx = s:option(DummyValue, "_rx", "TX / RX")
 
-function rx.cfgvalue(self, section)
+function txrx.cfgvalue(self, section)
 	local ix = self.map:stateget(section, "ifname")
-	local bt = netstat and netstat[ix] and netstat[ix][1]
-	return bt and string.format("%.2f MB", tonumber(bt) / 1024 / 1024)
+	
+	local rx = netstat and netstat[ix] and netstat[ix][1]
+	rx = rx and luci.tools.webadmin.byte_format(tonumber(rx)) or "-"
+	
+	local tx = netstat and netstat[ix] and netstat[ix][9]
+	tx = tx and luci.tools.webadmin.byte_format(tonumber(tx)) or "-"
+	
+	return string.format("%s / %s", tx, rx)
 end
 
-tx = s:option(DummyValue, "_tx")
+errors = s:option(DummyValue, "_err", "Errors", "TX / RX")
 
-function tx.cfgvalue(self, section)
+function errors.cfgvalue(self, section)
 	local ix = self.map:stateget(section, "ifname")
-	local bt = netstat and netstat[ix] and netstat[ix][9]
-	return bt and string.format("%.2f MB", tonumber(bt) / 1024 / 1024)
+	
+	local rx = netstat and netstat[ix] and netstat[ix][3]
+	local tx = netstat and netstat[ix] and netstat[ix][11]
+	
+	rx = rx and tostring(rx) or "-"
+	tx = tx and tostring(tx) or "-"
+	
+	return string.format("%s / %s", tx, rx)
 end
 
 return m
\ No newline at end of file
diff --git a/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css b/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css
index 218d7674d..ae3e5901d 100644
--- a/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css
@@ -216,20 +216,31 @@ div#content ul {
 
 input[type=submit],
 input[type=reset],
+input[type=image],
 label {
 	cursor: pointer;
 }
 
+
 select,
 input,
 textarea {
 	background: #eeeeee;
 	color: #000000;
-	border: 1px solid #000000;
+	border-width: 1px;
+	border-color: #000000;
+}
+
+input[type=image] {
+	border: none;
 }
 
 input:focus,
-textarea:focus {
+input:hover,
+select:focus,
+select:hover,
+textarea:focus,
+textarea:hover {
 	background: #ffffff;
 }
 
@@ -245,10 +256,40 @@ td input[type=password] {
 	width: 99%;
 }
 
-button.clean {
-	cursor: pointer;
-	border: none;
-	background-color: inherit;
+input.cbi-button {
+	padding-left: 17px;
+}
+
+input.cbi-button-add {
+	background: url('../resources/cbi/add.gif') 1px 1px;
+	background-repeat: no-repeat;
+}
+
+input.cbi-button-fieldadd {
+	background: url('../resources/cbi/fieldadd.gif') 1px 1px;
+	background-repeat: no-repeat;
+}
+
+input.cbi-button-reset {
+	background: url('../resources/cbi/reset.gif') 1px 1px;
+	background-repeat: no-repeat;
+}
+
+input.cbi-button-save {
+	background: url('../resources/cbi/save.gif') 1px 1px;
+	background-repeat: no-repeat;
+}
+
+input.cbi-button-apply {
+	background: url('../resources/cbi/apply.gif') 1px 1px;
+	background-repeat: no-repeat;
+}
+
+div.cbi-section-remove input {
+	background: url('../resources/cbi/remove.gif') 1px 1px;
+	background-repeat: no-repeat;
+	padding-left: 17px;
+	border-bottom: none;
 }
 
 textarea {
@@ -290,6 +331,14 @@ table.smalltext tr td {
 	border-left: 1px solid #666666;
 }
 
+.cbi-rowstyle-1 {
+	background-color: #eeeeff;
+}
+
+.cbi-rowstyle-2 {
+
+}
+
 div.cbi-value {
 	clear: left;
 	padding: 0.25em;
@@ -344,11 +393,6 @@ div.cbi-section-remove {
 	float: right;
 }
 
-div.cbi-section-remove input {
-	border-color: #bbbbbb;
-	border-bottom: none;
-}
-
 .cbi-section-node {
 	clear: both;
 	border: 1px dotted #bbbbbb;