From 31c7e12b640e1551b8aa1110dc34ce8ed510df03 Mon Sep 17 00:00:00 2001 From: William Juan Date: Wed, 15 Dec 2021 20:08:57 +0700 Subject: [PATCH 1/2] feat(layout): support gradient colors on shade cover for android --- .../ui/layouts/root-layout/index.android.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/core/ui/layouts/root-layout/index.android.ts b/packages/core/ui/layouts/root-layout/index.android.ts index eb974a606c..1d5748d88d 100644 --- a/packages/core/ui/layouts/root-layout/index.android.ts +++ b/packages/core/ui/layouts/root-layout/index.android.ts @@ -2,6 +2,8 @@ import { Color } from '../../../color'; import { View } from '../../core/view'; import { RootLayoutBase, defaultShadeCoverOptions } from './root-layout-common'; import { TransitionAnimation, ShadeCoverOptions } from '.'; +import { parseLinearGradient } from '../../../css/parser'; +import { LinearGradient } from '../../styling/linear-gradient'; export * from './root-layout-common'; @@ -74,14 +76,28 @@ export class RootLayout extends RootLayoutBase { } private _getAnimationSet(view: View, shadeCoverAnimation: TransitionAnimation, backgroundColor: string = defaultShadeCoverOptions.color): Array { - const animationSet = Array.create(android.animation.Animator, 7); + const backgroundIsGradient = backgroundColor.startsWith('linear-gradient'); + + const animationSet = Array.create(android.animation.Animator, backgroundIsGradient ? 6 : 7); animationSet[0] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationX', [shadeCoverAnimation.translateX]); animationSet[1] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationY', [shadeCoverAnimation.translateY]); animationSet[2] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleX', [shadeCoverAnimation.scaleX]); animationSet[3] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleY', [shadeCoverAnimation.scaleY]); animationSet[4] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'rotation', [shadeCoverAnimation.rotate]); animationSet[5] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'alpha', [shadeCoverAnimation.opacity]); - animationSet[6] = this._getBackgroundColorAnimator(view, backgroundColor); + + if (backgroundIsGradient) { + if (view.backgroundColor) { + view.backgroundColor = undefined; + } + const parsedGradient = parseLinearGradient(backgroundColor); + view.backgroundImage = LinearGradient.parse(parsedGradient.value); + } else { + if (view.backgroundImage) { + view.backgroundImage = undefined; + } + animationSet[6] = this._getBackgroundColorAnimator(view, backgroundColor); + } return animationSet; } From 49c2b10a357141ba1fef2abfb9c73793b6f4143c Mon Sep 17 00:00:00 2001 From: William Juan Date: Wed, 15 Dec 2021 20:09:55 +0700 Subject: [PATCH 2/2] feat(layout): update toolbox to include gradient background --- apps/toolbox/src/pages/root-layout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/toolbox/src/pages/root-layout.ts b/apps/toolbox/src/pages/root-layout.ts index 99a31db848..13531edd10 100644 --- a/apps/toolbox/src/pages/root-layout.ts +++ b/apps/toolbox/src/pages/root-layout.ts @@ -11,7 +11,7 @@ export class RootLayoutModel extends Observable { view: this.getPopup('#EA5936', 110, -30), options: { shadeCover: { - color: '#FFF', + color: 'linear-gradient(to bottom, red, blue)', opacity: 0.7, tapToClose: true, },