luci-base: view: make checkboxes and radio buttons styleable

Add an empty, normally invisible label after checkboxes and radio buttons
with cbi-input-{checkbox,radio} classes to allow CSS styling them as
suggested on http://www.paulund.co.uk/style-checkboxes-with-css

Signed-off-by: Nils Schneider <nils@nilsschneider.net>
Signed-off-by: Matthias Schiffer <mschiffer@universe-factory.net>

diff --git a/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm b/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm
index 0bcfd442837989974d8f41af092988ec341b5c76..b69d780ea9ab576f37cd8159ac60b125686cd3ca 100644 (file)
--- a/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm
+++ b/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm
@@ -14,6 +14,7 @@
        c = c + 1
 %>
        <input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)" type="radio"<%= attr("id", cbid..c) .. attr("name", cbid) .. attr("value", key) .. ifattr((self:cfgvalue(section) or self.default) == key, "checked", "checked") %> />
+       <label<%= attr("for", cbid..c) %>></label>
        <label<%= attr("for", cbid..c) %>><%=self.vallist[i]%></label>
 <% if c == self.size then c = 0 %><% if self.orientation == "horizontal" then %>&#160;<% else %><br /><% end %>
 <% end end %>

diff --git a/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm b/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm
index 64b3dae455d2fef50b46f1e8208878e7d98891bd..2efc125fccf8f56415114ae1998de4eccb383180 100644 (file)
--- a/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm
+++ b/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm
@@ -10,6 +10,7 @@
        attr("id", cbid) .. attr("name", cbid) .. attr("value", self.enabled or 1) ..
        ifattr((self:cfgvalue(section) or self.default) == self.enabled, "checked", "checked")
 %> />
+<label<%= attr("for", cbid)%>></label>
 
 <%+cbi/valuefooter%>
 <!-- ++ END ++ Dynamic DNS ++ overview_enabled.htm ++ -->

diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index b3b454008f3e003a3e0902903f336368157a4ff2..5cb31511f69e2b34ae63cb402ce13aa50605df10 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
@@ -28,6 +28,7 @@
        <% if self.allowlocal then %>
        <li style="padding:0.5em">
                <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
+               <label<%=attr("for", cbid .. "_empty")%>></label>
                <label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
                        <strong><%:Device%></strong>
                        <% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
@@ -37,6 +38,7 @@
        <% if self.allowany then %>
        <li style="padding:0.5em">
                <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
+               <label<%=attr("for", cbid .. "_any")%>></label>
                <label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
                        <strong><%:Any zone%></strong>
                        <% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
@@ -50,6 +52,7 @@
        %>
        <li style="padding:0.5em">
                <input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
+               <label<%=attr("for", cbid .. "." .. zone:name())%>></label>
                <label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
                        <strong><%=zone:name()%>:</strong>
                        <%
@@ -78,6 +81,7 @@
        <% if self.widget ~= "checkbox" and not self.nocreate then %>
        <li style="padding:0.5em">
                <input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
+               <label<%=attr("for", cbid .. "_new")%>></label>
                <div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
                        <em><%:unspecified -or- create:%>&#160;</em>
                        <input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />

diff --git a/modules/luci-base/luasrc/view/cbi/fvalue.htm b/modules/luci-base/luasrc/view/cbi/fvalue.htm
index 5eddcf22a12f4db38206744cfd56b885e4ec70bf..197d03cf31a78e333cb4ce0938b402bb733049d3 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/fvalue.htm
+++ b/modules/luci-base/luasrc/view/cbi/fvalue.htm
@@ -6,4 +6,5 @@
                attr("id", cbid) .. attr("name", cbid) .. attr("value", self.enabled or 1) ..
                ifattr((self:cfgvalue(section) or self.default) == self.enabled, "checked", "checked")
        %> />
+       <label<%= attr("for", cbid)%>></label>
 <%+cbi/valuefooter%>

diff --git a/modules/luci-base/luasrc/view/cbi/lvalue.htm b/modules/luci-base/luasrc/view/cbi/lvalue.htm
index 99f456dc54cbe847215fc8c02708d76f46148b35..34d02eeca0cb4250be96fe003288409cc8f57dd2 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/lvalue.htm
+++ b/modules/luci-base/luasrc/view/cbi/lvalue.htm
@@ -24,15 +24,16 @@
        <div>
                <% for i, key in pairs(self.keylist) do %>
                        <label<%=
-                               attr("id", cbid.."-"..key) ..
                                attr("data-index", i) ..
                                attr("data-depends", self:deplist2json(section, self.deplist[i]))
                        %>>
                                <input class="cbi-input-radio" data-update="click change" type="radio"<%=
