Skip to content

Commit 84d241b

Browse files
farfromrefugfarfromrefug
committed
feat: rippleColorAlpha property
fix: default rippleColor alpha fix
1 parent ae4d6cc commit 84d241b

19 files changed

+143
-51
lines changed

‎src/button/button-common.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ export abstract class ButtonBase extends Button {
1919
/**
2020
* Gets or sets the ripple-color of the button.
2121
*/
22-
@cssProperty rippleColor: Color | string;
22+
@cssProperty rippleColor: Color;
23+
24+
/**
25+
* Gets or sets the ripple-color alpha of the button.
26+
*/
27+
@cssProperty rippleColorAlpha: number;
2328

2429
/**
2530
* Gets or sets the {@link VerticalTextAlignment|vertical text alignment} of the button.

‎src/button/button.android.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { VerticalTextAlignment, verticalTextAlignmentProperty } from '@nativescript-community/text';
2-
import { dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
2+
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
33
import { createStateListAnimator, getColorStateList, getHorizontalGravity, getLayout, getVerticalGravity, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
44
import {
55
Background,
@@ -87,8 +87,13 @@ export class Button extends ButtonBase {
8787
// (<any>nativeView).clickListener = clickListener;
8888
// }
8989
[rippleColorProperty.setNative](value: Color) {
90-
const color = !value || value instanceof Color ? value : new Color(value);
91-
this.nativeViewProtected.setRippleColor(color ? getColorStateList(color.android) : null);
90+
this.nativeViewProtected.setRippleColor(value ? getColorStateList(getRippleColor(value, this.rippleColorAlpha)) : null);
91+
}
92+
[rippleColorAlphaProperty.setNative](value: number) {
93+
const rippleColor = this.rippleColor;
94+
if (rippleColor) {
95+
this.nativeViewProtected.setRippleColor(getColorStateList(getRippleColor(rippleColor, value)));
96+
}
9297
}
9398
defaultAppearanceModel;
9499
[shapeProperty.setNative](shape: string) {

‎src/button/button.ios.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
1+
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
22
import {
33
Background,
44
Color,
@@ -225,7 +225,14 @@ export class Button extends ButtonBase {
225225
this.nativeViewProtected.uppercaseTitle = value !== 'none';
226226
}
227227
[rippleColorProperty.setNative](color: Color) {
228-
this.nativeViewProtected.inkColor = getRippleColor(color);
228+
this.nativeViewProtected.inkColor = getRippleColor(color, this.rippleColorAlpha);
229+
}
230+
231+
[rippleColorAlphaProperty.setNative](value: number) {
232+
const rippleColor = this.rippleColor;
233+
if (rippleColor) {
234+
this.nativeViewProtected.inkColor = getRippleColor(rippleColor, value);
235+
}
229236
}
230237

231238
[elevationProperty.setNative](value: number) {

‎src/cardview/cardview-common.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export abstract class CardViewBase extends ContentView {
77
@cssProperty dynamicElevationOffset: number;
88
@cssProperty rippleColor: Color;
99
@cssProperty shape: string;
10+
@cssProperty rippleColorAlpha: number;
1011
}

‎src/cardview/cardview.android.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
1+
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
22
import { createStateListAnimator, getAttrColor, getColorStateList, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
33
import { Color, Length, backgroundInternalProperty } from '@nativescript/core';
44
import { CardViewBase } from './cardview-common';
@@ -360,13 +360,13 @@ export class CardView extends CardViewBase {
360360
androidx.core.view.ViewCompat.setTranslationZ(this.nativeViewProtected, newValue);
361361
}
362362
}
363-
[rippleColorProperty.setNative](color: Color) {
364-
const rippleColor = color ? color.android : -1;
365-
// if (isPostLollipopMR1) {
366-
// (this.rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(getColorStateList(rippleColor));
367-
// } else {
368-
// this.rippleShape.getPaint().setColor(rippleColor);
369-
// }
370-
(this.nativeViewProtected as any).setRippleColor(getColorStateList(rippleColor));
363+
[rippleColorProperty.setNative](value: Color) {
364+
this.nativeViewProtected.setRippleColor(value ? getColorStateList(getRippleColor(value, this.rippleColorAlpha)) : null);
365+
}
366+
[rippleColorAlphaProperty.setNative](value: number) {
367+
const rippleColor = this.rippleColor;
368+
if (rippleColor) {
369+
this.nativeViewProtected.setRippleColor(getColorStateList(getRippleColor(rippleColor, value)));
370+
}
371371
}
372372
}

‎src/cardview/cardview.ios.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
1+
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
22
import {
33
Background,
44
Color,
@@ -188,8 +188,16 @@ export class CardView extends CardViewBase {
188188
// this.nativeViewProtected.cornerRadius = value.borderTopLeftRadius / scale;
189189
}
190190
}
191+
191192
[rippleColorProperty.setNative](color: Color) {
192-
this.nativeViewProtected.inkView.inkColor = getRippleColor(color);
193+
this.nativeViewProtected.inkView.inkColor = getRippleColor(color, this.rippleColorAlpha);
194+
}
195+
196+
[rippleColorAlphaProperty.setNative](value: number) {
197+
const rippleColor = this.rippleColor;
198+
if (rippleColor) {
199+
this.nativeViewProtected.inkView.inkColor = getRippleColor(rippleColor, value);
200+
}
193201
}
194202

195203
[shapeProperty.setNative](shape) {

‎src/core-tabs/tab-navigation-base/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
270270
// overridden by inheritors
271271
}
272272

273-
public setTabBarRippleColor(value: Color) {
273+
public setTabBarRippleColor(value: Color, alpha?:number) {
274274
// overridden by inheritors
275275
}
276276

‎src/core-tabs/tab-navigation/index.ios.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
77
import { TabStrip } from '../tab-strip';
88
import { TabStripItem } from '../tab-strip-item';
99
import { TabNavigationBase, swipeEnabledProperty } from './index-common';
10+
import { getRippleColor } from '@nativescript-community/ui-material-core';
1011

1112
export { TabContentItem, TabStrip, TabStripItem };
1213

@@ -905,9 +906,9 @@ export abstract class TabNavigation<
905906
});
906907
}
907908

908-
public setTabBarRippleColor(value: Color) {
909+
public setTabBarRippleColor(value: Color, alpha?:number) {
909910
this.mRippleColor = value;
910-
this.viewController.tabBar.rippleColor = value.ios;
911+
this.viewController.tabBar.rippleColor = getRippleColor(value, alpha);
911912
}
912913

913914
public getTabBarRippleColor(): Color {

‎src/core-tabs/tab-strip/index.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
/**
22
* @module @nativescript-community/ui-material-core-tabs/tab-strip
33
*/
4-
import { rippleColorProperty } from '@nativescript-community/ui-material-core/cssproperties';
4+
import { rippleColorAlphaProperty, rippleColorProperty } from '@nativescript-community/ui-material-core/cssproperties';
55
import { AddArrayFromBuilder, AddChildFromBuilder, CSSType, Color, CssProperty, Property, Style, View, ViewBase, booleanConverter } from '@nativescript/core';
66
import { backgroundColorProperty, backgroundInternalProperty, colorProperty, fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
77
import { textTransformProperty } from '@nativescript/core/ui/text-base';
88
import { TabNavigationBase } from '../tab-navigation-base';
99
import { TabStripItem } from '../tab-strip-item';
1010
import { TabStrip as TabStripDefinition } from '.';
11+
import { getRippleColor } from '@nativescript-community/ui-material-core/index.ios';
1112

1213
// Place this on top because the webpack ts-loader doesn't work when export
1314
// is after reference
@@ -180,8 +181,11 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
180181

181182
[rippleColorProperty.setNative](value: Color) {
182183
const parent = this.parent as TabNavigationBase;
183-
184-
return parent && parent.setTabBarRippleColor(value);
184+
return parent && parent.setTabBarRippleColor(value, this.rippleColorAlpha);
185+
}
186+
[rippleColorAlphaProperty.setNative](value: number) {
187+
const parent = this.parent as TabNavigationBase;
188+
return parent && parent.setTabBarRippleColor(this.rippleColor, value);
185189
}
186190
}
187191

‎src/core/cssproperties.ts

+6
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ export const rippleColorProperty = new CssProperty<Style, Color>({
1919
valueConverter: (v) => new Color(v)
2020
});
2121
rippleColorProperty.register(Style);
22+
export const rippleColorAlphaProperty = new CssProperty<Style, number>({
23+
name: 'rippleColorAlpha',
24+
cssName: 'ripple-color-alpha',
25+
valueConverter: parseFloat
26+
});
27+
rippleColorAlphaProperty.register(Style);
2228
export const elevationProperty = new CssProperty<Style, CoreTypes.LengthType>({
2329
name: 'elevation',
2430
cssName: 'elevation',

‎src/core/index.android.ts

+15-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Background, Button, Color, Length, PercentLength, Utils, View, androidD
22
import { ad } from '@nativescript/core/utils';
33
import { ShapeProperties } from '.';
44
import { createRippleDrawable, createStateListAnimator, getAttrColor, getColorStateList, handleClearFocus, isPostLollipop, isPostMarshmallow } from './android/utils';
5-
import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
5+
import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorAlphaProperty, rippleColorProperty } from './cssproperties';
66
import { CornerFamily, applyMixins } from './index.common';
77
export * from './cssproperties';
88
export { applyMixins };
@@ -197,10 +197,13 @@ export const themer = new Themer();
197197

198198
export function install() {}
199199

200-
export function getRippleColor(color: string | Color) {
200+
export function getRippleColor(color: string | Color, alpha = 61.5) {
201201
if (color) {
202202
const temp = color instanceof Color ? color : new Color(color);
203-
return new Color(temp.a !== 255 ? temp.a : 61.5, temp.r, temp.g, temp.b).android; // default alpha is 0.24
203+
if (temp.a !== 255) {
204+
return temp.android;
205+
}
206+
return temp.setAlpha(alpha).android;
204207
}
205208
return null;
206209
}
@@ -212,6 +215,7 @@ export function overrideViewBase() {
212215
@cssProperty elevation = 0;
213216
@cssProperty dynamicElevationOffset = 0;
214217
@cssProperty rippleColor: Color;
218+
@cssProperty rippleColorAlpha: number;
215219
rippleDrawable: android.graphics.drawable.Drawable;
216220
getRippleColor() {
217221
if (this.rippleColor) {
@@ -229,7 +233,7 @@ export function overrideViewBase() {
229233
}
230234
}
231235
[rippleColorProperty.setNative](color: Color) {
232-
const rippleColor = getRippleColor(color);
236+
const rippleColor = getRippleColor(color, this.rippleColorAlpha);
233237
const nativeViewProtected = this.nativeViewProtected;
234238
const RippleDrawable = android.graphics.drawable.RippleDrawable;
235239
if (this instanceof Button && isPostMarshmallow) {
@@ -263,6 +267,13 @@ export function overrideViewBase() {
263267
}
264268
}
265269

270+
[rippleColorAlphaProperty.setNative](value: number) {
271+
const rippleColor = this.rippleColor;
272+
if (rippleColor) {
273+
this[rippleColorProperty.setNative](rippleColor);
274+
}
275+
}
276+
266277
[backgroundInternalProperty.setNative](value: android.graphics.drawable.Drawable | Background) {
267278
if (this.nativeViewProtected) {
268279
if (value instanceof android.graphics.drawable.Drawable) {

‎src/core/index.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@ declare module '@nativescript/core/ui/core/view' {
3030
*
3131
* Gets or sets the ripple-color of the view.
3232
*/
33-
rippleColor: Color | string;
33+
rippleColor: Color;
34+
35+
/**
36+
* @nativescript-community/ui-material-core {@link installMixins}.
37+
*
38+
* Gets or sets the ripple-color alpha of the view.
39+
*/
40+
rippleColorAlpha: number;
3441
}
3542
}
3643

@@ -82,7 +89,7 @@ export * from './cssproperties';
8289

8390
export function install();
8491
export function installMixins();
85-
export function getRippleColor(color: string | Color): any;
92+
export function getRippleColor(color: string | Color, alpha?: number): any;
8693

8794
type Constructor<T = {}> = new (...args: any[]) => T;
8895
export function mixin<T1 extends Constructor, T2 extends Constructor>(mix1: T1, mix2: T2): (new (...args: any[]) => InstanceType<T1> & InstanceType<T2>) & T1 & T2;

‎src/core/index.ios.ts

+14-5
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '@nativescript/core';
1515
import { ShapeProperties, TypographyOptions } from '.';
1616
import { CornerFamily, applyMixins } from './index.common';
17-
import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
17+
import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorAlphaProperty, rippleColorProperty } from './cssproperties';
1818
export * from './cssproperties';
1919
export { applyMixins };
2020

@@ -201,11 +201,13 @@ export const themer = new Themer();
201201

202202
export function install() {}
203203

204-
export function getRippleColor(color: string | Color): UIColor {
204+
export function getRippleColor(color: string | Color, alpha = 61.5): UIColor {
205205
if (color) {
206206
const temp = color instanceof Color ? color : new Color(color);
207-
// return UIColor.colorWithRedGreenBlueAlpha(temp.r / 255, temp.g / 255, temp.b, temp.a !== 255 ? temp.a / 255 : 0.14);
208-
return new Color(temp.a !== 255 ? temp.a : 61.5, temp.r, temp.g, temp.b).ios; // default alpha is 0.24
207+
if (temp.a !== 255) {
208+
return temp.ios;
209+
}
210+
return temp.setAlpha(alpha).ios;
209211
}
210212
return null;
211213
}
@@ -216,6 +218,7 @@ export function overrideViewBase() {
216218
@cssProperty elevation: number;
217219
@cssProperty dynamicElevationOffset: number;
218220
@cssProperty rippleColor: Color;
221+
@cssProperty rippleColorAlpha: number;
219222
inkTouchController: MDCRippleTouchController;
220223
shadowLayer: MDCShadowLayer;
221224
// shadowView: UIView;
@@ -319,7 +322,13 @@ export function overrideViewBase() {
319322
}
320323
[rippleColorProperty.setNative](color: Color) {
321324
this.getOrCreateRippleController();
322-
this.inkTouchController.rippleView.rippleColor = getRippleColor(color);
325+
this.inkTouchController.rippleView.rippleColor = getRippleColor(color, this.rippleColorAlpha);
326+
}
327+
[rippleColorAlphaProperty.setNative](value: number) {
328+
const rippleColor = this.rippleColor;
329+
if (rippleColor) {
330+
this[rippleColorProperty.setNative](rippleColor);
331+
}
323332
}
324333

325334
startElevationStateChangeHandler() {

‎src/floatingactionbutton/floatingactionbutton.android.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
1+
import { dynamicElevationOffsetProperty, elevationProperty, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
22
import { createStateListAnimator, getColorStateList, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
33
import { Background, Color, ImageSource, Length, backgroundInternalProperty, colorProperty } from '@nativescript/core';
44
import { textProperty } from '@nativescript/core/ui/text-base';
55
import { FloatingActionButtonBase, expandedProperty, imageSourceProperty, sizeProperty, srcProperty } from './floatingactionbutton-common';
6+
import { getRippleColor } from '@nativescript-community/ui-material-core/index.android';
67

78
let MDCFabButton: typeof com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
89

@@ -98,12 +99,12 @@ export class FloatingActionButton extends FloatingActionButtonBase {
9899
this.nativeViewProtected.setIconTint(getColorStateList(color.android));
99100
}
100101
[rippleColorProperty.setNative](value: Color) {
101-
const color = !value || value instanceof Color ? value : new Color(value);
102-
this.nativeViewProtected.setRippleColor(getColorStateList(color.android));
102+
this.nativeViewProtected.setRippleColor(value? getColorStateList(getRippleColor(value, this.rippleColorAlpha)): null);
103103
}
104-
[rippleColorProperty.setNative](value: Color) {
105-
const color = !value || value instanceof Color ? value : new Color(value);
106-
this.nativeViewProtected.setRippleColor(getColorStateList(color.android));
104+
[rippleColorAlphaProperty.setNative](value: number) {
105+
if (this.rippleColor) {
106+
this[rippleColorProperty.setNative](this.rippleColor);
107+
}
107108
}
108109
[expandedProperty.setNative](value: boolean) {
109110
if (value) {

‎src/floatingactionbutton/floatingactionbutton.ios.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
1+
import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
22
import { Color, ImageSource, borderBottomLeftRadiusProperty, borderBottomRightRadiusProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, colorProperty } from '@nativescript/core';
33
import { textProperty } from '@nativescript/core/ui/text-base';
44
import { FloatingActionButtonBase, expandedProperty, imageSourceProperty, srcProperty } from './floatingactionbutton-common';
@@ -134,7 +134,12 @@ export class FloatingActionButton extends FloatingActionButtonBase {
134134
this.nativeViewProtected.tintColor = value.ios;
135135
}
136136
[rippleColorProperty.setNative](color: Color) {
137-
this.nativeViewProtected.inkColor = getRippleColor(color);
137+
this.nativeViewProtected.inkColor = getRippleColor(color, this.rippleColorAlpha);
138+
}
139+
[rippleColorAlphaProperty.setNative](value: number) {
140+
if (this.rippleColor) {
141+
this[rippleColorProperty.setNative](this.rippleColor);
142+
}
138143
}
139144
[textProperty.setNative](value: string) {
140145
this.nativeViewProtected.setTitleForState(value, UIControlState.Normal);

‎src/ripple/ripple.android.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getRippleColor, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
1+
import { getRippleColor, rippleColorAlphaProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
22
import { createRippleDrawable, getColorStateList, isPostLollipopMR1, isPostMarshmallow } from '@nativescript-community/ui-material-core/android/utils';
33
import { Background, Color, Length, backgroundInternalProperty } from '@nativescript/core';
44
import { RippleBase } from './ripple-common';
@@ -231,13 +231,19 @@ export class Ripple extends RippleBase {
231231
Length.toDevicePixels(this.style.borderBottomLeftRadius)
232232
);
233233
} else {
234+
const nColor = getRippleColor(color, this.rippleColorAlpha)
234235
if (isPostLollipopMR1) {
235-
(this.rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(getColorStateList(color.android));
236+
(this.rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(color?getColorStateList(nColor):null);
236237
} else {
237-
(this.rippleDrawable as any).rippleShape.getPaint().setColor(getRippleColor(color));
238+
(this.rippleDrawable as any).rippleShape.getPaint().setColor(nColor);
238239
}
239240
}
240241
}
242+
[rippleColorAlphaProperty.setNative](value: number) {
243+
if (this.rippleColor) {
244+
this[rippleColorProperty.setNative](this.rippleColor);
245+
}
246+
}
241247

242248
[backgroundInternalProperty.setNative](value: android.graphics.drawable.Drawable | Background) {
243249
super[backgroundInternalProperty.setNative](value);

0 commit comments

Comments
 (0)