cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

aio: add h1 title to floating table of contents (#16959)

Browse Source 
* refactor(aio): use explicit CSS class for TOC container

This makes the styling less fragile to changes in the HTML

* fix(aio): schedule TocComponent.activeIndex updates via AsapScheduler

We use the `asap` scheduler because updates to `activeItemIndex` are triggered by DOM changes,
which, in turn, are caused by the rendering that happened due to a ChangeDetection.

Without asap, we would be updating the model while still in a ChangeDetection handler,
which is disallowed by Angular.

* refactor(aio): do not instantiate floating ToC if not displayed

* feat(aio): display the h1 at the top of the floating TOC

Closes #16900

* refactor(aio): combine the TOC booleans flags into a "type" state

* refactor(aio): remove unnecessary `hostElement` property

* fix(aio): ensure that transition works on TOC

* fix(aio): use strict equality in ToC template
This commit is contained in:
Pete Bacon Darwin
2017-05-24 21:09:55 +01:00
committed by Chuck Jazdzewski
parent b0c5018c70
commit 966eb2fbd0
9 changed files with 164 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
aio/src/styles/2-modules/_toc.scss
View File

@ -6,11 +6,6 @@
bottom: 32px;
overflow-y: auto;
overflow-x: hidden;
@media (max-width: 800px) {
display: none;
width: 0;
}
}
aio-toc {
@ -19,16 +14,9 @@ aio-toc {
display: none;
}
}
&:not(.embedded) {
@media (max-width: 800px) {
display: none;
}
}
}
aio-toc > div {
.toc-inner {
border-left: 4px solid #4285f4;
font-size: 13px;
overflow-y: visible;
@ -59,6 +47,7 @@ aio-toc > div {
border: none;
box-shadow: none;
padding: 0;
text-align: start;
&:focus.embedded {
outline: none;
@ -67,7 +56,8 @@ aio-toc > div {
}
button.toc-heading,
div.toc-heading {
div.toc-heading,
ul.toc-list li.h1 {
font-size: 115%;
}
@ -131,10 +121,10 @@ aio-toc > div {
margin: 6px 0;
padding: 0;
position: relative;
transition: all 0.3 ease-in-out;
transition: all 0.3s ease-in-out;
a {
font-size: 12px;
font-size: inherit;
color: lighten($darkgray, 10);
display:table-cell;
overflow: visible;
@ -154,6 +144,17 @@ aio-toc > div {
ul.toc-list li.h3 {
margin-left: 15px;
}
ul.toc-list li.h1:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 24px 0px 10px;
background: #DBDBDB;
clear: both;
}
}
aio-toc.embedded > div.collapsed li.secondary {