diff options
| author | Rory O’Kane <rory@roryokane.com> | 2015-05-07 03:53:21 -0400 |
|---|---|---|
| committer | Rory O’Kane <rory@roryokane.com> | 2015-05-07 04:11:14 -0400 |
| commit | 92565b3dfbacca4b2a851758e5e9a784fc5b156e (patch) | |
| tree | 113605fb3cb19afd9e09845d1041377bbfff360f | |
| parent | 6ce05ae6bb0e5762dee940d043feb728e5583564 (diff) | |
| download | rust-92565b3dfbacca4b2a851758e5e9a784fc5b156e.tar.gz rust-92565b3dfbacca4b2a851758e5e9a784fc5b156e.zip | |
Refactor doc toggle button label changing
To separate concerns, instead of checking the state of `#toggle-all-docs` by looking at its label text, I add or remove a class `will-expand` depending on whether the button’s next click will expand everything. (The `if` statement’s two branches were swapped as part of this change.) I moved the desired text values to a function `labelForToggleButton`, so changing the values will be easier. I also note in a comment the other file where the text is duplicated. To allow the labels of both types of toggle buttons to be uniformly set, I added a `span.inner` to the global button too. I split the template in `render.rs` into multiple lines to make room for the `span`, and that adds whitespace around the `[` and `]` text elements. That seems to be okay, though – the page still looks the same. I updated the CSS styling for `.collapse-toggle > .inner` to add a little extra space around the symbol, to make minus signs easier to identify. (`#toggle-all-docs > .inner` does not need the same style, since its text size is bigger, so it naturally puts more space around the symbol.)
| -rw-r--r-- | src/librustdoc/html/render.rs | 5 | ||||
| -rw-r--r-- | src/librustdoc/html/static/main.css | 2 | ||||
| -rw-r--r-- | src/librustdoc/html/static/main.js | 40 |
3 files changed, 31 insertions, 16 deletions
diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs index ad26d25c81a..f7ab5fc9b09 100644 --- a/src/librustdoc/html/render.rs +++ b/src/librustdoc/html/render.rs @@ -1460,8 +1460,9 @@ impl<'a> fmt::Display for Item<'a> { try!(write!(fmt, "<span class='out-of-band'>")); try!(write!(fmt, r##"<span id='render-detail'> - <a id="toggle-all-docs" href="javascript:void(0)" - title="collapse all docs">[−]</a> + <a id="toggle-all-docs" href="javascript:void(0)" title="collapse all docs"> + [<span class='inner'>−</span>] + </a> </span>"##)); // Write `src` tag diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css index b907e9e20b6..2dc5ea99067 100644 --- a/src/librustdoc/html/static/main.css +++ b/src/librustdoc/html/static/main.css @@ -581,7 +581,7 @@ pre.rust { position: relative; } .collapse-toggle > .inner { display: inline-block; - width: 1ch; + width: 1.2ch; text-align: center; } diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js index cfa599041ee..92fb6402e72 100644 --- a/src/librustdoc/html/static/main.js +++ b/src/librustdoc/html/static/main.js @@ -806,22 +806,35 @@ window.location = $('.srclink').attr('href'); } + function labelForToggleButton(sectionIsCollapsed) { + if (sectionIsCollapsed) { + // button will expand the section + return "+"; + } else { + // button will collapse the section + // note that this text is also set in the HTML template in render.rs + return "\u2212"; // "\u2212" is '−' minus sign + } + } + $("#toggle-all-docs").on("click", function() { var toggle = $("#toggle-all-docs"); - if (toggle.html() == "[\u2212]") { - toggle.html("[+]"); - toggle.attr("title", "expand all docs"); - $(".docblock").hide(); - $(".toggle-label").show(); - $(".toggle-wrapper").addClass("collapsed"); - $(".collapse-toggle").children(".inner").html("+"); - } else { - toggle.html("[\u2212]"); + if (toggle.hasClass("will-expand")) { + toggle.removeClass("will-expand"); + toggle.children(".inner").text(labelForToggleButton(false)); toggle.attr("title", "collapse all docs"); $(".docblock").show(); $(".toggle-label").hide(); $(".toggle-wrapper").removeClass("collapsed"); - $(".collapse-toggle").children(".inner").html("\u2212"); + $(".collapse-toggle").children(".inner").text(labelForToggleButton(false)); + } else { + toggle.addClass("will-expand"); + toggle.children(".inner").text(labelForToggleButton(true)); + toggle.attr("title", "expand all docs"); + $(".docblock").hide(); + $(".toggle-label").show(); + $(".toggle-wrapper").addClass("collapsed"); + $(".collapse-toggle").children(".inner").text(labelForToggleButton(true)); } }); @@ -835,12 +848,12 @@ if (relatedDoc.is(":visible")) { relatedDoc.slideUp({duration:'fast', easing:'linear'}); toggle.parent(".toggle-wrapper").addClass("collapsed"); - toggle.children(".inner").html("+"); + toggle.children(".inner").text(labelForToggleButton(true)); toggle.children(".toggle-label").fadeIn(); } else { relatedDoc.slideDown({duration:'fast', easing:'linear'}); toggle.parent(".toggle-wrapper").removeClass("collapsed"); - toggle.children(".inner").html("\u2212"); + toggle.children(".inner").text(labelForToggleButton(false)); toggle.children(".toggle-label").hide(); } } @@ -848,7 +861,8 @@ $(function() { var toggle = $("<a/>", {'href': 'javascript:void(0)', 'class': 'collapse-toggle'}) - .html("[<span class='inner'>\u2212</span>]"); + .html("[<span class='inner'></span>]"); + toggle.children(".inner").text(labelForToggleButton(false)); $(".method").each(function() { if ($(this).next().is(".docblock") || |
