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

Merge pull request #2743 from NativeScript/borders

Browse Source 
Non-uniform borders
This commit is contained in:
Rossen Hristov
2016-09-17 15:02:53 +03:00
committed by GitHub
parent 4aee2c05eb 2d7bbd74dc
commit f2db7cc193
58 changed files with 2644 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/.vscode/launch.json vendored
View File

@@ -2,17 +2,30 @@
"version": "0.2.0",
"configurations": [
{
"name": "Launch on iOS Device",
"name": "Sync on iOS",
"type": "nativescript",
"platform": "ios",
"request": "launch",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": false
"emulator": false,
"rebuild": false,
"syncAllFiles": true
},
{
"name": "Attach on iOS Device",
"name": "Launch on iOS",
"type": "nativescript",
"platform": "ios",
"request": "launch",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": false,
"rebuild": true
},
{
"name": "Attach on iOS",
"type": "nativescript",
"platform": "ios",
"request": "attach",
@@ -22,47 +35,30 @@
"emulator": false
},
{
"name": "Launch on iOS Emulator",
"type": "nativescript",
"platform": "ios",
"request": "launch",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": true
},
{
"name": "Attach on iOS Emulator",
"type": "nativescript",
"platform": "ios",
"request": "attach",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": true
},
{
"name": "Launch on Android Device",
"name": "Sync on Android",
"type": "nativescript",
"platform": "android",
"request": "launch",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": false
"emulator": false,
"rebuild": false,
"syncAllFiles": true
},
{
"name": "Launch on Android Emulator",
"name": "Launch on Android",
"type": "nativescript",
"platform": "android",
"request": "launch",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": true
"emulator": false,
"rebuild": true
},
{
"name": "Attach on Android Device",
"name": "Attach on Android",
"type": "nativescript",
"platform": "android",
"request": "attach",
@@ -70,16 +66,6 @@
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": false
},
{
"name": "Attach on Android Emulator",
"type": "nativescript",
"platform": "android",
"request": "attach",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"diagnosticLogging": false,
"emulator": true
}
]
}

13
apps/app/ui-tests-app/css/border-playground.css Normal file
View File

@@ -0,0 +1,13 @@
StackLayout {
background-color: lightgray;
}
Button {
font-size: 8;
width: 70;
height: 40;
}
TextView {
font-size: 8;
}

39
apps/app/ui-tests-app/css/border-playground.ts Normal file
View File

@@ -0,0 +1,39 @@
import { EventData } from "data/observable";
import { View } from "ui/core/view";
import { Button } from "ui/button";
import { Color } from "color";
import { TextView } from "ui/text-view";
import { ScrollView } from "ui/scroll-view";
let red = new Color("red");
let green = new Color("green");
export function onToggle(args: EventData){
let button = <Button>args.object;
let target = button.page.getViewById<View>("target");
let debugConsole = button.page.getViewById<TextView>("debugConsole");
let scrollView = button.page.getViewById<ScrollView>("scrollView");
if (button.text === "Color"){
target[button.id] = target[button.id] ? undefined : red;
debugConsole.text += `> border-color: ${target.borderColor}\n`;
}
else if (button.text === "Width"){
target[button.id] = target[button.id] ? 0 : 10;
debugConsole.text += `> border-width: ${target.borderWidth}\n`;
}
else if (button.text === "Radius"){
target[button.id] = target[button.id] ? 0 : 10;
debugConsole.text += `> border-radius: ${target.borderRadius}\n`;
}
else if (button.text === "BGColor"){
target.backgroundColor = target.backgroundColor ? undefined : green;
debugConsole.text += `> background-color: ${target.backgroundColor}\n`;
}
else if (button.text === "BGImage"){
target.backgroundImage = target.backgroundImage ? undefined : `~/ui-tests-app/pages/test2.png`;
debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
}
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
}

39
apps/app/ui-tests-app/css/border-playground.xml Normal file
View File

@@ -0,0 +1,39 @@
<Page>
<GridLayout rows="*,*,*,auto" columns="*,*,*">
<StackLayout id="top-left" class="button-container" row="0" col="0">
<Button text="Radius" id="borderTopLeftRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="top" class="button-container" row="0" col="1">
<Button text="Color" id="borderTopColor" tap="onToggle"/>
<Button text="Width" id="borderTopWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="top-right" class="button-container" row="0" col="2">
<Button text="Radius" id="borderTopRightRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="left" class="button-container" row="1" col="0">
<Button text="Color" id="borderLeftColor" tap="onToggle"/>
<Button text="Width" id="borderLeftWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="target" row="1" col="1">
<Button text="BGColor" tap="onToggle"/>
<Button text="BGImage" tap="onToggle"/>
</StackLayout>
<StackLayout id="right" class="button-container" row="1" col="2">
<Button text="Color" id="borderRightColor" tap="onToggle"/>
<Button text="Width" id="borderRightWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom-left" class="button-container" row="2" col="0">
<Button text="Radius" id="borderBottomLeftRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom" class="button-container" row="2" col="1">
<Button text="Color" id="borderBottomColor" tap="onToggle"/>
<Button text="Width" id="borderBottomWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom-right" class="button-container" row="2" col="2">
<Button text="Radius" id="borderBottomRightRadius" tap="onToggle"/>
</StackLayout>
<ScrollView id="scrollView" row="3" col="0" colSpan="3" height="200">
<TextView id="debugConsole" text=""/>
</ScrollView>
</GridLayout>
</Page>

78
apps/app/ui-tests-app/css/button-border.css Normal file
View File

