Feat: Add a custom icon

- Add setting "custom" - Possible white icon with||without dark icon - Improve tap target
scala · Apr 13, 2023 · 8d76a21 · 8d76a21
1 parent d577300
commit 8d76a21
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 22 deletions.
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css b/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css
@@ -533,6 +533,28 @@
   content: url("../../../../images/icon-buttons/gitter/dark/selected.svg");
 }
 
+/* custom button */
+
+.icon-button.custom-dark{
+  display: none;
+}
+
+.theme-dark .icon-button.custom-dark{
+  display: unset;
+}
+
+.theme-dark .icon-button.custom{
+  display: none;
+}
+
+.icon-button.custom:hover{
+  opacity: 0.8;
+}
+
+.icon-button.custom-dark:hover{
+  opacity: 0.8;
+}
+
 /* copy button */
 
 .icon-button.copy-button::after {

diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/footer.css b/scaladoc/resources/dotty_res/styles/theme/layout/footer.css
@@ -4,7 +4,7 @@
   background-color: var(--action-primary-background-default-solid);
   height: calc(6 * var(--base-spacing));
   width: 100%;
-  padding: calc(2 * var(--base-spacing));
+  padding: 0 calc(2 * var(--base-spacing));
   display: flex;
   align-items: center;
   color: var(--text-primary);
@@ -52,6 +52,7 @@
 
   #footer {
     display: none;
+    padding: calc(2 * var(--base-spacing));
   }
 
   #footer.mobile-footer {
@@ -64,7 +65,7 @@
     display: none;
   }
 
-  #footer.mobile-footer  .text-mobile {
+  #footer.mobile-footer .text-mobile {
     display: flex;
     width: 100%;
     justify-content: center;
@@ -78,5 +79,22 @@
   #footer.mobile-footer > .text-mobile {
     display: flex;
   }
-
+
+}
+
+@media (min-width: 375px) {
+
+  #footer .right-container a {
+    padding: 8px;
+  }
+
+}
+
+@media (min-width: 480px) {
+
+  #footer .right-container a {
+    margin: 0 4px 0;
+    padding: 16px;
+  }
+
 }
diff --git a/scaladoc/src/dotty/tools/scaladoc/ScaladocSettings.scala b/scaladoc/src/dotty/tools/scaladoc/ScaladocSettings.scala
@@ -56,7 +56,8 @@ class ScaladocSettings extends SettingGroup with AllScalaSettings:
 
   val socialLinks: Setting[List[String]] =
     MultiStringSetting("-social-links", "social-links",
-      "Links to social sites. '[github|twitter|gitter|discord]::link' syntax is used.")
+      "Links to social sites. '[github|twitter|gitter|discord]::link' syntax is used." +
+        "'custom::link::white_icon_name::black_icon_name' is also allowed, in this case icons must be present in 'images/'' directory.")
 
   val deprecatedSkipPackages: Setting[List[String]] =
     MultiStringSetting("-skip-packages", "packages", "Deprecated, please use `-skip-by-id` or `-skip-by-regex`")

diff --git a/scaladoc/src/dotty/tools/scaladoc/SocialLinks.scala b/scaladoc/src/dotty/tools/scaladoc/SocialLinks.scala
@@ -4,11 +4,12 @@ import java.nio.file.Path
 import java.nio.file.Paths
 import dotty.tools.dotc.core.Contexts.Context
 
-enum SocialLinks(val url: String, val className: String):
-  case Github(ghUrl: String) extends SocialLinks(ghUrl, "gh")
-  case Twitter(tUrl: String) extends SocialLinks(tUrl, "twitter")
-  case Gitter(gUrl: String) extends SocialLinks(gUrl, "gitter")
-  case Discord(dUrl: String) extends SocialLinks(dUrl, "discord")
+enum SocialLinks(val url: String, val whiteIcon: String, val darkIcon: String, val className: String):
+  case Github(ghUrl: String) extends SocialLinks(ghUrl, "", "", "gh")
+  case Twitter(tUrl: String) extends SocialLinks(tUrl, "", "", "twitter")
+  case Gitter(gUrl: String) extends SocialLinks(gUrl, "", "", "gitter")
+  case Discord(dUrl: String) extends SocialLinks(dUrl, "", "", "discord")
+  case Custom(cUrl: String, firstIcon: String, secondIcon: String) extends SocialLinks(cUrl, firstIcon, secondIcon, "custom")
 
 object SocialLinks:
   def parse(s: String): Either[String, SocialLinks] =
@@ -23,5 +24,8 @@ object SocialLinks:
       case "gitter" => Left(errorPrefix + "For 'gitter' arg expected one argument: url")
       case "discord" if splitted.size == 2 => Right(Discord(splitted(1)))
       case "discord" => Left(errorPrefix + "For 'discord' arg expected one argument: url")
+      case "custom" if splitted.size == 4 => Right(Custom(splitted(1), splitted(2), splitted(3)))
+      case "custom" if splitted.size == 3 => Right(Custom(splitted(1), splitted(2), splitted(2)))
+      case "custom" => Left(errorPrefix + "For 'custom' arg expected three arguments: url, white icon name, black icon name")
       case _ => Left(errorPrefix)
     }
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
@@ -175,7 +175,13 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
     def icon(link: SocialLinks) = link.className
     args.socialLinks.map { link =>
       a(href := link.url) (
-        button(cls := s"icon-button ${icon(link)}")
+        if icon(link) == "custom" then
+          Seq(
+            img(cls := s"icon-button ${icon(link)}", src := s"../../../../images/${link.whiteIcon}"),
+            img(cls := s"icon-button ${icon(link)}-dark", src := s"../../../../images/${link.darkIcon}")
+          )
+        else
+          button(cls := s"icon-button ${icon(link)}")
       )
     }
 
@@ -317,18 +323,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
             "Generated with"
           ),
           div(cls := "right-container")(
-            a(href := "https://github.com/lampepfl/dotty") (
-              button(cls := "icon-button gh")
-            ),
-            a(href := "https://twitter.com/scala_lang") (
-              button(cls := "icon-button twitter")
-            ),
-            a(href := "https://discord.com/invite/scala") (
-              button(cls := "icon-button discord"),
-            ),
-            a(href := "https://gitter.im/scala/scala") (
-              button(cls := "icon-button gitter"),
-            ),
+            socialLinks,
             div(cls := "text")(textFooter)
           ),
           div(cls := "text-mobile")(textFooter)