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

Blurs the document's background when the help dialogue is present,
making the contents of the dialogue stand out more.
This commit is contained in:
bors 2015-07-20 13:30:15 +00:00
commit 4e51763e64
3 changed files with 62 additions and 41 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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");
}
});