Skip to content

Commit 5a83a1c

Browse files
vultixSvetoslavTsenov
vultix
authored and
SvetoslavTsenov
committed
Css gradients (NativeScript#5534)
* feat(ios): Added support for css gradients. * feat(android): Added support for css gradients. * fix: Fixed gradient borders on ios * fix(gradient): added backgroundGradient to View and Style. * fix(ios-gradients): fixed ios gradients covering view content. * test(gradient): Added ui app tests for background gradients. * test(gradient): Added a test ensuring background gradient property is applied to style. * style(gradient): Fixed tslint errors. * fix(gradient): Removed the background-gradient property and added the gradient to background-image. * style: fixed a consecutive blank line tslint error. * fix(tests): fixed the bug that was causing tests to fail. * chore(linear-gradient): fix equality comparer * test(gradient): add linear gradients test app * chore(tslint): update with latest tslint rules
1 parent 72fa5c9 commit 5a83a1c

19 files changed

Lines changed: 397 additions & 24 deletions

‎apps/app/ui-tests-app/button/border-playground.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export function onToggle(args: EventData) {
3434
target.backgroundImage = target.backgroundImage ? undefined : `~/ui-tests-app/resources/images/test2.png`;
3535
debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
3636
}
37+
else if (button.text === "BGGradient") {
38+
const gradient = "linear-gradient(to right, purple, red)";
39+
target.backgroundImage = typeof target.backgroundImage === "object" ? undefined : gradient;
40+
debugConsole.text += `> background-image: ${gradient} \n`;
41+
}
3742

3843
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
3944
}

‎apps/app/ui-tests-app/button/border-playground.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<StackLayout id="target" row="1" col="1">
1818
<Button text="BGColor" tap="onToggle"/>
1919
<Button text="BGImage" tap="onToggle"/>
20+
<Button text="BGGradient" tap="onToggle"/>
2021
</StackLayout>
2122
<StackLayout id="right" class="button-container" row="1" col="2">
2223
<Button text="Color" id="borderRightColor" tap="onToggle"/>

‎apps/app/ui-tests-app/css/background-image-linear-gradient.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import * as pages from "tns-core-modules/ui/page";
2+
import { EventData } from "tns-core-modules/data/observable";
3+
import * as button from "tns-core-modules/ui/button";
4+
5+
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
6+
7+
let testIndex = 0;
8+
const tests = [
9+
{ name: "black-blue only", backgroundImage: "linear-gradient(to bottom, black, blue)"},
10+
{ name: "to bottom green-blue", backgroundImage: "linear-gradient(to bottom, green, blue)"},
11+
{ name: "to left yellow-blue", backgroundImage: "linear-gradient(to left, yellow, green)"},
12+
{ name: "to right yellow-blue", backgroundImage: "linear-gradient(to right, yellow, green)"},
13+
{ name: "-45deg green-blue", backgroundImage: "linear-gradient(-45deg, green, blue)"},
14+
{ name: "45deg green-blue", backgroundImage: "linear-gradient(45deg, green, blue)"},
15+
16+
{ name: "black-blue-pink only", backgroundImage: "linear-gradient(to bottom, black, blue, pink)"},
17+
{ name: "to bottom green-blue-pink", backgroundImage: "linear-gradient(to bottom, green, blue, pink)"},
18+
{ name: "to left yellow-blue-pink", backgroundImage: "linear-gradient(to left, yellow, green, pink)"},
19+
{ name: "to right yellow-blue-pink", backgroundImage: "linear-gradient(to right, yellow, green, pink)"},
20+
{ name: "-45deg green-blue-pink", backgroundImage: "linear-gradient(-45deg, green, blue, pink)"},
21+
{ name: "45deg green-blue-pink", backgroundImage: "linear-gradient(45deg, green, blue, pink)"},
22+
]
23+
24+
export function onLoaded(args) {
25+
applyNextStyle(args);
26+
}
27+
28+
export function onButtonTap(args) {
29+
applyNextStyle(args);
30+
}
31+
32+
function applyNextStyle(args) {
33+
let page = <pages.Page>args.object.page;
34+
let btn = <button.Button>args.object;
35+
let gridElement = <GridLayout>page.getViewById("Container");
36+
37+
btn.text = tests[testIndex].name;
38+
gridElement.backgroundImage = tests[testIndex].backgroundImage;
39+
40+
testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
41+
}

