1
Fork 0

Move tooltips messages to CSS instead of inside HTML

This commit is contained in:
Guillaume Gomez 2020-12-05 17:31:31 +01:00
parent c7cff213e9
commit db8ddbf570
6 changed files with 47 additions and 65 deletions

View file

@ -11,6 +11,7 @@ use std::fmt::{Display, Write};
use std::iter::Peekable;
use rustc_lexer::{LiteralKind, TokenKind};
use rustc_span::edition::Edition;
use rustc_span::symbol::Ident;
use rustc_span::with_default_session_globals;
@ -19,16 +20,20 @@ crate fn render_with_highlighting(
src: String,
class: Option<&str>,
playground_button: Option<&str>,
tooltip: Option<(&str, &str)>,
tooltip: Option<(Option<Edition>, &str)>,
) -> String {
debug!("highlighting: ================\n{}\n==============", src);
let mut out = String::with_capacity(src.len());
if let Some((tooltip, class)) = tooltip {
if let Some((edition_info, class)) = tooltip {
write!(
out,
"<div class='information'><div class='tooltip {}'>ⓘ<span \
class='tooltiptext'>{}</span></div></div>",
class, tooltip
"<div class='information'><div class='tooltip {}'{}>ⓘ</div></div>",
class,
if let Some(edition_info) = edition_info {
format!(" edition=\"{}\"", edition_info)
} else {
String::new()
},
)
.unwrap();
}

View file

@ -286,60 +286,27 @@ impl<'a, I: Iterator<Item = Event<'a>>> Iterator for CodeBlocks<'_, 'a, I> {
});
let tooltip = if ignore != Ignore::None {
Some(("This example is not tested".to_owned(), "ignore"))
Some((None, "ignore"))
} else if compile_fail {
Some(("This example deliberately fails to compile".to_owned(), "compile_fail"))
Some((None, "compile_fail"))
} else if should_panic {
Some(("This example panics".to_owned(), "should_panic"))
Some((None, "should_panic"))
} else if explicit_edition {
Some((format!("This code runs with edition {}", edition), "edition"))
Some((Some(edition), "edition"))
} else {
None
};
if let Some((s1, s2)) = tooltip {
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(),
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()))
}
s.push_str(&highlight::render_with_highlighting(
text,
Some(&format!(
"rust-example-rendered{}",
if let Some((_, class)) = tooltip { format!(" {}", class) } else { String::new() }
)),
playground_button.as_deref(),
tooltip,
));
Some(Event::Html(s.into()))
}
}

View file

@ -1079,20 +1079,29 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
cursor: pointer;
}
.tooltip .tooltiptext {
width: 120px;
.tooltip::after {
display: none;
text-align: center;
padding: 5px 3px 3px 3px;
border-radius: 6px;
margin-left: 5px;
top: -5px;
left: 105%;
z-index: 10;
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: " ";
position: absolute;
top: 50%;
@ -1100,9 +1109,10 @@ h3 > .collapse-toggle, h4 > .collapse-toggle {
margin-top: -5px;
border-width: 5px;
border-style: solid;
display: none;
}
.tooltip:hover .tooltiptext {
.tooltip:hover::before, .tooltip:hover::after {
display: inline;
}

View file

@ -388,13 +388,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
color: #39AFD7;
}
.tooltip .tooltiptext {
.tooltip::after {
background-color: #314559;
color: #c5c5c5;
border: 1px solid #5c6773;
}
.tooltip .tooltiptext::after {
.tooltip::before {
border-color: transparent #314559 transparent transparent;
}

View file

@ -337,13 +337,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
color: #0089ff;
}
.tooltip .tooltiptext {
.tooltip::after {
background-color: #000;
color: #fff;
border-color: #000;
}
.tooltip .tooltiptext::after {
.tooltip::before {
border-color: transparent black transparent transparent;
}

View file

@ -329,12 +329,12 @@ pre.ignore:hover, .information:hover + pre.ignore {
color: #0089ff;
}
.tooltip .tooltiptext {
.tooltip::after {
background-color: #000;
color: #fff;
}
.tooltip .tooltiptext::after {
.tooltip::before {
border-color: transparent black transparent transparent;
}