Doc: Add CSS styling and icon for 'technical preview' items

QDoc adds a 'Status' field to the table on top of type reference pages.
One common status for Qt modules/types is 'Technical preview'. Add
an icon that is displayed next to the status description, highlighting
the fact that the type is in tech. preview and therefore subject to
change.

Pick-to: 6.5
Task-number: QTBUG-113026
Change-Id: Ibe6ca2a562cc7810fe27e7dcf514c711cd022894
Reviewed-by: Nicholas Bennett <[email protected]>
Reviewed-by: Leena Miettinen <[email protected]>

5 files changed, 34 insertions, 2 deletions

diff --git a/doc/global/html-header-offline.qdocconf b/doc/global/html-header-offline.qdocconf
index 4b87e3c792e..ffce22eeeec 100644
--- a/doc/global/html-header-offline.qdocconf
+++ b/doc/global/html-header-offline.qdocconf
@@ -2,11 +2,13 @@
 
 #specify the CSS file used by this template
 HTML.stylesheets = template/style/offline.css \
-                   template/style/offline-dark.css
+                   template/style/offline-dark.css \
+                   template/style/tech_preview.svg
 
 #for including files into the qch file
 qhp.extraFiles += style/offline.css \
-                  style/offline-dark.css
+                  style/offline-dark.css \
+                  style/tech_preview.svg
 
 HTML.headerstyles = \
     "  <link rel=\"stylesheet\" type=\"text/css\" href=\"style/offline.css\" />\n"
diff --git a/doc/global/html-header-online.qdocconf b/doc/global/html-header-online.qdocconf
index d674e76bb08..8d258c2a275 100644
--- a/doc/global/html-header-online.qdocconf
+++ b/doc/global/html-header-online.qdocconf
@@ -11,8 +11,10 @@ HTML.stylesheets = template/style/online.css \
                    template/style/icomoon.woff \
                    template/style/cookiebar-x.png \
                    template/style/doc_search.png \
+                   template/style/tech_preview.svg \
                    template/style/theqtcompany.png
 
+
 #for including files into the qch file. Relative to the outputdir of a QDoc build.
 qhp.extraFiles += style/online.css \
                   style/cookie-confirm.css \
@@ -25,6 +27,7 @@ qhp.extraFiles += style/online.css \
                   style/icomoon.woff \
                   style/cookiebar-x.png \
                   style/doc_search.png \
+                  style/tech_preview.svg \
                   style/theqtcompany.png
 
 HTML.headerstyles = \
diff --git a/doc/global/template/style/offline.css b/doc/global/template/style/offline.css
index 9f0cc8cd2eb..d3846597899 100644
--- a/doc/global/template/style/offline.css
+++ b/doc/global/template/style/offline.css
@@ -574,6 +574,20 @@ ol.I > li {
     padding: 3px 15px 3px 0
 }
 
+span.status.technical-preview {
+    display: inline-block;
+    position: relative;
+    background: center/contain no-repeat url(tech_preview.svg);
+    width: 26px;
+    height: 23px;
+}
+
+td.memItemRight span.status {
+    margin-top: -10px;
+    right: -10px;
+    top: 6px;
+}
+
 .qml {
     display: block;
     margin: 10px;
diff --git a/doc/global/template/style/online.css b/doc/global/template/style/online.css
index 33487355d2a..4f51864d8b9 100644
--- a/doc/global/template/style/online.css
+++ b/doc/global/template/style/online.css
@@ -505,6 +505,18 @@ h1,h2,h3,h4,h5,h6 {
   font-size:150%;
   margin-bottom: 1em
 }
+span.status.technical-preview {
+  display:inline-block;
+  position:relative;
+  background:center/contain no-repeat url(tech_preview.svg);
+  width:26px;
+  height:23px
+}
+td.memItemRight span.status {
+  margin-top:-10px;
+  right:-10px;
+  top:6px
+}
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
   display:block
 }
diff --git a/doc/global/template/style/tech_preview.svg b/doc/global/template/style/tech_preview.svg
new file mode 100644
index 00000000000..54ce08ddbbd
--- /dev/null
+++ b/doc/global/template/style/tech_preview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="49" height="43" viewBox="0 0 13 11" stroke="#09102b"><path d="M12.82 11.125L.155 11.121 6.491.155z" opacity=".999" fill="#ffe353" stroke-linejoin="round" stroke-width=".31"/><path d="M4.914 7.071L3.521 8.302l1.287 1.084m1.144.027l1.394-1.231-1.287-1.084m-.283-.539l-.788 2.974" fill="none" stroke-linecap="round" stroke-width=".151"/><path d="M7.287 9.358l-.013.259 1.695.025-.021-.297-1.662.013zm.706.017L7.989 5.7l.367-.004.017 3.658m.33-3.512l-.238.008.004.255.238.033-.004-.297zm-.221.05l-3.199.008.004.238 3.165-.021.029-.226zm-2.965.255l.025.447.28-.15.23.163-.267.313m-.23-.322l-.242-.046-.084.163.288.226" fill="#41cd52" stroke-width=".151"/></svg>