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 732389c00a531ab8b0cf783f288f9bd3b410104e..b719058200d169ed150a9f9cd3a39785671b562e 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 a7b56e29445784573a042e7e361315abf8f9962e..8933016d7d3d77865bf5f3749f5a1620f012c565 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 3f86531097367c9e3991daf52b0897e2a9a90bf0..27db4bfbfbb5bd4d1e61c11ed82cbfcc7125fada 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 46f7e5115d714876caea627d5e2365fcbc01c90d..cfee09f1c9f6d57d47776bf9edb399a17d9b753c 100644 (file)
--- a/libs/cbi/luasrc/view/cbi/tblsection.htm
+++ b/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 -%>
-                               <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 da44cdc132312b262e5794d9c007fb6c4f2ae8d2..a81715b0abfdaff9c96e7ad4b1edbebb8fc43e29 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 e06cb5392bde6ec87d65c7c4226ceb7246fee731..2ae85600383d2ea9721201758f2e4d43d33419e0 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 45bd910ac5701ca4bd7302a24cccff27d671a71e..b9f18ac40d08c276fa17ff8f8cf4ea1ad02711e8 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 75c9f281851de63eaf8dc06ea7b97fcdbfd7e92c..00c001e50a55c4f898275fe1d76e33d9a301c49a 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 218d7674dc207a1c4c96a89ba20653b1b4513023..ae3e5901d0a3e88477e96df9da2a3533f8155fc6 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;