add style for documentableElement

Author: fanixus96

scaladoc-js/common/src/code-snippets/CodeSnippets.scala

@@ -9,6 +9,7 @@ import scala.util.chaining._
 
 import CodeSnippetsGlobals._
 
+
 class CodeSnippets:
   lazy val scastieConfig = getScastieConfiguration
 
@@ -86,11 +87,14 @@ class CodeSnippets:
   }
 
   private def copyRunButtons(snippet: html.Element) = {
+    val copyButtonIcon = s"""<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 2.5V9.5H4V11H2C1.44772 11 1 10.5523 1 10V2C1 1.44772 1.44772 1 2 1H10C10.5523 1 11 1.44772 11 2V4H9.5V2.5H2.5Z" fill="#A09FA6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 6C5 5.44772 5.44772 5 6 5H14C14.5523 5 15 5.44772 15 6V14C15 14.5523 14.5523 15 14 15H6C5.44772 15 5 14.5523 5 14V6ZM6.5 13.5V6.5H13.5V13.5H6.5Z" fill="#A09FA6"/>
+</svg>
+ """
     def copyButton = {
       div(
-        button(cls := "copy-button")(
-          i(cls := "far fa-clone")
-        ).tap(_.addEventListener("click", _ => {
+        button(cls := "copy-button icon-button").tap(_.addEventListener("click", _ => {
           val code = snippet.querySelectorAll("code>span:not(.hidden)")
             .map(_.textContent)
             .mkString
@@ -102,7 +106,6 @@ class CodeSnippets:
       val runButton = button(cls := "run-button")(
         i(cls := "fas fa-play")
       )
-
       runButton.addEventListener("click", _ =>
         if !runButton.hasAttribute("opened") then {
           scastie.Embedded(snippet.querySelector("pre"), scastieConfig)

scaladoc/resources/dotty_res/images/icon-buttons/copy/dark/active.svg

@@ -13,6 +13,7 @@ window.addEventListener("DOMContentLoaded", () => {
       elements[i].onclick = function (e) {
         if (!$(e.target).is("a") && e.fromSnippet !== true)
           this.classList.toggle("expand")
+          this.querySelector(".show-content").classList.toggle("expand")
       }
     }
   }

scaladoc/resources/dotty_res/images/icon-buttons/copy/dark/default.svg

@@ -577,7 +577,7 @@ footer .mode {
   transform: translateX(28px);
 }
 
-.documentableElement .modifiers {
+/* .documentableElement .modifiers {
   display: table-cell;
   min-width: 10vw;
   max-width: 10vw;
@@ -628,7 +628,7 @@ footer .mode {
 .signature,
 .documentableElement {
   font-weight: 500;
-}
+} */
 
 .signature.monospace {
   padding: 8px;
@@ -659,7 +659,7 @@ footer .mode {
   border-radius: 3px;
 }
 
-.documentableElement {
+/* .documentableElement {
   color: var(--symbol-fg);
   white-space: normal;
   position: relative;
@@ -669,9 +669,9 @@ footer .mode {
   border-left: 0.25em solid transparent;
   margin: 0.5em 0;
   border-radius: 3px;
-}
+} */
 
-.documentableElement > div {
+/* .documentableElement > div {
   display: table;
 }
 
@@ -685,13 +685,13 @@ footer .mode {
 
 .documentableElement.expand > div .cover {
   display: block;
-}
+} */
 
 .doc code {
   padding: 0;
 }
 
-.documentableElement:hover {
+/* .documentableElement:hover {
   cursor: pointer;
   border-left-color: var(--active-bg);
 }
@@ -729,7 +729,7 @@ footer .mode {
 
 .documentableElement::before:hover .documentableAnchor:before {
   display: flex;
-}
+} */
 
 .documentableAnchor:before {
   content: "\e901"; /* arrow down */

scaladoc/resources/dotty_res/images/icon-buttons/copy/dark/disabled.svg

@@ -0,0 +1,64 @@
+.documentableElement {
+  background-color: var(--action-primary-background-default-solid);
+  padding: calc(3 * var(--base-spacing));
+  border-radius: 4px;
+  border: 1px solid var(--border-default);
+  margin-bottom: calc(3 * var(--base-spacing));
+  color: var(--code-method-highlighting-code-fg);
+  position: relative;
+}
+
+.documentableElement:last-child {
+  margin-bottom: 0;
+}
+
+.documentableElement .signature {
+  margin-right: calc(3 * var(--base-spacing));
+}
+
+.documentableElement:hover {
+  cursor: pointer;
+}
+
+.documentableElement .annotations {
+  display: none;
+}
+
+.documentableElement > div .cover {
+  display: none;
+}
+
+.documentableElement.expand > div .cover {
+  display: block;
+}
+
+.documentableElement.expand .annotations {
+  display: inline-block;
+}
+
+.documentableElement.expand .documentableBrief {
+  display: none;
+}
+
+.documentableElement .icon-button {
+  position: absolute;
+  top: calc(3 * var(--base-spacing));
+  right: calc(3 * var(--base-spacing));
+  display: none;
+}
+
+.documentableElement:hover .icon-button {
+  display: block;
+}
+
+[t="k"] {
+  color: var(--code-syntax-highlighting-keyword);
+}
+
+[t="t"] {
+  color: var(--code-method-highlighting-type);
+}
+
+#content a[t="t"] {
+  color: var(--code-method-highlighting-type-link);
+}