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 branch 'master' of github.com:NativeScript/NativeScript

Browse Source 
# Conflicts:
#	apps/automated/src/test-runner.ts
#	apps/automated/src/ui/bottom-navigation/bottom-navigation-navigation-tests.ts
#	apps/ui/src/bottom-navigation/events-page.ts
#	apps/ui/src/main-page.ts
#	apps/ui/src/test-page-main-view-model.ts
#	package.json
#	packages/core/color/color-common.ts
#	packages/core/color/index.d.ts
#	packages/core/ui/action-bar/index.android.ts
#	packages/core/ui/bottom-navigation/index.android.ts
#	packages/core/ui/core/view/index.ios.ts
#	packages/core/ui/core/view/view-helper/view-helper-common.ts
#	packages/core/ui/index.ts
#	packages/core/ui/styling/background.android.ts
#	packages/core/ui/tab-navigation-base/tab-strip-item/index.ts
#	packages/webpack/jasmine-config/reporter.ts
This commit is contained in:
Martin Guillon
2021-04-08 16:36:02 +02:00
parent 135767a146 8739e8d6cf
commit e6598aee0f
307 changed files with 8296 additions and 8292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/ui/src/bottom-navigation/background-color-page.css
View File

@@ -1,19 +0,0 @@
BottomNavigation {
background-color: gold;
}
TabContentItem.special {
background-color: olive;
}
TabStrip {
background-color: skyblue;
}
TabStripItem.special {
background-color: teal;
}
TabStripItem.special:active {
background-color: yellowgreen;
}

24
apps/ui/src/bottom-navigation/background-color-page.xml
View File

@@ -1,24 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

6
apps/ui/src/bottom-navigation/binding-page.ts
View File

@@ -1,6 +0,0 @@
import { BottomNavigationViewModel } from './bottom-navigation-view-model';
export function bottomNavigaitonLoaded(args) {
const bottomNav = args.object.page;
bottomNav.bindingContext = new BottomNavigationViewModel();
}

19
apps/ui/src/bottom-navigation/binding-page.xml
View File

@@ -1,19 +0,0 @@
<Page class="page" navigatingTo="navigatingTo">
<ActionBar title="BottomNavigation binding" icon="" class="action-bar">
</ActionBar>
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
<Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
<TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
</TabStrip>
</BottomNavigation>
</GridLayout>
</GridLayout>
</Page>

1
apps/ui/src/bottom-navigation/bottom-navigation-css-page.css
View File

@@ -1 +0,0 @@
/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

19
apps/ui/src/bottom-navigation/bottom-navigation-css-page.ts
View File

@@ -1,19 +0,0 @@
import { View } from '@nativescript/core/ui/core/view';
import { Page } from '@nativescript/core/ui/page';
export function loaded(args) {
const page = <Page>(<View>args.object).page;
const view = page.getViewById('bottomNavigation');
(<any>view).textTransform = 'capitalize';
}
export function applyTap(args) {
const page = <Page>(<View>args.object).page;
const css = '#bottomNavigation { ' + args.object.tag + ' }';
page.css = css;
}
export function resetTap(args) {
const page = <Page>(<View>args.object).page;
page.css = '';
}

35
apps/ui/src/bottom-navigation/bottom-navigation-css-page.xml
View File

@@ -1,35 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip>
<TabStripItem title="IteM onE"></TabStripItem>
<TabStripItem title="IteM twO"></TabStripItem>
<TabStripItem title="IteM threE"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<ScrollView>
<StackLayout>
<Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
<Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
<Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
<Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
<Button text="reset" tap="resetTap" style.fontSize="8"/>
</StackLayout>
</ScrollView>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Item 2"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Item 3"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

17
apps/ui/src/bottom-navigation/bottom-navigation-page.ts
View File

@@ -1,17 +0,0 @@
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 1;
}

59
apps/ui/src/bottom-navigation/bottom-navigation-page.xml
View File

@@ -1,59 +0,0 @@
<Page>
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" automationText="goToSecond" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" automationText="goToFirst" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" automationText="goToSecond" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" automationText="goToFirst" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" automationText="goToSecond" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" automationText="goToSecond" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

58
apps/ui/src/bottom-navigation/bottom-navigation-view-model.ts
View File

@@ -1,58 +0,0 @@
import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
import { Label } from '@nativescript/core/ui/label';
import { Observable } from '@nativescript/core/data/observable';
import { TabStripItem } from '@nativescript/core/ui/tab-navigation-base/tab-strip-item';
import { TabContentItem } from '@nativescript/core/ui/tab-navigation-base/tab-content-item';
export class BottomNavigationViewModel extends Observable {
private itemsCount: number = 1;
public tabStripItems = new Array<TabStripItem>();
public tabContentItems = new Array<TabContentItem>();
constructor() {
super();
this.createItems();
this.createItems();
}
public createItems() {
console.log('Create item');
const _tabStripItems = new Array<TabStripItem>();
const _tabContentItems = new Array<TabContentItem>();
for (let index = 0; index < this.itemsCount; index++) {
_tabStripItems.push(this.createTabStripItem(index));
_tabContentItems.push(this.createContentStripItem(index));
}
this.tabStripItems = _tabStripItems;
this.tabContentItems = _tabContentItems;
this.itemsCount++;
}
public removeLastItem() {
console.log('Remove item');
this.tabStripItems.pop();
this.tabContentItems.pop();
}
private createTabStripItem(index: number): TabStripItem {
const item = new TabStripItem();
item.title = 'Item ' + index;
item.iconSource = 'res://icon';
return item;
}
private createContentStripItem(index: number): TabContentItem {
const contentItem = new TabContentItem();
const label = new Label();
const gridlayout = new GridLayout();
label.text = 'Content Item ' + index;
gridlayout.addChild(label);
contentItem.content = gridlayout;
return contentItem;
}
}