@@ -0,0 +1,78 @@
Button {
font-size: 6;
width: 80;
height: 80;
color: black;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/button-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Button id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<Button id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<Button id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<Button id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<Button id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<Button id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<Button id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<Button id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<Button id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<Button id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<Button id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<Button id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<Button id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<Button id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<Button id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<Button id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<Button id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<Button id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

77
apps/app/ui-tests-app/css/image-border.css Normal file
View File

@@ -0,0 +1,77 @@
Image {
width: 80;
height: 80;
background-color: cyan;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/image-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Image id="s0" row="0" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s1" row="0" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s2" row="0" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s3" row="1" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s4" row="1" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s5" row="1" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s6" row="2" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s7" row="2" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s8" row="2" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s9" row="3" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s10" row="3" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s11" row="3" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s12" row="4" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s13" row="4" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s14" row="4" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s15" row="5" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s16" row="5" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s17" row="5" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
</GridLayout>
</Page>

77
apps/app/ui-tests-app/css/label-border.css Normal file
View File

@@ -0,0 +1,77 @@
Label {
font-size: 6;
width: 80;
height: 80;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/label-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Label id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<Label id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<Label id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<Label id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<Label id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<Label id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<Label id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<Label id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<Label id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<Label id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<Label id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<Label id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<Label id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<Label id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<Label id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<Label id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<Label id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<Label id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

80
apps/app/ui-tests-app/css/layout-border.css Normal file
View File

@@ -0,0 +1,80 @@
StackLayout {
width: 80;
height: 80;
}
Label {
font-size: 6;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/layout-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<StackLayout id="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
<StackLayout id="s1" row="0" col="1"><Label textWrap="true" text="border-width: 5; border-color: red;"/></StackLayout>
<StackLayout id="s2" row="0" col="2"><Label textWrap="true" text="border-width: 5; border-color: red red red green;"/></StackLayout>
<StackLayout id="s3" row="1" col="0"><Label textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/></StackLayout>
<StackLayout id="s4" row="1" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/></StackLayout>
<StackLayout id="s5" row="1" col="2"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/></StackLayout>
<StackLayout id="s6" row="2" col="0"><Label textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/></StackLayout>
<StackLayout id="s7" row="2" col="1"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/></StackLayout>
<StackLayout id="s8" row="2" col="2"><Label textWrap="true" text="border-width: 5 10; border-color: red green;"/></StackLayout>
<StackLayout id="s9" row="3" col="0"><Label textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/></StackLayout>
<StackLayout id="s10" row="3" col="1"><Label textWrap="true" text="border-width: 5 0; border-color: black;"/></StackLayout>
<StackLayout id="s11" row="3" col="2"><Label textWrap="true" text="background-color: magenta;"/></StackLayout>
<StackLayout id="s12" row="4" col="0"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/></StackLayout>
<StackLayout id="s13" row="4" col="1"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/></StackLayout>
<StackLayout id="s14" row="4" col="2"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/></StackLayout>
<StackLayout id="s15" row="5" col="0"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/></StackLayout>
<StackLayout id="s16" row="5" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/></StackLayout>
<StackLayout id="s17" row="5" col="2"><Label textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/></StackLayout>
</GridLayout>
</Page>

27
apps/app/ui-tests-app/css/layouts-border-overlap.css Normal file
View File

@@ -0,0 +1,27 @@
StackLayout, AbsoluteLayout, DockLayout, GridLayout, WrapLayout {
margin: 5;
background-color: yellow;
}
#root {
background-color: white;
}
Label {
font-size: 6;
text-align: left;
vertical-align: top;
background-color: red;
}
.s0 {
border-width: 20;
}
.s1 {
padding: 20;
}
.s2 {
border-width: 20 0 0 20; border-color:black;
}

25
apps/app/ui-tests-app/css/layouts-border-overlap.xml Normal file
View File

@@ -0,0 +1,25 @@
<Page>
<GridLayout rows="*,*,*,*,*" columns="*,*,*" id="root">
<StackLayout class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
<StackLayout class="s1" row="0" col="1"><Label textWrap="true" text="padding: 5;"/></StackLayout>
<StackLayout class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></StackLayout>
<AbsoluteLayout class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 5;"/></AbsoluteLayout>
<AbsoluteLayout class="s1" row="1" col="1"><Label textWrap="true" text="padding: 5;"/></AbsoluteLayout>
<AbsoluteLayout class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></AbsoluteLayout>
<DockLayout class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 5;"/></DockLayout>
<DockLayout class="s1" row="2" col="1"><Label textWrap="true" text="padding: 5;"/></DockLayout>
<DockLayout class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></DockLayout>
<GridLayout class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 5;"/></GridLayout>
<GridLayout class="s1" row="3" col="1"><Label textWrap="true" text="padding: 5;"/></GridLayout>
<GridLayout class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></GridLayout>
<WrapLayout class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 5;"/></WrapLayout>
<WrapLayout class="s1" row="4" col="1"><Label textWrap="true" text="padding: 5;"/></WrapLayout>
<WrapLayout class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></WrapLayout>
</GridLayout>
</Page>

9
apps/app/ui-tests-app/css/main-page.ts
View File

@@ -26,6 +26,15 @@ export function pageLoaded(args: EventData) {
examples.set("padding", "css/padding");
examples.set("label-background-image", "css/label-background-image");
examples.set("transform-decoration-color", "css/transform-decoration-color");
examples.set("layout-border", "css/layout-border");
examples.set("label-border", "css/label-border");
examples.set("button-border", "css/button-border");
examples.set("text-field-border", "css/text-field-border");
examples.set("text-view-border", "css/text-view-border");
examples.set("image-border", "css/image-border");
examples.set("layouts-border-overlap", "css/layouts-border-overlap");
examples.set("measure-tests", "css/measure-tests");
//examples.set("border-playground", "css/border-playground");
let viewModel = new SubMianPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;

11
apps/app/ui-tests-app/css/measure-tests.css Normal file
View File

@@ -0,0 +1,11 @@
.c {
border-width: 5; padding: 5; border-color: magenta; background-color: cyan;
}
.c1 {
border-width: 5; border-color: red green blue yellow; background-color: white; horizontal-align: left; margin: 1;
}
.c2 {
border-width: 5; padding: 10; border-color: red green blue yellow; background-color: white; horizontal-align: left; margin: 1;
}

16
apps/app/ui-tests-app/css/measure-tests.xml Normal file
View File

@@ -0,0 +1,16 @@
<Page>
<StackLayout class="c">
<Label text="Label" class="c1"/>
<Button text="Button" class="c1"/>
<TextField text="TextField" class="c1"/>
<TextView text="TextView" class="c1"/>
<Image src="~/ui-tests-app/image-view/gravatar2.png" class="c1" stretch="none"/>
<Label text="Label" class="c2"/>
<Button text="Button" class="c2"/>
<TextField text="TextField" class="c2"/>
<TextView text="TextView" class="c2" style.horizonhorizontalAlignmenttalAligment="left"/>
<Image src="~/ui-tests-app/image-view/gravatar2.png" class="c2" stretch="none"/>
</StackLayout>
</Page>

77
apps/app/ui-tests-app/css/text-field-border.css Normal file
View File

@@ -0,0 +1,77 @@
TextField {
font-size: 6;
width: 80;
height: 80;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/text-field-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<TextField id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<TextField id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<TextField id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<TextField id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<TextField id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<TextField id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<TextField id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<TextField id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<TextField id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<TextField id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<TextField id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<TextField id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<TextField id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<TextField id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<TextField id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<TextField id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<TextField id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<TextField id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

77
apps/app/ui-tests-app/css/text-view-border.css Normal file
View File

@@ -0,0 +1,77 @@
TextView {
font-size: 6;
width: 80;
height: 80;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 6 5 5 5; border-color: green;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/text-view-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*,">
<TextView id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<TextView id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<TextView id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<TextView id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<TextView id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<TextView id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<TextView id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<TextView id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<TextView id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<TextView id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<TextView id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<TextView id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<TextView id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<TextView id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<TextView id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<TextView id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<TextView id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<TextView id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

15
apps/app/ui-tests-app/font/button.ts
View File

@@ -14,9 +14,18 @@ export function resetStyles(args) {
v.style._resetValue(style.paddingRightProperty);
v.style._resetValue(style.paddingTopProperty);
v.style._resetValue(style.paddingBottomProperty);
v.style._resetValue(style.borderColorProperty);
v.style._resetValue(style.borderWidthProperty);
v.style._resetValue(style.borderRadiusProperty);
v.style._resetValue(style.borderTopColorProperty);
v.style._resetValue(style.borderRightColorProperty);
v.style._resetValue(style.borderBottomColorProperty);
v.style._resetValue(style.borderLeftColorProperty);
v.style._resetValue(style.borderTopWidthProperty);
v.style._resetValue(style.borderRightWidthProperty);
v.style._resetValue(style.borderBottomWidthProperty);
v.style._resetValue(style.borderLeftWidthProperty);
v.style._resetValue(style.borderTopLeftRadiusProperty);
v.style._resetValue(style.borderTopRightRadiusProperty);
v.style._resetValue(style.borderBottomRightRadiusProperty);
v.style._resetValue(style.borderBottomLeftRadiusProperty);
return true;
});
}

BIN
apps/app/ui-tests-app/image-view/gravatar2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B

2
package.json
View File

@@ -29,7 +29,7 @@
"shelljs": "^0.7.0",
"time-grunt": "1.3.0",
"tslint": "3.4.0",
"typescript": "1.8.2"
"typescript": "1.8.10"
},
"scripts": {
"tsc-tiw": "node build/tsc-dev.js tiw",

164
tests/app/ui/styling/style-properties-tests.ts
View File

@@ -178,6 +178,54 @@ export function test_horizontalAlignment_property_is_synced_in_style_and_view()
test_property_is_synced_in_style_and_view("horizontalAlignment", "right");
}
export function test_borderTopColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderTopColor", new color.Color("red"));
}
export function test_borderRightColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderRightColor", new color.Color("green"));
}
export function test_borderBottomColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderBottomColor", new color.Color("blue"));
}
export function test_borderLeftColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderLeftColor", new color.Color("yellow"));
}
export function test_borderTopWidth_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderTopWidth", 10);
}
export function test_borderRightWidth_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderRightWidth", 20);
}
export function test_borderBottomWidth_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderBottomWidth", 30);
}
export function test_borderLeftWidth_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderLeftWidth", 40);
}
export function test_borderTopLeftRadiusWidth_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderTopLeftRadius", 10);
}
export function test_borderTopRightRadius_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderTopRightRadius", 20);
}
export function test_borderBottomRightRadius_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderBottomRightRadius", 30);
}
export function test_borderBottomLeftRadius_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderBottomLeftRadius", 40);
}
export function test_marginLeft_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("marginLeft", 10);
}
@@ -364,9 +412,65 @@ export function test_setting_different_backgroundColor_triggers_property_change(
TKUnit.assert(changed, "Property changed not triggered.");
}
export function test_setting_border_color_shorthand_property_sets_all_border_colors() {
let red = new color.Color("red");
let green = new color.Color("green");
let blue = new color.Color("blue");
let yellow = new color.Color("yellow");
test_border_color_shorthand_property("red", red, red, red, red);
test_border_color_shorthand_property("red green", red, green, red, green);
test_border_color_shorthand_property("red green blue", red, green, blue, green);
test_border_color_shorthand_property("red green blue yellow", red, green, blue, yellow);
}
function test_border_color_shorthand_property(short: string, top: color.Color, right: color.Color, bottom: color.Color, left: color.Color) {
var testView = new buttonModule.Button();
testView.style.borderColor = short;
TKUnit.assertEqual(testView.style.borderTopColor, top, "top");
TKUnit.assertEqual(testView.style.borderRightColor, right, "right");
TKUnit.assertEqual(testView.style.borderBottomColor, bottom, "bottom");
TKUnit.assertEqual(testView.style.borderLeftColor, left, "left");
}
export function test_setting_border_width_shorthand_property_sets_all_border_widths() {
test_border_width_shorthand_property("10", 10, 10, 10, 10);
test_border_width_shorthand_property("10 20", 10, 20, 10, 20);
test_border_width_shorthand_property("10 20 30", 10, 20, 30, 20);
test_border_width_shorthand_property("10 20 30 40", 10, 20, 30, 40);
}
function test_border_width_shorthand_property(short: string, top: number, right: number, bottom: number, left: number) {
var testView = new buttonModule.Button();
testView.style.borderWidth = short;
TKUnit.assertEqual(testView.style.borderTopWidth, top, "top");
TKUnit.assertEqual(testView.style.borderRightWidth, right, "right");
TKUnit.assertEqual(testView.style.borderBottomWidth, bottom, "bottom");
TKUnit.assertEqual(testView.style.borderLeftWidth, left, "left");
}
export function test_setting_border_radius_shorthand_property_sets_all_border_radii() {
test_border_radius_shorthand_property("10", 10, 10, 10, 10);
test_border_radius_shorthand_property("10 20", 10, 20, 10, 20);
test_border_radius_shorthand_property("10 20 30", 10, 20, 30, 20);
test_border_radius_shorthand_property("10 20 30 40", 10, 20, 30, 40);
}
function test_border_radius_shorthand_property(short: string, topLeft: number, topRight: number, bottomRight: number, bottomLeft: number) {
var testView = new buttonModule.Button();
testView.style.borderRadius = short;
TKUnit.assertEqual(testView.style.borderTopLeftRadius, topLeft, "topLeft");
TKUnit.assertEqual(testView.style.borderTopRightRadius, topRight, "topRight");
TKUnit.assertEqual(testView.style.borderBottomRightRadius, bottomRight, "bottomRight");
TKUnit.assertEqual(testView.style.borderBottomLeftRadius, bottomLeft, "bottomLeft");
}
export function test_setting_margin_shorthand_property_sets_all_margins() {
test_margin_shorthand_property("10", 10, 10, 10, 10);
test_margin_shorthand_property("10 20", 10, 20, 10, 20);
test_margin_shorthand_property("10 20 30", 10, 20, 30, 20);
test_margin_shorthand_property("10 20 30 40", 10, 20, 30, 40);
}
@@ -383,6 +487,7 @@ function test_margin_shorthand_property(short: string, top: number, right: numbe
export function test_setting_padding_shorthand_property_sets_all_paddings() {
test_padding_shorthand_property("10", 10, 10, 10, 10);
test_padding_shorthand_property("10 20", 10, 20, 10, 20);
test_padding_shorthand_property("10 20 30", 10, 20, 30, 20);
test_padding_shorthand_property("10 20 30 40", 10, 20, 30, 40);
}
@@ -627,4 +732,61 @@ export var test_setting_button_textTransform_and_textDecoration_sets_native = fu
testView.style.textDecoration = enums.TextDecoration.underline;
executeTransformTest(testView, androidText, function (v) { return (<UIButton>v.ios).attributedTitleForState(UIControlState.Normal).string; });
}
}
export function test_border_color() {
let testView = new buttonModule.Button();
let red = new color.Color("red");
testView.style.borderColor = red;
TKUnit.assertEqual(testView.style.borderColor, red, "all");
TKUnit.assertEqual(testView.style.borderTopColor, red, "top");
TKUnit.assertEqual(testView.style.borderRightColor, red, "right");
TKUnit.assertEqual(testView.style.borderBottomColor, red, "bottom");
TKUnit.assertEqual(testView.style.borderLeftColor, red, "left");
let blue = new color.Color("blue");
let hex = blue.hex;
testView.style.borderColor = hex;
TKUnit.assertEqual(testView.style.borderColor, blue, "all");
TKUnit.assertEqual(testView.style.borderTopColor, blue, "top");
TKUnit.assertEqual(testView.style.borderRightColor, blue, "right");
TKUnit.assertEqual(testView.style.borderBottomColor, blue, "bottom");
TKUnit.assertEqual(testView.style.borderLeftColor, blue, "left");
}
export function test_border_width() {
let testView = new buttonModule.Button();
testView.style.borderWidth = 10;
TKUnit.assertEqual(testView.style.borderWidth, 10, "all");
TKUnit.assertEqual(testView.style.borderTopWidth, 10, "top");
TKUnit.assertEqual(testView.style.borderRightWidth, 10, "right");
TKUnit.assertEqual(testView.style.borderBottomWidth, 10, "bottom");
TKUnit.assertEqual(testView.style.borderLeftWidth, 10, "left");
testView.style.borderWidth = "20";
TKUnit.assertEqual(testView.style.borderWidth, 20, "all");
TKUnit.assertEqual(testView.style.borderTopWidth, 20, "top");
TKUnit.assertEqual(testView.style.borderRightWidth, 20, "right");
TKUnit.assertEqual(testView.style.borderBottomWidth, 20, "bottom");
TKUnit.assertEqual(testView.style.borderLeftWidth, 20, "left");
}
export function test_border_radius() {
let testView = new buttonModule.Button();
testView.style.borderRadius = 10;
TKUnit.assertEqual(testView.style.borderRadius, 10, "all");
TKUnit.assertEqual(testView.style.borderTopLeftRadius, 10, "top");
TKUnit.assertEqual(testView.style.borderTopRightRadius, 10, "right");
TKUnit.assertEqual(testView.style.borderBottomRightRadius, 10, "bottom");
TKUnit.assertEqual(testView.style.borderBottomLeftRadius, 10, "left");
testView.style.borderRadius = "20";
TKUnit.assertEqual(testView.style.borderRadius, 20, "all");
TKUnit.assertEqual(testView.style.borderTopLeftRadius, 20, "top");
TKUnit.assertEqual(testView.style.borderTopRightRadius, 20, "right");
TKUnit.assertEqual(testView.style.borderBottomRightRadius, 20, "bottom");
TKUnit.assertEqual(testView.style.borderBottomLeftRadius, 20, "left");
}

6
tests/app/ui/view/view-tests-common.ts
View File

@@ -660,7 +660,7 @@ export var testBorderWidth = function () {
helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
var lbl = <labelModule.Label>views[0];
var expectedValue = lbl.borderWidth;
var actualValue = definition.getNativeBorderWidth(lbl);
var actualValue = definition.getUniformNativeBorderWidth(lbl);
TKUnit.assertEqual(actualValue, expectedValue);
});
}
@@ -669,7 +669,7 @@ export var testCornerRadius = function () {
helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
var lbl = <labelModule.Label>views[0];
var expectedValue = lbl.borderRadius;
var actualValue = definition.getNativeCornerRadius(lbl);
var actualValue = definition.getUniformNativeCornerRadius(lbl);
TKUnit.assertEqual(actualValue, expectedValue);
});
}
@@ -677,7 +677,7 @@ export var testCornerRadius = function () {
export var testBorderColor = function () {
helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
var lbl = <labelModule.Label>views[0];
TKUnit.assertEqual(definition.checkNativeBorderColor(lbl), true, "BorderColor not applied correctly!");
TKUnit.assertEqual(definition.checkUniformNativeBorderColor(lbl), true, "BorderColor not applied correctly!");
});
}

20
tests/app/ui/view/view-tests.android.ts
View File

