Skip to content

Commit 4e51763

Browse files
borsbors
committed
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.
2 parents 32a12c8 + 6b64826 commit 4e51763

File tree

3 files changed

+62
-41
lines changed

3 files changed

+62
-41
lines changed

‎src/librustdoc/html/layout.rs

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -84,37 +84,44 @@ r##"<!DOCTYPE html>
8484
<section class="footer"></section>
8585
8686
<div id="help" class="hidden">
87-
<div class="shortcuts">
88-
<h1>Keyboard Shortcuts</h1>
89-
<dl>
90-
<dt>?</dt>
91-
<dd>Show this help dialog</dd>
92-
<dt>S</dt>
93-
<dd>Focus the search field</dd>
94-
<dt>&larrb;</dt>
95-
<dd>Move up in search results</dd>
96-
<dt>&rarrb;</dt>
97-
<dd>Move down in search results</dd>
98-
<dt>&#9166;</dt>
99-
<dd>Go to active search result</dd>
100-
</dl>
101-
</div>
102-
<div class="infos">
103-
<h1>Search Tricks</h1>
104-
<p>
105-
Prefix searches with a type followed by a colon (e.g.
106-
<code>fn:</code>) to restrict the search to a given type.
107-
</p>
108-
<p>
109-
Accepted types are: <code>fn</code>, <code>mod</code>,
110-
<code>struct</code>, <code>enum</code>,
111-
<code>trait</code>, <code>typedef</code> (or
112-
<code>tdef</code>).
113-
</p>
114-
<p>
115-
Search functions by type signature (e.g.
116-
<code>vec -> usize</code>)
117-
</p>
87+
<div>
88+
<div class="shortcuts">
89+
<h1>Keyboard Shortcuts</h1>
90+
91+
<dl>
92+
<dt>?</dt>
93+
<dd>Show this help dialog</dd>
94+
<dt>S</dt>
95+
<dd>Focus the search field</dd>
96+
<dt>&larrb;</dt>
97+
<dd>Move up in search results</dd>
98+
<dt>&rarrb;</dt>
99+
<dd>Move down in search results</dd>
100+
<dt>&#9166;</dt>
101+
<dd>Go to active search result</dd>
102+
</dl>
103+
</div>
104+
105+
<div class="infos">
106+
<h1>Search Tricks</h1>
107+
108+
<p>
109+
Prefix searches with a type followed by a colon (e.g.
110+
<code>fn:</code>) to restrict the search to a given type.
111+
</p>
112+
113+
<p>
114+
Accepted types are: <code>fn</code>, <code>mod</code>,
115+
<code>struct</code>, <code>enum</code>,
116+
<code>trait</code>, <code>typedef</code> (or
117+
<code>tdef</code>).
118+
</p>
119+
120+
<p>
121+
Search functions by type signature (e.g.
122+
<code>vec -> usize</code>)
123+
</p>
124+
</div>
118125
</div>
119126
</div>
120127

‎src/librustdoc/html/static/main.css

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ nav.sub {
165165

166166
/* Everything else */
167167

168-
.js-only, .hidden { display: none; }
168+
.js-only, .hidden { display: none !important; }
169169

170170
.sidebar {
171171
padding: 10px;
@@ -448,19 +448,30 @@ a {
448448

449449
tr.result span.primitive::after { content: ' (primitive type)'; font-style: italic; }
450450

451+
body.blur > :not(#help) {
452+
filter: blur(8px);
453+
-webkit-filter: blur(8px);
454+
opacity: .7;
455+
}
456+
451457
#help {
458+
width: 100%;
459+
height: 100vh;
460+
position: fixed;
461+
top: 0;
462+
left: 0;
463+
display: flex;
464+
justify-content: center;
465+
align-items: center;
466+
}
467+
#help > div {
468+
flex: 0 0 auto;
452469
background: #e9e9e9;
453470
box-shadow: 0 0 6px rgba(0,0,0,.2);
454-
position: absolute;
455-
top: 300px;
456-
left: 50%;
457-
margin-top: -125px;
458-
margin-left: -275px;
459471
width: 550px;
460472
height: 300px;
461473
border: 1px solid #bfbfbf;
462474
}
463-
464475
#help dt {
465476
float: left;
466477
border-radius: 4px;
@@ -475,7 +486,7 @@ tr.result span.primitive::after { content: ' (primitive type)'; font-style: ital
475486
#help dd { margin: 5px 33px; }
476487
#help .infos { padding-left: 0; }
477488
#help h1 { margin-top: 0; }
478-
#help div {
489+
#help > div div {
479490
width: 50%;
480491
float: left;
481492
padding: 20px;

‎src/librustdoc/html/static/main.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
if (!$("#help").hasClass("hidden")) {
106106
ev.preventDefault();
107107
$("#help").addClass("hidden");
108+
$("body").removeClass("blur");
108109
} else if (!$("#search").hasClass("hidden")) {
109110
ev.preventDefault();
110111
$("#search").addClass("hidden");
@@ -115,13 +116,14 @@
115116
case "s":
116117
case "S":
117118
ev.preventDefault();
118-
focusSearchBar()
119+
focusSearchBar();
119120
break;
120121

121122
case "?":
122123
if (ev.shiftKey && $("#help").hasClass("hidden")) {
123124
ev.preventDefault();
124125
$("#help").removeClass("hidden");
126+
$("body").addClass("blur");
125127
}
126128
break;
127129
}
@@ -130,8 +132,9 @@
130132
$(document).on("keypress", handleShortcut);
131133
$(document).on("keydown", handleShortcut);
132134
$(document).on("click", function(ev) {
133-
if (!$(ev.target).closest("#help").length) {
135+
if (!$(e.target).closest("#help > div").length) {
134136
$("#help").addClass("hidden");
137+
$("body").removeClass("blur");
135138
}
136139
});
137140

0 commit comments

Comments
 (0)