27
apps/ui/src/bottom-navigation/color-page.css
View File

@@ -1,27 +0,0 @@
BottomNavigation {
color: gold;
}
TabContentItem.special {
color: olive;
}
TabStrip {
color: skyblue;
}
TabStripItem.special {
color: teal;
}
TabStripItem.special:active {
color: yellowgreen;
}
TabStripItem.nested Label {
color: teal;
}
TabStripItem.nested:active Label {
color: yellowgreen;
}

33
apps/ui/src/bottom-navigation/color-page.xml
View File

@@ -1,33 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

31
apps/ui/src/bottom-navigation/custom-tabstrip-page.css
View File

@@ -1,31 +0,0 @@
.custom-tabstrip {
height: 100;
vertical-align: bottom;
ios-overflow-safe-area-enabled: false;
}
.custom-tabstripitem {
height: 80;
width: 80;
vertical-align: center;
horizontal-align: center;
clip-path: circle(100% at 50% 50%);
}
.custom-title {
color: white;
vertical-align: center;
horizontal-align: center;
}
.skyblue {
background-color: skyblue;
}
.gold {
background-color: gold;
}
.olive {
background-color: olive;
}

24
apps/ui/src/bottom-navigation/custom-tabstrip-page.ts
View File

@@ -1,24 +0,0 @@
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 2;
}

41
apps/ui/src/bottom-navigation/custom-tabstrip-page.xml
View File

@@ -1,41 +0,0 @@
<Page>
<ActionBar title="BottomNavigation Custom TabStrip" icon="" class="action-bar">
</ActionBar>
<GridLayout>
<GridLayout>
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="olive">
<Label text="Third View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</GridLayout>
<GridLayout columns="*, *, *" class="custom-tabstrip">
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
<Label text="First" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
<Label text="Second" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
<Label text="Third" class="custom-title"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>

28
apps/ui/src/bottom-navigation/dynamic-color-change-page.css
View File

@@ -1,28 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
TabStripItem:active {
background-color: magenta;
}
.tabsClass0 {
}
.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;
un-selected-item-color: pink;
}

39
apps/ui/src/bottom-navigation/dynamic-color-change-page.ts
View File

@@ -1,39 +0,0 @@
import { View } from '@nativescript/core/ui/core/view';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigation } from '@nativescript/core/ui/bottom-navigation';
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>page.getViewById('bottomNavigation');
switch (bottomNavigation.tabStrip.className) {
case 'tabsClass0':
bottomNavigation.tabStrip.className = 'tabsClass1';
break;
case 'tabsClass1':
bottomNavigation.tabStrip.className = 'tabsClass2';
break;
case 'tabsClass2':
bottomNavigation.tabStrip.className = 'tabsClass0';
break;
}
}
export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>page.getViewById('bottomNavigation');
const tabStripItem0 = bottomNavigation.tabStrip.items[0];
const tabStripItem1 = bottomNavigation.tabStrip.items[1];
const tabStripItem2 = bottomNavigation.tabStrip.items[2];
const iconSource0 = tabStripItem0.iconSource;
tabStripItem0.iconSource = tabStripItem1.iconSource;
tabStripItem1.iconClass = 'font-awesome font-size';
tabStripItem1.iconSource = tabStripItem2.iconSource;
tabStripItem2.iconClass = 'font-awesome font-size';
tabStripItem2.iconSource = iconSource0;
}

44
apps/ui/src/bottom-navigation/dynamic-color-change-page.xml
View File

@@ -1,44 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Favorites"></Label>
<Image src="res://add_to_fav"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Up"></Label>
<Image src="res://up"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Favorites Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Up Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</GridLayout>
</GridLayout>
</Page>

42
apps/ui/src/bottom-navigation/events-page.ts
View File

@@ -1,42 +0,0 @@
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigation, SelectedIndexChangedEventData } from '@nativescript/core/ui/bottom-navigation';
export function goToFirst(args: EventData) {
console.log('---> goToFirst');
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log('---> goToSecond');
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log('---> goToThird');
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log('---> onSelectedIndexChanged', args.eventName);
console.log('---> oldIndex', args.oldIndex);
console.log('---> newIndex', args.newIndex);
}
export function onFirstTabStripItemTap(args: EventData) {
console.log('---> onFirstTabStripItemTap', args.eventName);
}
export function onSecondTabStripItemTap(args: EventData) {
console.log('---> onSecondTabStripItemTap', args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log('---> onThirdTabStripItemTap', args.eventName);
}

36
apps/ui/src/bottom-navigation/events-page.xml
View File

@@ -1,36 +0,0 @@
<Page>
<BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" />
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View" backgroundColor="green" />
<Button tap="goToThird" text="go to thrid" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="blue" />
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

45
apps/ui/src/bottom-navigation/fancy-fonts-page.css
View File

@@ -1,45 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
Page {
background-color: tomato;
}
ActionBar {
background-color: aquamarine;
}
Button {
background-color: lightskyblue;
}
BottomNavigation {
background-color: lightgreen;
}
#lastStripItem {
color: greenyellow;
background-color: black;
}
TabStripItem:active,
#lastStripItem:active {
background-color: coral;
}
#second-tab-content-item {
background-color: blueviolet;
}
#third-tab-content-item {
background-color: blue;
}
#fourth-tab-content-item {
background-color: gray;
}
#fifth-tab-content-item {
background-color: brown;
}

