auto merge of #16169 : Gankro/rust/simple-docs, r=cmr
<strike>Adds a simple/detailed toggle to api doc pages. Detailed mode is the current behaviour, simple mode hides all doccomment details leaving only signatures for quick browsing. </strike> Adds [expand all] and [collapse all] "links" to all api doc pages. All doccomments are collapsed, leaving only signatures for quick browsing. In addition, clicking on a <strike>function name</strike> function's [toggle details] link now toggles the visibility of the associated doccomment. -------- # [Live Build Here](http://cg.scs.carleton.ca/~abeinges/doc/std/vec/struct.Vec.html) This is something that's been bothering me, and I've seen some people mention in IRC before. The docs are *great* if you want a full in-depth look at an API, but *awful* if you want to scan them. This provides the ability to toggle complexity freely. Interacts perfectly well with noscript, since the static page is effectively unchanged. Collapsing is just hiding divs with css. I'm not much of a designer, so design input welcome on the actual UX for toggling. The actual javascript is *a bit* brittle to layout changes, but it always will be without adding lots of extra junk to the actual markup, which didn't seem worth it.
This commit is contained in:
commit
147d117cff
@ -1316,6 +1316,12 @@ impl<'a> fmt::Show for Item<'a> {
|
||||
_ => {}
|
||||
};
|
||||
|
||||
try!(write!(fmt,
|
||||
r##"<span id='render-detail'>
|
||||
<a id="collapse-all" href="#">[collapse all]</a>
|
||||
<a id="expand-all" href="#">[expand all]</a>
|
||||
</span>"##));
|
||||
|
||||
// Write `src` tag
|
||||
//
|
||||
// When this item is part of a `pub use` in a downstream crate, the
|
||||
|
@ -101,7 +101,7 @@ h3.impl, h3.method, h4.method {
|
||||
h3.impl, h3.method {
|
||||
margin-top: 15px;
|
||||
}
|
||||
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a {
|
||||
h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table a, .collapse-toggle {
|
||||
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@ -277,7 +277,10 @@ nav.sub {
|
||||
}
|
||||
.content .multi-column li { width: 100%; display: inline-block; }
|
||||
|
||||
.content .method { font-size: 1em; }
|
||||
.content .method {
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.content .methods .docblock { margin-left: 40px; }
|
||||
|
||||
.content .impl-methods .docblock { margin-left: 40px; }
|
||||
@ -405,7 +408,7 @@ h1 .stability {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.impl-methods .stability {
|
||||
.impl-methods .stability, .methods .stability {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@ -477,3 +480,36 @@ pre.rust { position: relative; }
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-toggle {
|
||||
font-weight: 100;
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.toggle-wrapper > .collapse-toggle {
|
||||
left: -24px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.toggle-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-wrapper.collapsed {
|
||||
height: 1em;
|
||||
transition: height .2s;
|
||||
}
|
||||
|
||||
.collapse-toggle > .inner {
|
||||
display: inline-block;
|
||||
width: 1ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
@ -730,4 +730,55 @@
|
||||
if (query['gotosrc']) {
|
||||
window.location = $('#src-' + query['gotosrc']).attr('href');
|
||||
}
|
||||
|
||||
$("#expand-all").on("click", function() {
|
||||
$(".docblock").show();
|
||||
$(".toggle-label").hide();
|
||||
$(".toggle-wrapper").removeClass("collapsed");
|
||||
$(".collapse-toggle").children(".inner").html("-");
|
||||
});
|
||||
|
||||
$("#collapse-all").on("click", function() {
|
||||
$(".docblock").hide();
|
||||
$(".toggle-label").show();
|
||||
$(".toggle-wrapper").addClass("collapsed");
|
||||
$(".collapse-toggle").children(".inner").html("+");
|
||||
});
|
||||
|
||||
$(document).on("click", ".collapse-toggle", function() {
|
||||
var toggle = $(this);
|
||||
var relatedDoc = toggle.parent().next();
|
||||
if (relatedDoc.is(".docblock")) {
|
||||
if (relatedDoc.is(":visible")) {
|
||||
relatedDoc.slideUp({duration:'fast', easing:'linear'});
|
||||
toggle.parent(".toggle-wrapper").addClass("collapsed");
|
||||
toggle.children(".inner").html("+");
|
||||
toggle.children(".toggle-label").fadeIn();
|
||||
} else {
|
||||
relatedDoc.slideDown({duration:'fast', easing:'linear'});
|
||||
toggle.parent(".toggle-wrapper").removeClass("collapsed");
|
||||
toggle.children(".inner").html("-");
|
||||
toggle.children(".toggle-label").hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
var toggle = "<a href='javascript:void(0)'"
|
||||
+ "class='collapse-toggle'>[<span class='inner'>-</span>]</a>";
|
||||
|
||||
$(".method").each(function() {
|
||||
if ($(this).next().is(".docblock")) {
|
||||
$(this).children().first().after(toggle);
|
||||
}
|
||||
});
|
||||
|
||||
var mainToggle = $(toggle);
|
||||
mainToggle.append("<span class='toggle-label' style='display:none'>"
|
||||
+ " Expand description</span></a>")
|
||||
var wrapper = $("<div class='toggle-wrapper'>");
|
||||
wrapper.append(mainToggle);
|
||||
$("#main > .docblock").before(wrapper);
|
||||
});
|
||||
|
||||
}());
|
||||
|
Loading…
x
Reference in New Issue
Block a user