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

Introduce background shorthand property (#5053)

Browse Source 
* Introduce background shorthand style property

* Add text property in parser for BackgroundPosition value

reason: prevent parsing of background position (pass it as sample string)

* Introduce background-shorthand test page

* Modify parser unit tests to respect the new BackgroundPosition 'text' property
This commit is contained in:
Alexander Djenkov
2017-11-15 14:07:40 +02:00
committed by Svetoslav
parent ac3c895c89
commit fc9a0b7ad8
11 changed files with 110 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/app/ui-tests-app/css/background-shorthand.ts Normal file
View File

@ -0,0 +1,48 @@
import * as pages from "tns-core-modules/ui/page";
import { EventData } from "tns-core-modules/data/observable";
import * as button from "tns-core-modules/ui/button";
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
let testIndex = 0;
const tests = [
{ name: "black hex color only", background: "#000000" },
{ name: "yellow hex color only", background: "#ffff00" },
{ name: "blue color only", background: "blue" },
{ name: "repeat image only", background: 'url("~/ui-tests-app/resources/images/icon.png")' },
{ name: "[straight] image only, no-repeat ", background: 'url("~/ui-tests-app/resources/images/icon.png") no-repeat' },
{ name: "[straight] green color, image, no-repeat", background: 'green url("~/ui-tests-app/resources/images/icon.png") no-repeat' },
{ name: "[straight] yellow hex color, image, no-repeat, position pixels", background: '#ffff00 url("~/ui-tests-app/resources/images/icon.png") no-repeat 200px 200px' },
{ name: "[straight] yellow hex color, image, repeat-y, position pixels", background: '#ffff00 url("~/ui-tests-app/resources/images/icon.png") repeat-y 100px 500px' },
{ name: "[straight] orange hex color, image, no-repeat, position percents", background: '#F9791F url("~/ui-tests-app/resources/images/icon.png") no-repeat 100% 100%' },
{ name: "[straight] green color, image, repeat-x, position percents", background: 'green url("~/ui-tests-app/resources/images/icon.png") repeat-x 100% 100%' },
{ name: "[straight] blue color, image, repeat-x, position", background: 'blue url("~/ui-tests-app/resources/images/icon.png") repeat-x 150 150' },
{ name: "[shuffle] no-repeat, image only", background: 'no-repeat url("~/ui-tests-app/resources/images/icon.png")' },
{ name: "[shuffle] no-repeat, green color, image, ", background: 'no-repeat green url("~/ui-tests-app/resources/images/icon.png")' },
{ name: "[shuffle] yellow hex color, position pixels, image, no-repeat", background: '#ffff00 200px 200px url("~/ui-tests-app/resources/images/icon.png") no-repeat' },
{ name: "[shuffle] image, repeat-y, yellow hex color, position pixels", background: 'url("~/ui-tests-app/resources/images/icon.png") repeat-y #ffff00 100px 500px' },
{ name: "[shuffle] position percents, image, no-repeat, orange hex color", background: '100% 100% url("~/ui-tests-app/resources/images/icon.png") no-repeat #F9791F' },
{ name: "[shuffle] position percents, image, repeat-x, green color", background: '100% 100% url("~/ui-tests-app/resources/images/icon.png") repeat-x green' },
{ name: "[shuffle] image, repeat-x, position, blue color,", background: 'url("~/ui-tests-app/resources/images/icon.png") repeat-x 150 150 blue' },
]
export function onLoaded(args) {
applyNextStyle(args);
}
export function onButtonTap(args) {
applyNextStyle(args);
}
function applyNextStyle(args) {
let page = <pages.Page>args.object.page;
let btn = <button.Button>args.object;
let gridElement = <GridLayout>page.getViewById("Container");
btn.text = tests[testIndex].name;
gridElement.background = tests[testIndex].background;
testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
}

7
apps/app/ui-tests-app/css/background-shorthand.xml Normal file
View File

@ -0,0 +1,7 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
<GridLayout rows="*, 7*">
<Button row="0" text="a1" tap="onButtonTap"/>
<GridLayout id="Container" fontSize="12" borderColor="black" margin="5" borderWidth="1" row="1"/>
</GridLayout>
</Page>

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

@ -40,5 +40,6 @@ export function loadExamples() {
examples.set("styled-formatted-text", "css/styled-formatted-text");
examples.set("non-uniform-radius", "css/non-uniform-radius");
examples.set("missing-background-image", "css/missing-background-image");
examples.set("background-shorthand", "css/background-shorthand");
return examples;
}