9
apps/ui/src/bottom-navigation/fancy-fonts-page.ts
View File

@@ -1,9 +0,0 @@
import { EventData, Page, BottomNavigation } from '@nativescript/core';
export const selectTab = (args: EventData) => {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNavigation');
const index = (<any>args.object).tag;
bottomNav.selectedIndex = index;
};

82
apps/ui/src/bottom-navigation/fancy-fonts-page.xml
View File

@@ -1,82 +0,0 @@
<Page>
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="bottomNavigation" automationText="tabNavigation" class="font-awesome">
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
<TabStripItem iconSource="font://&#xf206;" title="icon">
</TabStripItem>
<TabStripItem iconSource="res://up" title="ICON-RES"></TabStripItem>
<TabStripItem title="Simply Long Title"></TabStripItem>
<TabStripItem iconSource="res://icon" id="lastStripItem" title="LAST"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout rows="*, *, *, 40" columns="*, *">
<Label text="iconSource: " row="0" col="0" />
<Image src="res://baseline_motorcycle_black_24" style="border-color: gray; border-width: 2px;" row="0" col="1" />
<Label text="text: " row="1" col="0" />
<Label text="motorcycle-res" row="1" col="1" />
<Label text="background-color: aquamarine; from selected item" style="background-color: aquamarine;" row="2" colSpan="2" />
<Button tap="selectTab" text="selectSecondTab" automationText="selectSecondTab" tag="1" row="3" colSpan="2" />
</GridLayout>
</TabContentItem>
<TabContentItem id="second-tab-content-item">
<StackLayout>
<WrapLayout orientation="horizontal">
<Label text="font: " automationText="fa-bicycle-icon-content" />
<Label text="font://&#xf206;" />
</WrapLayout>
<WrapLayout orientation="horizontal">
<Label text="title: " />
<Label text="fa-bicycle-font-awesome" />
</WrapLayout>
<Label text="background-color: blueviolet;" style="background-color: blueviolet;" />
<Button tap="selectTab" text="selectLastTab" automationText="selectSecondTab" tag="4" row="2" colSpan="2" />
</StackLayout>
</TabContentItem>
<TabContentItem id="third-tab-content-item">
<StackLayout>
<WrapLayout orientation="horizontal">
<Label text="iconSource: " automationText="icon-res-content"></Label>
<Image src="res://up" style="border-color: gray; border-width: 2px;"></Image>
</WrapLayout>
<WrapLayout orientation="horizontal">
<Label text="title: " automationText="icon-res-content"></Label>
<Label text="ICON-RES"></Label>
</WrapLayout>
<Label text="background-color: blue;" style="background-color: blue;"></Label>
</StackLayout>
</TabContentItem>
<TabContentItem id="fourth-tab-content-item">
<StackLayout>
<WrapLayout orientation="horizontal">
<Label text="title: "></Label>
<Label text="Simply Long Title"></Label>
</WrapLayout>
<Label text="background-color: gray;" style="background-color: gray;"></Label>
</StackLayout>
</TabContentItem>
<TabContentItem id="fifth-tab-content-item">
<StackLayout>
<WrapLayout orientation="horizontal">
<Label text="iconSource: "></Label>
<Image src="res://icon" style="border-color: gray; border-width: 2px;"></Image>
</WrapLayout>
<WrapLayout orientation="horizontal">
<Label text="title: "></Label>
<Label text="LAST"></Label>
</WrapLayout>
<Label text="background-color: brown;" style="background-color: brown;">></Label>
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

14
apps/ui/src/bottom-navigation/first-page.ts
View File

@@ -1,14 +0,0 @@
import { EventData } from '@nativescript/core/data/observable';
import { Button } from '@nativescript/core/ui/button';
export function goToSecond(args: EventData) {
console.log('---> goToSecond Page');
const button = <Button>args.object;
button.page.frame.navigate('bottom-navigation/second-page');
}
export function goBack(args: EventData) {
console.log('---> goBack');
const button = <Button>args.object;
button.page.frame.goBack();
}

7
apps/ui/src/bottom-navigation/first-page.xml
View File

@@ -1,7 +0,0 @@
<Page backgroundColor="lightgreen" actionBarHidden="true">
<StackLayout>
<Label text="First Page" />
<Button tap="goToSecond" text="go to second page" />
<Button tap="goBack" text="go to back" />
</StackLayout>
</Page>

39
apps/ui/src/bottom-navigation/font-icons-page.css
View File

@@ -1,39 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
TabStrip {
color: mediumvioletred;
}
TabStripItem {
color: skyblue;
}
TabStripItem:active {
color: darkblue;
}
TabStripItem.special Image {
color: lightgreen;
}
TabStripItem.special:active Image {
color: darkgreen;
}
TabStripItem.special Label {
color: gold;
}
TabStripItem.special:active Label {
color: darkgoldenrod;
}
TabStripItem:active .font-size {
font-size: 10;
}

63
apps/ui/src/bottom-navigation/font-icons-page.xml
View File

