luci-base: rework tblsection template

- Hide empty title and description rows
- Correct row striping offset
- Cleanup code

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 96 insertions, 30 deletions

diff --git a/modules/luci-base/luasrc/view/cbi/tblsection.htm b/modules/luci-base/luasrc/view/cbi/tblsection.htm
index 7067aa5876..9505f4ac4e 100644
--- a/modules/luci-base/luasrc/view/cbi/tblsection.htm
+++ b/modules/luci-base/luasrc/view/cbi/tblsection.htm
@@ -1,8 +1,13 @@
 <%-
-local rowcnt = 1
+local rowcnt = 0
+
 function rowstyle()
 	rowcnt = rowcnt + 1
-	return (rowcnt % 2) + 1
+	if rowcnt % 2 == 0 then
+		return "cbi-rowstyle-1"
+	else
+		return "cbi-rowstyle-2"
+	end
 end
 
 function width(o)
@@ -15,54 +20,115 @@ function width(o)
 	return ''
 end
 
+local has_titles = false
+local has_descriptions = false
+
 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"))
 
+local i, k
+for i, k in pairs(self.children) do
+	if not k.typename then
+		k.typename = k.template and k.template:gsub("^.+/", "") or ""
+	end
+
+	if not has_titles and k.title and #k.title > 0 then
+		has_titles = true
+	end
+
+	if not has_descriptions and k.description and #k.description > 0 then
+		has_descriptions = true
+	end
+end
+
+function render_titles()
+	if not has_titles then
+		return
+	end
+
+	%><div class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>><%
+
+	local i, k
+	for i, k in ipairs(self.children) do
+		if not k.optional then
+			%><div class="th cbi-section-table-cell"<%=
+				width(k) .. attr('data-type', k.typename) %>><%
+
+			if k.titleref then
+				%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%
+			end
+
+			write(k.title)
+
+			if k.titleref then
+				%></a><%
+			end
+
+			%></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><%
+
+	rowcnt = rowcnt + 1
+end
+
+function render_descriptions()
+	if not has_descriptions then
+		return
+	end
+
+	%><div class="tr cbi-section-table-descr <%=anonclass%>"><%
+
+	local i, k
+	for i, k in ipairs(self.children) do
+		if not k.optional then
+			%><div class="th cbi-section-table-cell"<%=
+				width(k) .. attr("data-type", k.typename) %>><%
+
+			write(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><%
+
+	rowcnt = rowcnt + 1
+end
+
 -%>
 
 <!-- tblsection -->
 <div class="cbi-section cbi-tblsection" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
 	<% if self.title and #self.title > 0 then -%>
-		<legend><%=self.title%></legend>
+		<h3><%=self.title%></h3>
 	<%- end %>
 	<%- if self.sortable then -%>
 		<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>
-	<%- 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, section, i, k = true, nil, nil
+		<%-
+			render_titles()
+			render_descriptions()
+
+			local isempty, section, i, k = true, nil, nil
 		    for i, k in ipairs(self:cfgsections()) do
 				isempty = false
 				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 colorclass = (self.extedit or self.rowcolors) and rowstyle() or ""
 				local scope = {
 					valueheader = "cbi/cell_valueheader",
 					valuefooter = "cbi/cell_valuefooter"