Skip to content

Commit 2cff891

Browse files
hamorphishamorphis
committed
Background borderWidth, borderColor, borderRadius and clipPath are now used on Android only and ignored on iOS
Related to NativeScript#2318
1 parent ad05f55 commit 2cff891

File tree

3 files changed

+77
-45
lines changed

3 files changed

+77
-45
lines changed

‎tns-core-modules/ui/styling/background-common.ts‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import enums = require("ui/enums");
44
import definition = require("ui/styling/background");
55
import cssValue = require("css-value");
66
import utils = require("utils/utils");
7-
import * as typesModule from "utils/types";
7+
import { isAndroid } from "platform";
88

9+
import * as typesModule from "utils/types";
910
var types: typeof typesModule;
1011
function ensureTypes() {
1112
if (!types) {
@@ -28,6 +29,7 @@ export class Background implements definition.Background {
2829
repeat: string;
2930
position: string;
3031
size: string;
32+
// The ones below are used on Android only
3133
borderWidth: number = 0;
3234
borderColor: colorModule.Color;
3335
borderRadius: number = 0;
@@ -250,11 +252,17 @@ export class Background implements definition.Background {
250252
public isEmpty(): boolean {
251253
ensureTypes();
252254

253-
return types.isNullOrUndefined(this.image)
254-
&& types.isNullOrUndefined(this.color)
255-
&& !this.borderWidth
256-
&& !this.borderRadius
257-
&& !this.clipPath;
255+
if (isAndroid){
256+
return types.isNullOrUndefined(this.image)
257+
&& types.isNullOrUndefined(this.color)
258+
&& !this.borderWidth
259+
&& !this.borderRadius
260+
&& !this.clipPath;
261+
}
262+
else {
263+
return types.isNullOrUndefined(this.image)
264+
&& types.isNullOrUndefined(this.color);
265+
}
258266
}
259267

260268
public static equals(value1: Background, value2: Background): boolean {
@@ -268,15 +276,29 @@ export class Background implements definition.Background {
268276
return false;
269277
}
270278

271-
return value1.image === value2.image
272-
&& value1.position === value2.position
273-
&& value1.repeat === value2.repeat
274-
&& value1.size === value2.size
275-
&& colorModule.Color.equals(value1.color, value2.color)
276-
&& value1.borderWidth === value2.borderWidth
277-
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
278-
&& value1.borderRadius === value2.borderRadius
279-
&& value1.clipPath === value2.clipPath;
279+
if (isAndroid){
280+
return value1.image === value2.image
281+
&& value1.position === value2.position
282+
&& value1.repeat === value2.repeat
283+
&& value1.size === value2.size
284+
&& colorModule.Color.equals(value1.color, value2.color)
285+
&& value1.borderWidth === value2.borderWidth
286+
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
287+
&& value1.borderRadius === value2.borderRadius
288+
&& value1.clipPath === value2.clipPath;
289+
}
290+
else {
291+
return value1.image === value2.image
292+
&& value1.position === value2.position
293+
&& value1.repeat === value2.repeat
294+
&& value1.size === value2.size
295+
&& colorModule.Color.equals(value1.color, value2.color);
296+
}
297+
298+
}
299+
300+
public toString(): string {
301+
return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderWidth: ${this.borderWidth}; borderColor: ${this.borderColor}; borderRadius: ${this.borderRadius}; clipPath: ${this.clipPath};`;
280302
}
281303
}
282304

‎tns-core-modules/ui/styling/background.android.ts‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,23 @@ export module ad {
4444

4545
ensureLazyRequires();
4646

47-
let clipPath = v.style._getValue(style.clipPathProperty);
48-
let background = <background.Background>v.style._getValue(style.backgroundInternalProperty);
49-
let borderWidth = v.borderWidth;
47+
let background = <common.Background>v.style._getValue(style.backgroundInternalProperty);
5048
let backgroundDrawable = nativeView.getBackground();
5149
let density = utils.layout.getDisplayDensity();
5250
let cache = <CacheLayerType>v._nativeView;
53-
if (v instanceof button.Button && !types.isNullOrUndefined(backgroundDrawable) && types.isFunction(backgroundDrawable.setColorFilter) &&
54-
v.borderWidth === 0 && v.borderRadius === 0 && !clipPath &&
55-
types.isNullOrUndefined(v.style._getValue(style.backgroundImageProperty)) &&
56-
!types.isNullOrUndefined(v.style._getValue(style.backgroundColorProperty))) {
57-
let backgroundColor = (<any>backgroundDrawable).backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
51+
if (v instanceof button.Button
52+
&& !types.isNullOrUndefined(backgroundDrawable)
53+
&& types.isFunction(backgroundDrawable.setColorFilter)
54+
&& background.borderWidth === 0
55+
&& background.borderRadius === 0
56+
&& !background.clipPath
57+
&& types.isNullOrUndefined(background.image)
58+
&& !types.isNullOrUndefined(background.color)) {
59+
let backgroundColor = (<any>backgroundDrawable).backgroundColor = background.color.android;
5860
backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
5961
(<any>backgroundDrawable).backgroundColor = backgroundColor;
6062
}
61-
else if (v.borderWidth || v.borderRadius || clipPath || !background.isEmpty()) {
63+
else if (!background.isEmpty()) {
6264
if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
6365
let viewClass = types.getClass(v);
6466
if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) {
@@ -73,7 +75,7 @@ export module ad {
7375
refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
7476
}
7577

76-
if ((v.borderWidth || v.borderRadius || clipPath) && getSDK() < 18) {
78+
if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
7779
// Switch to software because of unsupported canvas methods if hardware acceleration is on:
7880
// http://developer.android.com/guide/topics/graphics/hardware-accel.html
7981
cache.layerType = cache.getLayerType();
@@ -100,10 +102,10 @@ export module ad {
100102
}
101103

102104
nativeView.setPadding(
103-
Math.round((borderWidth + v.style.paddingLeft) * density),
104-
Math.round((borderWidth + v.style.paddingTop) * density),
105-
Math.round((borderWidth + v.style.paddingRight) * density),
106-
Math.round((borderWidth + v.style.paddingBottom) * density)
105+
Math.round((background.borderWidth + v.style.paddingLeft) * density),
106+
Math.round((background.borderWidth + v.style.paddingTop) * density),
107+
Math.round((background.borderWidth + v.style.paddingRight) * density),
108+
Math.round((background.borderWidth + v.style.paddingBottom) * density)
107109
);
108110
}
109111
}

‎tns-core-modules/ui/styling/style.ts‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -351,34 +351,42 @@ function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
351351
}
352352

353353
function onBorderWidthPropertyChanged(data: PropertyChangeData) {
354-
var style = <Style>data.object;
355-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
356-
if (data.newValue !== currentBackground.borderWidth) {
357-
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
354+
if (platform.isAndroid){
355+
var style = <Style>data.object;
356+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
357+
if (data.newValue !== currentBackground.borderWidth) {
358+
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
359+
}
358360
}
359361
}
360362

361363
function onBorderColorPropertyChanged(data: PropertyChangeData) {
362-
var style = <Style>data.object;
363-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
364-
if (data.newValue !== currentBackground.borderColor) {
365-
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
364+
if (platform.isAndroid){
365+
var style = <Style>data.object;
366+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
367+
if (data.newValue !== currentBackground.borderColor) {
368+
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
369+
}
366370
}
367371
}
368372

369373
function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
370-
var style = <Style>data.object;
371-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
372-
if (data.newValue !== currentBackground.borderRadius) {
373-
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
374+
if (platform.isAndroid){
375+
var style = <Style>data.object;
376+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
377+
if (data.newValue !== currentBackground.borderRadius) {
378+
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
379+
}
374380
}
375381
}
376382

377383
function onClipPathPropertyChanged(data: PropertyChangeData) {
378-
var style = <Style>data.object;
379-
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
380-
if (data.newValue !== currentBackground.clipPath) {
381-
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
384+
if (platform.isAndroid){
385+
var style = <Style>data.object;
386+
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
387+
if (data.newValue !== currentBackground.clipPath) {
388+
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
389+
}
382390
}
383391
}
384392

0 commit comments

Comments
 (0)