@@ -1,63 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<!-- font family + font size + color -->
<TabStripItem class="special">
<Label text="All Set"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
<!-- default font + valid char code -->
<TabStripItem>
<Label text="Invalid Font" />
<Image src="font://&#xF10B;" />
</TabStripItem>
<!-- font family + invalid char code -->
<TabStripItem>
<Label text="Invalid Char" />
<Image src="font://&#xF556;" class="font-awesome font-size"/>
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<StackLayout>
<Label text="char code: phone" />
<Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: lightgreen" />
<Label text="icon color active: darkgreen" />
<Label text="title color inactive: gold" />
<Label text="title color active: darkgoldenrod" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="char code: phone" />
<Label text="font: default/invalid" />
<Label text="font size: default" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="char code: invalid" />
<Label text="font: Font Awesome" />
<Label text="font size: 36" />
<Label text="icon color inactive: skyblue" />
<Label text="icon color active: darkblue" />
<Label text="title color inactive: skyblue" />
<Label text="title color active: darkblue" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

27
apps/ui/src/bottom-navigation/font-page.css
View File

@@ -1,27 +0,0 @@
BottomNavigation {
font: 24 'Times New Roman', Times, serif;
}
TabContentItem.special {
font: italic bold 12 Georgia, serif;
}
TabStrip {
font: 15 arial, sans-serif;
}
TabStripItem.special {
font: 12 monospace;
}
TabStripItem.special:active {
font: 16 monospace;
}
TabStripItem.nested Label {
font: 12 monospace;
}
TabStripItem.nested:active Label {
font: 16 monospace;
}

33
apps/ui/src/bottom-navigation/font-page.xml
View File

@@ -1,33 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation font" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

17
apps/ui/src/bottom-navigation/icon-change-page.ts
View File

@@ -1,17 +0,0 @@
import { BottomNavigation, SelectedIndexChangedEventData } from '@nativescript/core/ui/bottom-navigation';
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = <BottomNavigation>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = 'res://icon';
newItem.title = 'selected';
}
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = 'res://testlogo';
oldItem.title = 'unselected';
}
}

23
apps/ui/src/bottom-navigation/icon-change-page.xml
View File

@@ -1,23 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="first tab"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="second tab"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

30
apps/ui/src/bottom-navigation/icon-title-placement-page.xml
View File

@@ -1,30 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

27
apps/ui/src/bottom-navigation/issue-5470-page.xml
View File

@@ -1,27 +0,0 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

7
apps/ui/src/bottom-navigation/item-color-page.css
View File

@@ -1,7 +0,0 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}

40
apps/ui/src/bottom-navigation/item-color-page.xml
View File

@@ -1,40 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation item-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation">
<TabStrip selectedItemColor="red" unSelectedItemColor="green">
<TabStripItem>
<Label text="First"/>
<Image src="res://baseline_motorcycle_black_24"/>
</TabStripItem>
<TabStripItem>
<Label text="Second"/>
<Image src="res://up"/>
</TabStripItem>
<TabStripItem>
<Label text="Third"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

33
apps/ui/src/bottom-navigation/main-page.ts
View File

@@ -1,33 +0,0 @@
import { EventData } from '@nativescript/core/data/observable';
import { SubMainPageViewModel } from '../sub-main-page-view-model';
import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
import { Page } from '@nativescript/core/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('bottom-navigation', 'bottom-navigation/bottom-navigation-page');
examples.set('issue-5470', 'bottom-navigation/issue-5470-page');
examples.set('background-color', 'bottom-navigation/background-color-page');
examples.set('color', 'bottom-navigation/color-page');
examples.set('events', 'bottom-navigation/events-page');
examples.set('font', 'bottom-navigation/font-page');
examples.set('text-transform', 'bottom-navigation/text-transform-page');
examples.set('icon-title-placement', 'bottom-navigation/icon-title-placement-page');
examples.set('icon-change', 'bottom-navigation/icon-change-page');
examples.set('binding', 'bottom-navigation/binding-page');
examples.set('font-icons', 'bottom-navigation/font-icons-page');
examples.set('fancy-fonts', 'bottom-navigation/fancy-fonts-page');
examples.set('css-text-transform', 'bottom-navigation/bottom-navigation-css-page');
examples.set('custom-tabstrip', 'bottom-navigation/custom-tabstrip-page');
examples.set('reselect', 'bottom-navigation/reselect-page');
examples.set('item-color', 'bottom-navigation/item-color-page');
examples.set('dynamic-color-change', 'bottom-navigation/dynamic-color-change-page');
return examples;
}

6
apps/ui/src/bottom-navigation/main-page.xml
View File

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

56
apps/ui/src/bottom-navigation/reselect-page.ts
View File

