- Avoid unnecessary animations, style transitions, repositioning on
initial rendering.
- Better handle transitioning from/to Home page (which is the only page
with transparent top-menu).
- Better coordinate sidenav and hamburger animations with page
transitions.
- Improve fade-in/out animations.
Fixes#20996
- Fix embedded ToC:
Previously, the element was added too late and was never instantiated.
- Improve ToC update timing:
Previously, the ToC was updated after the entering animation was over, which
resulted in the ToC being outdated for the duration of the animation.
- Improve destroying components timing:
Previously, the old embedded components were destroyed as soon as a
new document was requested. Even if the transition ended up never
happening (e.g. due to error while preparing the new document), the
embedded components would have been destroyed and the displayed
document would not work as expected.
Now the old embedded components are destroyed only after the new
document has been fully prepared.
- Improve scroll-to-top timing:
Previously, the page was scrolled to top after the entering animation was
over, which resulted in "jumpi-ness". Now the scrolling happens after the
leaving document has been removed and before the entering document has been
inserted.
PR Close#18428
all the non-npm changes were made by the angular-material-prefix-updater tool.
the tool missed a few things, which I'll fix in a separate commit to preserve the diff.
-rw-r--r-- 1 iminar eng 14942 Oct 13 13:09 dist/0.b19e913fbdd6507d346b.chunk.js
-rw-r--r-- 1 iminar eng 1535 Oct 13 13:09 dist/inline.0592c25ceb544d6aca3d.bundle.js
-rw-r--r-- 1 iminar eng 578250 Oct 13 13:09 dist/main.45d4edca3facc6d621e7.bundle.js
-rw-r--r-- 1 iminar eng 37402 Oct 13 13:09 dist/polyfills.f8409a9eb69060ac1aa6.bundle.js
PR Close#19702
Previouly, whenever a new ServiceWorker update was detected the user was
prompted to update (with a notification). This turned out to be more distracting
than helpful. Also, one would get notifications on all open browser tabs/windows
and had to manually reload each one in order for the whole content (including
the app) to be updated.
This commit changes the update strategy as follows:
- Whenever a new update is detected, it is immediately activated (and all
tabs/windows will be notified).
- Once an update is activated (regardless of whether the activation was
initiated by the current tab/window or not), a flag will be set to do a
"full page navigation" the next time the user navigates to a document.
Benefits:
- All tabs/windows are updated asap.
- The updates are applied authomatically, without the user's needing to do
anything.
- The updates are applied in a way that:
a. Ensures that the app and content versions are always compatible.
b. Does not distract the user from their usual workflow.
NOTE:
The "full page navigation" may cause a flash (while the page is loading from
scratch), but this is expected to be minimal, since at that point almost all
necessary resources are cached by and served from the ServiceWorker.
Fixes#17539
closes#17665
Restores keyboard focus that was removed by commit b8b91d3.
Raises the right-TOC by 20px (96px->76px) because was too far down.
To prevent keyboard focus on hidden child nodes,
also collapses inner expanded nodes when parent node is collapsed.
The implicit parent node of top nodes is always expanded.
Previously, the main content would always leave a 18% margin on the right to be
occupied by the ToC (even if there was no ToC).
This commit lets the main content expand to the right to occupy all the
available space when there is no ToC.
Fixes#17205Fixes#17270
Previously, when scrolling the ToC and reaching the top/bottom, further
mousewheel events would result in scrolling the window (and thus the main
content). This is standard browser behavior. In the case of the ToC though, the
`ScrollSpy` would detect scrolling in the main content and scroll the active ToC
to entry into view, thus resetting the scroll position of the ToC.
Reproduction:
1. Open `~/guide/template-syntax`.
2. Start scrolling through the long ToC.
3. Try to go to the bottom of the ToC.
4. Once you reach the bottom, the main content starts scrolling down.
5. The first section ("HTML in templates") becomes "active", so the ToC is
scrolled back up to make its corresponding entry visible.
6. Go back to step 2.
This commit improves the UX, by not allowing the main content to scroll when the
cursor is ovr the ToC and the user has scrolled all the way to the top/bottom of
it.
When more than one node matches a url, the last
node defined in the navigation.json file won. This
meant that, for instance, items in both the
TopBarNarrow and the Footer views would not
indicate that they were active.
Now, each url is associated with a map of current
nodes keyed off their view.
Closes#17022
- Add styling for active TOC item
- Add sidenav styles
- Change header tags to divs from index marketing page to remove anchors
- Fix use of card mixin and create separate card-docs class
- Add marketing styling
- Topnav styling when on home landing page
- Remove hamburger menu on home page
- Add fully rounded border to top nav toolbar search input
- Add mobile styles
- Add title banner to other marketing pages
* 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
If there is a `TopBarNarrow` nav view then use this when the screen is narrow.
Otherwise just use the normal `TopBar`.
This commit also creates such a narrow topbar view where the "Docs" item is
in a different position
Closes#16940
Previously we hardcoded the current version into the navigation items.
Now only previous versions are included there. The current version is
computed from the currentVersion info.
Closes#16909
Previously the logic for deciding when to display
the search result was spread between different
parts of the application and used non-intuitive logic
such as sending a blank results set to the searchResults.
This commit moves the management of displaying
the search results (and also setting focus of the
search input box) to the AppComponent. This makes
it easier to understand what happens and why; but
also allows the search UI components to be more
easily reused (such as embedding them in the 404
page).
closes#16608
Formerly, tried to navigate when user clicked an anchor with an image url (to view image in a new tab) resulting in 404.
Now ignores href URL with any extension and lets browser handle it.
closes#16603
As before this PR, when wide (side-by-side), the sidenav open/close status only changes when nav to/from marketing page in which case it opens for guide/api and closes for marketing page.
TOC appears in right panel when wide and hides embedded TOC
Right TOC panel height adjusts dynamically during scroll
Refactored `TocService` and its tests for clarity.
Previously, the path returned by `LocationService.path()` preserved leading
slashes, which resulted in requests with consequtive slashes in the URL. Such
requests would fail (with a 404) on staging.
This commit fixes it, by removing leading slashes from the path. It also
refactors `LocationService` a bit, converting path to an observable,
`currentPath` (similar to `currentUrl`), and applies certain clean-ups (e.g.
stripping slashes, query, hash) in one place, which simplifies consumption.
Closes#16230
Dgeni is now providing the `id` for all the documents to be viewed. So we
no longer need to add this to the DocumentContents object.
There are some notable changes in the refactoring:
`DocumentService`:
* The id of the document to render is now obtained from `LocationService.path()`.
* The `getFileNotFoundDoc` and `getErrorDoc` methods have been extracted from
the `fetchDocument` method.
`AppComponent`:
* the `pageId` is now computed in a separate `setPageId` method.
`AppComponen` spec file:
* The `TestHttp` has had the hard coded documents removed and replaced with
a function that will generate docs as needed.
* Scrolls to hash element or top of page when no hash.
* Scrolls down a bit (80px) to account for top menu overhang.
* No longer scrolls when the hash element is not found.
* Adds `<a id="top-of-page"></a>` which will benefit future efforts to
navigate there from within a page.
Angular change detection bug -> no page update on resize.
Reverting to `@HostListener('window:resize', ['$event.target.innerWidth'])` cures it.
Delete DeviceService which no longer serves a purpose.
Adjusted affected AppComponent and LiveExample tests.
PR Close#16143
Now if you specifically provide an empty `@title` tag
for a contents file, the doc-gen will not complain and
the browser will just display a reasonable default.
Previously, the `AppComponent.pageId` was set via the current URL, rather than
the document being displayed. This is only really noticeable when the URL does not
match a valid doc and we are actually displaying a 404 page.
Now we compute the `pageId` from the URL of the document being viewed,
which is returned from the `DocumentService.currentDocument` observable instead.
