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:
commit
4e51763e64
@ -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>⇤</dt>
|
||||
<dd>Move up in search results</dd>
|
||||
<dt>⇥</dt>
|
||||
<dd>Move down in search results</dd>
|
||||
<dt>⏎</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>⇤</dt>
|
||||
<dd>Move up in search results</dd>
|
||||
<dt>⇥</dt>
|
||||
<dd>Move down in search results</dd>
|
||||
<dt>⏎</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>
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user