@@ -1,56 +0,0 @@
import { EventData, Frame, Page, TabStripItemEventData, SelectedIndexChangedEventData, BottomNavigation, TabStrip } from '@nativescript/core';
export function goToFirst(args: EventData) {
console.log('---> goToFirst');
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log('---> goToSecond');
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log('---> goToThird');
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
bottomNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log('---> onSelectedIndexChanged', args.eventName);
console.log('---> oldIndex', args.oldIndex);
console.log('---> newIndex', args.newIndex);
}
export function onItemTap(args: TabStripItemEventData) {
console.log('---> onItemTap', args.eventName);
console.log('---> onItemTap', args.index);
console.log('---> onItemTap', args.object);
const tabStrip = <TabStrip>args.object;
const page = <Page>tabStrip.page;
const frame = <Frame>page.getViewById('frame');
const bottomNav = <BottomNavigation>page.getViewById('bottomNav');
console.log('---> onItemTap selectedIndex', bottomNav.selectedIndex);
if (bottomNav.selectedIndex === args.index && frame.canGoBack()) {
frame.goBack();
}
}
export function onFirstTabStripItemTap(args: EventData) {
console.log('---> onFirstTabStripItemTap', args.eventName);
}
export function onSecondTabStripItemTap(args: EventData) {
console.log('---> onSecondTabStripItemTap', args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log('---> onThirdTabStripItemTap', args.eventName);
}

37
apps/ui/src/bottom-navigation/reselect-page.xml
View File

@@ -1,37 +0,0 @@
<Page>
<BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip itemTap="onItemTap">
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" id="label" />
<Button tap="goToSecond" text="go to second item" id="button" />
<Frame defaultPage="bottom-navigation/first-page" id="frame" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second Content Item" backgroundColor="lightgreen" />
<Button tap="goToThird" text="go to thrid item" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First Content Item" backgroundColor="lightblue" />
<Button tap="goToFirst" text="go to first item" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

13
apps/ui/src/bottom-navigation/second-page.ts
View File

@@ -1,13 +0,0 @@
import { Button, EventData } from '@nativescript/core';
export function goToFirst(args: EventData) {
console.log('---> goToFirst Page');
const button = <Button>args.object;
button.page.frame.navigate('bottom-navigation/first-page');
}
export function goBack(args: EventData) {
console.log('---> goBack');
const button = <Button>args.object;
button.page.frame.goBack();
}

7
apps/ui/src/bottom-navigation/second-page.xml
View File

@@ -1,7 +0,0 @@
<Page backgroundColor="lightblue" actionBarHidden="true">
<StackLayout>
<Label text="Second Page" />
<Button tap="goToFirst" text="go to first page" />
<Button tap="goBack" text="go back" />
</StackLayout>
</Page>

27
apps/ui/src/bottom-navigation/text-transform-page.css
View File

@@ -1,27 +0,0 @@
BottomNavigation {
text-transform: lowercase;
}
TabContentItem.special {
text-transform: uppercase;
}
TabStrip {
text-transform: capitalize;
}
TabStripItem.special {
text-transform: lowercase;
}
TabStripItem.special:active {
text-transform: uppercase;
}
TabStripItem.nested Label {
text-transform: lowercase;
}
TabStripItem.nested:active Label {
text-transform: uppercase;
}

33
apps/ui/src/bottom-navigation/text-transform-page.xml
View File

@@ -1,33 +0,0 @@
<Page class="page">
<ActionBar title="BottomNavigation text-transform" class="action-bar">
</ActionBar>
<BottomNavigation automationText="tabNavigation">
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>
<TabStripItem class="nested">
<Label text="third" />
</TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

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

@@ -17,6 +17,7 @@ export function loadExamples() {
examples.set('line-height', 'css/line-height-page');
examples.set('decoration', 'css/text-decoration-page');
examples.set('transform', 'css/text-transform-page');
examples.set('shadow', 'css/text-shadow-page');
examples.set('whitespace', 'css/white-space-page');
examples.set('progress-switch', 'css/progress-switch-page');
examples.set('zindex', 'css/zindex-page');

35
apps/ui/src/css/text-shadow-page.ts Normal file
View File

@@ -0,0 +1,35 @@
import { EventData, TextBase } from '@nativescript/core';
// prettier-ignore
const possibleValues = [
'2 10 4 rgb(255, 100, 100)',
'2 10 2 rgba(10, 10, 10, 0.5)',
'1 1 1 #55a',
'2 2 2 #333',
'0 0 1 yellow',
'-1 -1 1 #333',
''
];
let currentIndex = 0;
export function buttonTap(args: EventData) {
let page = (<TextBase>args.object).page;
let lbl = <TextBase>page.getViewById('Label');
let btn = <TextBase>page.getViewById('Button');
let textField = <TextBase>page.getViewById('TextField');
let textView = <TextBase>page.getViewById('TextView');
let newIndex = currentIndex++ % possibleValues.length;
let newValue = possibleValues[newIndex];
lbl.textShadow = newValue;
btn.textShadow = newValue;
textField.textShadow = newValue;
textView.textShadow = newValue;
if (lbl.text === 'Change text') {
lbl.text = btn.text = textField.text = textView.text = 'Text changed';
} else {
lbl.text = btn.text = textField.text = textView.text = 'Change text';
}
}

9
apps/ui/src/css/text-shadow-page.xml Normal file
View File

@@ -0,0 +1,9 @@
<Page>
<StackLayout>
<Button id="Change" automationText="Change" text="Change" tap="buttonTap" />
<Label id="Label" automationText="Label" text="Label" />
<Button id="Button" automationText="Button" text="Button" />
<TextField id="TextField" automationText="TextField" text="TextField" />
<TextView id="TextView" automationText="TextView" text="TextView" />
</StackLayout>
</Page>

2
apps/ui/src/flexbox/flexbox-main-page.ts
View File

@@ -18,7 +18,7 @@ export function loadExamples() {
examples.set('flex-perf', 'flexbox/flexbox-perf-comparison-page');
examples.set('flexbox-4143', 'flexbox/flexbox-4143-page');
examples.set('flexbox-4834', 'flexbox/flexbox-4834-page');
examples.set("flexbox-ispassthroughparent", "flexbox/flexbox-ispassthroughparent-page");
examples.set('flexbox-ispassthroughparent', 'flexbox/flexbox-ispassthroughparent-page');
return examples;
}

10
apps/ui/src/fonts-tests/all-fonts-page.ts
View File

@@ -3,7 +3,7 @@ import { Page, NavigatedData } from '@nativescript/core/ui/page';
import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
import { ScrollView } from '@nativescript/core/ui/scroll-view';
import { Label } from '@nativescript/core/ui/label';
import { FontStyle, FontWeight } from '@nativescript/core/ui/enums';
import { Enums } from '@nativescript/core';
import * as typeUtils from '@nativescript/core/utils/types';
import { Color } from '@nativescript/core/color';
import { isIOS } from '@nativescript/core/platform';
@@ -12,8 +12,8 @@ const genericFontFamilies = ['system', 'sans-serif', 'serif', 'monospace'];
let fontFamilies = [];
let fontNames = [];
const embeddedFontNames = ['FontAwesome', 'Pacifico', 'Sofia'];
const fontStyles = [FontStyle.normal, FontStyle.italic];
const fontWeights = [FontWeight.thin, FontWeight.extraLight, FontWeight.light, FontWeight.normal, FontWeight.medium, FontWeight.semiBold, FontWeight.bold, FontWeight.extraBold, FontWeight.black];
const fontStyles = [CoreTypes.FontStyle.normal, CoreTypes.FontStyle.italic];
const fontWeights = [CoreTypes.FontWeight.thin, CoreTypes.FontWeight.extraLight, CoreTypes.FontWeight.light, CoreTypes.FontWeight.normal, CoreTypes.FontWeight.medium, CoreTypes.FontWeight.semiBold, CoreTypes.FontWeight.bold, CoreTypes.FontWeight.extraBold, CoreTypes.FontWeight.black];
let green = new Color('Green');
let red = new Color('Red');
@@ -111,8 +111,8 @@ function prepareLabel(fontFamily: string, fontStyle: string, fontWeight: string)
let label = new Label();
label['font-family'] = fontFamily;
let fontFamilyCss = `font-family: ${fontFamily}; `;
let fontStyleCss = fontStyle !== FontStyle.normal ? `font-style: ${fontStyle}; ` : '';
let fontWeightCss = fontWeight !== FontWeight.normal ? `font-weight: ${fontWeight}; ` : '';
let fontStyleCss = fontStyle !== CoreTypes.FontStyle.normal ? `font-style: ${fontStyle}; ` : '';
let fontWeightCss = fontWeight !== CoreTypes.FontWeight.normal ? `font-weight: ${fontWeight}; ` : '';
let css = `${fontFamilyCss}${fontStyleCss}${fontWeightCss}`;
label.text = `${typeUtils.getClass(label)} {${css}};`;
label.textWrap = true;

4
apps/ui/src/image-view/mode-matrix-page.ts
View File

@@ -1,4 +1,4 @@
import { Image, Stretch } from '@nativescript/core/ui/image';
import { Image, Enums } from '@nativescript/core';
import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
import { Color } from '@nativescript/core/color';
import * as imageSource from '@nativescript/core/image-source';
@@ -9,7 +9,7 @@ const sources = [
{ src: 'upflip', rotation: 180 },
{ src: 'upccw', rotation: 90 },
].map(({ src, rotation }) => ({ src: `res://${src}`, rotation }));
const stretchModes: Stretch[] = ['none', 'aspectFill', 'aspectFit', 'fill'];
const stretchModes: CoreTypes.ImageStretchType[] = ['none', 'aspectFill', 'aspectFit', 'fill'];
export function navigatingTo(args) {
const grid: GridLayout = args.object.getViewById('root');

6
apps/ui/src/image-view/stretch-modes-page.ts
View File

@@ -1,4 +1,4 @@
import { Image, Stretch } from '@nativescript/core/ui/image';
import { Image, Enums } from '@nativescript/core';
import { Label } from '@nativescript/core/ui/label';
import { LayoutBase } from '@nativescript/core/ui/layouts/layout-base';
@@ -7,12 +7,12 @@ const sources = [
{ w: 32, h: 32, src: 'i32x32' },
{ w: 18, h: 32, src: 'i18x32' },
].map(({ w, h, src }) => ({ w, h, src: `res://${src}` }));
const stretchModes: Stretch[] = ['none', 'aspectFill', 'aspectFit', 'fill'];
const stretchModes: CoreTypes.ImageStretchType[] = ['none', 'aspectFill', 'aspectFit', 'fill'];
const widths = [+8, 0, -8];
const heights = [+8, 0, -8];
export function navigatingTo(args) {
const variants: { src: string; stretch: Stretch; width: number; height: number }[] = [];
const variants: { src: string; stretch: CoreTypes.ImageStretchType; width: number; height: number }[] = [];
// Better way for cartesian product?
sources.forEach((src) => stretchModes.forEach((stretch) => widths.forEach((width) => heights.forEach((height) => variants.push({ src: src.src, stretch, width: src.w + width, height: src.h + height })))));

15
apps/ui/src/issues/issue-7469-page.css Normal file
View File

@@ -0,0 +1,15 @@
.test-label {
padding: 10;
background-color: black;
color: white;
}
.stack1 {
background-color: green;
color: white;
}
.stack2 {
background-color: blue;
color: red;
}

158
apps/ui/src/issues/issue-7469-page.ts Normal file
View File

@@ -0,0 +1,158 @@
import { EventData, Label, StackLayout } from '@nativescript/core';
import { addCallback, removeCallback, start, stop } from '@nativescript/core/fps-meter';
let callbackId;
let fpsLabel: any;
export function startFPSMeter() {
callbackId = addCallback((fps: number, minFps: number) => {
// console.log(`Frames per seconds: ${fps.toFixed(2)}`);
// console.log(minFps.toFixed(2));
if (fpsLabel) {
fpsLabel.text = `${fps}`;
}
});
start();
}
export function stopFPSMeter() {
removeCallback(callbackId);
stop();
}
let timeouts = [];
let intervals = [];
let reusableItem;
let vcToggle;
let loaded = false;
let isIn1 = false;
function updateVcToggleText() {
vcToggle.text = `Container is${reusableItem.reusable ? ' ' : ' NOT '}Reusable`
}
export function pageLoaded(args) {
startFPSMeter();
if (loaded) {
fpsLabel = null;
// stopFPSMeter();
timeouts.forEach((v) => clearTimeout(v));
intervals.forEach((v) => clearInterval(v));
reusableItem._tearDownUI(true);
}
loaded = true;
reusableItem = args.object.getViewById('reusableItem');
vcToggle = args.object.getViewById('vcToggle');
updateVcToggleText();
fpsLabel = args.object.getViewById('fpslabel');
const stack1: StackLayout = args.object.getViewById('stack1');
const stack2: StackLayout = args.object.getViewById('stack2');
setTimeout(() => {
// label.android.setTextColor(new Color("red").android);
// label.android.setBackgroundColor(new Color("red").android);
startFPSMeter();
console.log('setRed');
}, 1000);
// console.log(label._context);
// isIn1 = false;
// timeouts.push(setTimeout(() => {
// intervals.push(setInterval(() => {
// label.parent.removeChild(label);
// // console.log(label.nativeView);
// if(isIn1) {
// isIn1 = false;
// stack2.addChild(label);
// } else {
// isIn1 = true;
// stack1.addChild(label);
// }
// }, 10));
// }, 1001));
}
export function pageUnloaded(args) {
//
}
export function makeReusable(args: EventData) {
console.log('loaded:', args.object);
// console.log("making reusable");
if ((args.object as any).___reusableRan) {
return;
}
(args.object as any).___reusableRan = true;
(args.object as any).reusable = true;
if(args.object === reusableItem) {
updateVcToggleText();
}
}
export function onReusableUnloaded(args: EventData) {
console.log('unloaded:', args.object);
}
var testLabel: Label;
export function test(args: any) {
const page = args.object.page;
reusableItem = page.getViewById('reusableItem');
const stack1: StackLayout = page.getViewById('stack1');
const stack2: StackLayout = page.getViewById('stack2');
if (!testLabel) {
testLabel = new Label();
testLabel.text = 'This label is not reusable and is dynamic';
testLabel.on('loaded', () => {
console.log('LODADED testLabel');
});
testLabel.on('unloaded', () => {
console.log('UNLODADED testLabel');
});
}
reusableItem.parent.removeChild(reusableItem);
if (!reusableItem._suspendNativeUpdatesCount) {
console.log('reusableItem SHOULD BE UNLOADED');
}
if (!testLabel._suspendNativeUpdatesCount) {
console.log('testLabel SHOULD BE UNLOADED');
}
if (!testLabel.parent) {
reusableItem.addChild(testLabel);
}
if (!testLabel.nativeView) {
console.log('testLabel NATIVE VIEW SHOULD BE CREATED');
}
if (!testLabel._suspendNativeUpdatesCount) {
console.log('testLabel SHOULD BE UNLOADED');
}
if (isIn1) {
isIn1 = false;
stack2.addChild(reusableItem);
} else {
isIn1 = true;
stack1.addChild(reusableItem);
}
if (reusableItem._suspendNativeUpdatesCount) {
console.log('reusableItem SHOULD BE LOADED AND RECEIVING UPDATES');
}
if (testLabel._suspendNativeUpdatesCount) {
console.log('testLabel SHOULD BE LOADED AND RECEIVING UPDATES');
}
// console.log("onTap");
// alert("onTap");
}
let ignoreInput = false;
export function toggleReusable(args: EventData) {
if (ignoreInput) {
return;
}
ignoreInput = true;
setTimeout(() => (ignoreInput = false), 0); // hack to avoid gesture collision
const target: any = args.object;
target.reusable = !target.reusable;
console.log(`${target} is now ${target.reusable ? '' : 'NOT '}reusable`);
}
export function toggleVCReusable() {
reusableItem.reusable = !reusableItem.reusable;
updateVcToggleText();
}

37
apps/ui/src/issues/issue-7469-page.xml Normal file
View File

@@ -0,0 +1,37 @@
<Page
xmlns="http://schemas.nativescript.org/tns.xsd" class="page" loaded="pageLoaded" unloaded="pageUnloaded">
<StackLayout class="p-20">
<Button text="Swap locations" tap="test"/>
<Button id="vcToggle" text="" tap="toggleVCReusable"/>
<Label text="Longpress items to toggle reusability"></Label>
<Label id="fpslabel" text=""></Label>
<StackLayout id="reusableItem" loaded="makeReusable">
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<Label longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" text="abc"></Label>
<WebView longPress="toggleReusable" loaded="makeReusable" unloaded="onReusableUnloaded" width="100" height="100" src="https://google.com"></WebView>
</StackLayout>
<StackLayout id="stack1" class="stack1">
<Label text="Stack 1"></Label>
</StackLayout>
<StackLayout id="stack2" class="stack2">
<Label text="Stack 2"></Label>
</StackLayout>
</StackLayout>
</Page>

14
apps/ui/src/issues/issue-8810-page.xml Normal file
View File

@@ -0,0 +1,14 @@
<Page>
<ActionBar title="issue-8810"></ActionBar>
<StackLayout
orientation="horizontal"
verticalAlignment="center"
horizontalAlignment="center"
padding="30"
borderWidth="1">
<Label
text="Play with NativeScript!"
borderWidth="1"/>
</StackLayout>
</Page>

2
apps/ui/src/issues/main-page.ts
View File

@@ -32,6 +32,8 @@ export function loadExamples() {
examples.set('ng-repo-1626', 'issues/issue-ng-repo-1626-page');
examples.set('6439', 'issues/issue-6439-page');
examples.set('open-file-6895', 'issues/open-file-6895-page');
examples.set('7469', 'issues/issue-7469-page');
examples.set('8810', 'issues/issue-8810-page');
return examples;
}

8
apps/ui/src/layouts-percent/stack-page.ts
View File

@@ -1,4 +1,4 @@
import * as enums from '@nativescript/core/ui/enums';
import { Enums } from '@nativescript/core';
import * as pageModule from '@nativescript/core/ui/page';
import * as model from './myview';
@@ -9,9 +9,9 @@ export function onLoaded(args: { eventName: string; object: any }) {
export function onOrientation(args: { eventName: string; object: any }) {
var layout = args.object.parent;
if (layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
if (layout.orientation === CoreTypes.Orientation.vertical) {
layout.orientation = CoreTypes.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
layout.orientation = CoreTypes.Orientation.vertical;
}
}

8
apps/ui/src/layouts-percent/wrap-page.ts
View File

@@ -1,4 +1,4 @@
import * as enums from '@nativescript/core/ui/enums';
import { Enums } from '@nativescript/core';
import * as pageModule from '@nativescript/core/ui/page';
import * as model from './myview';
@@ -9,10 +9,10 @@ export function onLoaded(args: { eventName: string; object: any }) {
export function onOrientation(args: { eventName: string; object: any }) {
var layout = args.object.parent;
if (layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
if (layout.orientation === CoreTypes.Orientation.vertical) {
layout.orientation = CoreTypes.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
layout.orientation = CoreTypes.Orientation.vertical;
}
}

8
apps/ui/src/layouts/stack-page.ts
View File

@@ -1,4 +1,4 @@
import * as enums from '@nativescript/core/ui/enums';
import { Enums } from '@nativescript/core';
import * as pageModule from '@nativescript/core/ui/page';
import * as model from './myview';
@@ -9,9 +9,9 @@ export function onLoaded(args: { eventName: string; object: any }) {
export function onOrientation(args: { eventName: string; object: any }) {
var layout = args.object.parent;
if (layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
if (layout.orientation === CoreTypes.Orientation.vertical) {
layout.orientation = CoreTypes.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
layout.orientation = CoreTypes.Orientation.vertical;
}
}

8
apps/ui/src/layouts/wrap-page.ts
View File

@@ -1,4 +1,4 @@
import * as enums from '@nativescript/core/ui/enums';
import { Enums } from '@nativescript/core';
import * as pageModule from '@nativescript/core/ui/page';
import * as model from './myview';
@@ -9,10 +9,10 @@ export function onLoaded(args: { eventName: string; object: any }) {
export function onOrientation(args: { eventName: string; object: any }) {
var layout = args.object.parent;
if (layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
if (layout.orientation === CoreTypes.Orientation.vertical) {
layout.orientation = CoreTypes.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
layout.orientation = CoreTypes.Orientation.vertical;
}
}

1
apps/ui/src/main-page.ts
View File

@@ -11,7 +11,6 @@ export function pageLoaded(args: EventData) {
examples.set('animation', 'animation/main-page');
examples.set('action-bar', 'action-bar/main-page');
examples.set('bindings', 'bindings/main-page');
examples.set('bottom-navigation', 'bottom-navigation/main-page');
examples.set('button', 'button/main-page');
examples.set('css', 'css/main-page');
examples.set('dialogs', 'dialogs/main-page');

5
apps/ui/src/perf/memory-leaks/main-page.ts
View File

@@ -1,4 +1,4 @@
import { EventData } from '@nativescript/core/data/observable';
import { EventData, getViewById } from '@nativescript/core';
import { TestPageMainViewModel } from '../../test-page-main-view-model';
import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
import { Page } from '@nativescript/core/ui/page';
@@ -6,9 +6,8 @@ import { isAndroid } from '@nativescript/core/platform';
export function pageLoaded(args: EventData) {
let page = <Page>args.object;
let view = require('@nativescript/core/ui/core/view');
let wrapLayout = view.getViewById(page, 'wrapLayoutWithExamples');
let wrapLayout = <WrapLayout>getViewById(page, 'wrapLayoutWithExamples');
let examples: Map<string, string> = new Map<string, string>();
if (isAndroid) {

7
apps/ui/src/test-page-main-view-model.ts
View File

@@ -1,9 +1,8 @@
import { Observable } from '@nativescript/core/data/observable';
import { Button, tapEvent } from '@nativescript/core/ui/button';
import { Observable, Frame } from '@nativescript/core';
import { Button } from '@nativescript/core/ui/button';
import { Color } from '@nativescript/core/color';
import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
import { alert } from '@nativescript/core/ui/dialogs';
import * as frame from '@nativescript/core/ui/frame';
import * as platform from '@nativescript/core/platform';
export class TestPageMainViewModel extends Observable {
@@ -30,7 +29,7 @@ export class TestPageMainViewModel extends Observable {
protected navigateToExample(exampleFullPath: string) {
try {
frame.topmost().navigate(exampleFullPath);
Frame.topmost().navigate(exampleFullPath);
} catch (error) {
console.log('EXAMPLE LOAD FAILED:' + error);
alert('Error loading example: ' + exampleFullPath + ' \nerror: ' + error && error.message);