gluon-web: fix radio button view of ListValues

Pretty much everything about this was broken:
* Fix dependency tracking
* Fix vertical orientation
* Fix paddings
* Add theming

package/gluon-web-admin/files/lib/gluon/web/view/admin/info.html

@@ -34,6 +34,6 @@
 <h2><%:Information%></h2>
 <% for _, v in ipairs(values) do %>
 <div class="gluon-value">
-	<div class="gluon-value-title"><%=v[1]%></div><div class="gluon-value-field"><%=pcdata(v[2] or 'n/a')%></div>
+	<div class="gluon-value-title"><%=v[1]%></div><div class="gluon-value-field-text"><%=pcdata(v[2] or 'n/a')%></div>
 </div>
 <% end %>

package/gluon-web-mesh-vpn-fastd/files/lib/gluon/web/view/gluon/model/mesh-vpn-fastd.html

@@ -1,9 +1,10 @@
 <div class="gluon-value">
   <div class="gluon-value-title">
-    <input class="gluon-input-radio" data-update="change" type="radio" value="security"<%= attr("id", id..'1') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "security") and "checked") %> />
+    <input class="gluon-input-radio" data-update="change" type="radio" value="security"<%= attr("id", id..'.1') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "security") and "checked") %> />
+    <label<%= attr("for", id..'.1')%>></label>
   </div>
   <div class="gluon-value-field-long">
-    <label<%= attr("for", id..'1') %> class="gluon-value-title"><%:Security mode%></label>
+    <label<%= attr("for", id..'.1') %> class="gluon-value-title"><%:Security mode%></label>
     <br />
     <%= translate(
         'In security mode, the mesh VPN uses an encrypted tunnel to connect to the VPN servers. ' ..
@@ -17,10 +18,11 @@
 
 <div class="gluon-value gluon-value-last">
   <div class="gluon-value-title">
-    <input class="gluon-input-radio" data-update="change" type="radio" value="performance"<%= attr("id", id..'2') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "performance") and "checked") %> />
+    <input class="gluon-input-radio" data-update="change" type="radio" value="performance"<%= attr("id", id..'.2') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "performance") and "checked") %> />
+    <label<%= attr("for", id..'.2')%>></label>
   </div>
   <div class="gluon-value-field-long">
-    <label<%= attr("for", id..'2') %> class="gluon-value-title"><%:Performance mode%></label>
+    <label<%= attr("for", id..'.2') %> class="gluon-value-title"><%:Performance mode%></label>
     <br />
     <%= translate(
         'In performance mode, no encryption is used. This usually allows for higher throughput, but the data exchanged over your node is not ' ..

package/gluon-web-theme/sass/cascade.scss

@@ -305,6 +305,7 @@ input[type=checkbox] {
 
   & + label {
     display: inline-block;
+    position: relative;
     width: 1em;
     height: 1em;
     margin: 0;
@@ -324,6 +325,36 @@ input[type=checkbox] {
   }
 }
 
+input[type=radio] {
+  display: none;
+
+  & + label {
+    display: inline-block;
+    position: relative;
+    width: 0.8em;
+    height: 0.8em;
+    padding: 0.5em;
+    margin: 0.2em 0.2em 0.2em 0.1em;
+    border: none;
+    background: lighten($ffyellow, 30);
+    vertical-align: middle;
+    border-radius: 50%;
+  }
+
+  &:checked + label:after {
+    content: '•';
+    color: $ffmagenta;
+    vertical-align: middle;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -0.4em;
+    width: 100%;
+    text-align: center;
+    font-size: 2em;
+  }
+}
+
 input[type=submit],
 input[type=reset],
 input[type=image],
@@ -405,6 +436,7 @@ div.gluon-value {
 .gluon-value-title {
   flex: 2;
   text-align: right;
+  padding-top: 0.39em;
   padding-right: 1em;
   font-weight: bold;
 }
@@ -415,18 +447,21 @@ div.gluon-value-field {
 
   input, select, input + label {
     position: relative;
-    top: -0.39em;
   }
 }
 
+div.gluon-value-field-text {
+  flex: 3;
+  padding-top: 0.39em;
+}
+
 div.gluon-value-field-long {
   flex: 10;
   position: relative;
-
+  margin-top: 0.65em;
 
   input, select, input + label {
     position: relative;
-    top: -0.39em;
   }
 }
 
@@ -533,11 +568,11 @@ div.gluon-error {
 
   input + & {
     left: 0;
-    top: -0.35em;
+    top: 0.04em;
   }
 
   &:first-child {
-    top: 0.04em;
+    top: 0.53em;
     left: -0.08em;
   }
 
@@ -550,7 +585,7 @@ div.gluon-error {
   color: #800000;
 
   position: relative;
-  top: -0.42em;
+  top: -0.03em;
 
   &:after {
     content: '–';

package/gluon-web/files/lib/gluon/web/view/model/lvalue.html

@@ -1,6 +1,5 @@
 <%
-	local i, key
-	local br = self.orientation == "horizontal" and '&#160;' or '<br />'
+	local br = self.orientation == "horizontal" and '&#160;&#160;&#160;' or '<br />'
 %>
 
 <% if self.widget == "select" then %>
@@ -32,10 +31,10 @@
 					attr("value", key) ..
 					attr("checked", (self:cfgvalue() == key) and "checked")
 				%> />
-				<label<%= attr("for", id.."-"..key)%>></label>
+				<label<%= attr("for", id.."."..key)%>></label>
 				<%=pcdata(self.vallist[i])%>
 			</label>
-			<% if i == self.size then write(br) end %>
+			<% if i ~= #self.keylist then write(br) end %>
 		<% end %>
 	</div>
 <% end %>

package/gluon-web/javascript/gluon-web.js

@@ -154,11 +154,16 @@
 				value = t.value;
 			} else {
 				value = "";
-
-			}
 			}
 
-		return (value == ref)
+			return (value == ref);
+		} else {
+			t = document.getElementById(target + '.' + ref);
+			return (t.type == "radio" && t.checked);
+		}
+
+		return false;
+
 	}
 
 	function check(deps) {

package/gluon-web/luasrc/usr/lib/lua/gluon/web/model.lua

@@ -366,8 +366,6 @@ Value = class(AbstractValue)
 function Value:__init__(...)
 	AbstractValue.__init__(self, ...)
 	self.subtemplate  = "model/value"
-	self.keylist = {}
-	self.vallist = {}
 end