mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

librustdoc: blur page when help dialogue is present

Browse Source 
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:
Andreas Tolfsen 2015-07-08 14:52:58 +01:00
parent 6c88aeda58
commit 6b64826469
3 changed files with 62 additions and 41 deletions
src/librustdoc/html
layout.rs
static
main.cssmain.js

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

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

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