Improve modal display and add JS events
This commit is contained in:
Guillaume Gomez
parent
aca1bd7d7e
commit
85dcf2ecb6
@ -2266,15 +2266,10 @@ fn item_function(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
|
||||
AbiSpace(f.abi),
|
||||
it.name.as_ref().unwrap(),
|
||||
f.generics).len();
|
||||
let mut extra = render_spotlight_traits(it)?;
|
||||
if !extra.is_empty() {
|
||||
extra.insert_str(0, "<div class=\"important-traits\">ⓘ<div class=\"content hidden\">");
|
||||
extra.push_str("</div></div>");
|
||||
};
|
||||
write!(w, "<pre class='rust fn'>")?;
|
||||
write!(w, "{}<pre class='rust fn'>", render_spotlight_traits(it)?)?;
|
||||
render_attributes(w, it)?;
|
||||
write!(w, "{vis}{constness}{unsafety}{abi}fn \
|
||||
{name}{generics}{decl}{where_clause}</pre>{extra}",
|
||||
{name}{generics}{decl}{where_clause}</pre>",
|
||||
vis = VisSpace(&it.visibility),
|
||||
constness = ConstnessSpace(f.constness),
|
||||
unsafety = UnsafetySpace(f.unsafety),
|
||||
@ -2286,8 +2281,7 @@ fn item_function(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
|
||||
decl: &f.decl,
|
||||
name_len,
|
||||
indent: 0,
|
||||
},
|
||||
extra = extra)?;
|
||||
})?;
|
||||
document(w, cx, it)
|
||||
}
|
||||
|
||||
@ -3269,8 +3263,9 @@ fn spotlight_decl(decl: &clean::FnDecl) -> Result<String, fmt::Error> {
|
||||
if impl_.trait_.def_id().and_then(|d| c.traits.get(&d))
|
||||
.map_or(false, |t| t.is_spotlight) {
|
||||
if out.is_empty() {
|
||||
out.push_str("<span class=\"docblock autohide\">");
|
||||
out.push_str(&format!("<h3>Important traits for {}</h3>", impl_.for_));
|
||||
out.push_str(
|
||||
&format!("<h3 class=\"important\">Important traits for {}</h3>",
|
||||
impl_.for_));
|
||||
out.push_str("<code class=\"content\">");
|
||||
}
|
||||
|
||||
|
||||
@ -215,6 +215,7 @@
|
||||
var help = document.getElementById("help");
|
||||
switch (getVirtualKey(ev)) {
|
||||
case "Escape":
|
||||
hideModal();
|
||||
var search = document.getElementById("search");
|
||||
if (!hasClass(help, "hidden")) {
|
||||
displayHelp(false, ev);
|
||||
@ -228,6 +229,7 @@
|
||||
case "s":
|
||||
case "S":
|
||||
displayHelp(false, ev);
|
||||
hideModal();
|
||||
ev.preventDefault();
|
||||
focusSearchBar();
|
||||
break;
|
||||
@ -240,6 +242,7 @@
|
||||
|
||||
case "?":
|
||||
if (ev.shiftKey) {
|
||||
hideModal();
|
||||
displayHelp(true, ev);
|
||||
}
|
||||
break;
|
||||
@ -1715,9 +1718,21 @@
|
||||
|
||||
function showModal(content) {
|
||||
var modal = document.createElement('div');
|
||||
modal.id = "important";
|
||||
addClass(modal, 'modal');
|
||||
modal.innerHTML = '<div class="modal-content">' + content + "</div>";
|
||||
modal.innerHTML = '<div class="modal-content"><div class="close" id="modal-close">✕</div>' +
|
||||
'<div class="whiter"></div><span class="docblock">' + content +
|
||||
'</span></div>';
|
||||
document.getElementsByTagName('body')[0].appendChild(modal);
|
||||
document.getElementById('modal-close').onclick = hideModal;
|
||||
modal.onclick = hideModal;
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
var modal = document.getElementById("important");
|
||||
if (modal) {
|
||||
modal.parentNode.removeChild(modal);
|
||||
}
|
||||
}
|
||||
|
||||
onEach(document.getElementsByClassName('important-traits'), function(e) {
|
||||
|
||||
@ -89,7 +89,7 @@ h2 {
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod):not(.associatedconstant) {
|
||||
h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod):not(.important), h4:not(.method):not(.type):not(.tymethod):not(.associatedconstant) {
|
||||
font-weight: 500;
|
||||
margin: 20px 0 15px 0;
|
||||
padding-bottom: 6px;
|
||||
@ -955,11 +955,14 @@ pre.rust {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.important-traits {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h4 > .important-traits {
|
||||
position: absolute;
|
||||
left: -44px;
|
||||
top: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@ -976,12 +979,70 @@ h4 > .important-traits {
|
||||
display: block;
|
||||
max-width: 60%;
|
||||
min-width: 200px;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
top: 10%;
|
||||
background-color: #eee;
|
||||
padding: 8px;
|
||||
top: 40%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -40%);
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.modal-content > .docblock {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3.important {
|
||||
margin: 0;
|
||||
margin-bottom: 13px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.modal-content > .docblock > code.content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.modal-content > .close {
|
||||
position: absolute;
|
||||
font-weight: 900;
|
||||
right: -25px;
|
||||
top: -1px;
|
||||
font-size: 18px;
|
||||
background-color: #eee;
|
||||
width: 25px;
|
||||
padding-right: 2px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
text-align: center;
|
||||
border: 1px solid #999;
|
||||
border-right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover {
|
||||
background-color: #ff1f1f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-content > .whiter {
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
background-color: #eee;
|
||||
right: -2px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover + .whiter {
|
||||
background-color: #ff1f1f;
|
||||
}
|
||||
|
||||
#main > div.important-traits {
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user