javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Background borderWidth, borderColor, borderRadius and clipPath are now used on Android only and ignored on iOS

Browse Source 
Related to #2318
This commit is contained in:
Rossen Hristov
2016-06-30 16:15:56 +03:00
parent ad05f55dc0
commit 2cff891ca0
3 changed files with 77 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
tns-core-modules/ui/styling/background-common.ts
View File

@ -4,8 +4,9 @@ import enums = require("ui/enums");
import definition = require("ui/styling/background");
import cssValue = require("css-value");
import utils = require("utils/utils");
import * as typesModule from "utils/types";
import { isAndroid } from "platform";
import * as typesModule from "utils/types";
var types: typeof typesModule;
function ensureTypes() {
if (!types) {
@ -28,6 +29,7 @@ export class Background implements definition.Background {
repeat: string;
position: string;
size: string;
// The ones below are used on Android only
borderWidth: number = 0;
borderColor: colorModule.Color;
borderRadius: number = 0;
@ -250,11 +252,17 @@ export class Background implements definition.Background {
public isEmpty(): boolean {
ensureTypes();
return types.isNullOrUndefined(this.image)
&& types.isNullOrUndefined(this.color)
&& !this.borderWidth
&& !this.borderRadius
&& !this.clipPath;
if (isAndroid){
return types.isNullOrUndefined(this.image)
&& types.isNullOrUndefined(this.color)
&& !this.borderWidth
&& !this.borderRadius
&& !this.clipPath;
}
else {
return types.isNullOrUndefined(this.image)
&& types.isNullOrUndefined(this.color);
}
}
public static equals(value1: Background, value2: Background): boolean {
@ -268,15 +276,29 @@ export class Background implements definition.Background {
return false;
}
return value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.color, value2.color)
&& value1.borderWidth === value2.borderWidth
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
&& value1.borderRadius === value2.borderRadius
&& value1.clipPath === value2.clipPath;
if (isAndroid){
return value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.color, value2.color)
&& value1.borderWidth === value2.borderWidth
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
&& value1.borderRadius === value2.borderRadius
&& value1.clipPath === value2.clipPath;
}
else {
return value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.color, value2.color);
}
}
public toString(): string {
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};`;
}
}

30
tns-core-modules/ui/styling/background.android.ts
View File

@ -44,21 +44,23 @@ export module ad {
ensureLazyRequires();
let clipPath = v.style._getValue(style.clipPathProperty);
let background = <background.Background>v.style._getValue(style.backgroundInternalProperty);
let borderWidth = v.borderWidth;
let background = <common.Background>v.style._getValue(style.backgroundInternalProperty);
let backgroundDrawable = nativeView.getBackground();
let density = utils.layout.getDisplayDensity();
let cache = <CacheLayerType>v._nativeView;
if (v instanceof button.Button && !types.isNullOrUndefined(backgroundDrawable) && types.isFunction(backgroundDrawable.setColorFilter) &&
v.borderWidth === 0 && v.borderRadius === 0 && !clipPath &&
types.isNullOrUndefined(v.style._getValue(style.backgroundImageProperty)) &&
!types.isNullOrUndefined(v.style._getValue(style.backgroundColorProperty))) {
let backgroundColor = (<any>backgroundDrawable).backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
if (v instanceof button.Button
&& !types.isNullOrUndefined(backgroundDrawable)
&& types.isFunction(backgroundDrawable.setColorFilter)
&& background.borderWidth === 0
&& background.borderRadius === 0
&& !background.clipPath
&& types.isNullOrUndefined(background.image)
&& !types.isNullOrUndefined(background.color)) {
let backgroundColor = (<any>backgroundDrawable).backgroundColor = background.color.android;
backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
(<any>backgroundDrawable).backgroundColor = backgroundColor;
}
else if (v.borderWidth || v.borderRadius || clipPath || !background.isEmpty()) {
else if (!background.isEmpty()) {
if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
let viewClass = types.getClass(v);
if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) {
@ -73,7 +75,7 @@ export module ad {
refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
}
if ((v.borderWidth || v.borderRadius || clipPath) && getSDK() < 18) {
if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
// Switch to software because of unsupported canvas methods if hardware acceleration is on:
// http://developer.android.com/guide/topics/graphics/hardware-accel.html
cache.layerType = cache.getLayerType();
@ -100,10 +102,10 @@ export module ad {
}
nativeView.setPadding(
Math.round((borderWidth + v.style.paddingLeft) * density),
Math.round((borderWidth + v.style.paddingTop) * density),
Math.round((borderWidth + v.style.paddingRight) * density),
Math.round((borderWidth + v.style.paddingBottom) * density)
Math.round((background.borderWidth + v.style.paddingLeft) * density),
Math.round((background.borderWidth + v.style.paddingTop) * density),
Math.round((background.borderWidth + v.style.paddingRight) * density),
Math.round((background.borderWidth + v.style.paddingBottom) * density)
);
}
}

40
tns-core-modules/ui/styling/style.ts
View File

@ -351,34 +351,42 @@ function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
}
function onBorderWidthPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
if (platform.isAndroid){
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
}
}
}
function onBorderColorPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
if (platform.isAndroid){
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
}
}
}
function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
if (platform.isAndroid){
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
}
}
}
function onClipPathPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.clipPath) {
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
if (platform.isAndroid){
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.clipPath) {
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
}
}
}