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

UIScrollViews will now report 'scroll' events and the background in ios will adjust added layers (#4762)

Browse Source
This commit is contained in:
Panayot Cankov
2017-08-29 10:25:45 +03:00
committed by SvetoslavTsenov
parent 3fd65cce9f
commit 12c0199fb5
18 changed files with 413 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@ export function loadExamples() {
examples.set("bindings", "list-view/listview-binding");
examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
examples.set("csslv", "list-view/csslv");
examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
return examples;
}

47
apps/app/ui-tests-app/list-view/scrolling-and-sizing.css Normal file
View File

@@ -0,0 +1,47 @@
.p-10 {
padding: 10 20 10 20;
}
.m-b-10 {
margin-bottom: 10;
}
.page {
background-color: #F2F2F2;
}
TextView {
background-color: #FFF;
}
.bordered {
border-width: 5;
border-color: green;
}
.fixed-height {
height: 55;
}
.border-radius {
border-radius: 15;
}
.border-radius-nonuniform {
border-radius: 10 20 30 40;
}
.bordered-nonuniform {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: purple;
border-top-width: 5;
border-right-width: 10;
border-bottom-width: 15;
border-left-width: 20;
}
.body {
font-size: 11;
}

4
apps/app/ui-tests-app/list-view/scrolling-and-sizing.ts Normal file
View File

@@ -0,0 +1,4 @@
export function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = ["The quick", "brown fox", "jumped over", "the", "lazy dog."];
}

55
apps/app/ui-tests-app/list-view/scrolling-and-sizing.xml Normal file
View File

@@ -0,0 +1,55 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout>
<StackLayout class="p-10" row="0">
<Label text="Default style = scrolls out of container" class="body m-b-10" />
<ListView items="{{ $value }}" height="40">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
<StackLayout class="p-10" row="1">
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
<ListView items="{{ $value }}" height="40" class="bordered">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
<StackLayout class="p-10" row="2">
<Label text="border-radius" class="body m-b-10" />
<ListView items="{{ $value }}" class="bordered fixed-height border-radius">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
<StackLayout class="p-10" row="2">
<Label text="border-radius = weird" class="body m-b-10" />
<ListView items="{{ $value }}" class="bordered fixed-height border-radius-nonuniform">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
<StackLayout class="p-10" row="3">
<Label text="border-width = weird" class="body m-b-10" />
<ListView items="{{ $value }}" class="bordered-nonuniform fixed-height">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</Page>

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

@@ -25,6 +25,7 @@ export function pageLoaded(args: EventData) {
examples.set("modalview", "modal-view/modal-view");
examples.set("page", "page/main-page");
examples.set("perf", "perf/main-page");
examples.set("scroll-view", "scroll-view/main-page");
examples.set("segStyle", "segmented-bar/all");
examples.set("search-bar", "search-bar/main-page");
examples.set("tab-view", "tab-view/main-page");

16
apps/app/ui-tests-app/scroll-view/main-page.ts Normal file
View File

@@ -0,0 +1,16 @@
import { EventData } from "tns-core-modules/data/observable";
import { SubMainPageViewModel } from "../sub-main-page-view-model";
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
import { Page } from "tns-core-modules/ui/page";
export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
export function loadExamples() {
const examples = new Map<string, string>();
examples.set("scrolling-and-sizing", "scroll-view/scrolling-and-sizing");
return examples;
}

6
apps/app/ui-tests-app/scroll-view/main-page.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView orientation="vertical" row="1">
<WrapLayout id="wrapLayoutWithExamples"/>
</ScrollView>
</Page>

47
apps/app/ui-tests-app/scroll-view/scrolling-and-sizing.css Normal file
View File

@@ -0,0 +1,47 @@
.p-10 {
padding: 10 20 10 20;
}
.m-b-10 {
margin-bottom: 10;
}
.page {
background-color: #F2F2F2;
}
ScrollView {
background-color: #FFF;
}
.bordered {
border-width: 5;
border-color: green;
}
.fixed-height {
height: 55;
}
.border-radius {
border-radius: 15;
}
.border-radius-nonuniform {
border-radius: 10 20 30 40;
}
.bordered-nonuniform {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: purple;
border-top-width: 5;
border-right-width: 10;
border-bottom-width: 15;
border-left-width: 20;
}
.body {
font-size: 11;
}

65
apps/app/ui-tests-app/scroll-view/scrolling-and-sizing.xml Normal file
View File

@@ -0,0 +1,65 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout>
<StackLayout class="p-10" row="0">
<Label text="Default style = scrolls out of container" class="body m-b-10" />
<ScrollView height="40">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout class="p-10" row="1">
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
<ScrollView class="bordered" height="40">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout class="p-10" row="2">
<Label text="border-radius" class="body m-b-10" />
<ScrollView class="bordered fixed-height border-radius">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout class="p-10" row="2">
<Label text="border-radius = weird" class="body m-b-10" />
<ScrollView class="bordered fixed-height border-radius-nonuniform">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout class="p-10" row="3">
<Label text="border-width = weird" class="body m-b-10" />
<ScrollView class="bordered-nonuniform fixed-height">
<StackLayout>
<GridLayout width="30" height="30" backgroundColor="red" />
<GridLayout width="30" height="30" backgroundColor="yellow" />
<GridLayout width="30" height="30" backgroundColor="green" />
</StackLayout>
</ScrollView>
</StackLayout>
</StackLayout>
</Page>

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

@@ -14,5 +14,6 @@ export function loadExamples() {
examples.set("text-view-border", "text-view/text-view-border");
examples.set("text-view-hint-color", "text-view/text-view-hint-color");
examples.set("hint-text-color", "text-view/hint-text-color");
examples.set("scrolling-and-sizing", "text-view/scrolling-and-sizing");
return examples;
}

47
apps/app/ui-tests-app/text-view/scrolling-and-sizing.css Normal file
View File

@@ -0,0 +1,47 @@
.p-10 {
padding: 10 20 10 20;
}
.m-b-10 {
margin-bottom: 10;
}
.page {
background-color: #F2F2F2;
}
TextView {
background-color: #FFF;
}
.bordered {
border-width: 5;
border-color: green;
}
.fixed-height {
height: 55;
}
.border-radius {
border-radius: 15;
}
.border-radius-nonuniform {
border-radius: 10 20 30 40;
}
.bordered-nonuniform {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: purple;
border-top-width: 5;
border-right-width: 10;
border-bottom-width: 15;
border-left-width: 20;
}
.body {
font-size: 11;
}

35
apps/app/ui-tests-app/text-view/scrolling-and-sizing.xml Normal file
View File

@@ -0,0 +1,35 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout>
<StackLayout class="p-10" row="0">
<Label text="Default style = scrolls out of container" class="body m-b-10" />
<TextView hint="Add your comment..." />
</StackLayout>
<StackLayout class="p-10" row="1">
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
<TextView hint="Add your comment..." class="bordered" />
</StackLayout>
<StackLayout class="p-10" row="2">
<Label text="border-radius" class="body m-b-10" />
<TextView hint="Add your comment..." class="bordered fixed-height border-radius" />
</StackLayout>
<StackLayout class="p-10" row="2">
<Label text="border-radius = weird" class="body m-b-10" />
<TextView hint="Add your comment..." class="bordered fixed-height border-radius-nonuniform" />
</StackLayout>
<StackLayout class="p-10" row="3">
<Label text="border-width = weird" class="body m-b-10" />
<TextView hint="Add your comment..." class="bordered-nonuniform fixed-height" />
</StackLayout>
</StackLayout>
</Page>