Add styles test page.

This commit is contained in:
Vasil Chimev
2015-08-21 17:05:57 +03:00
parent 00cb00e13c
commit df3d6e7834
9 changed files with 32 additions and 3 deletions

View File

@ -150,6 +150,7 @@
<TypeScriptCompile Include="apps\tests\ui\repeaterItems-bindingToGestures.ts" />
<TypeScriptCompile Include="apps\tests\xml-declaration\inherited-base-page.ts" />
<TypeScriptCompile Include="apps\tests\xml-declaration\inherited-page.ts" />
<Content Include="apps\ui-tests-app\app.css" />
<TypeScriptCompile Include="apps\ui-tests-app\pages\handlers.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\pages\htmlview.ts" />
<TypeScriptCompile Include="ui\animation\animation.d.ts" />
@ -933,6 +934,10 @@
<Content Include="apps\tests\xml-declaration\mymodulewithxml\MyControl.css" />
<Content Include="apps\tests\xml-declaration\mymodule\MyControl.css" />
<Content Include="apps\ui-tests-app\bindings\xmlbasics.xml" />
<TypeScriptCompile Include="apps\ui-tests-app\css\styles.ts" />
<Content Include="apps\ui-tests-app\css\import.css" />
<Content Include="apps\ui-tests-app\css\styles.css" />
<Content Include="apps\ui-tests-app\css\styles.xml" />
<Content Include="apps\ui-tests-app\dialogs\dialogs.xml" />
<Content Include="apps\ui-tests-app\image-view\gravatar.png" />
<Content Include="apps\ui-tests-app\image-view\roundimg.css" />
@ -953,7 +958,7 @@
<Content Include="apps\template-tab-navigation\app.css" />
<Content Include="apps\ui-tests-app\modal-view\login-page.xml" />
<Content Include="apps\ui-tests-app\modal-view\modalview.xml" />
<Content Include="apps\ui-tests-app\pages\red.png" />
<Content Include="apps\ui-tests-app\image-view\red.png" />
<Content Include="apps\ui-tests-app\pages\test2.png" />
<Content Include="apps\ui-tests-app\pages\textfield.xml" />
<Content Include="apps\ui-tests-app\pages\text\text-field.xml" />

View File

@ -0,0 +1,3 @@
#app {
background-color: lightblue;
}

3
apps/ui-tests-app/css/import.css vendored Normal file
View File

@ -0,0 +1,3 @@
#import {
background-color: lightpink;
}

View File

@ -0,0 +1,5 @@
#page {
background-color: lightcoral;
}
@import url('~/css/import.css');

View File

@ -0,0 +1,4 @@
export function onLoaded(args) {
var page = args.object;
page.addCss("#property { background-color: lightsalmon; }");
}

View File

@ -0,0 +1,9 @@
<Page loaded="onLoaded">
<WrapLayout>
<Button id="app" text="app" />
<Button id="inline" text="inline" style="background-color: lightgreen;" />
<Button id="page" text="page" />
<Button id="property" text="property" />
<Button id="import" text="import" />
</WrapLayout>
</Page>

View File

Before

Width:  |  Height:  |  Size: 925 B

After

Width:  |  Height:  |  Size: 925 B

View File

@ -1,6 +1,6 @@
<Page>
<StackLayout>
<Button text="ButtonCircle" style="width:200;height:200;color:white;border-radius:100;border-width:2;border-color:red;background-color:blue" />
<Button text="ButtonImage" style="width:200;height:200;color:white;border-radius:100;border-width:2;border-color:blue;background-image:url('~/pages/red.png')" />
<Button text="ButtonImage" style="width:200;height:200;color:white;border-radius:100;border-width:2;border-color:blue;background-image:url('~/image-view/red.png')" />
</StackLayout>
</Page>

View File

@ -10,7 +10,7 @@ import trace = require("trace");
trace.enable();
trace.setCategories(trace.categories.Test);
var list: string[] = ["pages", "layouts", "modal-view", "bindings", "dialogs", "web-view", "image-view"];
var list: string[] = ["pages", "bindings", "css", "dialogs", "layouts", "modal-view", "web-view", "image-view"];
// basePath is auto-changed when building multiple apps
var basePath = "";