libs/cbi: Improved user interface draft #1

libs/cbi/luasrc/view/cbi/footer.htm

@@ -14,9 +14,9 @@ $Id$
 -%>
 
 	<div>
-		<input type="submit" name="cbi.apply" value="<%:saveapply%>" />
+		<input class="cbi-button cbi-button-apply" type="submit" name="cbi.apply" value="<%:saveapply%>" />
-		<input type="submit" value="<%:save%>" />
+		<input class="cbi-button cbi-button-save" type="submit" value="<%:save%>" />
-		<input type="reset" value="<%:reset%>" />
+		<input class="cbi-button cbi-button-reset" type="reset" value="<%:reset%>" />
 		<script type="text/javascript">cbi_d_init();</script>
 	</div>
 </form>

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>

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 -->

libs/cbi/luasrc/view/cbi/tblsection.htm

@@ -11,6 +11,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 -->
@@ -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 -%>
+			<%- count = count + 1; end; if self.extedit or self.addremove then -%>
-				<th class="cbi-section-table-cell">&nbsp;</th>
-			<%- count = count + 1; end; if 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 -%>
+			<%- end; if self.extedit or self.addremove then -%>
-				<th class="cbi-section-table-cell">&nbsp;</th>
-			<%- end; if 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 %>

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 -%>

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 %>

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",

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"))
+hwaddr = s:option(DummyValue, "_hwaddr")
-ipaddr.stateful = true
+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

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 {
+input.cbi-button {
-	cursor: pointer;
+	padding-left: 17px;
-	border: none;
+}
-	background-color: inherit;
+
+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;