‎apps/app/ui-tests-app/css/background-image-linear-gradient.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
2+
<GridLayout rows="*, 7*">
3+
<Button row="0" text="a1" tap="onButtonTap"/>
4+
5+
<GridLayout id="Container" fontSize="12" borderColor="black" margin="5" borderWidth="1" row="1"/>
6+
</GridLayout>
7+
</Page>

‎apps/app/ui-tests-app/css/background-shorthand.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ const tests = [
99
{ name: "black hex color only", background: "#000000" },
1010
{ name: "yellow hex color only", background: "#ffff00" },
1111
{ name: "blue color only", background: "blue" },
12+
1213
{ name: "repeat image only", background: "url(\"~/ui-tests-app/resources/images/icon.png\")" },
14+
{ name: "linear gradient red-blue only", background: "linear-gradient(to bottom, red, blue)"},
1315

1416
{ name: "[straight] image only, no-repeat ", background: "url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat" },
1517
{ name: "[straight] green color, image, no-repeat", background: "green url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat" },
@@ -18,7 +20,7 @@ const tests = [
1820
{ name: "[straight] orange hex color, image, no-repeat, position percents", background: "#F9791F url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat 100% 100%" },
1921
{ name: "[straight] green color, image, repeat-x, position percents", background: "green url(\"~/ui-tests-app/resources/images/icon.png\") repeat-x 100% 100%" },
2022
{ name: "[straight] blue color, image, repeat-x, position", background: "blue url(\"~/ui-tests-app/resources/images/icon.png\") repeat-x 150 150" },
21-
23+
2224
{ name: "[shuffle] no-repeat, image only", background: "no-repeat url(\"~/ui-tests-app/resources/images/icon.png\")" },
2325
{ name: "[shuffle] no-repeat, green color, image, ", background: "no-repeat green url(\"~/ui-tests-app/resources/images/icon.png\")" },
2426
{ name: "[shuffle] yellow hex color, position pixels, image, no-repeat", background: "#ffff00 200px 200px url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat" },

‎apps/app/ui-tests-app/css/gradient-border.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
StackLayout {
2+
width: 80;
3+
height: 80;
4+
background: linear-gradient(to top, green, blue);
5+
}
6+
7+
#s0 {
8+
border-width: 5;
9+
}
10+
11+
#s1 {
12+
border-width: 5; border-color: red;
13+
}
14+
15+
#s2 {
16+
border-width: 5; border-color: red red red green;
17+
}
18+
19+
#s3 {
20+
border-width: 5; border-color: red; border-radius: 5;
21+
}
22+
23+
#s4 {
24+
border-width: 5; border-color: red; border-radius: 50;
25+
}
26+
27+
#s5 {
28+
border-width: 5 10 15 20; border-color: red;
29+
}
30+
31+
#s6 {
32+
border-width: 5; border-color: red green blue yellow;
33+
}
34+
35+
#s7 {
36+
border-width: 5 10 15 20; border-color: red green blue yellow;
37+
}
38+
39+
#s8 {
40+
border-width: 5 10; border-color: red green;
41+
}
42+
43+
#s9 {
44+
border-width: 15 10 5; border-color: red green blue;
45+
}
46+
47+
#s10 {
48+
border-width: 5 0; border-color: black;
49+
}
50+
51+
#s11 {
52+
background-color: magenta;
53+
}
54+
55+
#s12 {
56+
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
57+
}
58+
59+
#s13 {
60+
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
61+
}
62+
63+
#s14 {
64+
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
65+
}
66+
67+
#s15 {
68+
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/resources/images/test2.png');
69+
}
70+
71+
#s16 {
72+
border-width: 5; border-color: red; padding: 5;
73+
}
74+
75+
#s17 {
76+
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
77+
}

‎apps/app/ui-tests-app/css/gradient-border.xml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<Page>
2+
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
3+
<StackLayout id="s0" row="0" col="0"/>
4+
<StackLayout id="s1" row="0" col="1"/>
5+
<StackLayout id="s2" row="0" col="2"/>
6+
<StackLayout id="s3" row="1" col="0"/>
7+
<StackLayout id="s4" row="1" col="1"/>
8+
<StackLayout id="s5" row="1" col="2"/>
9+
<StackLayout id="s6" row="2" col="0"/>
10+
<StackLayout id="s7" row="2" col="1"/>
11+
<StackLayout id="s8" row="2" col="2"/>
12+
<StackLayout id="s9" row="3" col="0"/>
13+
<StackLayout id="s10" row="3" col="1"/>
14+
<StackLayout id="s11" row="3" col="2"/>
15+
<StackLayout id="s12" row="4" col="0"/>
16+
<StackLayout id="s13" row="4" col="1"/>
17+
<StackLayout id="s14" row="4" col="2"/>
18+
<StackLayout id="s15" row="5" col="0"/>
19+
<StackLayout id="s16" row="5" col="1"/>
20+
<StackLayout id="s17" row="5" col="2"/>
21+
</GridLayout>
22+
</Page>

‎apps/app/ui-tests-app/css/main-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export function loadExamples() {
3030
examples.set("label-border", "css/label-border");
3131
examples.set("text-view-border", "css/text-view-border");
3232
examples.set("image-border", "css/image-border");
33+
examples.set("gradient-border", "css/gradient-border");
3334
examples.set("layouts-border-overlap", "css/layouts-border-overlap");
3435
examples.set("measure-tests", "css/measure-tests");
3536
examples.set("all-uniform-border", "css/all-uniform-border");
@@ -41,5 +42,6 @@ export function loadExamples() {
4142
examples.set("non-uniform-radius", "css/non-uniform-radius");
4243
examples.set("missing-background-image", "css/missing-background-image");
4344
examples.set("background-shorthand", "css/background-shorthand");
45+
examples.set("background-image-linear-gradient", "css/background-image-linear-gradient");
4446
return examples;
4547
}

‎tns-core-modules/ui/core/view/view-common.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ import {
2121

2222
import { createViewFromEntry } from "../../builder";
2323
import { StyleScope } from "../../styling/style-scope";
24+
import { LinearGradient } from "../../styling/linear-gradient";
2425

2526
export * from "../../styling/style-properties";
2627
export * from "../view-base";
28+
export { LinearGradient };
2729

2830
import * as am from "../../animation";
2931
let animationModule: typeof am;
@@ -435,10 +437,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
435437
this.style.backgroundColor = value;
436438
}
437439

438-
get backgroundImage(): string {
440+
get backgroundImage(): string | LinearGradient {
439441
return this.style.backgroundImage;
440442
}
441-
set backgroundImage(value: string) {
443+
set backgroundImage(value: string | LinearGradient) {
442444
this.style.backgroundImage = value;
443445
}
444446

‎tns-core-modules/ui/core/view/view.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { ViewBase, Property, EventData, Color } from "../view-base";
77
import { Animation, AnimationDefinition, AnimationPromise } from "../../animation";
88
import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
99
import { GestureTypes, GestureEventData, GesturesObserver } from "../../gestures";
10+
import { LinearGradient } from "../../styling/linear-gradient";
1011

1112
export * from "../view-base";
1213
export * from "../../styling/style-properties";
14+
export { LinearGradient };
1315

1416
export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
1517

@@ -219,7 +221,7 @@ export abstract class View extends ViewBase {
219221
/**
220222
* Gets or sets the background image of the view.
221223
*/
222-
backgroundImage: string;
224+
backgroundImage: string | LinearGradient;
223225

224226
/**
225227
* Gets or sets the minimum width the view may grow to.

0 commit comments

Comments
 (0)