diff options
Diffstat (limited to 'modules/luci-base/luasrc/view')
19 files changed, 470 insertions, 377 deletions
diff --git a/modules/luci-base/luasrc/view/cbi/apply_widget.htm b/modules/luci-base/luasrc/view/cbi/apply_widget.htm index 543ef0b80b..e3090da656 100644 --- a/modules/luci-base/luasrc/view/cbi/apply_widget.htm +++ b/modules/luci-base/luasrc/view/cbi/apply_widget.htm @@ -1,59 +1,98 @@ <% export("cbi_apply_widget", function(redirect_ok) -%> <style type="text/css"> - #cbi_apply_status { + .alert-message.notice { + background: linear-gradient(#fff 0%, #eee 100%); + } + + #cbi_apply_overlay { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + display: none; + z-index: 20000; + } + + #cbi_apply_overlay .alert-message { + position: relative; + top: 10%; + width: 60%; + margin: auto; display: flex; flex-wrap: wrap; min-height: 32px; align-items: center; - margin: 1.5em 0 1.5em 0; } - #cbi_apply_status > h4, - #cbi_apply_status > p, - #cbi_apply_status > div { + #cbi_apply_overlay .alert-message > h4, + #cbi_apply_overlay .alert-message > p, + #cbi_apply_overlay .alert-message > div { flex-basis: 100%; } - #cbi_apply_status > img { + #cbi_apply_overlay .alert-message > img { margin-right: 1em; flex-basis: 32px; } - #cbi_apply_status + script + .cbi-section { - margin-top: -1em; + body.apply-overlay-active { + overflow: hidden; + height: 100vh; } - .alert-message.notice { - background: linear-gradient(#fff 0%, #eee 100%); + body.apply-overlay-active #cbi_apply_overlay { + display: block; } </style> <script type="text/javascript" src="<%=resource%>/cbi.js"></script> <script type="text/javascript">//<![CDATA[ var xhr = new XHR(), - stat, indicator, uci_apply_auth = { sid: '<%=luci.dispatcher.context.authsession%>', token: '<%=token%>' }, uci_apply_rollback = <%=math.max(luci.config and luci.config.apply and luci.config.apply.rollback or 30, 30)%>, uci_apply_holdoff = <%=math.max(luci.config and luci.config.apply and luci.config.apply.holdoff or 4, 1)%>, uci_apply_timeout = <%=math.max(luci.config and luci.config.apply and luci.config.apply.timeout or 5, 1)%>, uci_apply_display = <%=math.max(luci.config and luci.config.apply and luci.config.apply.display or 1.5, 1)%>; + function uci_status_message(type, content) { + var overlay = document.getElementById('cbi_apply_overlay') || document.body.appendChild(E('<div id="cbi_apply_overlay"><div class="alert-message"></div></div>')), + message = overlay.querySelector('.alert-message'); + + if (message && type) { + if (!message.classList.contains(type)) { + message.classList.remove('notice'); + message.classList.remove('warning'); + message.classList.add(type); + } + + if (content) + message.innerHTML = content; + + document.body.classList.add('apply-overlay-active'); + } + else { + document.body.classList.remove('apply-overlay-active'); + } + } + function uci_rollback(checked) { if (checked) { - stat.classList.remove('notice'); - stat.classList.add('warning'); - stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + - '<%:Failed to confirm apply within %ds, waiting for rollback…%>'.format(uci_apply_rollback); + uci_status_message('warning', + '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + + '<%:Failed to confirm apply within %ds, waiting for rollback…%>'.format(uci_apply_rollback)); var call = function(r) { if (r.status === 204) { - stat.innerHTML = '<h4><%:Configuration has been rolled back!%></h4>' + + uci_status_message('warning', + '<h4><%:Configuration has been rolled back!%></h4>' + '<p><%:The device could not be reached within %d seconds after applying the pending changes, which caused the configuration to be rolled back for safety reasons. If you believe that the configuration changes are correct nonetheless, perform an unchecked configuration apply. Alternatively, you can dismiss this warning and edit changes before attempting to apply again, or revert all pending changes to keep the currently working configuration state.%></p>'.format(uci_apply_rollback) + '<div class="right">' + - '<input type="button" class="btn" onclick="this.parentNode.parentNode.style.display=\'none\'" value="<%:Dismiss%>" /> ' + + '<input type="button" class="btn" onclick="uci_status_message(false)" value="<%:Dismiss%>" /> ' + '<input type="button" class="btn" onclick="uci_revert()" value="<%:Revert changes%>" /> ' + '<input type="button" class="btn danger" onclick="uci_apply(false)" value="<%:Apply unchecked%>" />' + - '</div>'; + '</div>'); return; } @@ -64,10 +103,9 @@ call({ status: 0 }); } else { - stat.classList.remove('notice'); - stat.classList.add('warning'); - stat.innerHTML = '<h4><%:Device unreachable!%></h4>' + - '<p><%:Could not regain access to the device after applying the configuration changes. You might need to reconnect if you modified network related settings such as the IP address or wireless security credentials.%></p>'; + uci_status_message('warning', + '<h4><%:Device unreachable!%></h4>' + + '<p><%:Could not regain access to the device after applying the configuration changes. You might need to reconnect if you modified network related settings such as the IP address or wireless security credentials.%></p>'); } } @@ -75,12 +113,7 @@ var tt; var ts = Date.now(); - stat = document.getElementById('cbi_apply_status'); - stat.style.display = ''; - stat.classList.remove('warning'); - stat.classList.add('notice'); - - indicator = document.querySelector('.uci_change_indicator'); + uci_status_message('notice'); var call = function(r) { if (Date.now() >= deadline) { @@ -88,15 +121,18 @@ return; } else if (r && (r.status === 200 || r.status === 204)) { - if (indicator) - indicator.style.display = 'none'; + var indicator = document.querySelector('.uci_change_indicator'); + if (indicator) indicator.style.display = 'none'; - stat.innerHTML = '<%:Configuration has been applied.%>'; + uci_status_message('notice', '<%:Configuration has been applied.%>'); window.clearTimeout(tt); window.setTimeout(function() { - stat.style.display = 'none'; - <% if redirect_ok then %>location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');<% end %> + <% if redirect_ok then -%> + location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>'); + <%- else -%> + window.location = window.location.href.split('#')[0]; + <% end %> }, uci_apply_display * 1000); return; @@ -108,8 +144,9 @@ var tick = function() { var now = Date.now(); - stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + - '<%:Waiting for configuration to get applied… %ds%>'.format(Math.max(Math.floor((deadline - Date.now()) / 1000), 0)); + uci_status_message('notice', + '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + + '<%:Waiting for configuration to get applied… %ds%>'.format(Math.max(Math.floor((deadline - Date.now()) / 1000), 0))); if (now >= deadline) return; @@ -125,43 +162,39 @@ } function uci_apply(checked) { - stat = document.getElementById('cbi_apply_status'); - stat.style.display = ''; - stat.classList.remove('warning'); - stat.classList.add('notice'); - stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + - '<%:Starting configuration apply…%>'; + uci_status_message('notice', + '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + + '<%:Starting configuration apply…%>'); xhr.post('<%=url("admin/uci")%>/' + (checked ? 'apply_rollback' : 'apply_unchecked'), uci_apply_auth, function(r) { if (r.status === (checked ? 200 : 204)) { uci_confirm(checked, Date.now() + uci_apply_rollback * 1000); } else if (checked && r.status === 204) { - stat.innerHTML = '<%:There are no changes to apply.%>'; + uci_status_message('notice', '<%:There are no changes to apply.%>'); window.setTimeout(function() { - stat.style.display = 'none'; - <% if redirect_ok then %>location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>');<% end %> + <% if redirect_ok then -%> + location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>'); + <%- else -%> + uci_status_message(false); + <%- end %> }, uci_apply_display * 1000); } else { - stat.classList.add('warning'); - stat.classList.remove('notice'); - stat.innerHTML = '<%_Apply request failed with status <code>%h</code>%>'.format(r.responseText || r.statusText || r.status); + uci_status_message('warning', '<%_Apply request failed with status <code>%h</code>%>'.format(r.responseText || r.statusText || r.status)); + window.setTimeout(function() { uci_status_message(false); }, uci_apply_display * 1000); } }); } function uci_revert() { - stat = document.getElementById('cbi_apply_status'); - stat.style.display = ''; - stat.classList.remove('warning'); - stat.classList.add('notice'); - stat.innerHTML = '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + - '<%:Reverting configuration…%>'; + uci_status_message('notice', + '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' + + '<%:Reverting configuration…%>'); xhr.post('<%=url("admin/uci/revert")%>', uci_apply_auth, function(r) { if (r.status === 200) { - stat.innerHTML = '<%:Changes have been reverted.%>'; + uci_status_message('notice', '<%:Changes have been reverted.%>'); window.setTimeout(function() { <% if redirect_ok then -%> location.href = decodeURIComponent('<%=luci.util.urlencode(redirect_ok)%>'); @@ -171,9 +204,8 @@ }, uci_apply_display * 1000); } else { - stat.classList.add('warning'); - stat.classList.remove('notice'); - stat.innerHTML = '<%_Revert request failed with status <code>%h</code>%>'.format(r.statusText || r.status); + uci_status_message('warning', '<%_Revert request failed with status <code>%h</code>%>'.format(r.statusText || r.status)); + window.setTimeout(function() { uci_status_message(false); }, uci_apply_display * 1000); } }); } diff --git a/modules/luci-base/luasrc/view/cbi/button.htm b/modules/luci-base/luasrc/view/cbi/button.htm index 30f8ddfda5..6ccba58f23 100644 --- a/modules/luci-base/luasrc/view/cbi/button.htm +++ b/modules/luci-base/luasrc/view/cbi/button.htm @@ -1,6 +1,6 @@ <%+cbi/valueheader%> <% if self:cfgvalue(section) ~= false then %> - <input class="cbi-button cbi-input-<%=self.inputstyle or "button" %>" type="submit"<%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self.inputtitle or self.title)%> /> + <input class="cbi-button cbi-button-<%=self.inputstyle or "button" %>" type="submit"<%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self.inputtitle or self.title)%> /> <% else %> - <% end %> diff --git a/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm b/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm index 786ee43d10..bdd6bc9687 100644 --- a/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm +++ b/modules/luci-base/luasrc/view/cbi/cell_valuefooter.htm @@ -1,2 +1,2 @@ </div> -</td> +</div> diff --git a/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm b/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm index 9c9c21814b..dbb0e1120b 100644 --- a/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm +++ b/modules/luci-base/luasrc/view/cbi/cell_valueheader.htm @@ -1,2 +1,10 @@ -<td class="cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %>"> +<%- + local title = luci.util.trim(striptags(self.title)) + local ftype = self.template and self.template:gsub("^.+/", "") +-%> +<div class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %>"<%= + attr("data-name", self.option) .. + ifattr(ftype and #ftype > 0, "data-type", ftype) .. + ifattr(title and #title > 0, "data-title", title) +%>> <div id="cbi-<%=self.config.."-"..section.."-"..self.option%>" data-index="<%=self.index%>" data-depends="<%=pcdata(self:deplist2json(section))%>"> diff --git a/modules/luci-base/luasrc/view/cbi/dropdown.htm b/modules/luci-base/luasrc/view/cbi/dropdown.htm new file mode 100644 index 0000000000..cf8c03d22c --- /dev/null +++ b/modules/luci-base/luasrc/view/cbi/dropdown.htm @@ -0,0 +1,54 @@ +<%+cbi/valueheader%> + +<%- + local selected = { } + + if self.multiple then + local val + for val in luci.util.imatch(self:cfgvalue(section)) do + selected[val] = true + end + else + selected[self:cfgvalue(section)] = true + end + + if not next(selected) and self.default then + selected[self.default] = true + end +-%> + +<div class="cbi-dropdown"<%= + attr("name", cbid) .. + attr("display-items", self.display or self.size or 3) .. + attr("dropdown-items", self.dropdown or self.display or self.size or 5) .. + attr("placeholder", self.placeholder or translate("-- please select --")) .. + ifattr(self.multiple, "multiple", "multiple") .. + ifattr(self.optional or self.rmempty, "optional", "optional") +%>> + <ul> + <% local i, key; for i, key in pairs(self.keylist) do %> + <li<%= + attr("data-index", i) .. + attr("data-depends", self:deplist2json(section, self.deplist[i])) .. + attr("value", key) .. + ifattr(selected[key], "selected", "selected") + %>> + <%=pcdata(self.vallist[i])%> + </li> + <% end %> + <% if self.custom then %> + <li> + <input type="password" style="display:none" /> + <input class="create-item-input" type="text"<%= + attr("placeholder", self.custom ~= true and + self.custom or + (self.multiple and + translate("Enter custom values") or + translate("Enter custom value"))) + %> /> + </li> + <% end %> + </ul> +</div> + +<%+cbi/valuefooter%> diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm b/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm index 546fd8e85a..b38e4b13db 100644 --- a/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm +++ b/modules/luci-base/luasrc/view/cbi/firewall_zoneforwards.htm @@ -14,46 +14,59 @@ local def = fwm:get_defaults() local zone = fwm:get_zone(value) local empty = true + + local function render_zone(zone) +-%> + <label class="zonebadge" style="background-color:<%=zone:get_color()%>"> + <strong><%=zone:name()%></strong> + <div class="cbi-tooltip"> + <%- + local zempty = true + for _, net in ipairs(zone:get_networks()) do + net = nwm:get_network(net) + if net then + zempty = false + -%> + <span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>:  + <% + local nempty = true + for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do + nempty = false + %> + <img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" /> + <% end %> + <% if nempty then %><em><%:(empty)%></em><% end %> + </span> + <%- end end -%> + <% if zempty then %><span class="ifacebadge"><em><%:(empty)%></em></span><% end %> + </div> + </label> +<%- + end -%> <% if zone then %> -<div style="white-space:nowrap"> - <label class="zonebadge" style="background-color:<%=zone:get_color()%>"> - <strong><%=zone:name()%>:</strong> - <%- - local zempty = true - for _, net in ipairs(zone:get_networks()) do - net = nwm:get_network(net) - if net then - zempty = false - -%> - <span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>: - <% - local nempty = true - for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do - nempty = false - %> - <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" /> - <% end %> - <% if nempty then %><em><%:(empty)%></em><% end %> - </span> - <%- end end -%> - <%- if zempty then %><em><%:(empty)%></em><% end -%> - </label> -  ⇒  - <% for _, fwd in ipairs(zone:get_forwardings_by("src")) do - fz = fwd:dest_zone() - if fz then - empty = false %> - <label class="zonebadge" style="background-color:<%=fz:get_color()%>"> - <strong><%=fz:name()%></strong> - </label>  - <% end end %> - <% if empty then %> +<div class="zone-forwards"> + <div class="zone-src"> + <%=render_zone(zone)%> + </div> + <span>⇒</span> + <div class="zone-dest"> + <% + for _, fwd in ipairs(zone:get_forwardings_by("src")) do + fz = fwd:dest_zone() + if fz then + empty = false + render_zone(fz) + end + end + if empty then + %> <label class="zonebadge zonebadge-empty"> <strong><%=zone:forward():upper()%></strong> </label> <% end %> + </div> </div> <% end %> diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm index b4260707ef..3a108020b6 100644 --- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm +++ b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm @@ -24,26 +24,42 @@ end -%> -<span> - <ul style="margin:0; list-style-type:none; text-align:left"> +<div class="cbi-dropdown" dropdown-items="5" placeholder="<%:-- please select -- %>"<%= + attr("name", cbid) .. + ifattr(self.widget == "checkbox", "multiple", "multiple") .. + ifattr(self.rmempty or self.optional, "optional", "optional") +%>> + <script type="item-template"><!-- + <li value="{{value}}"> + <span class="zonebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)"> + <strong>{{value}}:</strong><em>(<%:create%>)</em> + </span> + </li> + --></script> + <ul> <% 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"> + <li value=""<%=ifattr(checked[""], "selected", "selected")%>> + <span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge"> <strong><%:Device%></strong> - <% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %> - </label> + <% if self.allowany and self.allowlocal then -%> + (<%= self.alias ~= "dest" + and translate("output") or translate("input") %>) + <%- end %> + </span> + </li> + <% elseif self.widget ~= "checkbox" and (self.rmempty or self.optional) then %> + <li value=""<%=ifattr(checked[""], "selected", "selected")%>> + <span class="zonebadge"> + <em><%:unspecified%></em> + </span> </li> <% end %> <% 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"> + <li value="*"<%=ifattr(checked["*"], "selected", "selected")%>> + <span style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge"> <strong><%:Any zone%></strong> <% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %> - </label> + </span> </li> <% end %> <% @@ -51,45 +67,42 @@ if zone:name() ~= self.exclude then selected = selected or (value == zone:name()) %> - <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"> + <li<%=attr("value", zone:name()) .. ifattr(checked[zone:name()], "selected", "selected")%>> + <span style="background-color:<%=zone:get_color()%>" class="zonebadge"> <strong><%=zone:name()%>:</strong> - <% + <%- local zempty = true for _, net in ipairs(zone:get_networks()) do net = nwm:get_network(net) if net then zempty = false - %> + -%> <span class="ifacebadge<% if net:name() == self.network then %> ifacebadge-active<% end %>"><%=net:name()%>: - <% + <%- local nempty = true for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do nempty = false %> - <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" /> + <img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" /> <% end %> - <% if nempty then %><em><%:(empty)%></em><% end %> + <% if nempty then %><em><%:(empty)%></em><% end -%> </span> - <% end end %> - <% if zempty then %><em><%:(empty)%></em><% end %> - </label> + <%- end end -%> + <%- if zempty then %><em><%:(empty)%></em><% end -%> + </span> </li> <% end end %> <% 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" /> - </div> + <li value="-"> + <span class="zonebadge"> + <em><%:create%>:</em> + <input type="password" style="display:none" /> + <input class="create-item-input" type="text" /> + </span> </li> <% end %> </ul> -</span> +</div> <%+cbi/valuefooter%> diff --git a/modules/luci-base/luasrc/view/cbi/footer.htm b/modules/luci-base/luasrc/view/cbi/footer.htm index e6acfb0697..5f939b6469 100644 --- a/modules/luci-base/luasrc/view/cbi/footer.htm +++ b/modules/luci-base/luasrc/view/cbi/footer.htm @@ -1,9 +1,7 @@ <%- if pageaction then -%> <div class="cbi-page-actions"> <% if redirect and not flow.hidebackbtn then %> - <div style="float:left"> <input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" /> - </div> <% end %> <% if flow.skip then %> diff --git a/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm b/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm index f780936766..d4ad093efa 100644 --- a/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm +++ b/modules/luci-base/luasrc/view/cbi/full_valuefooter.htm @@ -3,7 +3,6 @@ <br /> <%- end %> <div class="cbi-value-description"> - <span class="cbi-value-helpicon"><img src="<%=resource%>/cbi/help.gif" alt="<%:help%>" /></span> <%=self.description%> </div> <%- end %> diff --git a/modules/luci-base/luasrc/view/cbi/map.htm b/modules/luci-base/luasrc/view/cbi/map.htm index 69ef3615a2..83c3cb2170 100644 --- a/modules/luci-base/luasrc/view/cbi/map.htm +++ b/modules/luci-base/luasrc/view/cbi/map.htm @@ -1,5 +1,5 @@ <%- if firstmap and messages then local msg; for _, msg in ipairs(messages) do -%> - <div class="errorbox"><%=pcdata(msg)%></div> + <div class="alert-message warning"><%=pcdata(msg)%></div> <%- end end -%> <div class="cbi-map" id="cbi-<%=self.config%>"> @@ -31,7 +31,6 @@ </li> <% end %> </ul> - <br /> <% for i, section in ipairs(self.children) do %> <div class="cbi-tabcontainer" id="container.m-<%=self.config%>.<%=section.section or section.sectiontype%>"<% if section.sectiontype ~= self.selected_tab then %> style="display:none"<% end %>> <% section:render() %> @@ -53,6 +52,4 @@ <% else %> <%- self:render_children() %> <% end %> - - <br /> </div> diff --git a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm index 62dbde7dd4..abfa33e1ed 100644 --- a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm +++ b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm @@ -19,7 +19,9 @@ if value then for value in utl.imatch(value) do - checked[value] = true + for value in utl.imatch(value) do + checked[value] = true + end end else local n = self.network and net:get_network(self.network) @@ -33,57 +35,51 @@ -%> <input type="hidden" name="<%=cbeid%>" value="1" /> -<ul style="margin:0; list-style-type:none"> - <% for _, iface in ipairs(ifaces) do - local link = iface:adminlink() - if (not self.nobridges or not iface:is_bridge()) and - (not self.noinactive or iface:is_up()) and - iface:name() ~= self.exclude - then %> - <li> - <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%= - attr("type", self.widget or "radio") .. - 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" /> - <% if link then -%></a><% end -%> - <%=pcdata(iface:get_i18n())%> - <% local ns = iface:get_networks(); if #ns > 0 then %>( - <%- local i, n; for i, n in ipairs(ns) do -%> - <%-= (i>1) and ', ' -%> - <a href="<%=n:adminlink()%>"><%=n:name()%></a> - <%- end -%> - )<% end %> - </label> - </li> - <% end end %> - <% if not self.nocreate then %> - <li> - <input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%= - attr("type", self.widget or "radio") .. - 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%>: - </label> - <input type="text" style="width:50px" onfocus="document.getElementById('<%=cbid%>_custom').checked=true" onblur="var x=document.getElementById('<%=cbid%>_custom'); x.value=this.value; x.checked=true" /> - </li> - <% end %> -</ul> + +<div class="cbi-dropdown" display-items="5" placeholder="<%:-- please select -- %>"<%= + attr("name", cbid) .. + ifattr(self.widget == "checkbox", "multiple", "multiple") .. + ifattr(self.widget == "checkbox", "optional", "optional") +%>> + <script type="item-template"><!-- + <li value="{{value}}"> + <img title="<%:Custom Interface%>: "{{value}}"" src="<%=resource%>/icons/ethernet_disabled.png" /> + <span class="hide-open">{{value}}</span> + <span class="hide-close"><%:Custom Interface%>: "{{value}}"</span> + </li> + --></script> + <ul> + <% for _, iface in ipairs(ifaces) do + if (not self.nobridges or not iface:is_bridge()) and + (not self.noinactive or iface:is_up()) and + iface:name() ~= self.exclude + then %> + <li<%= + attr("value", iface:name()) .. + ifattr(checked[iface:name()], "selected", "selected") + %>> + <img<%=attr("title", iface:get_i18n())%> src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" /> + <span class="hide-open"><%=pcdata(iface:name())%></span> + <span class="hide-close"> + <%=pcdata(iface:get_i18n())%> + <% local ns = iface:get_networks(); if #ns > 0 then %>( + <%- local i, n; for i, n in ipairs(ns) do -%> + <%-= (i>1) and ', ' -%> + <a href="<%=n:adminlink()%>"><%=n:name()%></a> + <%- end -%> + )<% end %> + </span> + </li> + <% end end %> + <% if not self.nocreate then %> + <li value=""> + <img title="<%:Custom Interface%>" src="<%=resource%>/icons/ethernet_disabled.png" /> + <span><%:Custom Interface%>:</span> + <input type="password" style="display:none" /> + <input class="create-item-input" type="text" /> + </li> + <% end %> + </ul> +</div> <%+cbi/valuefooter%> diff --git a/modules/luci-base/luasrc/view/cbi/network_netlist.htm b/modules/luci-base/luasrc/view/cbi/network_netlist.htm index 8bf1a70a20..ba6ebb8434 100644 --- a/modules/luci-base/luasrc/view/cbi/network_netlist.htm +++ b/modules/luci-base/luasrc/view/cbi/network_netlist.htm @@ -20,66 +20,62 @@ end -%> -<ul style="margin:0; list-style-type:none; text-align:left"> - <% for _, net in ipairs(networks) do - if (net:name() ~= "loopback") and - (net:name() ~= self.exclude) and - (not self.novirtual or not net:is_virtual()) - 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 .. "." .. net:name()) .. - attr("name", cbid) .. attr("value", net:name()) .. - ifattr(checked[net:name()], "checked", "checked") - %> />   - <label<%=attr("for", cbid .. "." .. net:name())%>> +<div class="cbi-dropdown" display-items="5" placeholder="<%:-- please select -- %>"<%= + attr("name", cbid) .. + ifattr(self.widget == "checkbox", "multiple", "multiple") .. + ifattr(self.widget == "checkbox", "optional", "optional") +%>> + <script type="item-template"><!-- + <li value="{{value}}"> + <span class="ifacebadge" style="background:repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px)"> + {{value}}: <em>(<%:create%>)</em> + </span> + </li> + --></script> + <ul> + <% if self.widget ~= "checkbox" then %> + <li value=""<%= ifattr(not value, "selected", "selected") %>> + <em><%:unspecified%></em> + </li> + <% end %> + + <% for _, net in ipairs(networks) do + if (net:name() ~= "loopback") and + (net:name() ~= self.exclude) and + (not self.novirtual or not net:is_virtual()) + then %> + <li<%= attr("value", net:name()) .. ifattr(checked[net:name()], "selected", "selected") %>> <span class="ifacebadge"><%=net:name()%>: <% local empty = true for _, iface in ipairs(net:is_bridge() and net:get_interfaces() or { net:get_interface() }) do if not iface:is_bridge() then empty = false - %> + -%> <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" /> - <% end end %> - <% if empty then %><em><%:(no interfaces attached)%></em><% end %> + <%- end end %> + <% if empty then %> + <em class="hide-close"><%:(no interfaces attached)%></em> + <em class="hide-open">-</em> + <% end %> </span> - </label> - </li> - <% end end %> + </li> + <% end end %> - <% 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 not self.nocreate then %> + <li value="-"<%= ifattr(not value and self.widget ~= "checkbox", "selected", "selected") %>> + <em> <%- if self.widget == "checkbox" then -%> <%:create:%> <%- else -%> <%:unspecified -or- create:%> - <%- end -%> </em></label> + <%- end -%> + </em> <input style="display:none" type="password" /> - <input style="width:6em" type="text"<%=attr("name", cbid .. ".newnet")%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" /> - </div> - </li> - <% elseif self.widget ~= "checkbox" and self.unspecified 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 .. "_uns") .. - attr("name", cbid) .. - attr("value", "") .. - ifattr(not value or #value == 0, "checked", "checked") - %> />   - <div style="padding:0.5em; display:inline"> - <label<%=attr("for", cbid .. "_uns")%>><em><%:unspecified%></em></label> - </div> - </li> - <% end %> -</ul> + <input class="create-item-input" type="text" /> + </li> + <% end %> + </ul> +</div> <%+cbi/valuefooter%> diff --git a/modules/luci-base/luasrc/view/cbi/nsection.htm b/modules/luci-base/luasrc/view/cbi/nsection.htm index abf67596f0..63abc57734 100644 --- a/modules/luci-base/luasrc/view/cbi/nsection.htm +++ b/modules/luci-base/luasrc/view/cbi/nsection.htm @@ -1,5 +1,5 @@ <% if self:cfgvalue(self.section) then section = self.section %> - <fieldset class="cbi-section"> + <div class="cbi-section"> <% if self.title and #self.title > 0 then -%> <legend><%=self.title%></legend> <%- end %> @@ -15,17 +15,16 @@ <div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>"> <%+cbi/ucisection%> </div> - <br /> - </fieldset> + </div> <% elseif self.addremove then %> <% if self.template_addremove then include(self.template_addremove) else -%> - <fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.section%>"> + <div class="cbi-section" id="cbi-<%=self.config%>-<%=self.section%>"> <% if self.title and #self.title > 0 then -%> <legend><%=self.title%></legend> <%- end %> <div class="cbi-section-descr"><%=self.description%></div> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cns.<%=self.config%>.<%=self.section%>" value="<%:Add%>" /> - </fieldset> + </div> <%- end %> <% end %> <!-- /nsection --> diff --git a/modules/luci-base/luasrc/view/cbi/nullsection.htm b/modules/luci-base/luasrc/view/cbi/nullsection.htm index ef169593af..7230719d19 100644 --- a/modules/luci-base/luasrc/view/cbi/nullsection.htm +++ b/modules/luci-base/luasrc/view/cbi/nullsection.htm @@ -1,4 +1,4 @@ -<fieldset class="cbi-section"> +<div class="cbi-section"> <% if self.title and #self.title > 0 then -%> <legend><%=self.title%></legend> <%- end %> @@ -25,8 +25,7 @@ </div> <%- end %> </div> - <br /> -</fieldset> +</div> <%- if type(self.hidden) == "table" then for k, v in pairs(self.hidden) do diff --git a/modules/luci-base/luasrc/view/cbi/simpleform.htm b/modules/luci-base/luasrc/view/cbi/simpleform.htm index 3b758d70ee..c6000d22b3 100644 --- a/modules/luci-base/luasrc/view/cbi/simpleform.htm +++ b/modules/luci-base/luasrc/view/cbi/simpleform.htm @@ -10,7 +10,6 @@ <% if self.title and #self.title > 0 then %><h2 name="content"><%=self.title%></h2><% end %> <% if self.description and #self.description > 0 then %><div class="cbi-map-descr"><%=self.description%></div><% end %> <% self:render_children() %> - <br /> </div> <%- if self.message then %> <div><%=self.message%></div> @@ -30,9 +29,12 @@ end %> <% if redirect then %> - <div style="float:left"> - <input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" /> - </div> + <input class="cbi-button cbi-button-link" type="button" value="<%:Back to Overview%>" onclick="location.href='<%=pcdata(redirect)%>'" /> +<% end %> +<%- if self.cancel ~= false and self.on_cancel then %> + <input class="cbi-button cbi-button-link" type="submit" name="cbi.cancel" value=" + <%- if not self.cancel then -%><%-:Cancel-%><%-else-%><%=self.cancel%><%end-%> + " /> <% end %> <%- if self.flow and self.flow.skip then %> <input class="cbi-button cbi-button-skip" type="submit" name="cbi.skip" value="<%:Skip%>" /> @@ -47,11 +49,6 @@ <%- if not self.reset then -%><%-:Reset-%><%-else-%><%=self.reset%><%end-%> " /> <% end %> -<%- if self.cancel ~= false and self.on_cancel then %> - <input class="cbi-button cbi-button-reset" type="submit" name="cbi.cancel" value=" - <%- if not self.cancel then -%><%-:Cancel-%><%-else-%><%=self.cancel%><%end-%> - " /> -<% end %> </div> </form> <% end %> diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm index 3cb87563f1..ab13922040 100644 --- a/modules/luci-base/luasrc/view/cbi/tblsection.htm +++ b/modules/luci-base/luasrc/view/cbi/tblsection.htm @@ -14,10 +14,14 @@ function width(o) end return '' end + +local anonclass = (not self.anonymous or self.sectiontitle) and "named" or "anonymous" +local titlename = ifattr(not self.anonymous or self.sectiontitle, "data-title", translate("Name")) + -%> <!-- tblsection --> -<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>"> +<div class="cbi-section cbi-tblsection" id="cbi-<%=self.config%>-<%=self.sectiontype%>"> <% if self.title and #self.title > 0 then -%> <legend><%=self.title%></legend> <%- end %> @@ -25,121 +29,107 @@ end <input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" /> <%- end -%> <div class="cbi-section-descr"><%=self.description%></div> - <div class="cbi-section-node"> - <%- local count = 0 -%> - <table class="cbi-section-table"> - <tr class="cbi-section-table-titles"> - <%- if not self.anonymous then -%> - <%- if self.sectionhead then -%> - <th class="cbi-section-table-cell"><%=self.sectionhead%></th> - <%- else -%> - <th> </th> - <%- end -%> - <%- count = count +1; end -%> - <%- for i, k in pairs(self.children) do if not k.optional then -%> - <th class="cbi-section-table-cell"<%=width(k)%>> - <%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%> - <%-=k.title-%> - <%- if k.titleref then -%></a><%- end -%> - </th> - <%- count = count + 1; end; end; if self.sortable then -%> - <th class="cbi-section-table-cell"><%:Sort%></th> - <%- count = count + 1; end; if self.extedit or self.addremove then -%> - <th class="cbi-section-table-cell"> </th> - <%- count = count + 1; end -%> - </tr> - <tr class="cbi-section-table-descr"> - <%- if not self.anonymous then -%> - <%- if self.sectiondesc then -%> - <th class="cbi-section-table-cell"><%=self.sectiondesc%></th> - <%- else -%> - <th></th> - <%- end -%> - <%- end -%> - <%- for i, k in pairs(self.children) do if not k.optional then -%> - <th class="cbi-section-table-cell"<%=width(k)%>><%=k.description%></th> - <%- end; end; if self.sortable then -%> - <th class="cbi-section-table-cell"></th> - <%- end; if self.extedit or self.addremove then -%> - <th class="cbi-section-table-cell"></th> - <%- end -%> - </tr> - <%- local isempty = true - for i, k in ipairs(self:cfgsections()) do - section = k - isempty = false - scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" } - -%> - <tr class="cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>"> - <% if not self.anonymous then -%> - <th><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></th> - <%- end %> - + <%- local count = 0 -%> + <div class="table cbi-section-table"> + <div class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>> + <%- for i, k in pairs(self.children) do if not k.optional then -%> + <div class="th cbi-section-table-cell"<%= + width(k) .. + attr("data-type", k.template and k.template:gsub("^.+/", "") or "") + %>> + <%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%> + <%-=k.title-%> + <%- if k.titleref then -%></a><%- end -%> + </div> + <%- count = count + 1; end; end; if self.sortable or self.extedit or self.addremove then -%> + <div class="th cbi-section-table-cell cbi-section-actions"></div> + <%- count = count + 1; end -%> + </div> + <div class="tr cbi-section-table-descr <%=anonclass%>"> + <%- for i, k in pairs(self.children) do if not k.optional then -%> + <div class="th cbi-section-table-cell"<%= + width(k) .. + attr("data-type", k.template and k.template:gsub("^.+/", "") or "") + %>><%=k.description%></div> + <%- end; end; if self.sortable or self.extedit or self.addremove then -%> + <div class="th cbi-section-table-cell cbi-section-actions"></div> + <%- end -%> + </div> + <%- local isempty, i, k = true, nil, nil + for i, k in ipairs(self:cfgsections()) do + isempty = false - <%- - for k, node in ipairs(self.children) do - if not node.optional then - node:render(section, scope or {}) - end + local section = k + local sectionname = striptags((type(self.sectiontitle) == "function") and self:sectiontitle(section) or k) + local sectiontitle = ifattr(sectionname and (not self.anonymous or self.sectiontitle), "data-title", sectionname) + local colorclass = (self.extedit or self.rowcolors) and " cbi-rowstyle-%d" % rowstyle() or "" + local scope = { + valueheader = "cbi/cell_valueheader", + valuefooter = "cbi/cell_valuefooter" + } + -%> + <div class="tr cbi-section-table-row<%=colorclass%>" id="cbi-<%=self.config%>-<%=section%>"<%=sectiontitle%>> + <%- + local node + for k, node in ipairs(self.children) do + if not node.optional then + node:render(section, scope or {}) end - -%> - - <%- if self.sortable then -%> - <td class="cbi-section-table-cell"> - <input class="cbi-button cbi-button-up" type="button" value="" onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move up%>" title="<%:Move up%>" /> - <input class="cbi-button cbi-button-down" type="button" value="" onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move down%>" title="<%:Move down%>" /> - </td> - <%- end -%> - - <%- if self.extedit or self.addremove then -%> - <td class="cbi-section-table-cell"> - <%- if self.extedit then -%> - <input class="cbi-button cbi-button-edit" type="button" value="<%:Edit%>" - <%- if type(self.extedit) == "string" then - %> onclick="location.href='<%=self.extedit:format(section)%>'" - <%- elseif type(self.extedit) == "function" then - %> onclick="location.href='<%=self:extedit(section)%>'" - <%- end - %> alt="<%:Edit%>" title="<%:Edit%>" /> - <%- end; if self.addremove then %> - <input class="cbi-button cbi-button-remove" type="submit" value="<%:Delete%>" onclick="this.form.cbi_state='del-section'; return true" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" /> - <%- end -%> - </td> - <%- end -%> - </tr> - <%- end -%> + end + -%> - <%- if isempty then -%> - <tr class="cbi-section-table-row"> - <td colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></td> - </tr> + <%- if self.sortable or self.extedit or self.addremove then -%> + <div class="td cbi-section-table-cell nowrap cbi-section-actions"> + <%- if self.sortable then -%> + <input class="cbi-button cbi-button-up" type="button" value="<%:Up%>" onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move up%>" /> + <input class="cbi-button cbi-button-down" type="button" value="<%:Down%>" onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" title="<%:Move down%>" /> + <% end; if self.extedit then -%> + <input class="cbi-button cbi-button-edit" type="button" value="<%:Edit%>" + <%- if type(self.extedit) == "string" then + %> onclick="location.href='<%=self.extedit:format(section)%>'" + <%- elseif type(self.extedit) == "function" then + %> onclick="location.href='<%=self:extedit(section)%>'" + <%- end + %> alt="<%:Edit%>" title="<%:Edit%>" /> + <% end; if self.addremove then %> + <input class="cbi-button cbi-button-remove" type="submit" value="<%:Delete%>" onclick="this.form.cbi_state='del-section'; return true" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" /> + <%- end -%> + </div> <%- end -%> - </table> - - <% if self.error then %> - <div class="cbi-section-error"> - <ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%> - <li><%=pcdata(e):gsub("\n","<br />")%></li> - <%- end end %></ul> - </div> - <% end %> + </div> + <%- end -%> - <%- if self.addremove then -%> - <% if self.template_addremove then include(self.template_addremove) else -%> - <div class="cbi-section-create cbi-tblsection-create"> - <% if self.anonymous then %> - <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" /> - <% else %> - <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %> - <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" /> - <input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" /> - <% if self.invalid_cts then -%> - <br /><%:Invalid%></div> - <%- end %> - <% end %> - </div> - <%- end %> + <%- if isempty then -%> + <div class="tr cbi-section-table-row placeholder"> + <div class="td"><em><%:This section contains no values yet%></em></div> + </div> <%- end -%> </div> -</fieldset> + + <% if self.error then %> + <div class="cbi-section-error"> + <ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%> + <li><%=pcdata(e):gsub("\n","<br />")%></li> + <%- end end %></ul> + </div> + <% end %> + + <%- if self.addremove then -%> + <% if self.template_addremove then include(self.template_addremove) else -%> + <div class="cbi-section-create cbi-tblsection-create"> + <% if self.anonymous then %> + <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" /> + <% else %> + <% if self.invalid_cts then -%> + <div class="cbi-section-error"><%:Invalid%></div> + <%- end %> + <div> + <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." data-type="uciname" data-optional="true" /> + </div> + <input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" /> + <% end %> + </div> + <%- end %> + <%- end -%> +</div> <!-- /tblsection --> diff --git a/modules/luci-base/luasrc/view/cbi/tsection.htm b/modules/luci-base/luasrc/view/cbi/tsection.htm index 726521ae3f..1a13df0c04 100644 --- a/modules/luci-base/luasrc/view/cbi/tsection.htm +++ b/modules/luci-base/luasrc/view/cbi/tsection.htm @@ -1,4 +1,4 @@ -<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>"> +<div class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>"> <% if self.title and #self.title > 0 then -%> <legend><%=self.title%></legend> <%- end %> @@ -20,10 +20,9 @@ <%+cbi/tabmenu%> - <fieldset class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>"> + <div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>"> <%+cbi/ucisection%> - </fieldset> - <br /> + </div> <%- end %> <% if isempty then -%> @@ -36,14 +35,15 @@ <% if self.anonymous then -%> <input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" /> <%- else -%> - <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %> - <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" /> - <input type="submit" class="cbi-button cbi-button-add" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" /> <% if self.invalid_cts then -%> - <br /><%:Invalid%></div> + <div class="cbi-section-error"><%:Invalid%></div> <%- end %> + <div> + <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>." data-type="uciname" data-optional="true" /> + </div> + <input class="cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" /> <%- end %> </div> <%- end %> <%- end %> -</fieldset> +</div> diff --git a/modules/luci-base/luasrc/view/cbi/upload.htm b/modules/luci-base/luasrc/view/cbi/upload.htm index 4fb5201aac..3c3d82b653 100644 --- a/modules/luci-base/luasrc/view/cbi/upload.htm +++ b/modules/luci-base/luasrc/view/cbi/upload.htm @@ -8,7 +8,7 @@ <%:Uploaded File%> (<%=t.byte_format(s.size)%>) <% if self.unsafeupload then %> <input type="hidden"<%= attr("value", v) .. attr("name", cbid) .. attr("id", cbid) %> /> - <input class="cbi-button cbi-input-image" type="image" value="<%:Replace entry%>" name="cbi.rlf.<%=section .. "." .. self.option%>" alt="<%:Replace entry%>" title="<%:Replace entry%>" src="<%=resource%>/cbi/reload.gif" /> + <input class="cbi-button cbi-button-image" type="image" value="<%:Replace entry%>" name="cbi.rlf.<%=section .. "." .. self.option%>" alt="<%:Replace entry%>" title="<%:Replace entry%>" src="<%=resource%>/cbi/reload.gif" /> <% end %> <% end %> diff --git a/modules/luci-base/luasrc/view/sysauth.htm b/modules/luci-base/luasrc/view/sysauth.htm index b3ec9b7617..9b0e2de780 100644 --- a/modules/luci-base/luasrc/view/sysauth.htm +++ b/modules/luci-base/luasrc/view/sysauth.htm @@ -8,7 +8,9 @@ <form method="post" action="<%=pcdata(FULL_REQUEST_URI)%>"> <%- if fuser then %> - <div class="errorbox"><%:Invalid username and/or password! Please try again.%></div> + <div class="alert-message warning"> + <p><%:Invalid username and/or password! Please try again.%></p> + </div> <% end -%> <div class="cbi-map"> @@ -16,23 +18,23 @@ <div class="cbi-map-descr"> <%:Please enter your username and password.%> </div> - <fieldset class="cbi-section"><fieldset class="cbi-section-node"> + <div class="cbi-section"><div class="cbi-section-node"> <div class="cbi-value"> <label class="cbi-value-title"><%:Username%></label> <div class="cbi-value-field"> - <input class="cbi-input-user" type="text" name="luci_username" value="<%=duser%>" /> + <input class="cbi-input-text" type="text" name="luci_username" value="<%=duser%>" /> </div> </div> <div class="cbi-value cbi-value-last"> <label class="cbi-value-title"><%:Password%></label> <div class="cbi-value-field"> - <input class="cbi-input-password" type="password" name="luci_password" /> + <input class="cbi-input-text" type="password" name="luci_password" /> </div> </div> - </fieldset></fieldset> + </div></div> </div> - <div> + <div class="cbi-page-actions"> <input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" /> <input type="reset" value="<%:Reset%>" class="cbi-button cbi-button-reset" /> </div> |