Doc: Add qdoc macro for tabbed content

The macro enables tabbed content in the online style
only. It's usage must be gaurded with a conditional
block as shown in the following example to handle
the offline style usecase:

 \if(onlinedocs)
   \tab {build-qt-app}{tab-cmake}{CMake}{selected}
   \tab {build-qt-app}{tab-qmake}{qmake}{}
   \tabcontent {tab-cmake}
 \else
   \section1 Using CMake
 \endif
   CMake-specific instructions go here
 \if(onlinedocs)
   \endtabcontent
   \tabcontent {tab-qmake}
 \else
   \section1 Using qmake
 \endif
   qmake-specific instructions go here
 \if(onlinedocs)
   \endtabcontent
 \endif

Pick-to: 6.2 6.3
Change-Id: I02d50c057280a9ffea913642284e67ddcda7aa94
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>

3 files changed, 117 insertions, 0 deletions

diff --git a/doc/global/htmltabs.qdocconf b/doc/global/htmltabs.qdocconf
new file mode 100644
index 0000000000..41aa43dca5
--- /dev/null
+++ b/doc/global/htmltabs.qdocconf
@@ -0,0 +1,60 @@
+#Macros for HTML tabs
+#Usage:
+#\tab {name}{tab-id}{title}{checked}
+#\tabcontent {tab-id}
+# content
+#\endtabcontent
+
+# Ensure that the {name} is unique for the group.
+# i.e A group of tabs can have the same name, whereas
+# {tab-id} should be unique. In addition, the argument
+# for \tabcontent macro should match the {tab-id} for the
+# corresponding \tab.
+
+# The {checked} argument ensures that the tab is selected
+# by default when the HTML page is loaded. For the other
+# tabs that are not selected, pass and empty argument {}.
+#
+# Note that these macros work with the online template only.
+#
+# Example:
+# \if(onlinedocs)
+#   \tab {build-qt-app}{tab-cmake}{CMake}{selected}
+#   \tab {build-qt-app}{tab-qmake}{qmake}{}
+#   \tabcontent {tab-cmake}
+# \else
+#   \section1 Using CMake
+# \endif
+#   CMake-specific instructions go here
+# \if(onlinedocs)
+#   \endtabcontent
+#   \tabcontent {tab-qmake}
+# \else
+#   \section1 Using qmake
+# \endif
+#   qmake-specific instructions go here
+# \if(onlinedocs)
+#   \endtabcontent
+# \endif
+
+macro.tab.HTML = "<input type=\"radio\" name=\"tabs_\1\" id=\"\2\" \4/><label for=\"\2\">\3</label><style>#\2:checked ~ .\2{display: block;}</style>"
+macro.tabcontent.HTML = "<div class=\"tabcontent \1\">"
+macro.endtabcontent.HTML = "</div>"
+
+HTML.extraimages += template/style/htmltabs.css
+
+HTML.headerstyle += \
+    "  <link rel=\"stylesheet\" type=\"text/css\" href=\"images/htmltabs.css\" />\n"
+
+HTML.headerscripts += \
+    "  <script type=\"text/javascript\">\n" \
+    " \$(document).ready(function(){\n" \
+    "   \$(\"input[type=radio]\").on(\"click\", function() {\n" \
+    "   var lbl = \$(this).next().text();\n" \
+    "   \$(\"input[type=radio]:not(checked)\").filter(function() {\n" \
+    "     if (\$(this).next().text() == lbl)\n" \
+    "         \$(this).prop(\"checked\", true);\n" \
+    "   });\n" \
+    "   });\n" \
+    " });\n" \
+    "  </script>\n"
diff --git a/doc/global/macros-online.qdocconf b/doc/global/macros-online.qdocconf
index c6f370a7d7..bfc2f98a12 100644
--- a/doc/global/macros-online.qdocconf
+++ b/doc/global/macros-online.qdocconf
@@ -2,3 +2,5 @@ macro.youtube.HTML = "<div class=\"video\">\n<span class=\"vspan\"></span>\n" \
                      "<iframe src=\"https://www.youtube.com/embed/\1\"" \
                      "frameborder=\"0\" allowfullscreen>\n" \
                      "</iframe></div>\n"
+
+include(htmltabs.qdocconf)
diff --git a/doc/global/template/style/htmltabs.css b/doc/global/template/style/htmltabs.css
new file mode 100644
index 0000000000..f09ec9f8c8
--- /dev/null
+++ b/doc/global/template/style/htmltabs.css
@@ -0,0 +1,55 @@
+/*
+-----------
+HTML Tabs
+-----------
+*/
+
+.blankline {
+  height: 1em;
+  display: block;
+}
+
+input[type="radio"],
+input[type="radio"] ~ .tabcontent {
+  display: none;
+  margin: 0;
+  padding: 0;
+}
+
+input[type="radio"] + label {
+  display: inline-block;
+}
+
+input[type="radio"] + label {
+  margin-left: 0;
+  padding: 10px 10px 8px;
+  background-image: linear-gradient(to right, #09102b, #53586b);
+  color: #ccc;
+  position: relative;
+  clip-path: polygon(10px 0%, 100% 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% calc(100% - 10px), 0% 10px);
+  margin-right: 2px;
+  min-width: 50px;
+  cursor: pointer;
+}
+
+input[type="radio"]:hover + label,
+input[type="radio"]:checked + label {
+  opacity: 0.75;
+  transition: all ease 0.3s;
+}
+
+input[type="radio"]:checked + label {
+  color: #41cd52;
+}
+
+/* Some styling for the content */
+div.tabcontent {
+  padding-left: 10px;
+  padding-top: 2px;
+  border-left: 3px solid #ccc;
+  border-top: 1px solid #ccc;
+}
+
+div.tabcontent pre {
+  margin-top: 0;
+}