luci-compat: update markup for CBI TableSections
Update legacy CBI markup to use actual table, tr, th and td elements instead of using div element corresponding table classes. Fixes compatibility with OpenWrt 2020 theme. Ref: https://github.com/openwrt/luci/issues/4972 Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
parent
db00103547
commit
2155868175
3 changed files with 21 additions and 21 deletions
|
@ -1,2 +1,2 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
local descr = luci.util.trim(striptags(self.description))
|
local descr = luci.util.trim(striptags(self.description))
|
||||||
local ftype = self.typename or (self.template and self.template:gsub("^.+/", ""))
|
local ftype = self.typename or (self.template and self.template:gsub("^.+/", ""))
|
||||||
-%>
|
-%>
|
||||||
<div class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %><% if self.password then %> nowrap<% end %>"<%=
|
<td class="td cbi-value-field<% if self.error and self.error[section] then %> cbi-value-error<% end %><% if self.password then %> nowrap<% end %>"<%=
|
||||||
attr("data-name", self.option) ..
|
attr("data-name", self.option) ..
|
||||||
ifattr(ftype and #ftype > 0, "data-widget", ftype) ..
|
ifattr(ftype and #ftype > 0, "data-widget", ftype) ..
|
||||||
ifattr(title and #title > 0, "data-title", title, true) ..
|
ifattr(title and #title > 0, "data-title", title, true) ..
|
||||||
|
|
|
@ -46,12 +46,12 @@ function render_titles()
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
%><div class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>><%
|
%><tr class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>><%
|
||||||
|
|
||||||
local i, k
|
local i, k
|
||||||
for i, k in ipairs(self.children) do
|
for i, k in ipairs(self.children) do
|
||||||
if not k.optional then
|
if not k.optional then
|
||||||
%><div class="th cbi-section-table-cell"<%=
|
%><th class="th cbi-section-table-cell"<%=
|
||||||
width(k) .. attr('data-widget', k.typename) %>><%
|
width(k) .. attr('data-widget', k.typename) %>><%
|
||||||
|
|
||||||
if k.titleref then
|
if k.titleref then
|
||||||
|
@ -64,15 +64,15 @@ function render_titles()
|
||||||
%></a><%
|
%></a><%
|
||||||
end
|
end
|
||||||
|
|
||||||
%></div><%
|
%></th><%
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
if self.sortable or self.extedit or self.addremove then
|
if self.sortable or self.extedit or self.addremove then
|
||||||
%><div class="th cbi-section-table-cell cbi-section-actions"></div><%
|
%><th class="th cbi-section-table-cell cbi-section-actions"></th><%
|
||||||
end
|
end
|
||||||
|
|
||||||
%></div><%
|
%></tr><%
|
||||||
|
|
||||||
rowcnt = rowcnt + 1
|
rowcnt = rowcnt + 1
|
||||||
end
|
end
|
||||||
|
@ -82,25 +82,25 @@ function render_descriptions()
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
%><div class="tr cbi-section-table-descr <%=anonclass%>"><%
|
%><tr class="tr cbi-section-table-descr <%=anonclass%>"><%
|
||||||
|
|
||||||
local i, k
|
local i, k
|
||||||
for i, k in ipairs(self.children) do
|
for i, k in ipairs(self.children) do
|
||||||
if not k.optional then
|
if not k.optional then
|
||||||
%><div class="th cbi-section-table-cell"<%=
|
%><th class="th cbi-section-table-cell"<%=
|
||||||
width(k) .. attr("data-widget", k.typename) %>><%
|
width(k) .. attr("data-widget", k.typename) %>><%
|
||||||
|
|
||||||
write(k.description)
|
write(k.description)
|
||||||
|
|
||||||
%></div><%
|
%></th><%
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
if self.sortable or self.extedit or self.addremove then
|
if self.sortable or self.extedit or self.addremove then
|
||||||
%><div class="th cbi-section-table-cell cbi-section-actions"></div><%
|
%><th class="th cbi-section-table-cell cbi-section-actions"></th><%
|
||||||
end
|
end
|
||||||
|
|
||||||
%></div><%
|
%></tr><%
|
||||||
|
|
||||||
rowcnt = rowcnt + 1
|
rowcnt = rowcnt + 1
|
||||||
end
|
end
|
||||||
|
@ -116,7 +116,7 @@ end
|
||||||
<input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
|
<input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
|
||||||
<%- end -%>
|
<%- end -%>
|
||||||
<div class="cbi-section-descr"><%=self.description%></div>
|
<div class="cbi-section-descr"><%=self.description%></div>
|
||||||
<div class="table cbi-section-table">
|
<table class="table cbi-section-table">
|
||||||
<%-
|
<%-
|
||||||
render_titles()
|
render_titles()
|
||||||
render_descriptions()
|
render_descriptions()
|
||||||
|
@ -134,7 +134,7 @@ end
|
||||||
valuefooter = "cbi/cell_valuefooter"
|
valuefooter = "cbi/cell_valuefooter"
|
||||||
}
|
}
|
||||||
-%>
|
-%>
|
||||||
<div class="tr cbi-section-table-row<%=colorclass%>" id="cbi-<%=self.config%>-<%=section%>"<%=sectiontitle%>>
|
<tr class="tr cbi-section-table-row<%=colorclass%>" id="cbi-<%=self.config%>-<%=section%>"<%=sectiontitle%>>
|
||||||
<%-
|
<%-
|
||||||
local node
|
local node
|
||||||
for k, node in ipairs(self.children) do
|
for k, node in ipairs(self.children) do
|
||||||
|
@ -145,7 +145,7 @@ end
|
||||||
-%>
|
-%>
|
||||||
|
|
||||||
<%- if self.sortable or self.extedit or self.addremove then -%>
|
<%- if self.sortable or self.extedit or self.addremove then -%>
|
||||||
<div class="td cbi-section-table-cell nowrap cbi-section-actions">
|
<td class="td cbi-section-table-cell nowrap cbi-section-actions">
|
||||||
<div>
|
<div>
|
||||||
<%- if self.sortable then -%>
|
<%- if self.sortable then -%>
|
||||||
<input class="btn 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="btn 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%>" />
|
||||||
|
@ -162,17 +162,17 @@ end
|
||||||
<input class="btn 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%>" />
|
<input class="btn 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 -%>
|
<%- end -%>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
<%- end -%>
|
<%- end -%>
|
||||||
</div>
|
</tr>
|
||||||
<%- end -%>
|
<%- end -%>
|
||||||
|
|
||||||
<%- if isempty then -%>
|
<%- if isempty then -%>
|
||||||
<div class="tr cbi-section-table-row placeholder">
|
<tr class="tr cbi-section-table-row placeholder">
|
||||||
<div class="td"><em><%:This section contains no values yet%></em></div>
|
<td class="td"><em><%:This section contains no values yet%></em></td>
|
||||||
</div>
|
</tr>
|
||||||
<%- end -%>
|
<%- end -%>
|
||||||
</div>
|
</table>
|
||||||
|
|
||||||
<% if self.error then %>
|
<% if self.error then %>
|
||||||
<div class="cbi-section-error">
|
<div class="cbi-section-error">
|
||||||
|
|
Loading…
Reference in a new issue