libs/cbi: implement tabbing to split large sections and group options in tabs

[project/luci.git] / libs / cbi / luasrc / view / cbi / nsection.htm

diff --git a/libs/cbi/luasrc/view/cbi/nsection.htm b/libs/cbi/luasrc/view/cbi/nsection.htm
index 67dad63..d096ac3 100644 (file)
--- a/libs/cbi/luasrc/view/cbi/nsection.htm
+++ b/libs/cbi/luasrc/view/cbi/nsection.htm
@@ -1,20 +1,46 @@
-<% if self:cfgvalue(self.section) then
-section = self.section %>
-                               <div class="cbi-section" id="cbi-<%=self.config%>-<%=section%>">
-                                       <h2><%=self.title%></h2>
-                                       <div class="cbi-section-descr"><%=self.description%></div>
-                                       <% if self.addremove then %><div class="cbi-section-remove right">
-                                               <input type="submit" name="cbi.rns.<%=self.config%>.<%=section%>" value="<%:cbi_del%>" />
-                                       </div><% end %>
-<div class="cbi-section-node" id="cbi-<%=self.config%>-<%=section%>">
-<%+cbi/ucisection%>
-</div>
-<br />
-                               </div>
+<%#
+LuCI - Lua Configuration Interface
+Copyright 2008 Steven Barth <steven@midlink.org>
+Copyright 2008-2009 Jo-Philipp Wich <xm@subsignal>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+$Id$
+
+-%>
+
+<% if self:cfgvalue(self.section) then section = self.section %>
+       <fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=section%>">
+               <% if self.title and #self.title > 0 then -%>
+                       <legend><%=self.title%></legend>
+               <%- end %>
+               <% if self.description and #self.description > 0 then -%>
+                       <div class="cbi-section-descr"><%=self.description%></div>
+               <%- end %>
+               <% if self.addremove then -%>
+                       <div class="cbi-section-remove right">
+                               <input type="submit" name="cbi.rns.<%=self.config%>.<%=section%>" value="<%:cbi_del%>" />
+                       </div>
+               <%- end %>
+               <%+cbi/tabmenu%>
+               <div class="cbi-section-node" id="cbi-<%=self.config%>-<%=section%>">
+                       <%+cbi/ucisection%>
+               </div>
+               <br />
+       </fieldset>
 <% elseif self.addremove then %>
-                               <div class="cbi-section" id="cbi-<%=self.config%>-<%=self.section%>">
-                                       <h2><%=self.title%></h2>
-                                       <div class="cbi-section-descr"><%=self.description%></div>
-                                       <input type="submit" name="cbi.cns.<%=self.config%>.<%=self.section%>" value="<%:cbi_add%>" />
-                               </div>
+       <% if self.template_addremove then include(self.template_addremove) else -%>
+       <fieldset 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-add" name="cbi.cns.<%=self.config%>.<%=self.section%>" value="<%:cbi_add%>" />
+       </fieldset>
+       <%- end %>
 <% end %>
+<!-- /nsection -->