Move tooltips messages to CSS instead of inside HTML
This commit is contained in:
parent
c7cff213e9
commit
db8ddbf570
6 changed files with 47 additions and 65 deletions
|
@ -11,6 +11,7 @@ use std::fmt::{Display, Write};
|
||||||
use std::iter::Peekable;
|
use std::iter::Peekable;
|
||||||
|
|
||||||
use rustc_lexer::{LiteralKind, TokenKind};
|
use rustc_lexer::{LiteralKind, TokenKind};
|
||||||
|
use rustc_span::edition::Edition;
|
||||||
use rustc_span::symbol::Ident;
|
use rustc_span::symbol::Ident;
|
||||||
use rustc_span::with_default_session_globals;
|
use rustc_span::with_default_session_globals;
|
||||||
|
|
||||||
|
@ -19,16 +20,20 @@ crate fn render_with_highlighting(
|
||||||
src: String,
|
src: String,
|
||||||
class: Option<&str>,
|
class: Option<&str>,
|
||||||
playground_button: Option<&str>,
|
playground_button: Option<&str>,
|
||||||
tooltip: Option<(&str, &str)>,
|
tooltip: Option<(Option<Edition>, &str)>,
|
||||||
) -> String {
|
) -> String {
|
||||||
debug!("highlighting: ================\n{}\n==============", src);
|
debug!("highlighting: ================\n{}\n==============", src);
|
||||||
let mut out = String::with_capacity(src.len());
|
let mut out = String::with_capacity(src.len());
|
||||||
if let Some((tooltip, class)) = tooltip {
|
if let Some((edition_info, class)) = tooltip {
|
||||||
write!(
|
write!(
|
||||||
out,
|
out,
|
||||||
"<div class='information'><div class='tooltip {}'>ⓘ<span \
|
"<div class='information'><div class='tooltip {}'{}>ⓘ</div></div>",
|
||||||
class='tooltiptext'>{}</span></div></div>",
|
class,
|
||||||
class, tooltip
|
if let Some(edition_info) = edition_info {
|
||||||
|
format!(" edition=\"{}\"", edition_info)
|
||||||
|
} else {
|
||||||
|
String::new()
|
||||||
|
},
|
||||||
)
|
)
|
||||||
.unwrap();
|
.unwrap();
|
||||||
}
|
}
|
||||||
|
|
|
@ -286,60 +286,27 @@ impl<'a, I: Iterator<Item = Event<'a>>> Iterator for CodeBlocks<'_, 'a, I> {
|
||||||
});
|
});
|
||||||
|
|
||||||
let tooltip = if ignore != Ignore::None {
|
let tooltip = if ignore != Ignore::None {
|
||||||
Some(("This example is not tested".to_owned(), "ignore"))
|
Some((None, "ignore"))
|
||||||
} else if compile_fail {
|
} else if compile_fail {
|
||||||
Some(("This example deliberately fails to compile".to_owned(), "compile_fail"))
|
Some((None, "compile_fail"))
|
||||||
} else if should_panic {
|
} else if should_panic {
|
||||||
Some(("This example panics".to_owned(), "should_panic"))
|
Some((None, "should_panic"))
|
||||||
} else if explicit_edition {
|
} else if explicit_edition {
|
||||||
Some((format!("This code runs with edition {}", edition), "edition"))
|
Some((Some(edition), "edition"))
|
||||||
} else {
|
} else {
|
||||||
None
|
None
|
||||||
};
|
};
|
||||||
|
|
||||||
if let Some((s1, s2)) = tooltip {
|
s.push_str(&highlight::render_with_highlighting(
|
||||||
s.push_str(&highlight::render_with_highlighting(
|
text,
|
||||||
text,
|
Some(&format!(
|
||||||
Some(&format!(
|
"rust-example-rendered{}",
|
||||||
"rust-example-rendered{}",
|
if let Some((_, class)) = tooltip { format!(" {}", class) } else { String::new() }
|
||||||
if ignore != Ignore::None {
|
)),
|
||||||
" ignore"
|
playground_button.as_deref(),
|
||||||
} else if compile_fail {
|
tooltip,
|
||||||
" compile_fail"
|
));
|
||||||
} else if should_panic {
|
Some(Event::Html(s.into()))
|
||||||
" should_panic"
|
|
||||||
} else if explicit_edition {
|
|
||||||
" edition "
|
|
||||||
} else {
|
|
||||||
""
|
|
||||||
}
|
|
||||||
)),
|
|
||||||
playground_button.as_deref(),
|
|
||||||
Some((s1.as_str(), s2)),
|
|
||||||
));
|
|
||||||
Some(Event::Html(s.into()))
|
|
||||||
} else {
|
|
||||||
s.push_str(&highlight::render_with_highlighting(
|
|
||||||
text,
|
|
||||||
Some(&format!(
|
|
||||||
"rust-example-rendered{}",
|
|
||||||
if ignore != Ignore::None {
|
|
||||||
" ignore"
|
|
||||||
} else if compile_fail {
|
|
||||||
" compile_fail"
|
|
||||||
} else if should_panic {
|
|
||||||
" should_panic"
|
|
||||||
} else if explicit_edition {
|
|
||||||
" edition "
|
|
||||||
} else {
|
|
||||||
""
|
|
||||||
}
|
|
||||||
)),
|
|
||||||
playground_button.as_deref(),
|
|
||||||
None,
|
|
||||||
));
|
|
||||||
Some(Event::Html(s.into()))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1079,20 +1079,29 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext {
|
.tooltip::after {
|
||||||
width: 120px;
|
|
||||||
display: none;
|
display: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 5px 3px 3px 3px;
|
padding: 5px 3px 3px 3px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
top: -5px;
|
|
||||||
left: 105%;
|
|
||||||
z-index: 10;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext::after {
|
.tooltip.ignore::after {
|
||||||
|
content: "This example is not tested";
|
||||||
|
}
|
||||||
|
.tooltip.compile_fail::after {
|
||||||
|
content: "This example deliberately fails to compile";
|
||||||
|
}
|
||||||
|
.tooltip.should_panic::after {
|
||||||
|
content: "This example panics";
|
||||||
|
}
|
||||||
|
.tooltip.edition::after {
|
||||||
|
content: "This code runs with edition " attr(edition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip::before {
|
||||||
content: " ";
|
content: " ";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -1100,9 +1109,10 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
border-width: 5px;
|
border-width: 5px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip:hover .tooltiptext {
|
.tooltip:hover::before, .tooltip:hover::after {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -388,13 +388,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
||||||
color: #39AFD7;
|
color: #39AFD7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext {
|
.tooltip::after {
|
||||||
background-color: #314559;
|
background-color: #314559;
|
||||||
color: #c5c5c5;
|
color: #c5c5c5;
|
||||||
border: 1px solid #5c6773;
|
border: 1px solid #5c6773;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext::after {
|
.tooltip::before {
|
||||||
border-color: transparent #314559 transparent transparent;
|
border-color: transparent #314559 transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -337,13 +337,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
||||||
color: #0089ff;
|
color: #0089ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext {
|
.tooltip::after {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #000;
|
border-color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext::after {
|
.tooltip::before {
|
||||||
border-color: transparent black transparent transparent;
|
border-color: transparent black transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -329,12 +329,12 @@ pre.ignore:hover, .information:hover + pre.ignore {
|
||||||
color: #0089ff;
|
color: #0089ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext {
|
.tooltip::after {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip .tooltiptext::after {
|
.tooltip::before {
|
||||||
border-color: transparent black transparent transparent;
|
border-color: transparent black transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue