Improve modal display and add JS events

diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
index eed0db032fec04430d226092f4c6440923b22830..dc83b3da4903dc4ab70d6a8b2cee54620059bba2 100644 (file)
--- a/src/librustdoc/html/render.rs
+++ b/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\">");
                     }
 

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 72512bda41ea15f38f0cf6246a76cc345fe2c86d..c3f2ec253087dbcc66c022191b1d08b29297b5a1 100644 (file)
--- a/src/librustdoc/html/static/main.js
+++ b/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) {

diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index 63792714d473fa9c963492e7caecda9d17eef476..89c75818ddf2a28a97572e58ee1e14959bd7f89d 100644 (file)
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/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;
 }
\ No newline at end of file