nils/gluon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gluon-web: fix radio button view of ListValues

Browse Source 
Pretty much everything about this was broken:
* Fix dependency tracking
* Fix vertical orientation
* Fix paddings
* Add theming
This commit is contained in:
Matthias Schiffer 2018-01-31 15:47:45 +01:00
parent dbfd22d651
commit cfe1bba8ae
No known key found for this signature in database
GPG Key ID: 16EF3F64CB201D9C
9 changed files with 90 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,6 @@
<h2><%:Information%></h2> <h2><%:Information%></h2>
<% for _, v in ipairs(values) do %> <% for _, v in ipairs(values) do %>
<div class="gluon-value"> <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> </div>
<% end %> <% end %>

60
package/gluon-web-admin/files/lib/gluon/web/view/admin/upgrade.html
View File

@ -14,37 +14,37 @@ $Id$
<h2><%:Upgrade firmware%></h2> <h2><%:Upgrade firmware%></h2>
<form method="post" enctype="multipart/form-data" action="<%=url(request)%>"> <form method="post" enctype="multipart/form-data" action="<%=url(request)%>">
<p> <p>
<%:You can manually upgrade your firmware here.%> <%:You can manually upgrade your firmware here.%>
</p> </p>
<% if bad_image then %> <% if bad_image then %>
<p class="error"><%:The provided firmware image is not valid for this device.%></p> <p class="error"><%:The provided firmware image is not valid for this device.%></p>
<% end %> <% end %>
<div class="gluon-section-node"> <div class="gluon-section-node">
<div class="gluon-value"> <div class="gluon-value">
<label class="gluon-value-title"> <label class="gluon-value-title">
<%:Firmware image%> <%:Firmware image%>
</label> </label>
<div class="gluon-value-field"> <div class="gluon-value-field">
<input class="gluon-input-file" type="file" name="image" /> <input class="gluon-input-file" type="file" name="image" />
</div> </div>
</div> </div>
<div class="gluon-value gluon-value-last"> <div class="gluon-value gluon-value-last">
<label class="gluon-value-title"> <label class="gluon-value-title">
<%:Keep settings%> <%:Keep settings%>
</label> </label>
<div class="gluon-value-field"> <div class="gluon-value-field">
<input id="keepcfg" class="gluon-input-checkbox" type="checkbox" name="keepcfg" value="1" checked="checked" /> <input id="keepcfg" class="gluon-input-checkbox" type="checkbox" name="keepcfg" value="1" checked="checked" />
<label for="keepcfg"></label> <label for="keepcfg"></label>
</div> </div>
</div> </div>
</div> </div>
<div class="gluon-page-actions right"> <div class="gluon-page-actions right">
<input type="hidden" name="step" value="2" /> <input type="hidden" name="step" value="2" />
<input type="hidden" name="token" value="<%=token%>" /> <input type="hidden" name="token" value="<%=token%>" />
<input class="gluon-button gluon-button-submit" type="submit" value="<%:Upload image%>" /> <input class="gluon-button gluon-button-submit" type="submit" value="<%:Upload image%>" />
</div> </div>
</form> </form>

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

@ -1,9 +1,10 @@
<div class="gluon-value"> <div class="gluon-value">
<div class="gluon-value-title"> <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>
<div class="gluon-value-field-long"> <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 /> <br />
<%= translate( <%= translate(
'In security mode, the mesh VPN uses an encrypted tunnel to connect to the VPN servers. ' .. '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 gluon-value-last">
<div class="gluon-value-title"> <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>
<div class="gluon-value-field-long"> <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 /> <br />
<%= translate( <%= translate(
'In performance mode, no encryption is used. This usually allows for higher throughput, but the data exchanged over your node is not ' .. 'In performance mode, no encryption is used. This usually allows for higher throughput, but the data exchanged over your node is not ' ..

2
package/gluon-web-theme/files/lib/gluon/web/www/static/gluon/cascade.css
View File

File diff suppressed because one or more lines are too long

47
package/gluon-web-theme/sass/cascade.scss
View File

@ -305,6 +305,7 @@ input[type=checkbox] {
& + label { & + label {
display: inline-block; display: inline-block;
position: relative;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin: 0; 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=submit],
input[type=reset], input[type=reset],
input[type=image], input[type=image],
@ -405,6 +436,7 @@ div.gluon-value {
.gluon-value-title { .gluon-value-title {
flex: 2; flex: 2;
text-align: right; text-align: right;
padding-top: 0.39em;
padding-right: 1em; padding-right: 1em;
font-weight: bold; font-weight: bold;
} }
@ -415,18 +447,21 @@ div.gluon-value-field {
input, select, input + label { input, select, input + label {
position: relative; position: relative;
top: -0.39em;
} }
} }
div.gluon-value-field-text {
flex: 3;
padding-top: 0.39em;
}
div.gluon-value-field-long { div.gluon-value-field-long {
flex: 10; flex: 10;
position: relative; position: relative;
margin-top: 0.65em;
input, select, input + label { input, select, input + label {
position: relative; position: relative;
top: -0.39em;
} }
} }
@ -533,11 +568,11 @@ div.gluon-error {
input + & { input + & {
left: 0; left: 0;
top: -0.35em; top: 0.04em;
} }
&:first-child { &:first-child {
top: 0.04em; top: 0.53em;
left: -0.08em; left: -0.08em;
} }
@ -550,7 +585,7 @@ div.gluon-error {
color: #800000; color: #800000;
position: relative; position: relative;
top: -0.42em; top: -0.03em;
&:after { &:after {
content: '–'; content: '–';

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

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

2
package/gluon-web/files/lib/gluon/web/www/static/resources/gluon-web.js
View File

File diff suppressed because one or more lines are too long

9
package/gluon-web/javascript/gluon-web.js
View File

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

2
package/gluon-web/luasrc/usr/lib/lua/gluon/web/model.lua
View File

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