Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ios): translucent toolbar blur no longer obscures entering page title #20314

Merged
merged 10 commits into from
Jan 29, 2020
Merged

fix(ios): translucent toolbar blur no longer obscures entering page title #20314

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c9dfe30
fix backdrop filter on nav transitions
liamdebeasi Jan 27, 2020
2645a16
run build
liamdebeasi Jan 27, 2020
5902f52
update var description
liamdebeasi Jan 27, 2020
5d678d5
run linter
liamdebeasi Jan 27, 2020
291562d
fix color bg
liamdebeasi Jan 28, 2020
999e995
Trying out new approach
liamdebeasi Jan 28, 2020
cf167c0
fix animation
liamdebeasi Jan 28, 2020
4cc075c
remove old test
liamdebeasi Jan 28, 2020
437049c
remove console log
liamdebeasi Jan 28, 2020
2908824
add footer blur
liamdebeasi Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions core/src/components/header/header.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@
}

@supports (backdrop-filter: blur(0)) {
.header-translucent-ios {
.header-background {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't this apply to MD too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's in the header.ios.scss file, so it should be fine, right? Or do I still need .header-translucent-ios .header-background?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought that scoped used to do that, but I'm seeing it work fine. I wonder why we specify the class + mode in all of the CSS files though instead of just using .header-translucent or ion-header then.

@include position(0, 0, 0, 0);

position: absolute;

backdrop-filter: $header-ios-translucent-filter;
}

.header-translucent-ios ion-toolbar {
--opacity: .8;
--backdrop-filter: #{$header-ios-translucent-filter};
}
}

Expand Down
5 changes: 5 additions & 0 deletions core/src/components/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export class Header implements ComponentInterface {
}

render() {
const { translucent } = this;
const mode = getIonMode(this);
const collapse = this.collapse || 'none';
return (
Expand All @@ -157,6 +158,10 @@ export class Header implements ComponentInterface {
[`header-translucent-${mode}`]: this.translucent,
}}
>
{ mode === 'ios' && translucent &&
<div class="header-background"></div>
}
<slot></slot>
</Host>
);
}
Expand Down
21 changes: 14 additions & 7 deletions core/src/utils/transition/ios.transition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,10 +342,14 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
}

enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);

enteringToolBarBg
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 0.01, 1);
const translucentHeader = parentHeader?.translucent;
if (!translucentHeader) {
enteringToolBarBg.fromTo(OPACITY, 0.01, 1);
} else {
enteringToolBarBg.fromTo('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'), 'translateX(0px)');
}

// forward direction, entering page has a back button
if (!forward) {
Expand Down Expand Up @@ -479,12 +483,15 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
}

leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));

leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
// leaving toolbar, back direction, and there's no entering toolbar
// should just slide out, no fading out
leavingToolBarBg
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 1, 0.01);
const translucentHeader = parentHeader?.translucent;
if (!translucentHeader) {
leavingToolBarBg.fromTo(OPACITY, 0.99, 0);
} else {
leavingToolBarBg.fromTo('transform', 'translateX(0px)', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
}

if (backButtonEl && !backward) {
const leavingBackBtnText = createAnimation();
Expand Down