libs/cbi: Improved user interface draft #1

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 (file)
index 0000000..0888abf
Binary files /dev/null and b/libs/cbi/htdocs/luci-static/resources/cbi/add.gif differ

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 (file)
index 0000000..82ae7ed
Binary files /dev/null and b/libs/cbi/htdocs/luci-static/resources/cbi/apply.gif differ

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 (file)
index 0000000..431ff64
Binary files /dev/null and b/libs/cbi/htdocs/luci-static/resources/cbi/fieldadd.gif differ

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 (file)
index 0000000..9dfa0e1
Binary files /dev/null and b/libs/cbi/htdocs/luci-static/resources/cbi/help.gif differ

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 (file)
index 0000000..c941c19
Binary files /dev/null and b/libs/cbi/htdocs/luci-static/resources/cbi/reset.gif differ

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 (file)
index 0000000..35e9499
Binary files /dev/null and b/libs/cbi/htdocs/luci-static/resources/cbi/save.gif differ

diff --git a/libs/cbi/luasrc/view/cbi/footer.htm b/libs/cbi/luasrc/view/cbi/footer.htm
index 732389c..b719058 100644 (file)
--- 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 a7b56e2..8933016 100644 (file)
--- 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 3f86531..27db4bf 100644 (file)
--- 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 46f7e51..cfee09f 100644 (file)
--- 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 da44cdc..a81715b 100644 (file)
--- 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 e06cb53..2ae8560 100644 (file)
--- 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 45bd910..b9f18ac 100644 (file)
--- 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 75c9f28..00c001e 100644 (file)
--- 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 218d767..ae3e590 100644 (file)
--- 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;