Auto merge of #26887 - andreastt:blur_help_dialogue, r=steveklabnik

bors · bors · commit 4e51763e6428 · 2015-07-20T13:30:15.000Z
Blurs the document's background when the help dialogue is present,
making the contents of the dialogue stand out more.
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
@@ -84,37 +84,44 @@ r##"<!DOCTYPE html>
     <section class="footer"></section>
 
     <div id="help" class="hidden">
-        <div class="shortcuts">
-            <h1>Keyboard Shortcuts</h1>
-            <dl>
-                <dt>?</dt>
-                <dd>Show this help dialog</dd>
-                <dt>S</dt>
-                <dd>Focus the search field</dd>
-                <dt>&larrb;</dt>
-                <dd>Move up in search results</dd>
-                <dt>&rarrb;</dt>
-                <dd>Move down in search results</dd>
-                <dt>&#9166;</dt>
-                <dd>Go to active search result</dd>
-            </dl>
-        </div>
-        <div class="infos">
-            <h1>Search Tricks</h1>
-            <p>
-                Prefix searches with a type followed by a colon (e.g.
-                <code>fn:</code>) to restrict the search to a given type.
-            </p>
-            <p>
-                Accepted types are: <code>fn</code>, <code>mod</code>,
-                <code>struct</code>, <code>enum</code>,
-                <code>trait</code>, <code>typedef</code> (or
-                <code>tdef</code>).
-            </p>
-            <p>
-                Search functions by type signature (e.g.
-                <code>vec -> usize</code>)
-            </p>
+        <div>
+            <div class="shortcuts">
+                <h1>Keyboard Shortcuts</h1>
+
+                <dl>
+                    <dt>?</dt>
+                    <dd>Show this help dialog</dd>
+                    <dt>S</dt>
+                    <dd>Focus the search field</dd>
+                    <dt>&larrb;</dt>
+                    <dd>Move up in search results</dd>
+                    <dt>&rarrb;</dt>
+                    <dd>Move down in search results</dd>
+                    <dt>&#9166;</dt>
+                    <dd>Go to active search result</dd>
+                </dl>
+            </div>
+
+            <div class="infos">
+                <h1>Search Tricks</h1>
+
+                <p>
+                    Prefix searches with a type followed by a colon (e.g.
+                    <code>fn:</code>) to restrict the search to a given type.
+                </p>
+
+                <p>
+                    Accepted types are: <code>fn</code>, <code>mod</code>,
+                    <code>struct</code>, <code>enum</code>,
+                    <code>trait</code>, <code>typedef</code> (or
+                    <code>tdef</code>).
+                </p>
+
+                <p>
+                    Search functions by type signature (e.g.
+                    <code>vec -> usize</code>)
+                </p>
+            </div>
         </div>
     </div>
 
diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css
@@ -165,7 +165,7 @@ nav.sub {
 
 /* Everything else */
 
-.js-only, .hidden { display: none; }
+.js-only, .hidden { display: none !important; }
 
 .sidebar {
     padding: 10px;
@@ -448,19 +448,30 @@ a {
 
 tr.result span.primitive::after { content: ' (primitive type)'; font-style: italic; }
 
+body.blur > :not(#help) {
+    filter: blur(8px);
+    -webkit-filter: blur(8px);
+    opacity: .7;
+}
+
 #help {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#help > div {
+    flex: 0 0 auto;
     background: #e9e9e9;
     box-shadow: 0 0 6px rgba(0,0,0,.2);
-    position: absolute;
-    top: 300px;
-    left: 50%;
-    margin-top: -125px;
-    margin-left: -275px;
     width: 550px;
     height: 300px;
     border: 1px solid #bfbfbf;
 }
-
 #help dt {
     float: left;
     border-radius: 4px;
@@ -475,7 +486,7 @@ tr.result span.primitive::after { content: ' (primitive type)'; font-style: ital
 #help dd { margin: 5px 33px; }
 #help .infos { padding-left: 0; }
 #help h1 { margin-top: 0; }
-#help div {
+#help > div div {
     width: 50%;
     float: left;
     padding: 20px;
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
@@ -105,6 +105,7 @@
             if (!$("#help").hasClass("hidden")) {
                 ev.preventDefault();
                 $("#help").addClass("hidden");
+                $("body").removeClass("blur");
             } else if (!$("#search").hasClass("hidden")) {
                 ev.preventDefault();
                 $("#search").addClass("hidden");
@@ -115,13 +116,14 @@
         case "s":
         case "S":
             ev.preventDefault();
-            focusSearchBar()
+            focusSearchBar();
             break;
 
         case "?":
             if (ev.shiftKey && $("#help").hasClass("hidden")) {
                 ev.preventDefault();
                 $("#help").removeClass("hidden");
+                $("body").addClass("blur");
             }
             break;
         }
@@ -130,8 +132,9 @@
     $(document).on("keypress", handleShortcut);
     $(document).on("keydown", handleShortcut);
     $(document).on("click", function(ev) {
-        if (!$(ev.target).closest("#help").length) {
+        if (!$(e.target).closest("#help > div").length) {
             $("#help").addClass("hidden");
+            $("body").removeClass("blur");
         }
     });
 
