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 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();
} }

View file

@ -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()))
}
} }
} }

View file

@ -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;
} }

View file

@ -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;
} }

View file

@ -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;
} }

View file

@ -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;
} }