Merge pull request scala#4973 from felixmulder/topic/scaladoc-replace-utf8-glyphs

Scaladoc: Replace UTF8 glyphs with the Material Typeface

Author: lrytz

src/scaladoc/scala/tools/nsc/doc/html/page/Entity.scala

@@ -163,7 +163,13 @@ trait EntityPage extends HtmlPage {
 
       <div id="mbrsel">
         <div class='toggle'></div>
-        <div id='memberfilter'><span class='input'><input id='mbrsel-input' placeholder='Filter members' type='text' accesskey='/'/></span><span class='clear'>✖</span></div>
+        <div id='memberfilter'>
+          <i class="material-icons arrow">&#xE037;</i>
+          <span class='input'>
+            <input id='mbrsel-input' placeholder='Filter members' type='text' accesskey='/'/>
+          </span>
+          <i class="clear material-icons">&#xE14C;</i>
+        </div>
           <div id='filterby'>
             <div id="order">
               <span class="filtertype">Ordering</span>
@@ -540,7 +546,10 @@ trait EntityPage extends HtmlPage {
       mbr match {
         case nte: NonTemplateMemberEntity if nte.isUseCase =>
           <div class="full-signature-block toggleContainer">
-            <span class="toggle">Full Signature</span>
+            <span class="toggle">
+              <i class="material-icons">&#xE037;</i>
+              Full Signature
+            </span>
             <div class="hiddenContent full-signature-usecase">{ signature(nte.useCaseOf.get,isSelf = true) }</div>
           </div>
         case _ => NodeSeq.Empty
@@ -682,7 +691,10 @@ trait EntityPage extends HtmlPage {
     val linearization = mbr match {
       case dtpl: DocTemplateEntity if isSelf && !isReduced && dtpl.linearizationTemplates.nonEmpty =>
         <div class="toggleContainer block">
-          <span class="toggle">Linear Supertypes</span>
+          <span class="toggle">
+            <i class="material-icons">&#xE037;</i>
+            Linear Supertypes
+          </span>
           <div class="superTypes hiddenContent">{
             typesToHtml(dtpl.linearizationTypes, hasLinks = true, sep = scala.xml.Text(", "))
           }</div>
@@ -702,7 +714,10 @@ trait EntityPage extends HtmlPage {
         transitive(dtpl)
         if (subs.nonEmpty)
           <div class="toggleContainer block">
-            <span class="toggle">Known Subclasses</span>
+            <span class="toggle">
+              <i class="material-icons">&#xE037;</i>
+              Known Subclasses
+            </span>
             <div class="subClasses hiddenContent">{
               templatesToHtml(subs.toList.sorted(Entity.EntityOrdering), scala.xml.Text(", "))
             }</div>
@@ -719,7 +734,10 @@ trait EntityPage extends HtmlPage {
             val diagramSvg = generator.generate(diagram.get, tpl, this)
             if (diagramSvg != NodeSeq.Empty) {
               <div class="toggleContainer block diagram-container" id={ id + "-container"}>
-                <span class="toggle diagram-link">{ description }</span>
+                <span class="toggle diagram-link">
+                  <i class="material-icons">&#xE037;</i>
+                  { description }
+                </span>
                 <div class="diagram" id={ id }>{ diagramSvg }</div>
                 <div id="diagram-controls" class="hiddenContent">
                   <button id="diagram-zoom-out" class="diagram-btn"><i class="material-icons">&#xE15B;</i></button>
@@ -773,6 +791,7 @@ trait EntityPage extends HtmlPage {
     def inside(hasLinks: Boolean, nameLink: String = ""): NodeSeq =
       <xml:group>
       <span class="modifier_kind">
+        <i class="material-icons unfold-arrow">&#xE037;</i>
         <span class="modifier">{ mbr.flags.map(flag => inlineToHtml(flag.text) ++ scala.xml.Text(" ")) }</span>
         <span class="kind">{ kindToString(mbr) }</span>
       </span>

src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css

@@ -157,26 +157,41 @@ body.trait div#definition {
   user-select: none;
 }
 
-.toggleContainer .toggle:before {
-  cursor: pointer;
-  padding-left: 15px;
-  content: "▶";
+.toggleContainer .toggle > i {
   position: absolute;
-  left: -2.7em;
+  left: -1.5em;
   top: 0em;
+  font-size: 1.3em;
+  transition: 0.1s;
 }
 
-.toggleContainer .toggle.open:before {
-  content: "▼";
-  position: absolute;
-  left: -2.7em;
-  top: 0em;
+.toggleContainer .toggle.open > i {
+  transform: rotate(90deg);
 }
 
 .toggleContainer .hiddenContent {
   margin-top: 1.5em;
 }
 
+#memberfilter > i.arrow {
+  position: absolute;
+  top: 0.45em;
+  left: -0.9em;
+  color: #fff;
+  font-size: 1.3em;
+  opacity: 0;
+  transition: 0.1s;
+  cursor: pointer;
+}
+
+#memberfilter > i.arrow.rotate {
+  transform: rotate(90deg);
+}
+
+#memberfilter:hover > i.arrow {
+  opacity: 1;
+}
+
 .value #definition {
   background-color: #103A51; /* blue */
 }
@@ -430,23 +445,20 @@ span.symbol > span.name {
   cursor: pointer;
 }
 
-#template .closed:before {
-    content: "▶";
-    position: absolute;
-    left: 1em;
-    top: 0.35em;
-}
-
 #template .opened {
   cursor: pointer;
 }
 
-#template .opened:before {
-  content: "▼";
+i.unfold-arrow {
+  font-size: 1em;
   position: absolute;
-  left: 1em;
-  top: 0.35em;
-  color: #2C475C;
+  top: 0.55em;
+  left: 0.7em;
+  transition: 0.1s;
+}
+
+#template .modifier_kind.opened > i.unfold-arrow {
+  transform: rotate(90deg);
 }
 
 #template .values .name {
@@ -469,12 +481,12 @@ span.symbol > span.name {
   top: 0;
 }
 
-.full-signature-usecase > .signature > .closed:before {
-  content: "" !important;
-}
-
-.full-signature-usecase > .signature > .opened:before {
-  content: "" !important;
+/* Hide unfold arrow where appropriate */
+#template li[fullComment=no] .modifier_kind > i.unfold-arrow,
+div#definition > h4#signature > span.modifier_kind > i.unfold-arrow,
+.full-signature-usecase > .signature > .closed > i.unfold-arrow,
+.full-signature-usecase > .signature > .opened > i.unfold-arrow {
+  display: none;
 }
 
 #template .full-signature-usecase > .signature > .closed {
@@ -810,11 +822,10 @@ div.fullcomment dl.paramcmts > dd {
 #memberfilter > .clear {
   display: none;
   position: absolute;
-  top: 0.6em;
-  right: -0.65em;
-  height: 23px;
-  width: 21px;
+  top: 0.55em;
   color: rgba(255, 255, 255, 0.4);
+  right: 0;
+  font-size: 1.2em;
 }
 
 #memberfilter > .clear:hover {
@@ -860,17 +871,16 @@ div.fullcomment dl.paramcmts > dd {
   left: 0.7em;
 }
 
-#mbrsel > div.toggle:before {
+#mbrsel > div.toggle > i {
   cursor: pointer;
-  content: "▶";
   position: absolute;
   left: 0;
   top: 0;
   color: #fff;
 }
 
-#mbrsel > div.toggle.open:before {
-  content: "▼";
+#mbrsel > div.toggle.open > i {
+  transform: rotate(90deg);
 }
 
 #mbrsel > div#filterby {

src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js

@@ -92,7 +92,8 @@ $(document).ready(function() {
         return isHidden(this);
     }).removeClass("in").addClass("out");
 
-    $("#mbrsel > div.toggle").click(function() {
+    $("#memberfilter > i.arrow").click(function() {
+        $(this).toggleClass("rotate");
         $("#filterby").toggle();
     });
 
@@ -311,7 +312,9 @@ $(document).ready(function() {
     });
 
     $("#mbrsel-input").on("blur", function() {
-        $("#memberfilter > .clear").hide();
+        setTimeout(function() {
+            $("#memberfilter > .clear").hide();
+        }, 10);
     });
 });