+                                       attr("id", cbid.."-"..key) ..
                                        attr("name", cbid) ..
                                        attr("value", key) ..
                                        ifattr((self:cfgvalue(section) or self.default) == key, "checked", "checked")
                                %> />
+                               <label<%= attr("for", cbid.."-"..key)%>></label>
                                <%=pcdata(self.vallist[i])%>
                        </label>
                        <% if i == self.size then write(br) end %>

diff --git a/modules/luci-base/luasrc/view/cbi/mvalue.htm b/modules/luci-base/luasrc/view/cbi/mvalue.htm
index ca7b94c15e219685fc1dfff7b7a6e93fde4a13c0..246ef43aad1c93b1b510808ed63fe8f4631a6c40 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/mvalue.htm
+++ b/modules/luci-base/luasrc/view/cbi/mvalue.htm
@@ -24,15 +24,16 @@
        <div>
                <% for i, key in pairs(self.keylist) do %>
                        <label<%=
-                               attr("id", cbid.."-"..key) ..
                                attr("data-index", i) ..
                                attr("data-depends", self:deplist2json(section, self.deplist[i]))
                        %>>
                                <input class="cbi-input-checkbox" type="checkbox" data-update="click change"<%=
+                                       attr("id", cbid.."-"..key) ..
                                        attr("name", cbid) ..
                                        attr("value", key) ..
                                        ifattr(luci.util.contains(v, key), "checked", "checked")
                                %> />
+                               <label<%= attr("for", cbid.."-"..key)%>></label>
                                <%=pcdata(self.vallist[i])%>
                        </label>
                        <% if i == self.size then write('<br />') end %>

diff --git a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
index db6112992a4afac7f0a21fc8eb97fc59773efede..62dbde7dd4fd863116f08ff5a9547f44f216fce2 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
@@ -46,7 +46,11 @@
                        attr("id", cbid .. "." .. iface:name()) ..
                        attr("name", cbid) .. attr("value", iface:name()) ..
                        ifattr(checked[iface:name()], "checked", "checked")
-               %> />  
+               %> />
+               <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
+                       <label<%=attr("for", cbid .. "." .. iface:name())%>></label>
+               <%- end -%>
+               &#160;
                <label<%=attr("for", cbid .. "." .. iface:name())%>>
                        <% if link then -%><a href="<%=link%>"><% end -%>
                        <img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
@@ -68,7 +72,11 @@
                        attr("id", cbid .. "_custom") ..
                        attr("name", cbid) ..
                        attr("value", " ")
-               %> /> &#160;
+               %> />
+               <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
+                       <label<%=attr("for", cbid .. "_custom")%>></label>
+               <%- end -%>
+               &#160;
                <label<%=attr("for", cbid .. "_custom")%>>
                        <img title="<%:Custom Interface%>" style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/ethernet_disabled.png" />
                        <%:Custom Interface%>:

diff --git a/modules/luci-base/luasrc/view/cbi/network_netlist.htm b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
index f8a2b72f3cf37ee343672350c241bf7ceb2f94c6..8bf1a70a2058e99ab22cbe789ab0e08b94524434 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/network_netlist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
@@ -52,6 +52,9 @@
        <% if not self.nocreate then %>
        <li style="padding:0.25em 0">
                <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not value and self.widget ~= "checkbox", "checked", "checked")%> /> &#160;
+               <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
+                       <label<%=attr("for", cbid .. "_new")%>></label>
+               <%- end -%>
                <div style="padding:0.5em; display:inline">
                        <label<%=attr("for", cbid .. "_new")%>><em>
                                <%- if self.widget == "checkbox" then -%>

diff --git a/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm b/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm
index 83e1ee57924b792658efdddc1334343b318f043f..f087472d31cb5eb538b949794d3e016914f61a65 100644 (file)
--- a/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm
+++ b/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm
@@ -38,9 +38,11 @@
                <input type="hidden" name="confirm" value="1" />
 
                <input type="checkbox" class="cbi-input-checkbox" name="keepcfg" value="1" checked="checked" id="cb_keepcfg" />
+               <label for="cb_keepcfg"></label>
                <label for="cb_keepcfg"><%:Keep configuration%></label><br />
 
                <input type="checkbox" class="cbi-input-checkbox" name="verify" value="1" checked="checked" id="cb_verify" />
+               <label for="cb_verify"></label>
                <label for="cb_verify"><%:Verify downloaded images%></label><br /><br />
 
                <input type="submit" class="cbi-button cbi-button-apply" value="<%:Confirm Upgrade%>" />