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 <nicholas.bennett@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

5 files changed, 34 insertions, 2 deletions

diff --git a/doc/global/html-header-offline.qdocconf b/doc/global/html-header-offline.qdocconf
index 4b87e3c792..ffce22eeee 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 d674e76bb0..8d258c2a27 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 9f0cc8cd2e..d384659789 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 33487355d2..4f51864d8b 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 0000000000..54ce08ddbb
--- /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>