Improve modal display and add JS events

Author: GuillaumeGomez

src/librustdoc/html/render.rs

@@ -2266,15 +2266,10 @@ fn item_function(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
                            AbiSpace(f.abi),
                            it.name.as_ref().unwrap(),
                            f.generics).len();
-    let mut extra = render_spotlight_traits(it)?;
-    if !extra.is_empty() {
-        extra.insert_str(0, "<div class=\"important-traits\">ⓘ<div class=\"content hidden\">");
-        extra.push_str("</div></div>");
-    };
-    write!(w, "<pre class='rust fn'>")?;
+    write!(w, "{}<pre class='rust fn'>", render_spotlight_traits(it)?)?;
     render_attributes(w, it)?;
     write!(w, "{vis}{constness}{unsafety}{abi}fn \
-               {name}{generics}{decl}{where_clause}</pre>{extra}",
+               {name}{generics}{decl}{where_clause}</pre>",
            vis = VisSpace(&it.visibility),
            constness = ConstnessSpace(f.constness),
            unsafety = UnsafetySpace(f.unsafety),
@@ -2286,8 +2281,7 @@ fn item_function(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
                decl: &f.decl,
                name_len,
                indent: 0,
-           },
-           extra = extra)?;
+           })?;
     document(w, cx, it)
 }
 
@@ -3269,8 +3263,9 @@ fn spotlight_decl(decl: &clean::FnDecl) -> Result<String, fmt::Error> {
                 if impl_.trait_.def_id().and_then(|d| c.traits.get(&d))
                                         .map_or(false, |t| t.is_spotlight) {
                     if out.is_empty() {
-                        out.push_str("<span class=\"docblock autohide\">");
-                        out.push_str(&format!("<h3>Important traits for {}</h3>", impl_.for_));
+                        out.push_str(
+                            &format!("<h3 class=\"important\">Important traits for {}</h3>",
+                                     impl_.for_));
                         out.push_str("<code class=\"content\">");
                     }
 

src/librustdoc/html/static/main.js

@@ -215,6 +215,7 @@
         var help = document.getElementById("help");
         switch (getVirtualKey(ev)) {
         case "Escape":
+            hideModal();
             var search = document.getElementById("search");
             if (!hasClass(help, "hidden")) {
                 displayHelp(false, ev);
@@ -228,6 +229,7 @@
         case "s":
         case "S":
             displayHelp(false, ev);
+            hideModal();
             ev.preventDefault();
             focusSearchBar();
             break;
@@ -240,6 +242,7 @@
 
         case "?":
             if (ev.shiftKey) {
+                hideModal();
                 displayHelp(true, ev);
             }
             break;
@@ -1715,9 +1718,21 @@
 
     function showModal(content) {
         var modal = document.createElement('div');
+        modal.id = "important";
         addClass(modal, 'modal');
-        modal.innerHTML = '<div class="modal-content">' + content + "</div>";
+        modal.innerHTML = '<div class="modal-content"><div class="close" id="modal-close">✕</div>' +
+                          '<div class="whiter"></div><span class="docblock">' + content +
+                          '</span></div>';
         document.getElementsByTagName('body')[0].appendChild(modal);
+        document.getElementById('modal-close').onclick = hideModal;
+        modal.onclick = hideModal;
+    }
+
+    function hideModal() {
+        var modal = document.getElementById("important");
+        if (modal) {
+            modal.parentNode.removeChild(modal);
+        }
     }
 
     onEach(document.getElementsByClassName('important-traits'), function(e) {

src/librustdoc/html/static/rustdoc.css

@@ -89,7 +89,7 @@ h2 {
 h3 {
 	font-size: 1.3em;
 }
-h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod):not(.associatedconstant) {
+h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod):not(.important), h4:not(.method):not(.type):not(.tymethod):not(.associatedconstant) {
 	font-weight: 500;
 	margin: 20px 0 15px 0;
 	padding-bottom: 6px;
@@ -955,11 +955,14 @@ pre.rust {
 	font-size: 16px;
 }
 
+.important-traits {
+	cursor: pointer;
+}
+
 h4 > .important-traits {
 	position: absolute;
 	left: -44px;
 	top: 2px;
-	cursor: pointer;
 }
 
 .modal {
@@ -976,12 +979,70 @@ h4 > .important-traits {
 	display: block;
 	max-width: 60%;
 	min-width: 200px;
-	background-color: white;
-	padding: 5px;
-	top: 10%;
+	background-color: #eee;
+	padding: 8px;
+	top: 40%;
 	position: absolute;
 	left: 50%;
-	transform: translate(-50%, -50%);
+	transform: translate(-50%, -40%);
 	border: 1px solid #999;
 	border-radius: 4px;
+	border-top-right-radius: 0;
+}
+
+.modal-content > .docblock {
+	margin: 0;
+}
+
+h3.important {
+	margin: 0;
+	margin-bottom: 13px;
+	font-size: 19px;
+}
+
+.modal-content > .docblock > code.content {
+	margin: 0;
+	padding: 0;
+	font-size: 20px;
+}
+
+.modal-content > .close {
+	position: absolute;
+	font-weight: 900;
+	right: -25px;
+	top: -1px;
+	font-size: 18px;
+	background-color: #eee;
+	width: 25px;
+	padding-right: 2px;
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+	text-align: center;
+	border: 1px solid #999;
+	border-right: 0;
+	cursor: pointer;
+}
+
+.modal-content > .close:hover {
+	background-color: #ff1f1f;
+	color: white;
+}
+
+.modal-content > .whiter {
+	height: 25px;
+	position: absolute;
+	width: 3px;
+	background-color: #eee;
+	right: -2px;
+	top: 0px;
+}
+
+.modal-content > .close:hover + .whiter {
+	background-color: #ff1f1f;
+}
+
+#main > div.important-traits {
+	position: absolute;
+	left: -24px;
+	margin-top: 16px;
 }