@@ -8,6 +8,7 @@ import stack = require("ui/layouts/stack-layout");
import labelModule = require("ui/label");
import frame = require("ui/frame");
import trace = require("trace");
import { Color } from "color";
// enable the trace, it is disabled by default
trace.enable();
@@ -267,22 +268,19 @@ export var test_StylePropertiesDefaultValuesCache = function () {
helper.do_PageTest_WithStackLayout_AndButton(test);
}
export function getNativeBorderWidth(v: view.View): number {
export function getUniformNativeBorderWidth(v: view.View): number {
var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
return bkg ? bkg.getBorderWidth() : -1;
return bkg ? bkg.getUniformBorderWidth() : 0;
}
export function getNativeCornerRadius(v: view.View): number {
var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
return bkg ? bkg.getBorderRadius() : -1;
}
export function checkNativeBorderColor(v: view.View): boolean {
export function checkUniformNativeBorderColor(v: view.View): boolean {
var bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
return bkg && bkg.getUniformBorderColor() === (<Color>v.borderColor).android;
}
return v.borderColor && bkg && bkg.getBorderColor() === v.borderColor.android;
export function getUniformNativeCornerRadius(v: view.View): number {
var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
return bkg ? bkg.getUniformBorderRadius() : 0
}
export function checkNativeBackgroundColor(v: view.View): boolean {

6
tests/app/ui/view/view-tests.d.ts vendored
View File

@@ -1,11 +1,11 @@
//@private
import view = require("ui/core/view");
export declare function getNativeBorderWidth(v: view.View): number;
export declare function getUniformNativeBorderWidth(v: view.View): number;
export declare function getNativeCornerRadius(v: view.View): number;
export declare function getUniformNativeCornerRadius(v: view.View): number;
export declare function checkNativeBorderColor(v: view.View): boolean
export declare function checkUniformNativeBorderColor(v: view.View): boolean
export declare function checkNativeBackgroundColor(v: view.View): boolean;

14
tests/app/ui/view/view-tests.ios.ts
View File

@@ -8,16 +8,20 @@ import button = require("ui/button");
global.moduleMerge(commonTests, exports);
export function getNativeBorderWidth(v: view.View): number {
export function getUniformNativeBorderWidth(v: view.View): number {
return (<UIView>v.ios).layer.borderWidth;
}
export function getNativeCornerRadius(v: view.View): number {
return (<UIView>v.ios).layer.cornerRadius;
export function checkUniformNativeBorderColor(v: view.View): boolean {
if (v.borderColor instanceof color.Color){
return (<UIView>v.ios).layer.borderColor === (<color.Color>v.borderColor).ios.CGColor;
}
return undefined;
}
export function checkNativeBorderColor(v: view.View): boolean {
return v.borderColor && (<UIView>v.ios).layer.borderColor === v.borderColor.ios.CGColor;
export function getUniformNativeCornerRadius(v: view.View): number {
return (<UIView>v.ios).layer.cornerRadius;
}
export function checkNativeBackgroundColor(v: view.View): boolean {

2
tests/package.json
View File

@@ -6,7 +6,7 @@
"nativescript": {
"id": "org.nativescript.tests",
"tns-ios": {
"version": "2.3.0"
"version": "2.2.1"
},
"tns-android": {
"version": "2.3.0"

4
tns-core-modules/color/color-common.ts
View File

@@ -167,6 +167,10 @@ export class Color implements definition.Color {
}
return hexStr;
}
public toString(): string {
return this.hex;
}
}
function isRgbOrRgba(value: string): boolean {

52
tns-core-modules/org.nativescript.widgets.d.ts vendored
View File

@@ -4,10 +4,23 @@
export class BorderDrawable extends android.graphics.drawable.ColorDrawable {
constructor(density: number);
public refresh(
borderWidth: number,
borderColor: number,
borderRadius: number,
borderTopColor: number,
borderRightColor: number,
borderBottomColor: number,
borderLeftColor: number,
borderTopWidth: number,
borderRightWidth: number,
borderBottomWidth: number,
borderLeftWidth: number,
borderTopLeftRadius: number,
borderTopRightRadius: number,
borderBottomRightRadius: number,
borderBottomLeftRadius: number,
clipPath: string,
backgroundColor: number,
backgroundImage: android.graphics.Bitmap,
backgroundRepeat: string,
@@ -16,15 +29,37 @@
backgroundSize: string,
backgroundSizeParsedCSSValues: native.Array<CSSValue>
);
public getBorderWidth(): number;
public getBorderColor(): number;
public getBorderRadius(): number;
public getBorderTopColor(): number;
public getBorderRightColor(): number;
public getBorderBottomColor(): number;
public getBorderLeftColor(): number;
public getUniformBorderColor(): number;
public getBorderTopWidth(): number;
public getBorderRightWidth(): number;
public getBorderBottomWidth(): number;
public getBorderLeftWidth(): number;
public getUniformBorderWidth(): number;
public getBorderTopLeftRadius(): number;
public getBorderTopRightRadius(): number;
public getBorderBottomRightRadius(): number;
public getBorderBottomLeftRadius(): number;
public getUniformBorderRadius(): number;
public getClipPath(): string;
public getBackgroundColor(): number;
public getBackgroundImage(): android.graphics.Bitmap;
public getBackgroundRepeat(): string;
public getBackgroundPosition(): string;
public getBackgroundSize(): string;
public hasUniformBorderColor(): boolean;
public hasUniformBorderWidth(): boolean;
public hasUniformBorderRadius(): boolean;
public hasUniformBorder(): boolean;
}
export class CSSValue {
@@ -183,11 +218,6 @@
export class ImageView extends android.widget.ImageView {
constructor(context: android.content.Context);
getCornerRadius(): number;
setCornerRadius(radius: number): void;
getBorderWidth(): number;
setBorderWidth(width: number): void;
}
export class TabLayout extends android.widget.HorizontalScrollView {

4
tns-core-modules/ui/border/border.d.ts vendored
View File

@@ -17,11 +17,11 @@ declare module "ui/border" {
/**
* Gets or sets the border width of the border component.
*/
borderWidth: number;
borderWidth: string | number;
/**
* Gets or sets the border color of the border component.
*/
borderColor: Color;
borderColor: string | Color;
}
}

18
tns-core-modules/ui/border/border.ts
View File

@@ -2,11 +2,15 @@
import contentView = require("ui/content-view");
import viewModule = require("ui/core/view");
import utils = require("utils/utils");
import types = require("utils/types");
@Deprecated
export class Border extends contentView.ContentView implements definition.Border {
get cornerRadius(): number {
return this.borderRadius;
if (types.isNumber(this.borderRadius)){
return <number>this.borderRadius;
}
return 0;
}
set cornerRadius(value: number) {
this.borderRadius = value;
@@ -20,7 +24,11 @@ export class Border extends contentView.ContentView implements definition.Border
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var density = utils.layout.getDisplayDensity();
var borderSize = (2 * this.borderWidth) * density;
let borderWidth = 0;
if (types.isNumber(this.borderWidth)){
borderWidth = <number>this.borderWidth;
}
var borderSize = (2 * borderWidth) * density;
var result = viewModule.View.measureChild(this, this.layoutView,
utils.layout.makeMeasureSpec(width - borderSize, widthMode),
@@ -34,7 +42,11 @@ export class Border extends contentView.ContentView implements definition.Border
public onLayout(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var borderSize = this.borderWidth * density;
let borderWidth = 0;
if (types.isNumber(this.borderWidth)){
borderWidth = <number>this.borderWidth;
}
var borderSize = borderWidth * density;
viewModule.View.layoutChild(this, this.layoutView, borderSize, borderSize, right - left - borderSize, bottom - top - borderSize);
}
}

90
tns-core-modules/ui/button/button.ios.ts
View File

@@ -165,12 +165,81 @@ export class ButtonStyler implements style.Styler {
}
}
// Borders
private static setBorderTopWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderTopWidth(view, newValue);
}
private static resetBorderTopWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderTopWidth(view, nativeValue);
}
private static setNativeBorderTopWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = view.style.paddingTop + newValue;
let left = nativeButton.contentEdgeInsets.left;
let bottom = nativeButton.contentEdgeInsets.bottom;
let right = nativeButton.contentEdgeInsets.right;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderRightWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderRightWidth(view, newValue);
}
private static resetBorderRightWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderRightWidth(view, nativeValue);
}
private static setNativeBorderRightWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = nativeButton.contentEdgeInsets.top;
let left = nativeButton.contentEdgeInsets.left;
let bottom = nativeButton.contentEdgeInsets.bottom;
let right = view.style.paddingRight + newValue;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderBottomWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderBottomWidth(view, newValue);
}
private static resetBorderBottomWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderBottomWidth(view, nativeValue);
}
private static setNativeBorderBottomWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = nativeButton.contentEdgeInsets.top;
let left = nativeButton.contentEdgeInsets.left;
let bottom = view.style.paddingBottom + newValue;
let right = nativeButton.contentEdgeInsets.right;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderLeftWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderLeftWidth(view, newValue);
}
private static resetBorderLeftWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderLeftWidth(view, nativeValue);
}
private static setNativeBorderLeftWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = nativeButton.contentEdgeInsets.top;
let left = view.style.paddingLeft + newValue;
let bottom = nativeButton.contentEdgeInsets.bottom;
let right = nativeButton.contentEdgeInsets.right;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
// Padding
private static setPaddingProperty(view: view.View, newValue: any) {
var top = newValue.top + view.borderWidth;
var left = newValue.left + view.borderWidth;
var bottom = newValue.bottom + view.borderWidth;
var right = newValue.right + view.borderWidth;
var top = newValue.top + view.borderTopWidth;
var left = newValue.left + view.borderLeftWidth;
var bottom = newValue.bottom + view.borderBottomWidth;
var right = newValue.right + view.borderRightWidth;
(<UIButton>view._nativeView).contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
@@ -230,6 +299,19 @@ export class ButtonStyler implements style.Styler {
ButtonStyler.resetTextAlignmentProperty,
ButtonStyler.getNativeTextAlignmentValue), "Button");
style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderTopWidthProperty,
ButtonStyler.resetBorderTopWidthProperty), "Button");
style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderRightWidthProperty,
ButtonStyler.resetBorderRightWidthProperty), "Button");
style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderBottomWidthProperty,
ButtonStyler.resetBorderBottomWidthProperty), "Button");
style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderLeftWidthProperty,
ButtonStyler.resetBorderLeftWidthProperty), "Button");
style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setPaddingProperty,
ButtonStyler.resetPaddingProperty), "Button");

104
tns-core-modules/ui/core/view-common.ts
View File

