honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build(docs-infra): fix individual API overload templates (#24976) 

* Make individual overloads collapsible
* Show only the first overload expanded, rest collapsed
* Text changes to 'collapse all' once 'show all' is clicked
* Fix chevron/carrot rotation animation when overloads / overload item is expanded or collapsed

PR Close #24976
This commit is contained in:
Pete Bacon Darwin 2018-08-13 07:23:45 +01:00 committed by Kara Erickson
parent 68dfa04f8a
commit 61cd5f7c0f
2 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
aio/src/styles/1-layouts/_api-pages.scss
View File

@ -161,13 +161,35 @@
summary { summary {
height: inherit; height: inherit;
padding: 0 8px 8px; padding: 0 0 8px;
h4 { h4 {
margin: 0; margin: 0;
} }
.show-all {
display: initial;
}
.collapse-all {
display: none;
}
} }
}
&[open] > summary {
.show-all {
display: none;
}
.collapse-all {
display: initial;
}
}
}
details.overload {
box-shadow: none;
margin: 0;
}
.from-constructor, .read-only-property { .from-constructor, .read-only-property {
font-size: 12px; font-size: 12px;
@ -248,7 +270,11 @@ details {
padding: 16px 24px; padding: 16px 24px;
} }
&[open] > i.material-icons { // Rotate the icon
@include rotate(180deg); // Rotate the icon summary i.material-icons.expand {
@include rotate(0deg);
}
&[open] > summary i.material-icons.expand {
@include rotate(180deg);
} }
} }

19
aio/tools/transforms/templates/api/lib/memberHelpers.html
View File

@ -124,7 +124,11 @@
<summary> <summary>
<div class="icon-action-header"> <div class="icon-action-header">
<h4 class="no-anchor">Overloads</h4> <h4 class="no-anchor">Overloads</h4>
<a>Show All <i class="material-icons">expand_more</i></a> <a>
<span class="show-all">Show All</span>
<span class="collapse-all">Collapse All</span>
<i class="material-icons expand">expand_more</i>
</a>
</div> </div>
</summary> </summary>
<div class="detail-contents"> <div class="detail-contents">
@ -133,14 +137,17 @@
<hr class="hr-margin fullwidth"> <hr class="hr-margin fullwidth">
{% endif %} {% endif %}
{% for overload in method.overloads %} {% for overload in method.overloads %}
<div> <details class="overload"{% if loop.first %} open{% endif %}>
<h5 class="icon-action-header no-anchor"> <summary>
<span>Overload #{$ loop.index $} of {$ method.overloads.length $}</span> <div class="icon-action-header">
<i class="material-icons">expand_more</i></h5> <h5 class="no-anchor">Overload #{$ loop.index $} of {$ method.overloads.length $}</h5>
<a><i class="material-icons expand">expand_more</i></a>
</div>
</summary>
{$ renderOverloadInfo(overload, cssClass + '-overload', method) $} {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
{% if not loop.last %}<hr class="hr-margin">{% endif %} {% if not loop.last %}<hr class="hr-margin">{% endif %}
</details>
{% endfor %} {% endfor %}
</div>
</div> </div>
</details> </details>
</td> </td>