From 4de35274cab2df740941149fe41c3c2bb8c12850 Mon Sep 17 00:00:00 2001
From: Matthias Schiffer <mschiffer@universe-factory.net>
Date: Thu, 3 Mar 2016 22:06:39 +0100
Subject: 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>
---
 modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm |  4 ++++
 modules/luci-base/luasrc/view/cbi/fvalue.htm            |  1 +
 modules/luci-base/luasrc/view/cbi/lvalue.htm            |  3 ++-
 modules/luci-base/luasrc/view/cbi/mvalue.htm            |  3 ++-
 modules/luci-base/luasrc/view/cbi/network_ifacelist.htm | 12 ++++++++++--
 modules/luci-base/luasrc/view/cbi/network_netlist.htm   |  3 +++
 6 files changed, 22 insertions(+), 4 deletions(-)

(limited to 'modules/luci-base')

diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index b3b454008..5cb31511f 100644
--- 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 5eddcf22a..197d03cf3 100644
--- 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 99f456dc5..34d02eeca 100644
--- 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 ca7b94c15..246ef43aa 100644
--- 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 db6112992..62dbde7dd 100644
--- 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")
-		%> /> &#160;
+		%> />
+		<%- 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 f8a2b72f3..8bf1a70a2 100644
--- 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 -%>
-- 
cgit v1.2.3