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>
<% 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 %>

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

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

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 {
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: '–';

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;' 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 %>

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;
} else {
value = "";
}
return (value == ref);
} else {
t = document.getElementById(target + '.' + ref);
return (t.type == "radio" && t.checked);
}
return (value == ref)
return false;
}
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__(...)
AbstractValue.__init__(self, ...)
self.subtemplate = "model/value"
self.keylist = {}
self.vallist = {}
end