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 definition = require("ui/styling/background");
import cssValue = require("css-value"); import cssValue = require("css-value");
import utils = require("utils/utils"); 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; var types: typeof typesModule;
function ensureTypes() { function ensureTypes() {
if (!types) { if (!types) {
@ -28,6 +29,7 @@ export class Background implements definition.Background {
repeat: string; repeat: string;
position: string; position: string;
size: string; size: string;
// The ones below are used on Android only
borderWidth: number = 0; borderWidth: number = 0;
borderColor: colorModule.Color; borderColor: colorModule.Color;
borderRadius: number = 0; borderRadius: number = 0;
@ -250,11 +252,17 @@ export class Background implements definition.Background {
public isEmpty(): boolean { public isEmpty(): boolean {
ensureTypes(); ensureTypes();
return types.isNullOrUndefined(this.image) if (isAndroid){
&& types.isNullOrUndefined(this.color) return types.isNullOrUndefined(this.image)
&& !this.borderWidth && types.isNullOrUndefined(this.color)
&& !this.borderRadius && !this.borderWidth
&& !this.clipPath; && !this.borderRadius
&& !this.clipPath;
}
else {
return types.isNullOrUndefined(this.image)
&& types.isNullOrUndefined(this.color);
}
} }
public static equals(value1: Background, value2: Background): boolean { public static equals(value1: Background, value2: Background): boolean {
@ -268,15 +276,29 @@ export class Background implements definition.Background {
return false; return false;
} }
return value1.image === value2.image if (isAndroid){
&& value1.position === value2.position return value1.image === value2.image
&& value1.repeat === value2.repeat && value1.position === value2.position
&& value1.size === value2.size && value1.repeat === value2.repeat
&& colorModule.Color.equals(value1.color, value2.color) && value1.size === value2.size
&& value1.borderWidth === value2.borderWidth && colorModule.Color.equals(value1.color, value2.color)
&& colorModule.Color.equals(value1.borderColor, value2.borderColor) && value1.borderWidth === value2.borderWidth
&& value1.borderRadius === value2.borderRadius && colorModule.Color.equals(value1.borderColor, value2.borderColor)
&& value1.clipPath === value2.clipPath; && 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(); ensureLazyRequires();
let clipPath = v.style._getValue(style.clipPathProperty); let background = <common.Background>v.style._getValue(style.backgroundInternalProperty);
let background = <background.Background>v.style._getValue(style.backgroundInternalProperty);
let borderWidth = v.borderWidth;
let backgroundDrawable = nativeView.getBackground(); let backgroundDrawable = nativeView.getBackground();
let density = utils.layout.getDisplayDensity(); let density = utils.layout.getDisplayDensity();
let cache = <CacheLayerType>v._nativeView; let cache = <CacheLayerType>v._nativeView;
if (v instanceof button.Button && !types.isNullOrUndefined(backgroundDrawable) && types.isFunction(backgroundDrawable.setColorFilter) && if (v instanceof button.Button
v.borderWidth === 0 && v.borderRadius === 0 && !clipPath && && !types.isNullOrUndefined(backgroundDrawable)
types.isNullOrUndefined(v.style._getValue(style.backgroundImageProperty)) && && types.isFunction(backgroundDrawable.setColorFilter)
!types.isNullOrUndefined(v.style._getValue(style.backgroundColorProperty))) { && background.borderWidth === 0
let backgroundColor = (<any>backgroundDrawable).backgroundColor = v.style._getValue(style.backgroundColorProperty).android; && 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); backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
(<any>backgroundDrawable).backgroundColor = backgroundColor; (<any>backgroundDrawable).backgroundColor = backgroundColor;
} }
else if (v.borderWidth || v.borderRadius || clipPath || !background.isEmpty()) { else if (!background.isEmpty()) {
if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) { if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
let viewClass = types.getClass(v); let viewClass = types.getClass(v);
if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) { if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) {
@ -73,7 +75,7 @@ export module ad {
refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable); 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: // Switch to software because of unsupported canvas methods if hardware acceleration is on:
// http://developer.android.com/guide/topics/graphics/hardware-accel.html // http://developer.android.com/guide/topics/graphics/hardware-accel.html
cache.layerType = cache.getLayerType(); cache.layerType = cache.getLayerType();
@ -100,10 +102,10 @@ export module ad {
} }
nativeView.setPadding( nativeView.setPadding(
Math.round((borderWidth + v.style.paddingLeft) * density), Math.round((background.borderWidth + v.style.paddingLeft) * density),
Math.round((borderWidth + v.style.paddingTop) * density), Math.round((background.borderWidth + v.style.paddingTop) * density),
Math.round((borderWidth + v.style.paddingRight) * density), Math.round((background.borderWidth + v.style.paddingRight) * density),
Math.round((borderWidth + v.style.paddingBottom) * 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) { function onBorderWidthPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object; if (platform.isAndroid){
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty); var style = <Style>data.object;
if (data.newValue !== currentBackground.borderWidth) { var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue)); if (data.newValue !== currentBackground.borderWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
}
} }
} }
function onBorderColorPropertyChanged(data: PropertyChangeData) { function onBorderColorPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object; if (platform.isAndroid){
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty); var style = <Style>data.object;
if (data.newValue !== currentBackground.borderColor) { var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue)); if (data.newValue !== currentBackground.borderColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
}
} }
} }
function onBorderRadiusPropertyChanged(data: PropertyChangeData) { function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object; if (platform.isAndroid){
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty); var style = <Style>data.object;
if (data.newValue !== currentBackground.borderRadius) { var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue)); if (data.newValue !== currentBackground.borderRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
}
} }
} }
function onClipPathPropertyChanged(data: PropertyChangeData) { function onClipPathPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object; if (platform.isAndroid){
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty); var style = <Style>data.object;
if (data.newValue !== currentBackground.clipPath) { var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue)); if (data.newValue !== currentBackground.clipPath) {
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
}
} }
} }