diff options
| author | Matthias Schiffer <mschiffer@universe-factory.net> | 2016-03-03 22:06:39 +0100 |
|---|---|---|
| committer | Matthias Schiffer <mschiffer@universe-factory.net> | 2016-03-03 22:06:39 +0100 |
| commit | 4de35274cab2df740941149fe41c3c2bb8c12850 (patch) | |
| tree | a568b5009d2f5a1abd0e0794c62fb1a6ef802bb4 /modules/luci-base/luasrc | |
| parent | ddc893ccc254e79b0869c709ada07f5ae232a0e3 (diff) | |
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>
Diffstat (limited to 'modules/luci-base/luasrc')
6 files changed, 22 insertions, 4 deletions
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")%> />   + <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")%> />   + <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")%> />   + <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")%> />   + <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:%> </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") - %> />   + %> /> + <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%> + <label<%=attr("for", cbid .. "." .. iface:name())%>></label> + <%- end -%> +   <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", " ") - %> />   + %> /> + <%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%> + <label<%=attr("for", cbid .. "_custom")%>></label> + <%- end -%> +   <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")%> />   + <%- 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 -%> |