@@ -279,25 +279,109 @@ export class View extends ProxyObject implements definition.View {
}
// START Style property shortcuts
get borderRadius(): number {
return this.style.borderRadius;
get borderColor(): string | color.Color {
return this.style.borderColor;
}
set borderRadius(value: number) {
this.style.borderRadius = value;
set borderColor(value: string | color.Color) {
this.style.borderColor = value;
}
get borderWidth(): number {
get borderTopColor(): color.Color {
return this.style.borderTopColor;
}
set borderTopColor(value: color.Color) {
this.style.borderTopColor = value;
}
get borderRightColor(): color.Color {
return this.style.borderRightColor;
}
set borderRightColor(value: color.Color) {
this.style.borderRightColor = value;
}
get borderBottomColor(): color.Color {
return this.style.borderBottomColor;
}
set borderBottomColor(value: color.Color) {
this.style.borderBottomColor = value;
}
get borderLeftColor(): color.Color {
return this.style.borderLeftColor;
}
set borderLeftColor(value: color.Color) {
this.style.borderLeftColor = value;
}
get borderWidth(): string | number {
return this.style.borderWidth;
}
set borderWidth(value: number) {
set borderWidth(value: string | number) {
this.style.borderWidth = value;
}
get borderColor(): color.Color {
return this.style.borderColor;
get borderTopWidth(): number {
return this.style.borderTopWidth;
}
set borderColor(value: color.Color) {
this.style.borderColor = value;
set borderTopWidth(value: number) {
this.style.borderTopWidth = value;
}
get borderRightWidth(): number {
return this.style.borderRightWidth;
}
set borderRightWidth(value: number) {
this.style.borderRightWidth = value;
}
get borderBottomWidth(): number {
return this.style.borderBottomWidth;
}
set borderBottomWidth(value: number) {
this.style.borderBottomWidth = value;
}
get borderLeftWidth(): number {
return this.style.borderLeftWidth;
}
set borderLeftWidth(value: number) {
this.style.borderLeftWidth = value;
}
get borderRadius(): string | number {
return this.style.borderRadius;
}
set borderRadius(value: string | number) {
this.style.borderRadius = value;
}
get borderTopLeftRadius(): number {
return this.style.borderTopLeftRadius;
}
set borderTopLeftRadius(value: number) {
this.style.borderTopLeftRadius = value;
}
get borderTopRightRadius(): number {
return this.style.borderTopRightRadius;
}
set borderTopRightRadius(value: number) {
this.style.borderTopRightRadius = value;
}
get borderBottomRightRadius(): number {
return this.style.borderBottomRightRadius;
}
set borderBottomRightRadius(value: number) {
this.style.borderBottomRightRadius = value;
}
get borderBottomLeftRadius(): number {
return this.style.borderBottomLeftRadius;
}
set borderBottomLeftRadius(value: number) {
this.style.borderBottomLeftRadius = value;
}
get color(): color.Color {

14
tns-core-modules/ui/core/view.android.ts
View File

@@ -679,7 +679,7 @@ export class ViewStyler implements style.Styler {
private static setNativePaddingLeft(view: View, value: number): void {
let nativeView = view._nativeView;
let density = utils.layout.getDisplayDensity();
let left = (value + view.borderWidth) * density;
let left = (value + view.borderLeftWidth) * density;
let top = nativeView.getPaddingTop();
let right = nativeView.getPaddingRight();
let bottom = nativeView.getPaddingBottom();
@@ -690,7 +690,7 @@ export class ViewStyler implements style.Styler {
let nativeView = view._nativeView;
let density = utils.layout.getDisplayDensity();
let left = nativeView.getPaddingLeft();
let top = (value + view.borderWidth) * density;
let top = (value + view.borderTopWidth) * density;
let right = nativeView.getPaddingRight();
let bottom = nativeView.getPaddingBottom();
nativeView.setPadding(left, top, right, bottom);
@@ -701,7 +701,7 @@ export class ViewStyler implements style.Styler {
let density = utils.layout.getDisplayDensity();
let left = nativeView.getPaddingLeft();
let top = nativeView.getPaddingTop();
let right = (value + view.borderWidth) * density;
let right = (value + view.borderRightWidth) * density;
let bottom = nativeView.getPaddingBottom();
nativeView.setPadding(left, top, right, bottom);
}
@@ -712,7 +712,7 @@ export class ViewStyler implements style.Styler {
let left = nativeView.getPaddingLeft();
let top = nativeView.getPaddingTop();
let right = nativeView.getPaddingRight();
let bottom = (value + view.borderWidth) * density;
let bottom = (value + view.borderBottomWidth) * density;
nativeView.setPadding(left, top, right, bottom);
}
@@ -801,11 +801,9 @@ export class ViewStyler implements style.Styler {
// Use the same handler for all background/border properties
// Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
var backgroundAndBorderHandler = new style.StylePropertyChangedHandler(
style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBackgroundAndBorder,
ViewStyler.resetBackgroundAndBorder);
style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler);
ViewStyler.resetBackgroundAndBorder));
style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
ViewStyler.setNativeLayoutParamsProperty,

70
tns-core-modules/ui/core/view.d.ts vendored
View File

@@ -73,19 +73,79 @@ declare module "ui/core/view" {
*/
export class View extends proxy.ProxyObject implements ApplyXmlAttributes {
/**
* Gets or sets the corner radius of the view.
* Gets or sets the border color of the view.
*/
borderRadius: number;
borderColor: string | color.Color;
/**
* Gets or sets the top border color of the view.
*/
borderTopColor: color.Color;
/**
* Gets or sets the right border color of the view.
*/
borderRightColor: color.Color;
/**
* Gets or sets the bottom border color of the view.
*/
borderBottomColor: color.Color;
/**
* Gets or sets the left border color of the view.
*/
borderLeftColor: color.Color;
/**
* Gets or sets the border width of the view.
*/
borderWidth: number;
borderWidth: string | number;
/**
* Gets or sets the border color of the view.
* Gets or sets the top border width of the view.
*/
borderColor: color.Color;
borderTopWidth: number;
/**
* Gets or sets the right border width of the view.
*/
borderRightWidth: number;
/**
* Gets or sets the bottom border width of the view.
*/
borderBottomWidth: number;
/**
* Gets or sets the left border width of the view.
*/
borderLeftWidth: number;
/**
* Gets or sets the border radius of the view.
*/
borderRadius: string | number;
/**
* Gets or sets the top left border radius of the view.
*/
borderTopLeftRadius: number;
/**
* Gets or sets the top right border radius of the view.
*/
borderTopRightRadius: number;
/**
* Gets or sets the bottom right border radius of the view.
*/
borderBottomRightRadius: number;
/**
* Gets or sets the bottom left border radius of the view.
*/
borderBottomLeftRadius: number;
/**
* Gets or sets the automation text of the view.

120
tns-core-modules/ui/core/view.ios.ts
View File

@@ -9,13 +9,6 @@ import style = require("ui/styling/style");
import enums = require("ui/enums");
import * as backgroundModule from "ui/styling/background";
var background: typeof backgroundModule;
function ensureBackground() {
if (!background) {
background = require("ui/styling/background");
}
}
global.moduleMerge(viewCommon, exports);
function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
@@ -382,12 +375,12 @@ export class ViewStyler implements style.Styler {
private static setBackgroundInternalProperty(view: View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
ensureBackground();
var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
if (!updateSuspended) {
CATransaction.begin();
}
nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
nativeView.backgroundColor = backgroundModule.ios.createBackgroundUIColor(view);
if (!updateSuspended) {
CATransaction.commit();
}
@@ -446,68 +439,7 @@ export class ViewStyler implements style.Styler {
return nativeView.alpha = 1.0;
}
}
// Border width methods
private static setBorderWidthProperty(view: View, newValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.borderWidth = newValue;
}
}
private static resetBorderWidthProperty(view: View, nativeValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.borderWidth = nativeValue;
}
}
private static getBorderWidthProperty(view: View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.borderWidth;
}
return 0;
}
// Border color methods
private static setBorderColorProperty(view: View, newValue: any) {
if (view._nativeView instanceof UIView && newValue instanceof UIColor) {
(<UIView>view._nativeView).layer.borderColor = (<UIColor>newValue).CGColor;
}
}
private static resetBorderColorProperty(view: View, nativeValue: any) {
if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) {
(<UIView>view._nativeView).layer.borderColor = nativeValue;
}
}
private static getBorderColorProperty(view: View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.borderColor;
}
return undefined;
}
// Border radius methods
private static setBorderRadiusProperty(view: View, newValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.cornerRadius = newValue;
(<UIView>view._nativeView).clipsToBounds = true;
}
}
private static resetBorderRadiusProperty(view: View, nativeValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.cornerRadius = nativeValue;
}
}
private static getBorderRadiusProperty(view: View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.cornerRadius;
}
return 0;
}
// Rotate
private static setRotateProperty(view: View, newValue: any) {
view._updateNativeTransform();
@@ -606,40 +538,12 @@ export class ViewStyler implements style.Styler {
return view.ios.layer.zPosition;
}
// Clip-path methods
private static setClipPathProperty(view: View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
ensureBackground();
var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
if (!updateSuspended) {
CATransaction.begin();
}
nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
if (!updateSuspended) {
CATransaction.commit();
}
}
}
private static resetClipPathProperty(view: View, nativeValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
// TODO: Check how to reset.
}
}
public static registerHandlers() {
style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBackgroundInternalProperty,
ViewStyler.resetBackgroundInternalProperty,
ViewStyler.getNativeBackgroundInternalValue));
style.registerHandler(style.clipPathProperty, new style.StylePropertyChangedHandler(
ViewStyler.setClipPathProperty,
ViewStyler.resetClipPathProperty));
style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler(
ViewStyler.setVisibilityProperty,
ViewStyler.resetVisibilityProperty));
@@ -647,22 +551,6 @@ export class ViewStyler implements style.Styler {
style.registerHandler(style.opacityProperty, new style.StylePropertyChangedHandler(
ViewStyler.setOpacityProperty,
ViewStyler.resetOpacityProperty));
style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBorderWidthProperty,
ViewStyler.resetBorderWidthProperty,
ViewStyler.getBorderWidthProperty));
style.registerHandler(style.borderColorProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBorderColorProperty,
ViewStyler.resetBorderColorProperty,
ViewStyler.getBorderColorProperty));
style.registerHandler(style.borderRadiusProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBorderRadiusProperty,
ViewStyler.resetBorderRadiusProperty,
ViewStyler.getBorderRadiusProperty));
style.registerHandler(style.rotateProperty, new style.StylePropertyChangedHandler(
ViewStyler.setRotateProperty,
ViewStyler.resetRotateProperty,
@@ -695,4 +583,4 @@ export class ViewStyler implements style.Styler {
}
}
ViewStyler.registerHandlers();
ViewStyler.registerHandlers();

50
tns-core-modules/ui/image/image.android.ts
View File

@@ -4,8 +4,6 @@ import proxy = require("ui/core/proxy");
import * as enumsModule from "ui/enums";
import style = require("ui/styling/style");
import view = require("ui/core/view");
import background = require("ui/styling/background");
import utils = require("utils/utils");
global.moduleMerge(imageCommon, exports);
@@ -71,43 +69,6 @@ export class Image extends imageCommon.Image {
}
export class ImageStyler implements style.Styler {
// Corner radius
private static setBorderRadiusProperty(v: view.View, newValue: any, defaultValue?: any) {
if (!v._nativeView) {
return;
}
var val = Math.round(newValue * utils.layout.getDisplayDensity());
(<org.nativescript.widgets.ImageView>v._nativeView).setCornerRadius(val);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
private static resetBorderRadiusProperty(v: view.View, nativeValue: any) {
if (!v._nativeView) {
return;
}
(<org.nativescript.widgets.ImageView>v._nativeView).setCornerRadius(0);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
// Border width
private static setBorderWidthProperty(v: view.View, newValue: any, defaultValue?: any) {
if (!v._nativeView) {
return;
}
var val = Math.round(newValue * utils.layout.getDisplayDensity());
(<org.nativescript.widgets.ImageView>v._nativeView).setBorderWidth(val);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
private static resetBorderWidthProperty(v: view.View, nativeValue: any) {
if (!v._nativeView) {
return;
}
(<org.nativescript.widgets.ImageView>v._nativeView).setBorderWidth(0);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
// tint color
private static setTintColorProperty(view: view.View, newValue: any) {
var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
@@ -120,17 +81,6 @@ export class ImageStyler implements style.Styler {
}
public static registerHandlers() {
// Use the same handler for all background/border properties
// Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
style.registerHandler(style.borderRadiusProperty, new style.StylePropertyChangedHandler(
ImageStyler.setBorderRadiusProperty,
ImageStyler.resetBorderRadiusProperty), "Image");
style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
ImageStyler.setBorderWidthProperty,
ImageStyler.resetBorderWidthProperty), "Image");
style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
ImageStyler.setTintColorProperty,
ImageStyler.resetTintColorProperty), "Image");

132
tns-core-modules/ui/label/label.ios.ts
View File

@@ -126,28 +126,114 @@ export class LabelStyler implements style.Styler {
return undefined;
}
private static setBorderWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderWidth(view, newValue);
private static setBorderTopWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderTopWidth(view, newValue);
}
private static resetBorderWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderWidth(view, nativeValue);
private static resetBorderTopWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderTopWidth(view, nativeValue);
}
private static setNativeBorderWidth(view: View, newValue: number) {
private static setNativeBorderTopWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof UIView) {
nativeView.layer.borderWidth = newValue;
}
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = { top: newValue, left: newValue, bottom: newValue, right: newValue };
nativeView.borderThickness = {
top: newValue,
right: nativeView.borderThickness.right,
bottom: nativeView.borderThickness.bottom,
left: nativeView.borderThickness.left
};
}
}
private static getBorderWidthProperty(view: View): number {
private static getBorderTopWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof UIView) {
return nativeView.layer.borderWidth;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.top;
}
return 0;
}
private static setBorderRightWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderRightWidth(view, newValue);
}
private static resetBorderRightWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderRightWidth(view, nativeValue);
}
private static setNativeBorderRightWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = {
top: nativeView.borderThickness.top,
right: newValue,
bottom: nativeView.borderThickness.bottom,
left: nativeView.borderThickness.left
};
}
}
private static getBorderRightWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.right;
}
return 0;
}
private static setBorderBottomWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderBottomWidth(view, newValue);
}
private static resetBorderBottomWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderBottomWidth(view, nativeValue);
}
private static setNativeBorderBottomWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = {
top: nativeView.borderThickness.top,
right: nativeView.borderThickness.right,
bottom: newValue,
left: nativeView.borderThickness.left
};
}
}
private static getBorderBottomWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.bottom;
}
return 0;
}
private static setBorderLeftWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderLeftWidth(view, newValue);
}
private static resetBorderLeftWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderLeftWidth(view, nativeValue);
}
private static setNativeBorderLeftWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = {
top: nativeView.borderThickness.top,
right: nativeView.borderThickness.right,
bottom: nativeView.borderThickness.bottom,
left: newValue
};
}
}
private static getBorderLeftWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.left;
}
return 0;
}
@@ -180,10 +266,24 @@ export class LabelStyler implements style.Styler {
LabelStyler.setBackgroundInternalProperty,
LabelStyler.resetBackgroundInternalProperty,
LabelStyler.getNativeBackgroundInternalValue), "Label");
style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderWidthProperty,
LabelStyler.resetBorderWidthProperty,
LabelStyler.getBorderWidthProperty), "Label");
style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderTopWidthProperty,
LabelStyler.resetBorderTopWidthProperty,
LabelStyler.getBorderTopWidthProperty), "Label");
style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderRightWidthProperty,
LabelStyler.resetBorderRightWidthProperty,
LabelStyler.getBorderRightWidthProperty), "Label");
style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderBottomWidthProperty,
LabelStyler.resetBorderBottomWidthProperty,
LabelStyler.getBorderBottomWidthProperty), "Label");
style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderLeftWidthProperty,
LabelStyler.resetBorderLeftWidthProperty,
LabelStyler.getBorderLeftWidthProperty), "Label");
style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
LabelStyler.setPaddingProperty,
LabelStyler.resetPaddingProperty,

8
tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
View File

@@ -36,8 +36,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
measureHeight = Math.max(measureHeight, AbsoluteLayout.getTop(child) * density + childSize.measuredHeight);
});
measureWidth += (this.paddingLeft + this.paddingRight) * density;
measureHeight += (this.paddingTop + this.paddingBottom) * density;
measureWidth += (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
measureHeight += (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);
@@ -58,8 +58,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
let childWidth = child.getMeasuredWidth();
let childHeight = child.getMeasuredHeight();
let childLeft = (this.paddingLeft + AbsoluteLayout.getLeft(child)) * density;
let childTop = (this.paddingTop + AbsoluteLayout.getTop(child)) * density;
let childLeft = (this.borderLeftWidth + this.paddingLeft + AbsoluteLayout.getLeft(child)) * density;
let childTop = (this.borderTopWidth + this.paddingTop + AbsoluteLayout.getTop(child)) * density;
let childRight = childLeft + childWidth + (lp.leftMargin + lp.rightMargin) * density;
let childBottom = childTop + childHeight + (lp.topMargin + lp.bottomMargin) * density;

16
tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
View File

@@ -27,8 +27,8 @@ export class DockLayout extends common.DockLayout {
var density = utils.layout.getDisplayDensity();
var remainingWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : width - ((this.paddingLeft + this.paddingRight) * density);
var remainingHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : height - ((this.paddingTop + this.paddingBottom) * density);
var remainingWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : width - ((this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density);
var remainingHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : height - ((this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density);
var tempHeight: number = 0;
var tempWidth: number = 0;
@@ -69,8 +69,8 @@ export class DockLayout extends common.DockLayout {
}
});
measureWidth += (this.paddingLeft + this.paddingRight) * density;
measureHeight += (this.paddingTop + this.paddingBottom) * density;
measureWidth += (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
measureHeight += (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);
@@ -86,14 +86,14 @@ export class DockLayout extends common.DockLayout {
var density = utils.layout.getDisplayDensity();
var childLeft = this.paddingLeft * density;
var childTop = this.paddingTop * density;
var childLeft = (this.borderLeftWidth + this.paddingLeft) * density;
var childTop = (this.borderTopWidth + this.paddingTop) * density;
var x = childLeft;
var y = childTop;
var remainingWidth = Math.max(0, right - left - ((this.paddingLeft + this.paddingRight) * density));
var remainingHeight = Math.max(0, bottom - top - ((this.paddingTop + this.paddingBottom) * density));
var remainingWidth = Math.max(0, right - left - ((this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density));
var remainingHeight = Math.max(0, bottom - top - ((this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density));
this.eachLayoutChild((child, last) => {
let lp: CommonLayoutParams = child.style._getValue(nativeLayoutParamsProperty);

8
tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
View File

@@ -114,8 +114,8 @@ export class GridLayout extends common.GridLayout {
let heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
let density = utils.layout.getDisplayDensity();
let verticalPadding = (this.paddingTop + this.paddingBottom) * density;
let horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
let verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
let horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
let infinityWidth = widthMode === utils.layout.UNSPECIFIED;
let infinityHeight = heightMode === utils.layout.UNSPECIFIED;
@@ -159,8 +159,8 @@ export class GridLayout extends common.GridLayout {
let density = utils.layout.getDisplayDensity();
let paddingLeft = this.paddingLeft * density;
let paddingTop = this.paddingTop * density;
let paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
let paddingTop = (this.borderTopWidth + this.paddingTop) * density;
this.columnOffsets.length = 0;
this.rowOffsets.length = 0;

20
tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
View File

@@ -24,8 +24,8 @@ export class StackLayout extends common.StackLayout {
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var isVertical = this.orientation === Orientation.vertical;
var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
var verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
var horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
var measureSpec: number;
@@ -100,10 +100,10 @@ export class StackLayout extends common.StackLayout {
private layoutVertical(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var paddingLeft = this.paddingLeft * density;
var paddingRight = this.paddingRight * density;
var paddingTop = this.paddingTop * density;
var paddingBottom = this.paddingBottom * density;
var paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
var paddingRight = (this.borderRightWidth + this.paddingRight) * density;
var paddingTop = (this.borderTopWidth + this.paddingTop) * density;
var paddingBottom = (this.borderBottomWidth + this.paddingBottom) * density;
var childTop: number;
var childLeft: number = paddingLeft;
@@ -137,10 +137,10 @@ export class StackLayout extends common.StackLayout {
private layoutHorizontal(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var paddingLeft = this.paddingLeft * density;
var paddingRight = this.paddingRight * density;
var paddingTop = this.paddingTop * density;
var paddingBottom = this.paddingBottom * density;
var paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
var paddingRight = (this.borderRightWidth + this.paddingRight) * density;
var paddingTop = (this.borderTopWidth + this.paddingTop) * density;
var paddingBottom = (this.borderBottomWidth + this.paddingBottom) * density;
var childTop: number = paddingTop;
var childLeft: number;

25
tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
View File

@@ -33,8 +33,8 @@ export class WrapLayout extends common.WrapLayout {
var density = utils.layout.getDisplayDensity();
var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
var horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
var verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
var availableWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : utils.layout.getMeasureSpecSize(widthMeasureSpec) - horizontalPadding;
var availableHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : utils.layout.getMeasureSpecSize(heightMeasureSpec) - verticalPadding;
@@ -129,14 +129,19 @@ export class WrapLayout extends common.WrapLayout {
var density = utils.layout.getDisplayDensity();
var childLeft = this.paddingLeft * density;
var childTop = this.paddingTop * density;
const topPadding = (this.borderTopWidth + this.paddingTop) * density;
const leftPadding = (this.borderLeftWidth + this.paddingLeft) * density;
const bottomPadding = (this.paddingBottom + this.borderBottomWidth) * density;
const rightPadding = (this.paddingRight + this.borderRightWidth) * density;
var childLeft = leftPadding;
var childTop = topPadding;
var childrenLength: number;
if (isVertical) {
childrenLength = bottom - top - (this.paddingBottom * density);
childrenLength = bottom - top - bottomPadding;
}
else {
childrenLength = right - left - (this.paddingRight * density);
childrenLength = right - left - rightPadding;
}
var rowOrColumn = 0;
@@ -152,10 +157,10 @@ export class WrapLayout extends common.WrapLayout {
if (isVertical) {
childWidth = length;
childHeight = this.itemHeight > 0 ? this.itemHeight * density : childHeight;
let isFirst = childTop === this.paddingTop * density;
let isFirst = childTop === topPadding;
if (childTop + childHeight > childrenLength) {
// Move to top.
childTop = this.paddingTop * density;
childTop = topPadding;
if (!isFirst) {
// Move to right with current column width.
@@ -172,10 +177,10 @@ export class WrapLayout extends common.WrapLayout {
else {
childWidth = this.itemWidth > 0 ? this.itemWidth * density : childWidth;
childHeight = length;
let isFirst = childLeft === this.paddingLeft * density;
let isFirst = childLeft === leftPadding;
if (childLeft + childWidth > childrenLength) {
// Move to left.
childLeft = this.paddingLeft * density;
childLeft = leftPadding;
if (!isFirst) {
// Move to bottom with current row height.

18
tns-core-modules/ui/progress/progress.android.ts
View File

@@ -78,9 +78,21 @@ export class ProgressStyler implements style.Styler {
ProgressStyler.setBackgroundAndBorderProperty,
ProgressStyler.resetBackgroundAndBorderProperty), "Progress");
style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Progress");
}
}

18
tns-core-modules/ui/slider/slider.android.ts
View File

@@ -127,9 +127,21 @@ export class SliderStyler implements style.Styler {
SliderStyler.setBackgroundAndBorderProperty,
SliderStyler.resetBackgroundAndBorderProperty), "Slider");
style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Slider");
}
}

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

@@ -4,7 +4,6 @@ import enums = require("ui/enums");
import definition = require("ui/styling/background");
import cssValue = require("css-value");
import utils = require("utils/utils");
import { isAndroid } from "platform";
import * as typesModule from "utils/types";
var types: typeof typesModule;
@@ -22,75 +21,158 @@ interface CSSValue {
}
export class Background implements definition.Background {
public static default = new Background(undefined, undefined, undefined, undefined, undefined, 0, undefined, 0, undefined);
public static default = new Background();
public color: colorModule.Color;
public image: imageSource.ImageSource;
public repeat: string;
public position: string;
public size: string;
public borderTopColor: colorModule.Color;
public borderRightColor: colorModule.Color;
public borderBottomColor: colorModule.Color;
public borderLeftColor: colorModule.Color;
public borderTopWidth: number = 0;
public borderRightWidth: number = 0;
public borderBottomWidth: number = 0;
public borderLeftWidth: number = 0;
public borderTopLeftRadius: number = 0;
public borderTopRightRadius: number = 0;
public borderBottomLeftRadius: number = 0;
public borderBottomRightRadius: number = 0;
public clipPath: string;
color: colorModule.Color;
image: imageSource.ImageSource;
repeat: string;
position: string;
size: string;
// The ones below are used on Android only
borderWidth: number = 0;
borderColor: colorModule.Color;
borderRadius: number = 0;
clipPath: string;
constructor(
color: colorModule.Color,
image: imageSource.ImageSource,
repeat: string,
position: string,
size: string,
borderWidth: number,
borderColor: colorModule.Color,
borderRadius: number,
clipPath: string
) {
this.color = color;
this.image = image;
this.repeat = repeat;
this.position = position;
this.size = size;
this.borderWidth = borderWidth;
this.borderColor = borderColor;
this.borderRadius = borderRadius;
this.clipPath = clipPath;
private clone(): Background{
let clone = new Background();
clone.color = this.color;
clone.image = this.image;
clone.repeat = this.repeat;
clone.position = this.position;
clone.size = this.size;
clone.borderTopColor = this.borderTopColor;
clone.borderRightColor = this.borderRightColor;
clone.borderBottomColor = this.borderBottomColor;
clone.borderLeftColor = this.borderLeftColor;
clone.borderTopWidth = this.borderTopWidth;
clone.borderRightWidth = this.borderRightWidth;
clone.borderBottomWidth = this.borderBottomWidth;
clone.borderLeftWidth = this.borderLeftWidth;
clone.borderTopLeftRadius = this.borderTopLeftRadius;
clone.borderTopRightRadius = this.borderTopRightRadius;
clone.borderBottomRightRadius = this.borderBottomRightRadius;
clone.borderBottomLeftRadius = this.borderBottomLeftRadius;
clone.clipPath = this.clipPath;
return clone;
}
public withColor(value: colorModule.Color): Background {
return new Background(value, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.color = value;
return clone;
}
public withImage(value: imageSource.ImageSource): Background {
return new Background(this.color, value, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.image = value;
return clone;
}
public withRepeat(value: string): Background {
return new Background(this.color, this.image, value, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.repeat = value;
return clone;
}
public withPosition(value: string): Background {
return new Background(this.color, this.image, this.repeat, value, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.position = value;
return clone;
}
public withSize(value: string): Background {
return new Background(this.color, this.image, this.repeat, this.position, value, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.size = value;
return clone;
}
public withBorderWidth(value: number): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, value, this.borderColor, this.borderRadius, this.clipPath);
public withBorderTopColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderTopColor = value;
return clone;
}
public withBorderRightColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderRightColor = value;
return clone;
}
public withBorderBottomColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderBottomColor = value;
return clone;
}
public withBorderLeftColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderLeftColor = value;
return clone;
}
public withBorderColor(value: colorModule.Color): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, value, this.borderRadius, this.clipPath);
public withBorderTopWidth(value: number): Background {
let clone = this.clone();
clone.borderTopWidth = value;
return clone;
}
public withBorderRadius(value: number): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, value, this.clipPath);
public withBorderRightWidth(value: number): Background {
let clone = this.clone();
clone.borderRightWidth = value;
return clone;
}
public withBorderBottomWidth(value: number): Background {
let clone = this.clone();
clone.borderBottomWidth = value;
return clone;
}
public withBorderLeftWidth(value: number): Background {
let clone = this.clone();
clone.borderLeftWidth = value;
return clone;
}
public withBorderTopLeftRadius(value: number): Background {
let clone = this.clone();
clone.borderTopLeftRadius = value;
return clone;
}
public withBorderTopRightRadius(value: number): Background {
let clone = this.clone();
clone.borderTopRightRadius = value;
return clone;
}
public withBorderBottomRightRadius(value: number): Background {
let clone = this.clone();
clone.borderBottomRightRadius = value;
return clone;
}
public withBorderBottomLeftRadius(value: number): Background {
let clone = this.clone();
clone.borderBottomLeftRadius = value;
return clone;
}
public withClipPath(value: string): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, value);
let clone = this.clone();
clone.clipPath = value;
return clone;
}
public getDrawParams(width: number, height: number): definition.BackgroundDrawParams {
@@ -252,17 +334,11 @@ export class Background implements definition.Background {
public isEmpty(): boolean {
ensureTypes();
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);
}
return types.isNullOrUndefined(this.color)
&& types.isNullOrUndefined(this.image)
&& !this.hasBorderWidth()
&& !this.hasBorderRadius()
&& !this.clipPath;
}
public static equals(value1: Background, value2: Background): boolean {
@@ -276,29 +352,94 @@ export class Background implements definition.Background {
return false;
}
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);
}
return colorModule.Color.equals(value1.color, value2.color)
&& value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.borderTopColor, value2.borderTopColor)
&& colorModule.Color.equals(value1.borderRightColor, value2.borderRightColor)
&& colorModule.Color.equals(value1.borderBottomColor, value2.borderBottomColor)
&& colorModule.Color.equals(value1.borderLeftColor, value2.borderLeftColor)
&& value1.borderTopWidth === value2.borderTopWidth
&& value1.borderRightWidth === value2.borderRightWidth
&& value1.borderBottomWidth === value2.borderBottomWidth
&& value1.borderLeftWidth === value2.borderLeftWidth
&& value1.borderTopLeftRadius === value2.borderTopLeftRadius
&& value1.borderTopRightRadius === value2.borderTopRightRadius
&& value1.borderBottomRightRadius === value2.borderBottomRightRadius
&& value1.borderBottomLeftRadius === value2.borderBottomLeftRadius
&& value1.clipPath === value2.clipPath;
}
public hasBorderColor(): boolean {
return !types.isNullOrUndefined(this.borderTopColor)
|| !types.isNullOrUndefined(this.borderRightColor)
|| !types.isNullOrUndefined(this.borderBottomColor)
|| !types.isNullOrUndefined(this.borderLeftColor);
}
public hasBorderWidth(): boolean {
return this.borderTopWidth > 0
|| this.borderRightWidth > 0
|| this.borderBottomWidth > 0
|| this.borderLeftWidth > 0
}
public hasBorderRadius(): boolean {
return this.borderTopLeftRadius > 0
|| this.borderTopRightRadius > 0
|| this.borderBottomRightRadius > 0
|| this.borderBottomLeftRadius > 0
}
public hasUniformBorderColor(): boolean {
return colorModule.Color.equals(this.borderTopColor, this.borderRightColor)
&& colorModule.Color.equals(this.borderTopColor, this.borderBottomColor)
&& colorModule.Color.equals(this.borderTopColor, this.borderLeftColor);
}
public hasUniformBorderWidth(): boolean {
return this.borderTopWidth === this.borderRightWidth
&& this.borderTopWidth === this.borderBottomWidth
&& this.borderTopWidth === this.borderLeftWidth;
}
public hasUniformBorderRadius(): boolean {
return this.borderTopLeftRadius === this.borderTopRightRadius
&& this.borderTopLeftRadius === this.borderBottomRightRadius
&& this.borderTopLeftRadius === this.borderBottomLeftRadius;
}
public hasUniformBorder(): boolean {
return this.hasUniformBorderColor()
&& this.hasUniformBorderWidth()
&& this.hasUniformBorderRadius();
}
public getUniformBorderColor(): colorModule.Color {
if (this.hasUniformBorderColor()){
return this.borderTopColor;
}
return undefined;
};
public getUniformBorderWidth(): number {
if (this.hasUniformBorderWidth()){
return this.borderTopWidth;
}
return 0;
};
public getUniformBorderRadius(): number {
if (this.hasUniformBorderRadius()){
return this.borderTopLeftRadius;
}
return 0;
};
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};`;
return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderTopColor: ${this.borderTopColor}; borderRightColor: ${this.borderRightColor}; borderBottomColor: ${this.borderBottomColor}; borderLeftColor: ${this.borderLeftColor}; borderTopWidth: ${this.borderTopWidth}; borderRightWidth: ${this.borderRightWidth}; borderBottomWidth: ${this.borderBottomWidth}; borderLeftWidth: ${this.borderLeftWidth}; borderTopLeftRadius: ${this.borderTopLeftRadius}; borderTopRightRadius: ${this.borderTopRightRadius}; borderBottomRightRadius: ${this.borderBottomRightRadius}; borderBottomLeftRadius: ${this.borderBottomLeftRadius}; clipPath: ${this.clipPath};`;
}
}

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

@@ -51,8 +51,8 @@ export module ad {
if (v instanceof button.Button
&& !types.isNullOrUndefined(backgroundDrawable)
&& types.isFunction(backgroundDrawable.setColorFilter)
&& background.borderWidth === 0
&& background.borderRadius === 0
&& !background.hasBorderWidth()
&& !background.hasBorderRadius()
&& !background.clipPath
&& types.isNullOrUndefined(background.image)
&& !types.isNullOrUndefined(background.color)) {
@@ -75,7 +75,7 @@ export module ad {
refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
}
if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
if ((background.hasBorderWidth() || background.hasBorderRadius() || 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();
@@ -107,10 +107,10 @@ export module ad {
let bottomPadding = v.style.paddingBottom ? v.style.paddingBottom : nativeView.getPaddingBottom() / density;
nativeView.setPadding(
Math.round((background.borderWidth + leftPadding) * density),
Math.round((background.borderWidth + topPadding) * density),
Math.round((background.borderWidth + rightPadding) * density),
Math.round((background.borderWidth + bottomPadding) * density)
Math.round((background.borderLeftWidth + leftPadding) * density),
Math.round((background.borderTopWidth + topPadding) * density),
Math.round((background.borderRightWidth + rightPadding) * density),
Math.round((background.borderBottomWidth + bottomPadding) * density)
);
}
}
@@ -128,10 +128,24 @@ function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript
}
borderDrawable.refresh(
background.borderWidth,
(background.borderColor && background.borderColor.android) ? background.borderColor.android : 0,
background.borderRadius,
(background.borderTopColor && background.borderTopColor.android) ? background.borderTopColor.android : 0,
(background.borderRightColor && background.borderRightColor.android) ? background.borderRightColor.android : 0,
(background.borderBottomColor && background.borderBottomColor.android) ? background.borderBottomColor.android : 0,
(background.borderLeftColor && background.borderLeftColor.android) ? background.borderLeftColor.android : 0,
background.borderTopWidth,
background.borderRightWidth,
background.borderBottomWidth,
background.borderLeftWidth,
background.borderTopLeftRadius,
background.borderTopRightRadius,
background.borderBottomRightRadius,
background.borderBottomLeftRadius,
background.clipPath,
(background.color && background.color.android) ? background.color.android : 0,
(background.image && background.image.android) ? background.image.android : null,
background.repeat,

67
tns-core-modules/ui/styling/background.d.ts vendored
View File

@@ -13,37 +13,43 @@ declare module "ui/styling/background" {
}
export class Background {
static default: Background;
color: colorModule.Color;
image: imageSource.ImageSource;
repeat: string;
position: string;
size: string;
borderWidth: number;
borderColor: colorModule.Color;
borderRadius: number;
clipPath: string;
constructor(
color: colorModule.Color,
image: imageSource.ImageSource,
repeat: string,
position: string,
size: string,
borderWidth: number,
borderColor: colorModule.Color,
borderRadius: number,
clipPath: string
);
public static default: Background;
public color: colorModule.Color;
public image: imageSource.ImageSource;
public repeat: string;
public position: string;
public size: string;
public borderTopColor: colorModule.Color;
public borderRightColor: colorModule.Color;
public borderBottomColor: colorModule.Color;
public borderLeftColor: colorModule.Color;
public borderTopWidth: number;
public borderRightWidth: number;
public borderBottomWidth: number;
public borderLeftWidth: number;
public borderTopLeftRadius: number;
public borderTopRightRadius: number;
public borderBottomRightRadius: number;
public borderBottomLeftRadius: number;
public clipPath: string;
public withColor(value: colorModule.Color): Background;
public withImage(value: imageSource.ImageSource): Background;
public withRepeat(value: string): Background;
public withPosition(value: string): Background;
public withSize(value: string): Background;
public withBorderWidth(value: number): Background;
public withBorderColor(value: colorModule.Color): Background;
public withBorderRadius(value: number): Background;
public withBorderTopColor(value: colorModule.Color): Background;
public withBorderRightColor(value: colorModule.Color): Background;
public withBorderBottomColor(value: colorModule.Color): Background;
public withBorderLeftColor(value: colorModule.Color): Background;
public withBorderTopWidth(value: number): Background;
public withBorderRightWidth(value: number): Background;
public withBorderBottomWidth(value: number): Background;
public withBorderLeftWidth(value: number): Background;
public withBorderTopLeftRadius(value: number): Background;
public withBorderTopRightRadius(value: number): Background;
public withBorderBottomRightRadius(value: number): Background;
public withBorderBottomLeftRadius(value: number): Background;
public withClipPath(value: string): Background;
public getDrawParams(width: number, height: number): BackgroundDrawParams;
@@ -51,6 +57,17 @@ declare module "ui/styling/background" {
public isEmpty(): boolean;
public static equals(value1: Background, value2: Background): boolean;
public hasBorderColor(): boolean;
public hasBorderWidth(): boolean;
public hasBorderRadius(): boolean;
public hasUniformBorderColor(): boolean;
public hasUniformBorderWidth(): boolean;
public hasUniformBorderRadius(): boolean;
public hasUniformBorder(): boolean;
public getUniformBorderColor(): colorModule.Color;
public getUniformBorderWidth(): number;
public getUniformBorderRadius(): number;
}
export module ios {

168
tns-core-modules/ui/styling/background.ios.ts
View File

@@ -1,6 +1,7 @@
import viewModule = require("ui/core/view");
import common = require("./background-common");
import * as styleModule from "./style";
import { Color } from "color";
import * as utils from "utils/utils";
@@ -15,34 +16,160 @@ function ensureStyle() {
export module ios {
export function createBackgroundUIColor(view: viewModule.View, flip?: boolean): UIColor {
if (!view._nativeView) {
let nativeView = <UIView>view._nativeView;
if (!nativeView) {
return undefined;
}
ensureStyle();
if (view.style.clipPath) {
drawClipPath(view);
}
var background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
let background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
if (!background || background.isEmpty()) {
return undefined;
}
if (!background.image) {
return background.color.ios;
// Clip-path
if (background.clipPath) {
drawClipPath(nativeView, background);
}
// We have an image for a background
var frame = (<UIView>view._nativeView).frame;
var boundsWidth = frame.size.width;
var boundsHeight = frame.size.height;
// Borders
if (background.hasUniformBorder()){
let borderColor = background.getUniformBorderColor();
if (borderColor && borderColor.ios){
nativeView.layer.borderColor = borderColor.ios.CGColor;
}
else {
nativeView.layer.borderColor = undefined;
}
nativeView.layer.borderWidth = background.getUniformBorderWidth();
nativeView.layer.cornerRadius = background.getUniformBorderRadius();
nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
}
else { // Draw non-uniform borders
// Clear everything
nativeView.layer.borderColor = undefined;
nativeView.layer.borderWidth = 0;
nativeView.layer.cornerRadius = 0;
nativeView.clipsToBounds = false;
if (nativeView["topBorderLayer"]){
(<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["rightBorderLayer"]){
(<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["bottomBorderLayer"]){
(<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["leftBorderLayer"]){
(<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
}
// Draw borders
let nativeViewBounds = {
left: nativeView.bounds.origin.x,
top: nativeView.bounds.origin.y,
bottom: nativeView.bounds.size.height,
right: nativeView.bounds.size.width
};
let top = background.borderTopWidth;
let right = background.borderRightWidth;
let bottom = background.borderBottomWidth;
let left = background.borderLeftWidth;
let lto: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.top};// left-top-outside
let lti: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.top + top}; // left-top-inside
let rto: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.top}; // right-top-outside
let rti: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.top + top}; // right-top-inside
let rbo: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.bottom}; // right-bottom-outside
let rbi: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.bottom - bottom}; // right-bottom-inside
let lbo: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.bottom}; // left-bottom-outside
let lbi: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.bottom - bottom}; // left-bottom-inside
if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
let topBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(topBorderPath, null, lto.x, lto.y);
CGPathAddLineToPoint(topBorderPath, null, rto.x, rto.y);
CGPathAddLineToPoint(topBorderPath, null, rti.x, rti.y);
CGPathAddLineToPoint(topBorderPath, null, lti.x, lti.y);
CGPathAddLineToPoint(topBorderPath, null, lto.x, lto.y);
let topBorderLayer = CAShapeLayer.layer();
topBorderLayer.fillColor = background.borderTopColor.ios.CGColor;
topBorderLayer.path = topBorderPath;
nativeView.layer.addSublayer(topBorderLayer);
nativeView["topBorderLayer"] = topBorderLayer;
}
if (right > 0 && background.borderRightColor && background.borderRightColor.ios){
let rightBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(rightBorderPath, null, rto.x, rto.y);
CGPathAddLineToPoint(rightBorderPath, null, rbo.x, rbo.y);
CGPathAddLineToPoint(rightBorderPath, null, rbi.x, rbi.y);
CGPathAddLineToPoint(rightBorderPath, null, rti.x, rti.y);
CGPathAddLineToPoint(rightBorderPath, null, rto.x, rto.y);
let rightBorderLayer = CAShapeLayer.layer();
rightBorderLayer.fillColor = background.borderRightColor.ios.CGColor;
rightBorderLayer.path = rightBorderPath;
nativeView.layer.addSublayer(rightBorderLayer);
nativeView["rightBorderLayer"] = rightBorderLayer;
}
if (bottom > 0 && background.borderBottomColor && background.borderBottomColor.ios){
let bottomBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(bottomBorderPath, null, rbo.x, rbo.y);
CGPathAddLineToPoint(bottomBorderPath, null, lbo.x, lbo.y);
CGPathAddLineToPoint(bottomBorderPath, null, lbi.x, lbi.y);
CGPathAddLineToPoint(bottomBorderPath, null, rbi.x, rbi.y);
CGPathAddLineToPoint(bottomBorderPath, null, rbo.x, rbo.y);
let bottomBorderLayer = CAShapeLayer.layer();
bottomBorderLayer.fillColor = background.borderBottomColor.ios.CGColor;
bottomBorderLayer.path = bottomBorderPath;
nativeView.layer.addSublayer(bottomBorderLayer);
nativeView["bottomBorderLayer"] = bottomBorderLayer;
}
if (left > 0 && background.borderLeftColor && background.borderLeftColor.ios){
let leftBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(leftBorderPath, null, lbo.x, lbo.y);
CGPathAddLineToPoint(leftBorderPath, null, lto.x, lto.y);
CGPathAddLineToPoint(leftBorderPath, null, lti.x, lti.y);
CGPathAddLineToPoint(leftBorderPath, null, lbi.x, lbi.y);
CGPathAddLineToPoint(leftBorderPath, null, lbo.x, lbo.y);
let leftBorderLayer = CAShapeLayer.layer();
leftBorderLayer.fillColor = background.borderLeftColor.ios.CGColor;
leftBorderLayer.path = leftBorderPath;
nativeView.layer.addSublayer(leftBorderLayer);
nativeView["leftBorderLayer"] = leftBorderLayer;
}
}
if (!background.image) {
return background.color ? background.color.ios : undefined;
}
let frame = nativeView.frame;
let boundsWidth = frame.size.width;
let boundsHeight = frame.size.height;
if (!boundsWidth || !boundsHeight) {
return undefined;
}
// We have an image for a background
var img = <UIImage>background.image.ios;
var params = background.getDrawParams(boundsWidth, boundsHeight);
@@ -106,10 +233,9 @@ export module ios {
}
}
function drawClipPath(view: viewModule.View) {
function drawClipPath(nativeView: UIView, background: common.Background) {
var path: any;
var nativeView = <UIView>view._nativeView;
var bounds = {
left: nativeView.bounds.origin.x,
top: nativeView.bounds.origin.y,
@@ -121,7 +247,7 @@ function drawClipPath(view: viewModule.View) {
return;
}
var clipPath = view.style.clipPath;
var clipPath = background.clipPath;
var functionName = clipPath.substring(0, clipPath.indexOf("("));
var value = clipPath.replace(`${functionName}(`, "").replace(")", "");
@@ -190,13 +316,15 @@ function drawClipPath(view: viewModule.View) {
nativeView.layer.mask = shape;
nativeView.clipsToBounds = true;
if (view.borderWidth > 0 && view.borderColor) {
let borderWidth = background.getUniformBorderWidth();
let borderColor = background.getUniformBorderColor();
if (borderWidth > 0 && borderColor instanceof Color){
var borderLayer = CAShapeLayer.layer();
borderLayer.path = path;
borderLayer.lineWidth = view.borderWidth * 2;
borderLayer.strokeColor = view.borderColor.ios.CGColor;
borderLayer.lineWidth = borderWidth * 2;
borderLayer.strokeColor = borderColor.ios.CGColor;
borderLayer.fillColor = utils.ios.getter(UIColor, UIColor.clearColor).CGColor;
borderLayer.frame = nativeView.bounds;
nativeView.layer.borderColor = undefined;

44
tns-core-modules/ui/styling/style.d.ts vendored
View File

@@ -13,6 +13,13 @@ declare module "ui/styling/style" {
bottom: number;
}
export interface BorderColor {
top: Color;
right: Color;
bottom: Color;
left: Color;
}
export interface CommonLayoutParams {
width: number;
height: number;
@@ -49,9 +56,21 @@ declare module "ui/styling/style" {
public backgroundSize: string;
public backgroundPosition: string;
public backgroundRepeat: string;
public borderColor: Color;
public borderWidth: number;
public borderRadius: number;
public borderColor: string | Color;
public borderTopColor: Color;
public borderRightColor: Color;
public borderBottomColor: Color;
public borderLeftColor: Color;
public borderWidth: string | number;
public borderTopWidth: number;
public borderRightWidth: number;
public borderBottomWidth: number;
public borderLeftWidth: number;
public borderRadius: string | number;
public borderTopLeftRadius: number;
public borderTopRightRadius: number;
public borderBottomRightRadius: number;
public borderBottomLeftRadius: number;
public fontSize: number;
public fontFamily: string;
public fontStyle: string;
@@ -113,9 +132,22 @@ declare module "ui/styling/style" {
export var backgroundRepeatProperty: styleProperty.Property;
export var backgroundSizeProperty: styleProperty.Property;
export var backgroundPositionProperty: styleProperty.Property;
export var borderColorProperty: styleProperty.Property;
export var borderWidthProperty: styleProperty.Property;
export var borderRadiusProperty: styleProperty.Property;
export var borderTopColorProperty: styleProperty.Property;
export var borderRightColorProperty: styleProperty.Property;
export var borderBottomColorProperty: styleProperty.Property;
export var borderLeftColorProperty: styleProperty.Property;
export var borderTopWidthProperty: styleProperty.Property;
export var borderRightWidthProperty: styleProperty.Property;
export var borderBottomWidthProperty: styleProperty.Property;
export var borderLeftWidthProperty: styleProperty.Property;
export var borderTopLeftRadiusProperty: styleProperty.Property;
export var borderTopRightRadiusProperty: styleProperty.Property;
export var borderBottomRightRadiusProperty: styleProperty.Property;
export var borderBottomLeftRadiusProperty: styleProperty.Property;
export var clipPathProperty: styleProperty.Property;
export var backgroundInternalProperty: styleProperty.Property;
export var fontSizeProperty: styleProperty.Property;

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

@@ -63,6 +63,11 @@ function parseMargin(value: any): ThicknessValue {
top = bottom = arr[0];
right = left = arr[1];
}
else if (arr.length === 3) {
top = arr[0];
right = left = arr[1];
bottom = arr[2];
}
else if (arr.length === 4) {
top = arr[0];
right = arr[1];
@@ -93,37 +98,6 @@ function parseMargin(value: any): ThicknessValue {
}
}
function parseThickness(value: any): definition.Thickness {
var result: definition.Thickness = { top: 0, right: 0, bottom: 0, left: 0 };
if (types.isString(value)) {
var arr = value.split(/[ ,]+/);
var top = parseInt(arr[0]);
top = isNaN(top) ? 0 : top;
var right = parseInt(arr[1]);
right = isNaN(right) ? top : right;
var bottom = parseInt(arr[2]);
bottom = isNaN(bottom) ? top : bottom;
var left = parseInt(arr[3]);
left = isNaN(left) ? right : left;
result.top = top;
result.right = right;
result.bottom = bottom;
result.left = left;
} else if (types.isNumber(value)) {
result.top = result.right = result.bottom = result.left = value;
}
else {
result = value;
}
return result;
}
function layoutParamsComparer(x: definition.CommonLayoutParams, y: definition.CommonLayoutParams): boolean {
return x.width === y.width
&& x.height === y.height
@@ -273,123 +247,6 @@ function isMinWidthHeightValid(value: number): boolean {
return !isNaN(value) && value >= 0.0 && isFinite(value);
}
function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (!Color.equals(currentBackground.color, data.newValue)) {
style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
}
}
function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var url: string = data.newValue;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
var isValid = false;
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var match = url.match(pattern);
if (match && match[2]) {
url = match[2];
}
ensureImageSource();
if (utils.isDataURI(url)) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
isValid = true;
}
}
else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
isValid = true;
}
else if (url.indexOf("http") !== -1) {
style["_url"] = url;
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
imageSource.fromUrl(url).then((r) => {
if (style && style["_url"] === url) {
// Get the current background again, as it might have changed while doing the request.
currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
}
});
isValid = true;
}
}
if (!isValid) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
}
}
function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.repeat) {
style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
}
}
function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.position) {
style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
}
}
function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.size) {
style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
}
}
function onBorderWidthPropertyChanged(data: PropertyChangeData) {
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) {
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) {
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) {
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));
}
}
}
function getHandlerInternal(propertyId: number, classInfo: types.ClassInfo): definition.StylePropertyChangedHandler {
var className = classInfo ? classInfo.name : "default";
var handlerKey = className + propertyId;
@@ -632,25 +489,133 @@ export class Style extends DependencyObservable implements styling.Style {
this._setValue(backgroundPositionProperty, value);
}
get borderColor(): Color {
return this._getValue(borderColorProperty);
get borderColor(): string | Color {
if (Color.equals(this.borderTopColor, this.borderRightColor) &&
Color.equals(this.borderTopColor, this.borderBottomColor) &&
Color.equals(this.borderTopColor, this.borderLeftColor)){
return this.borderTopColor;
}
else {
return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
}
}
set borderColor(value: Color) {
this._setValue(borderColorProperty, value);
set borderColor(value: string | Color) {
if (value instanceof Color){
value = (<Color>value).hex;
}
this._setShorthandProperty("border-color", value);
}
get borderTopColor(): Color {
return this._getValue(borderTopColorProperty);
}
set borderTopColor(value: Color) {
this._setValue(borderTopColorProperty, value);
}
get borderWidth(): number {
return this._getValue(borderWidthProperty);
get borderRightColor(): Color {
return this._getValue(borderRightColorProperty);
}
set borderWidth(value: number) {
this._setValue(borderWidthProperty, value);
set borderRightColor(value: Color) {
this._setValue(borderRightColorProperty, value);
}
get borderRadius(): number {
return this._getValue(borderRadiusProperty);
get borderBottomColor(): Color {
return this._getValue(borderBottomColorProperty);
}
set borderRadius(value: number) {
this._setValue(borderRadiusProperty, value);
set borderBottomColor(value: Color) {
this._setValue(borderBottomColorProperty, value);
}
get borderLeftColor(): Color {
return this._getValue(borderLeftColorProperty);
}
set borderLeftColor(value: Color) {
this._setValue(borderLeftColorProperty, value);
}
get borderWidth(): string | number {
if (this.borderTopWidth === this.borderRightWidth &&
this.borderTopWidth === this.borderBottomWidth &&
this.borderTopWidth === this.borderLeftWidth){
return this.borderTopWidth;
}
else {
return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
}
}
set borderWidth(value: string | number) {
this._setShorthandProperty("border-width", value.toString());
}
get borderTopWidth(): number {
return this._getValue(borderTopWidthProperty);
}
set borderTopWidth(value: number) {
this._setValue(borderTopWidthProperty, value);
}
get borderRightWidth(): number {
return this._getValue(borderRightWidthProperty);
}
set borderRightWidth(value: number) {
this._setValue(borderRightWidthProperty, value);
}
get borderBottomWidth(): number {
return this._getValue(borderBottomWidthProperty);
}
set borderBottomWidth(value: number) {
this._setValue(borderBottomWidthProperty, value);
}
get borderLeftWidth(): number {
return this._getValue(borderLeftWidthProperty);
}
set borderLeftWidth(value: number) {
this._setValue(borderLeftWidthProperty, value);
}
get borderRadius(): string | number {
if (this.borderTopLeftRadius === this.borderTopRightRadius &&
this.borderTopLeftRadius === this.borderBottomRightRadius &&
this.borderTopLeftRadius === this.borderBottomLeftRadius){
return this.borderTopLeftRadius;
}
else {
return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
}
}
set borderRadius(value: string | number) {
this._setShorthandProperty("border-radius", value.toString());
}
get borderTopLeftRadius(): number {
return this._getValue(borderTopLeftRadiusProperty);
}
set borderTopLeftRadius(value: number) {
this._setValue(borderTopLeftRadiusProperty, value);
}
get borderTopRightRadius(): number {
return this._getValue(borderTopRightRadiusProperty);
}
set borderTopRightRadius(value: number) {
this._setValue(borderTopRightRadiusProperty, value);
}
get borderBottomRightRadius(): number {
return this._getValue(borderBottomRightRadiusProperty);
}
set borderBottomRightRadius(value: number) {
this._setValue(borderBottomRightRadiusProperty, value);
}
get borderBottomLeftRadius(): number {
return this._getValue(borderBottomLeftRadiusProperty);
}
set borderBottomLeftRadius(value: number) {
this._setValue(borderBottomLeftRadiusProperty, value);
}
get clipPath(): string {
@@ -1076,36 +1041,6 @@ export var placeholderColorProperty = new styleProperty.Property("placeholderCol
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
converters.colorConverter);
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
new PropertyMetadata(0, AffectsLayout, onBorderWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
export var fontSizeProperty = new styleProperty.Property("fontSize", "font-size",
new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, onFontSizeChanged), converters.fontSizeConverter);
@@ -1385,4 +1320,381 @@ export var ignorePropertyHandler = new StylePropertyChangedHandler(
// empty
});
registerNoStylingClass("Frame");
registerNoStylingClass("Frame");
function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (!Color.equals(currentBackground.color, data.newValue)) {
style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
}
}
function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var url: string = data.newValue;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
var isValid = false;
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var match = url.match(pattern);
if (match && match[2]) {
url = match[2];
}
ensureImageSource();
if (utils.isDataURI(url)) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
isValid = true;
}
}
else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
isValid = true;
}
else if (url.indexOf("http") !== -1) {
style["_url"] = url;
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
imageSource.fromUrl(url).then((r) => {
if (style && style["_url"] === url) {
// Get the current background again, as it might have changed while doing the request.
currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
}
});
isValid = true;
}
}
if (!isValid) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
}
}
function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.repeat) {
style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
}
}
function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.position) {
style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
}
}
function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.size) {
style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
}
}
function onBorderTopColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopColor(data.newValue));
}
}
function onBorderRightColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRightColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRightColor(data.newValue));
}
}
function onBorderBottomColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomColor(data.newValue));
}
}
function onBorderLeftColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderLeftColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderLeftColor(data.newValue));
}
}
function onBorderTopWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopWidth(data.newValue));
}
}
function onBorderRightWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRightWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRightWidth(data.newValue));
}
}
function onBorderBottomWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomWidth(data.newValue));
}
}
function onBorderLeftWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderLeftWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderLeftWidth(data.newValue));
}
}
function onBorderTopLeftRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopLeftRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopLeftRadius(data.newValue));
}
}
function onBorderTopRightRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopRightRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopRightRadius(data.newValue));
}
}
function onBorderBottomRightRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomRightRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomRightRadius(data.newValue));
}
}
function onBorderBottomLeftRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomLeftRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomLeftRadius(data.newValue));
}
}
function onClipPathPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.clipPath) {
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
}
}
export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
export var borderTopColorProperty = new styleProperty.Property("borderTopColor", "border-top-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderTopColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderRightColorProperty = new styleProperty.Property("borderRightColor", "border-right-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderRightColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderBottomColorProperty = new styleProperty.Property("borderBottomColor", "border-bottom-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderBottomColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderLeftColorProperty = new styleProperty.Property("borderLeftColor", "border-left-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderLeftColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderTopWidthProperty = new styleProperty.Property("borderTopWidth", "border-top-width",
new PropertyMetadata(0, AffectsLayout, onBorderTopWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderRightWidthProperty = new styleProperty.Property("borderRightWidth", "border-right-width",
new PropertyMetadata(0, AffectsLayout, onBorderRightWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderBottomWidthProperty = new styleProperty.Property("borderBottomWidth", "border-bottom-width",
new PropertyMetadata(0, AffectsLayout, onBorderBottomWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderLeftWidthProperty = new styleProperty.Property("borderLeftWidth", "border-left-width",
new PropertyMetadata(0, AffectsLayout, onBorderLeftWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderTopLeftRadiusProperty = new styleProperty.Property("borderTopLeftRadius", "border-top-left-radius",
new PropertyMetadata(0, AffectsLayout, onBorderTopLeftRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderTopRightRadiusProperty = new styleProperty.Property("borderTopRightRadius", "border-top-right-radius",
new PropertyMetadata(0, AffectsLayout, onBorderTopRightRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderBottomRightRadiusProperty = new styleProperty.Property("borderBottomRightRadius", "border-bottom-right-radius",
new PropertyMetadata(0, AffectsLayout, onBorderBottomRightRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderBottomLeftRadiusProperty = new styleProperty.Property("borderBottomLeftRadius", "border-bottom-left-radius",
new PropertyMetadata(0, AffectsLayout, onBorderBottomLeftRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
function parseThickness(value: any): definition.Thickness {
let result: definition.Thickness = { top: 0, right: 0, bottom: 0, left: 0 };
if (types.isString(value)) {
let arr = value.split(/[ ,]+/);
if (arr.length === 1){
let arr0 = parseInt(arr[0]);
result.top = arr0;
result.right = arr0;
result.bottom = arr0;
result.left = arr0;
}
else if (arr.length === 2){
let arr0 = parseInt(arr[0]);
let arr1 = parseInt(arr[1]);
result.top = arr0;
result.right = arr1;
result.bottom = arr0;
result.left = arr1;
}
else if (arr.length === 3){
let arr0 = parseInt(arr[0]);
let arr1 = parseInt(arr[1]);
let arr2 = parseInt(arr[2]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr1;
}
else if (arr.length === 4){
let arr0 = parseInt(arr[0]);
let arr1 = parseInt(arr[1]);
let arr2 = parseInt(arr[2]);
let arr3 = parseInt(arr[3]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr3;
}
}
else if (types.isNumber(value)) {
result.top = result.right = result.bottom = result.left = value;
}
else {
result = value;
}
return result;
}
function parseBorderColor(value: any): definition.BorderColor {
var result: definition.BorderColor = { top: undefined, right: undefined, bottom: undefined, left: undefined };
try {
if (types.isString(value)) {
let arr = value.split(/[ ,]+/);
if (arr.length === 1){
let arr0 = new Color(arr[0]);
result.top = arr0;
result.right = arr0;
result.bottom = arr0;
result.left = arr0;
}
else if (arr.length === 2){
let arr0 = new Color(arr[0]);
let arr1 = new Color(arr[1]);
result.top = arr0;
result.right = arr1;
result.bottom = arr0;
result.left = arr1;
}
else if (arr.length === 3){
let arr0 = new Color(arr[0]);
let arr1 = new Color(arr[1]);
let arr2 = new Color(arr[2]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr1;
}
else if (arr.length === 4){
let arr0 = new Color(arr[0]);
let arr1 = new Color(arr[1]);
let arr2 = new Color(arr[2]);
let arr3 = new Color(arr[3]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr3;
}
}
else if (value instanceof Color) {
result.top = result.right = result.bottom = result.left = value;
}
else {
result = value;
}
}
catch(ex){
if (trace.enabled) {
trace.write(`Error parsing border color ${value}: ${ex}'`, trace.categories.Style, trace.messageType.error);
}
}
return result;
}
function onBorderColorChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
let fourColors = parseBorderColor(value);
let array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
array.push({ property: borderTopColorProperty, value: fourColors.top });
array.push({ property: borderRightColorProperty, value: fourColors.right });
array.push({ property: borderBottomColorProperty, value: fourColors.bottom });
array.push({ property: borderLeftColorProperty, value: fourColors.left });
return array;
}
function onBorderWidthChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
var thickness = parseThickness(value);
var array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
array.push({ property: borderTopWidthProperty, value: thickness.top });
array.push({ property: borderRightWidthProperty, value: thickness.right });
array.push({ property: borderBottomWidthProperty, value: thickness.bottom });
array.push({ property: borderLeftWidthProperty, value: thickness.left });
return array;
}
function onBorderRadiusChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
var thickness = parseThickness(value);
var array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
array.push({ property: borderTopLeftRadiusProperty, value: thickness.top });
array.push({ property: borderTopRightRadiusProperty, value: thickness.right });
array.push({ property: borderBottomRightRadiusProperty, value: thickness.bottom });
array.push({ property: borderBottomLeftRadiusProperty, value: thickness.left });
return array;
}
styleProperty.registerShorthandCallback("border-color", onBorderColorChanged);
styleProperty.registerShorthandCallback("border-width", onBorderWidthChanged);
styleProperty.registerShorthandCallback("border-radius", onBorderRadiusChanged);

65
tns-core-modules/ui/styling/styling.d.ts vendored
View File

@@ -81,18 +81,77 @@
/**
* Gets or sets the border-color style property.
*/
borderColor: color.Color
borderColor: string | color.Color;
/**
* Gets or sets the border-top-color style property.
*/
borderTopColor: color.Color;
/**
* Gets or sets the border-right-color style property.
*/
borderRightColor: color.Color;
/**
* Gets or sets the border-bottom-color style property.
*/
borderBottomColor: color.Color;
/**
* Gets or sets the border-left-color style property.
*/
borderLeftColor: color.Color;
/**
* Gets or sets the border-width style property.
*/
borderWidth: number
borderWidth: string | number
/**
* Gets or sets the border-top-width style property.
*/
borderTopWidth: number
/**
* Gets or sets the border-right-width style property.
*/
borderRightWidth: number
/**
* Gets or sets the border-bottom-width style property.
*/
borderBottomWidth: number
/**
* Gets or sets the border-left-width style property.
*/
borderLeftWidth: number
/**
* Gets or sets the border-radius style property.
*/
borderRadius: number;
borderRadius: string | number;
/**
* Gets or sets the border-top-left-radius style property.
*/
borderTopLeftRadius: number;
/**
* Gets or sets the border-top-right-radius style property.
*/
borderTopRightRadius: number;
/**
* Gets or sets the border-bottm-right-radius style property.
*/
borderBottomRightRadius: number;
/**
* Gets or sets the border-bottom-left-radius style property.
*/
borderBottomLeftRadius: number;
/**
* Gets or sets the clip-path style property.
*/

18
tns-core-modules/ui/switch/switch.android.ts
View File

@@ -81,9 +81,21 @@ export class SwitchStyler implements style.Styler {
SwitchStyler.setBackgroundAndBorderProperty,
SwitchStyler.resetBackgroundAndBorderProperty), "Switch");
style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Switch");
}
}

6
tns-core-modules/ui/text-field/text-field.ios.ts
View File

@@ -115,9 +115,9 @@ class UITextFieldImpl extends UITextField {
}
let size = bounds.size;
return CGRectMake(owner.borderWidth + owner.style.paddingLeft, owner.borderWidth + owner.style.paddingTop,
size.width - (owner.borderWidth + owner.style.paddingLeft + owner.style.paddingRight + owner.borderWidth),
size.height - (owner.borderWidth + owner.style.paddingTop + owner.style.paddingBottom + owner.borderWidth)
return CGRectMake(owner.borderLeftWidth + owner.style.paddingLeft, owner.borderTopWidth + owner.style.paddingTop,
size.width - (owner.borderLeftWidth + owner.style.paddingLeft + owner.style.paddingRight + owner.borderRightWidth),
size.height - (owner.borderTopWidth + owner.style.paddingTop + owner.style.paddingBottom + owner.borderBottomWidth)
);
}

90
tns-core-modules/ui/text-view/text-view.ios.ts
View File

@@ -166,12 +166,81 @@ export class TextViewStyler implements style.Styler {
}
}
//Border
private static setBorderTopWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderTopWidth(view, newValue);
}
private static resetBorderTopWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderTopWidth(view, nativeValue);
}
private static setNativeBorderTopWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = view.style.paddingTop + newValue;
let left = nativeTextView.textContainerInset.left;
let bottom = nativeTextView.textContainerInset.bottom;
let right = nativeTextView.textContainerInset.right;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderRightWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderRightWidth(view, newValue);
}
private static resetBorderRightWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderRightWidth(view, nativeValue);
}
private static setNativeBorderRightWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = nativeTextView.textContainerInset.top;
let left = nativeTextView.textContainerInset.left;
let bottom = nativeTextView.textContainerInset.bottom;
let right = view.style.paddingRight + newValue;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderBottomWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderBottomWidth(view, newValue);
}
private static resetBorderBottomWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderBottomWidth(view, nativeValue);
}
private static setNativeBorderBottomWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = nativeTextView.textContainerInset.top;
let left = nativeTextView.textContainerInset.left;
let bottom = view.style.paddingBottom + newValue;
let right = nativeTextView.textContainerInset.right;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderLeftWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderLeftWidth(view, newValue);
}
private static resetBorderLeftWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderLeftWidth(view, nativeValue);
}
private static setNativeBorderLeftWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = nativeTextView.textContainerInset.top;
let left = view.style.paddingLeft + newValue;
let bottom = nativeTextView.textContainerInset.bottom;
let right = nativeTextView.textContainerInset.right;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
// Padding
private static setPaddingProperty(view: View, newValue: any) {
var top = newValue.top + view.borderWidth;
var left = newValue.left + view.borderWidth;
var bottom = newValue.bottom + view.borderWidth;
var right = newValue.right + view.borderWidth;
var top = newValue.top + view.borderTopWidth;
var left = newValue.left + view.borderLeftWidth;
var bottom = newValue.bottom + view.borderBottomWidth;
var right = newValue.right + view.borderRightWidth;
(<UITextView>view._nativeView).textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
@@ -185,6 +254,19 @@ export class TextViewStyler implements style.Styler {
TextViewStyler.resetColorProperty,
TextViewStyler.getNativeColorValue), "TextView");
style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderTopWidthProperty,
TextViewStyler.resetBorderTopWidthProperty), "TextView");
style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderRightWidthProperty,
TextViewStyler.resetBorderRightWidthProperty), "TextView");
style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderBottomWidthProperty,
TextViewStyler.resetBorderBottomWidthProperty), "TextView");
style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderLeftWidthProperty,
TextViewStyler.resetBorderLeftWidthProperty), "TextView");
style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setPaddingProperty,
TextViewStyler.resetPaddingProperty), "TextView");