In our attempt to remove the material ripple effect from tab labels, we were
killing all `transform`-based animations on other `md-tab-group` elements, such
as animating the content when entering/leaving. (This wasn't an issue on Chrome,
because it didn't respect our `!important` flag.)
This commit fixes it by properly hiding the ripple effect (using a feature
introduced in angular/material2@e4789c7b8) and allowing other animations to
execute normally.
Fixes#17998
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
Before 4f37f8643, we were using `innerText` to retrieved the code content for
copying. This preserved the text layout (including newlines), but suffered from
other issues (browser support, performance). With 4f37f8643 we switched to
`textContent`, which works well except in the following case:
When `prettify` formats the code to have line numbers, it removes the newlines
and uses `<li>` elements instead. This affects `textContent`.
This commit fixes this by keeping a reference of the code as text and using that
for copying.
Fixes#17659
`innerText` is not supported in Firefox prior to v45. In most cases (at least
the ones we are interested in), `innerText` and `textContent` work equally well,
but `textContent` is more performant (as it doesn't require a reflow).
From [MDN][1] on the differences of `innerText` vs `textContent`:
> - [...]
> - `innerText` is aware of style and will not return the text of hidden
> elements, whereas `textContent` will.
> - As `innerText` is aware of CSS styling, it will trigger a reflow, whereas
> `textContent` will not.
> - [...]
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerTextFixes#17585
* Remove the "info-banner" styling from the filters.
* Fix alignment of the search box on a narrow screen (closes#17395)
* Remove unnecessary whitespace before section headers
* 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
Based on optional title passed in from parent element such as CodeExample or CodeTabs.
Darkens uncovered copy button slightly as recommended for a11y.
PR #16808
- Use buttons for the TOC “Contents” label when embedded-and-expandable or TOC on the right to satisfy a11y.
- Add aria-pressed setting for the toggles in TOC and NavItem.
- Clicking the right panel TOC “Contents” button scrolls to top.
- When embedded use same rotating caret as sidebar
- When embedded and no secondaries, “Content” is just a label.
- Gray background for focused buttons rather than outline because can’t get carets to work with outline.
By reflex we began all component tests with an async `beforeEach` that called `compileComponents`.
In at least one case (`live-example.component.spec.ts`) that led to the `it` tests being async as well.
There is no need to call `.compileComponents` because CLI web pack + plugin inlines all templates and styles.
While `.compileComponents` was harmless, it added complexity and distraction which we should not inflict on future readers and testers.
* fix(aio): allow code blocks to clear floated images
Previously the negative margin on the code headings were causing
floated images to overlay the start of a code block. Now all code block
successfully clear all floated elements.
* feat(aio): add a `.clear` class for clearing floating images
* fix(aio): tidy up image styles
The css rules for `img.right` and `img.left` allow authors easy
access to floating an image on the left or right, respectively.
The `.image-display` rule which was always found on a figure
has been simplified so that all figures have this styling. It is very
unlikely that a figure will be used outside the content area; and
at this time it seems like `figure` is as good an indicator that we
want this kind of styling as anything.
Now that images are all tagged with width and height values, we cannot
assume to modify these dimensions via CSS as it can cause the image to
lose its correct proportions. Until we find a better solition we must set
`height` to `auto` when the screen width is below 1300px to ensure that
these images maintain their proportions as they get shrunk to fit.
* docs(aio): general tidy up of image HTML in guides
Previously, the guides have a lot of inline image styling and unnecessary
use of the `image-display` css class.
Images over 700px are problematic for guide docs, so those have been given
specific widths and associated heights.
* docs(aio): use correct anchor for "back to the top" link
The `#toc` anchor does not work when the page is
wide enough that the TOC is floating to the side.
* build(aio): add `#top-of-page` to path variants for link checking
Since the `#top-of-page` is outside the rendered docs
the `checkAnchorLinks` processor doesn't find them
as valid targets for links.
Adding them as a `pathVariant` solves this problem
but will still catch links to docs that do not actually exist.
* fix(aio): ensure that headings clear floated images
* fix(aio): do not force live-example embedded image to 100% size
This made them look too big, generally. Leaving them with no size means
that they will look reasonable in large viewports and switch to 100% width
in narrow viewports.
Previously the `hasToc` was initialised to true, which caused a flash of
unwanted "Contents" [sic] even if the page was not going to need a ToC.
Closes#16597
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.
These utils support flexible, natural attribute interpretation as applied to code-example and code-pane. Then apply those utils to code-example and live-example
In the API docs there are occasions where we do not wish the code snippet
to have a copy button. This commit supports that by providing a new `hideCopy`
attribute.
- Banner class code consolidation for API pages
- Set up temporary table of contents class and file
- API pages title styling
- Add color styling to doc-type listed on each API details page
- Classes and SCSS variables refactor
- Mobile optimization on headers, info-banner, and API pages
- API page table custom styling
- API Class Overview template code overview into table format
- Content container now has a max width and made the body background the same offwhite color so the cut-off is not visible
- Sidenav will always remain at the left of the page
- Added a max width to the api banner of filter search inputs
- Left aligned content container so it is flush with sidenav
- Changed API filter width to match size of filter results
- Add snackbar and pointer cursor for copy code button inside aio-code components
- Flex cenetered content in features page
- Removed duplicate global css class
- Add styles to links inside of sub-sections
- Remove focus outline on top nav bar links
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
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
