From 71875417f207d26bd7115655f239251460a1e3d8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 24 Feb 2020 11:38:50 -0500 Subject: [PATCH] fix(ios): large title transition works properly in tabbed applications (#20555) fixes #20482 --- core/src/components/router/test/tabs/e2e.ts | 10 ++ .../components/router/test/tabs/index.html | 147 ++++++++++++++++++ core/src/utils/transition/ios.transition.ts | 21 ++- 3 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 core/src/components/router/test/tabs/e2e.ts create mode 100644 core/src/components/router/test/tabs/index.html diff --git a/core/src/components/router/test/tabs/e2e.ts b/core/src/components/router/test/tabs/e2e.ts new file mode 100644 index 0000000000..c14c103abf --- /dev/null +++ b/core/src/components/router/test/tabs/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('router: tabs', async () => { + const page = await newE2EPage({ + url: '/src/components/router/test/tabs?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/router/test/tabs/index.html b/core/src/components/router/test/tabs/index.html new file mode 100644 index 0000000000..e02f225778 --- /dev/null +++ b/core/src/components/router/test/tabs/index.html @@ -0,0 +1,147 @@ + + + + + Nav + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index d2fbbc0f55..422abc0d21 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -13,11 +13,27 @@ export const shadow = (el: T): ShadowRoot | T => { }; const getLargeTitle = (refEl: any) => { - return refEl.querySelector('ion-header:not(.header-collapse-condense-inactive) ion-title[size=large]'); + const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs'); + const query = 'ion-header:not(.header-collapse-condense-inactive) ion-title[size=large]'; + + if (tabs != null) { + const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)'); + return activeTab.querySelector(query); + } + + return refEl.querySelector(query); }; const getBackButton = (refEl: any, backDirection: boolean) => { - const buttonsList = refEl.querySelectorAll('ion-buttons'); + const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs'); + let buttonsList = []; + + if (tabs != null) { + const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)'); + buttonsList = activeTab.querySelectorAll('ion-buttons'); + } else { + buttonsList = refEl.querySelectorAll('ion-buttons'); + } for (const buttons of buttonsList) { const parentHeader = buttons.closest('ion-header'); @@ -277,7 +293,6 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense'); const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl); - enteringToolBarEls.forEach(enteringToolBarEl => { const enteringToolBar = createAnimation(); enteringToolBar.addElement(enteringToolBarEl);