Change PlatformHintedContent rendering, js and css to match Figma style

author: Filip Zybała <fzybala@virtuslab.com> 2020-04-06 14:24:07 +0200
committer: Kamil Doległo <kamilok1965@users.noreply.github.com> 2020-04-15 14:41:29 +0200
commit: 72db3a16521408509f4a0f61ef110851a252d2cc (patch)
tree: 24f0a93c809045d66063c4c643d6ded4d4c6a0bc /plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html
parent: fee86d79a3aa7357c68c2f8f519d187f43447e8c (diff)
download: dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.gz
dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.bz2
dokka-72db3a16521408509f4a0f61ef110851a252d2cc.zip
11 files changed, 113 insertions, 14 deletions
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html
index 0ad7d7df..d1bfe590 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/-init-.html
@@ -4,6 +4,7 @@
     <title>&lt;init&gt;</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="-init-.html">&lt;init&gt;</a></div>
           <div class="cover ">
             <h1>&lt;init&gt;</h1>
-<div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>(size: <a href="">Int</a>)</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>(size: <a href="">Int</a>)</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html
index d1a73c8d..2645051d 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/equals.html
@@ -4,6 +4,7 @@
     <title>equals</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="equals.html">equals</a></div>
           <div class="cover ">
             <h1>equals</h1>
-<div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html
index 68e223af..09cf0e01 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/hash-code.html
@@ -4,6 +4,7 @@
     <title>hashCode</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="hash-code.html">hashCode</a></div>
           <div class="cover ">
             <h1>hashCode</h1>
-<div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html
index 77b20479..743c6dcc 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/index.html
@@ -4,6 +4,7 @@
     <title>Fancy</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,14 +21,16 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a></div>
           <div class="cover ">
             <h1>Fancy</h1>
-<div class="symbol monospace">annotation class <a href="index.html">Fancy</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">annotation class <a href="index.html">Fancy</a></div></div></div>
+          </div>
           <h2>Functions</h2>
           <table>
             <thead></thead>
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="equals.html">equals</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -36,7 +39,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="hash-code.html">hashCode</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="hash-code.html">hashCode</a>(): <a href="">Int</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -45,7 +49,8 @@
               </tr>
               <tr class="platform-tagged">
                 <td class="content"><a href="to-string.html">toString</a></td>
-                <td class="content"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -60,7 +65,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="">size</a></td>
-                <td class="content"><div class="symbol monospace"><a href="">Int</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace"><a href="">Int</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html
index 905cddc2..48b4711c 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/-fancy/to-string.html
@@ -4,6 +4,7 @@
     <title>toString</title>
     <link href="../../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../../index.html">root</a>/<a href="../index.html">&lt;jvm root&gt;</a>/<a href="index.html">Fancy</a>/<a href="to-string.html">toString</a></div>
           <div class="cover ">
             <h1>toString</h1>
-<div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">open fun <a href="to-string.html">toString</a>(): <a href="">String</a></div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html
index dafca58f..9de96412 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/f.html
@@ -4,6 +4,7 @@
     <title>f</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -20,7 +21,8 @@
           <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html">&lt;jvm root&gt;</a>/<a href="f.html">f</a></div>
           <div class="cover ">
             <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>          </div>
+            <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html
index cbe266c3..25340ae7 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/<jvm root>/index.html
@@ -4,6 +4,7 @@
     <title>&lt;jvm root&gt;</title>
     <link href="../../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../../";</script>
   </head>
   <body>
@@ -27,7 +28,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="-fancy/index.html">Fancy</a></td>
-                <td class="content"><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">annotation class <a href="-fancy/index.html">Fancy</a></div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
@@ -42,7 +44,8 @@
             <tbody>
               <tr class="platform-tagged">
                 <td class="content"><a href="f.html">f</a></td>
-                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
+                <td class="content">
+                  <div class="platform-hinted" data-platform-hinted="data-platform-hinted"><div class="content" data-active="" data-togglable="jvm"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div></div></div>
                   <div class="brief "> </div>
                 </td>
                 <td class="platform-tagged">
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html
index f8c89bbf..a3211166 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/index.html
@@ -4,6 +4,7 @@
     <title>root</title>
     <link href="../styles/style.css" rel="Stylesheet">
     <script type="text/javascript" src="../scripts/navigationLoader.js" async="async"></script>
+    <script type="text/javascript" src="../scripts/platformContentHandler.js" async="async"></script>
     <script>var pathToRoot = "../";</script>
   </head>
   <body>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
index 5c347128..720998ad 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
author	Filip Zybała <fzybala@virtuslab.com>	2020-04-06 14:24:07 +0200
committer	Kamil Doległo <kamilok1965@users.noreply.github.com>	2020-04-15 14:41:29 +0200
commit	72db3a16521408509f4a0f61ef110851a252d2cc (patch)
tree	24f0a93c809045d66063c4c643d6ded4d4c6a0bc /plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html
parent	fee86d79a3aa7357c68c2f8f519d187f43447e8c (diff)
download	dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.gz dokka-72db3a16521408509f4a0f61ef110851a252d2cc.tar.bz2 dokka-72db3a16521408509f4a0f61ef110851a252d2cc.zip