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 {
height: inherit;
padding: 0 8px 8px;
padding: 0 0 8px;
h4 {
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 {
font-size: 12px;
@ -248,7 +270,11 @@ details {
padding: 16px 24px;
}
&[open] > i.material-icons {
@include rotate(180deg); // Rotate the icon
// 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>
<div class="icon-action-header">
<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>
</summary>
<div class="detail-contents">
@ -133,14 +137,17 @@
<hr class="hr-margin fullwidth">
{% endif %}
{% for overload in method.overloads %}
<div>
<h5 class="icon-action-header no-anchor">
<span>Overload #{$ loop.index $} of {$ method.overloads.length $}</span>
<i class="material-icons">expand_more</i></h5>
<details class="overload"{% if loop.first %} open{% endif %}>
<summary>
<div class="icon-action-header">
<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) $}
{% if not loop.last %}<hr class="hr-margin">{% endif %}
</details>
{% endfor %}
</div>
</div>
</details>
</td>