diff options
author | Jo-Philipp Wich <jo@mein.io> | 2018-12-05 08:48:35 +0100 |
---|---|---|
committer | Jo-Philipp Wich <jo@mein.io> | 2018-12-10 13:41:34 +0100 |
commit | 76e9c0305ed65480e0d1e3e86d831ac24de98bcd (patch) | |
tree | b5059bb0b138d4acd48f54814205f43ea888d878 /modules/luci-base/luasrc/view | |
parent | 747e10bae6e9ec45e7d10f962c8c25ae804e97e7 (diff) |
luci-base: rework ui tabbing code
- Instantiate tab menus on the client side
- Simplify server side markup generation
- Show error indicators in cbi tabs
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'modules/luci-base/luasrc/view')
-rw-r--r-- | modules/luci-base/luasrc/view/cbi/map.htm | 34 | ||||
-rw-r--r-- | modules/luci-base/luasrc/view/cbi/nsection.htm | 1 | ||||
-rw-r--r-- | modules/luci-base/luasrc/view/cbi/tabcontainer.htm | 15 | ||||
-rw-r--r-- | modules/luci-base/luasrc/view/cbi/tabmenu.htm | 12 | ||||
-rw-r--r-- | modules/luci-base/luasrc/view/cbi/tsection.htm | 2 |
5 files changed, 28 insertions, 36 deletions
diff --git a/modules/luci-base/luasrc/view/cbi/map.htm b/modules/luci-base/luasrc/view/cbi/map.htm index d65a161673..31997a1c00 100644 --- a/modules/luci-base/luasrc/view/cbi/map.htm +++ b/modules/luci-base/luasrc/view/cbi/map.htm @@ -3,25 +3,25 @@ <%- end end -%> <div class="cbi-map" id="cbi-<%=self.config%>"> - <% 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 %> + <% 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 %> <% if self.tabbed then %> - <ul class="cbi-tabmenu map"> - <%- self.selected_tab = luci.http.formvalue("tab.m-" .. self.config) %> - <% for i, section in ipairs(self.children) do %> - <%- if not self.selected_tab then self.selected_tab = section.sectiontype end %> - <li id="tab.m-<%=self.config%>.<%=section.section or section.sectiontype%>" class="cbi-tab<%=(section.sectiontype == self.selected_tab) and '' or '-disabled'%>"> - <a onclick="this.blur(); return cbi_t_switch('m-<%=self.config%>', '<%=section.section or section.sectiontype%>')" href="<%=REQUEST_URI%>?tab.m-<%=self.config%>=<%=section.section or section.sectiontype%>"><%=section.title or section.section or section.sectiontype %></a> - <% if section.sectiontype == self.selected_tab then %><input type="hidden" id="tab.m-<%=self.config%>" name="tab.m-<%=self.config%>" value="<%=section.section or section.sectiontype%>" /><% end %> - </li> + <div> + <% for i, section in ipairs(self.children) do + tab = section.section or section.sectiontype %> + <div class="cbi-tabcontainer"<%= + attr("id", "container.m-%s.%s" %{ self.config, tab }) .. + attr("data-tab", tab) .. + attr("data-tab-title", section.title or tab)) + %>> + <% section:render() %> + </div> <% end %> - </ul> - <% 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() %> - </div> - <script type="text/javascript">cbi_t_add('m-<%=self.config%>', '<%=section.section or section.sectiontype%>')</script> - <% end %> + </div> <% if not self.save then -%> <div class="cbi-section-error"> diff --git a/modules/luci-base/luasrc/view/cbi/nsection.htm b/modules/luci-base/luasrc/view/cbi/nsection.htm index 63abc57734..14232e3d94 100644 --- a/modules/luci-base/luasrc/view/cbi/nsection.htm +++ b/modules/luci-base/luasrc/view/cbi/nsection.htm @@ -11,7 +11,6 @@ <input type="submit" class="cbi-button" name="cbi.rns.<%=self.config%>.<%=section%>" value="<%:Delete%>" /> </div> <%- end %> - <%+cbi/tabmenu%> <div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>"> <%+cbi/ucisection%> </div> diff --git a/modules/luci-base/luasrc/view/cbi/tabcontainer.htm b/modules/luci-base/luasrc/view/cbi/tabcontainer.htm index 38c435d6a1..7fcb835783 100644 --- a/modules/luci-base/luasrc/view/cbi/tabcontainer.htm +++ b/modules/luci-base/luasrc/view/cbi/tabcontainer.htm @@ -1,7 +1,14 @@ -<% for tab, data in pairs(self.tabs) do %> - <div class="cbi-tabcontainer" id="container.<%=self.config%>.<%=section%>.<%=tab%>"<% if tab ~= self.selected_tab then %> style="display:none"<% end %>> - <% if data.description then %><div class="cbi-tab-descr"><%=data.description%></div><% end %> +<% for _, tab in ipairs(self.tab_names) do data = self.tabs[tab] %> + <div class="cbi-tabcontainer"<%= + attr("id", "container.%s.%s.%s" %{ self.config, section, tab }) .. + attr("data-tab", tab) .. + attr("data-tab-title", data.title) .. + attr("data-tab-active", tostring(tab == self.selected_tab)) + %>> + <% if data.description then %> + <div class="cbi-tab-descr"><%=data.description%></div> + <% end %> + <% self:render_tab(tab, section, scope or {}) %> </div> - <script type="text/javascript">cbi_t_add('<%=self.config%>.<%=section%>', '<%=tab%>')</script> <% end %> diff --git a/modules/luci-base/luasrc/view/cbi/tabmenu.htm b/modules/luci-base/luasrc/view/cbi/tabmenu.htm deleted file mode 100644 index 06c1414bf3..0000000000 --- a/modules/luci-base/luasrc/view/cbi/tabmenu.htm +++ /dev/null @@ -1,12 +0,0 @@ -<%- if self.tabs then %> - <ul class="cbi-tabmenu"> - <%- self.selected_tab = luci.http.formvalue("tab." .. self.config .. "." .. section) %> - <%- for _, tab in ipairs(self.tab_names) do if #self.tabs[tab].childs > 0 then %> - <%- if not self.selected_tab then self.selected_tab = tab end %> - <li id="tab.<%=self.config%>.<%=section%>.<%=tab%>" class="cbi-tab<%=(tab == self.selected_tab) and '' or '-disabled'%>"> - <a onclick="this.blur(); return cbi_t_switch('<%=self.config%>.<%=section%>', '<%=tab%>')" href="<%=REQUEST_URI%>?tab.<%=self.config%>.<%=section%>=<%=tab%>"><%=self.tabs[tab].title%></a> - <% if tab == self.selected_tab then %><input type="hidden" id="tab.<%=self.config%>.<%=section%>" name="tab.<%=self.config%>.<%=section%>" value="<%=tab%>" /><% end %> - </li> - <% end end -%> - </ul> -<% end -%> diff --git a/modules/luci-base/luasrc/view/cbi/tsection.htm b/modules/luci-base/luasrc/view/cbi/tsection.htm index 1a13df0c04..547a793329 100644 --- a/modules/luci-base/luasrc/view/cbi/tsection.htm +++ b/modules/luci-base/luasrc/view/cbi/tsection.htm @@ -18,8 +18,6 @@ <h3><%=section:upper()%></h3> <%- end %> - <%+cbi/tabmenu%> - <div class="cbi-section-node<% if self.tabs then %> cbi-section-node-tabbed<% end %>" id="cbi-<%=self.config%>-<%=section%>"> <%+cbi/ucisection%> </div> |