feat(core): add print support with mediaQuery override #954

ThomasBurleson · 2018-12-22T17:57:32Z

Implement PrintHook service to intercept print mediaQuery activation events.

enhance LayoutConfigOptions to include printWithBreakpoint
fix FlexLayoutModule.withConfig() to merge overrides with defaults
use PrintHook to intercept activation changes in MediaMarshaller while print-mode is active
trigger MediaObserver to notify subscribers with print mqAlias(es)
add support for fxShow.print and fxHide.print

Example:

Using the new printWithBreakpoint allows developers to specify a breakpoint that should be used to render layouts only during printing. With the configuration below, the breakpoint associated with the md alias will be used.

    FlexLayoutModule.withConfig({
      useColumnBasisZero: false,
      printWithBreakpoints: ['md', 'gt-sm', 'gt-xs']
    })

Shown below is the print layout rendered in floating dialog over the normal layout using 'lg' breakpoints. The printed version uses:

fxHide.print to hide the buttons, and a demo
fxShow.print to show a watermark overlay

Fixes #603.

ThomasBurleson · 2018-12-22T17:58:29Z

@CaerusKaru - these include changes from PRs #946 and #912.

CaerusKaru

Love the approach overall. Some things missing or need to be added.

src/lib/core/media-marshaller/media-marshaller.ts

src/lib/core/media-marshaller/print-hook.service.ts

src/lib/core/media-observer/media-observer.ts

src/lib/core/tokens/library-config.ts

src/lib/core/media-marshaller/print-hook.service.ts

CaerusKaru · 2018-12-22T18:39:45Z

Also, scope should be feat

googlebot · 2018-12-22T19:42:28Z

CLAs look good, thanks!

When printing developers can now configure how layouts should render by specifying 1..n mediaQuery aliases. This feature allows totally different print outputs without modifying the currently layout. Implement PrintHook service to intercept print mediaQuery activation events. * add fxShow.print and fxHide.print support to show/hide elements during printing * suspend activation changes in MediaMarshaller while print-mode is active * trigger MediaObserver to notify subscribers with print mqAlias(es) * use PrintHook to intercept activation changes in MediaMarshaller while print-mode is active * trigger MediaObserver to notify subscribers with print mqAlias(es) Using the new `printWithBreakpoint` allows developers to specify a breakpoint that should be used to render layouts only during printing. With the configuration below, the breakpoint associated with the **`md`** alias will be used. ```ts FlexLayoutModule.withConfig({ useColumnBasisZero: false, printWithBreakpoints: ['md', 'gt-sm', 'gt-xs'] }) ``` Shown below is the print layout rendered in floating dialog over the normal layout using 'lg' breakpoints. ![angular-layout-printing](https://user-images.githubusercontent.com/210413/50407211-2e04ca00-0798-11e9-8f35-b4e9e2fca864.jpg) Fixes #603.

ThomasBurleson · 2019-01-01T15:34:19Z

@CaerusKaru - final quick review plz? Ready to merge after your lgtm.

docs/documentation/BreakPoints.md

src/lib/core/add-alias.ts

src/lib/core/match-media/mock/mock-match-media.spec.ts

src/lib/core/match-media/mock/mock-match-media.ts

src/lib/core/match-media/server-match-media.ts

src/lib/core/media-marshaller/media-marshaller.ts

CaerusKaru

Some small changes, otherwise very close

src/lib/core/media-marshaller/media-marshaller.ts

CaerusKaru

LGTM

angular-automatic-lock-bot · 2019-09-06T00:04:43Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: no PR author needs to sign Google's CLA: https://opensource.google.com/docs/cla/ label Dec 22, 2018

CaerusKaru suggested changes Dec 22, 2018

View reviewed changes

CaerusKaru self-assigned this Dec 22, 2018

CaerusKaru added the pr: needs cleanup/tests label Dec 22, 2018

CaerusKaru added this to the 7.0.0-beta.23 milestone Dec 22, 2018

ThomasBurleson force-pushed the thomas/fix-print branch from 6a8c59a to 8e5f762 Compare December 22, 2018 19:40

googlebot added cla: yes and removed cla: no PR author needs to sign Google's CLA: https://opensource.google.com/docs/cla/ labels Dec 22, 2018

ThomasBurleson force-pushed the thomas/fix-print branch 3 times, most recently from 735f6e1 to 72998b2 Compare December 22, 2018 19:59

ThomasBurleson changed the title ~~fix(core): add print support with mediaQuery override~~ feat(core): add print support with mediaQuery override Dec 22, 2018

ThomasBurleson force-pushed the thomas/fix-print branch 2 times, most recently from 9c31ffa to 21e68b5 Compare December 22, 2018 20:02

ThomasBurleson assigned ThomasBurleson and unassigned CaerusKaru Dec 22, 2018

ThomasBurleson force-pushed the thomas/fix-print branch 3 times, most recently from 0c60244 to 60d3153 Compare December 23, 2018 15:22

ThomasBurleson added the P1 Urgent issue that should be resolved before the next re-lease label Dec 23, 2018

ThomasBurleson force-pushed the thomas/fix-print branch 7 times, most recently from 9235c07 to 543e1f9 Compare December 28, 2018 00:52

ThomasBurleson force-pushed the thomas/fix-print branch from 9c80f62 to 631f2fd Compare December 30, 2018 23:49

angular deleted a comment from googlebot Dec 31, 2018

CaerusKaru mentioned this pull request Dec 31, 2018

Print Preview triggers xs breakpoint #603

Closed

ThomasBurleson force-pushed the thomas/fix-print branch from b3af138 to 29b0c2d Compare January 1, 2019 17:01

updates to watermark

febc7a6

ThomasBurleson force-pushed the thomas/fix-print branch from 29b0c2d to febc7a6 Compare January 1, 2019 17:08