Make spotlight show on hover
This makes the spotlight show on hover instead of click. Clicks can be used to persist it, which is also what's used on mobile.
This commit is contained in:
Manish Goregaokar
parent
c90fb7185a
commit
734afb4830
5 changed files with 53 additions and 156 deletions
|
|
@ -2613,11 +2613,7 @@ fn item_trait(w: &mut Buffer, cx: &Context, it: &clean::Item, t: &clean::Trait)
|
|||
let name = m.name.as_ref().unwrap();
|
||||
let item_type = m.type_();
|
||||
let id = cx.derive_id(format!("{}.{}", item_type, name));
|
||||
write!(
|
||||
w,
|
||||
"<h3 id='{id}' class='method'><code>",
|
||||
id = id,
|
||||
);
|
||||
write!(w, "<h3 id='{id}' class='method'><code>", id = id,);
|
||||
render_assoc_item(w, m, AssocItemLink::Anchor(Some(&id)), ItemType::Impl);
|
||||
write!(w, "</code>");
|
||||
render_stability_since(w, m, t);
|
||||
|
|
@ -3612,14 +3608,10 @@ fn spotlight_decl(decl: &clean::FnDecl) -> String {
|
|||
if !out.is_empty() {
|
||||
out.insert_str(
|
||||
0,
|
||||
&format!(
|
||||
"<span class=\"important-traits\"><div class='tooltip'>ⓘ\
|
||||
<span class='tooltiptext'>Important traits for {}</span></div>\
|
||||
<div class=\"content hidden\">",
|
||||
trait_
|
||||
),
|
||||
"<span class=\"important-traits\"><span class=\"important-traits-tooltip\">ⓘ<div class='important-traits-tooltiptext'><span class=\"docblock\">"
|
||||
|
||||
);
|
||||
out.push_str("</code></div></span>");
|
||||
out.push_str("</code></span></div></span></span>");
|
||||
}
|
||||
|
||||
out.into_inner()
|
||||
|
|
|
|||
|
|
@ -2639,28 +2639,13 @@ function defocusSearchBar() {
|
|||
});
|
||||
}());
|
||||
|
||||
function showModal(content) {
|
||||
var modal = document.createElement("div");
|
||||
modal.id = "important";
|
||||
addClass(modal, "modal");
|
||||
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);
|
||||
}
|
||||
function showImportantTraits(content) {
|
||||
let list = content.classList
|
||||
}
|
||||
|
||||
onEachLazy(document.getElementsByClassName("important-traits"), function(e) {
|
||||
e.onclick = function() {
|
||||
showModal(e.lastElementChild.innerHTML);
|
||||
e.getElementsByClassName('important-traits-tooltiptext')[0].classList.toggle("force-tooltip")
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1082,10 +1082,6 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.important-traits:hover .tooltiptext {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
|
|
@ -1101,9 +1097,46 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.important-traits .tooltip .tooltiptext {
|
||||
border: 1px solid;
|
||||
font-weight: normal;
|
||||
.important-traits-tooltip {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.important-traits:hover .important-traits-tooltiptext,
|
||||
.important-traits .important-traits-tooltiptext.force-tooltip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.important-traits .important-traits-tooltiptext {
|
||||
display: none;
|
||||
padding: 5px 3px 3px 3px;
|
||||
border-radius: 6px;
|
||||
margin-left: 5px;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
/* Themes will override the color here,
|
||||
but it's necessary to make it opaque */
|
||||
background-color: #eee;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.important-traits-tooltip::after {
|
||||
/* The margin on the tooltip does not capture hover events,
|
||||
this extends the area of hover enough so that mouse hover is not
|
||||
lost when moving the mouse to the tooltip */
|
||||
content: "\00a0\00a0\00a0";
|
||||
}
|
||||
|
||||
.important-traits .important, .important-traits .docblock {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.important-traits .docblock code.content{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
pre.rust {
|
||||
|
|
@ -1493,69 +1526,12 @@ h4 > .important-traits {
|
|||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: block;
|
||||
max-width: 60%;
|
||||
min-width: 200px;
|
||||
padding: 8px;
|
||||
top: 40%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -40%);
|
||||
border: 1px solid;
|
||||
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;
|
||||
width: 25px;
|
||||
padding-right: 2px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
border-right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-content > .whiter {
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
right: -2px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
|
|
|
|||
|
|
@ -337,10 +337,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
|
||||
.important-traits .tooltip .tooltiptext {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border-color: black;
|
||||
.important-traits-tooltiptext {
|
||||
background-color: #111 !important;
|
||||
border-color: #777 !important;
|
||||
}
|
||||
|
||||
#titles > div:not(.selected) {
|
||||
|
|
@ -356,33 +355,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
color: #888;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #272727;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.modal-content > .close {
|
||||
background-color: #272727;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover {
|
||||
background-color: #ff1f1f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-content > .whiter {
|
||||
background-color: #272727;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover + .whiter {
|
||||
background-color: #ff1f1f;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.sidebar-menu {
|
||||
background-color: #505050;
|
||||
|
|
|
|||
|
|
@ -331,10 +331,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
|
||||
.important-traits .tooltip .tooltiptext {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border-color: black;
|
||||
.important-traits-tooltiptext {
|
||||
background-color: #eee !important;
|
||||
border-color: #999 !important;
|
||||
}
|
||||
|
||||
#titles > div:not(.selected) {
|
||||
|
|
@ -350,33 +349,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
|||
color: #888;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #eee;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.modal-content > .close {
|
||||
background-color: #eee;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover {
|
||||
background-color: #ff1f1f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-content > .whiter {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover + .whiter {
|
||||
background-color: #ff1f1f;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.sidebar-menu {
|
||||
background-color: #F1F1F1;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue