From 31ee774a6beeb5b6eaada4cf6840b35dcf69137c Mon Sep 17 00:00:00 2001 From: Alexander Djenkov Date: Thu, 5 Apr 2018 09:44:03 +0300 Subject: [PATCH 01/51] fix-next(ios-modal): fix empty modal screen when using common layout as root (#5618) --- tns-core-modules/ui/core/view/view.ios.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts index ece66256d4..fbdb45b43b 100644 --- a/tns-core-modules/ui/core/view/view.ios.ts +++ b/tns-core-modules/ui/core/view/view.ios.ts @@ -317,7 +317,13 @@ export class View extends ViewCommon { super._showNativeModalView(parentWithController, context, closeCallback, fullscreen, stretched); let controller = this.viewController; if (!controller) { + const nativeView = this.ios || this.nativeViewProtected; controller = ios.UILayoutViewController.initWithOwner(new WeakRef(this)); + + if (nativeView instanceof UIView) { + controller.view.addSubview(nativeView); + } + this.viewController = controller; } @@ -733,7 +739,7 @@ export namespace ios { public viewWillAppear(animated: boolean): void { super.viewWillAppear(animated); const owner = this.owner.get(); - if(!owner){ + if (!owner) { return; } From 9ec2839bde88a2a60a7d5ea9ff776c623a609740 Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Thu, 5 Apr 2018 15:21:06 +0300 Subject: [PATCH 02/51] fix-next(style): rename SliderBase CSSType to Slider (#5627) --- tns-core-modules/ui/slider/slider-common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tns-core-modules/ui/slider/slider-common.ts b/tns-core-modules/ui/slider/slider-common.ts index 714f6277ac..8d99222499 100644 --- a/tns-core-modules/ui/slider/slider-common.ts +++ b/tns-core-modules/ui/slider/slider-common.ts @@ -4,7 +4,7 @@ import { View, Property, CoercibleProperty, isIOS, CSSType } from "../core/view" export * from "../core/view"; // TODO: Extract base Range class for slider and progress -@CSSType("SliderBase") +@CSSType("Slider") export class SliderBase extends View implements SliderDefinition { public value: number; public minValue: number; From a316e53d547b1de797e6b7cd36fb07d1f37d2482 Mon Sep 17 00:00:00 2001 From: Nikolay Tsonev Date: Thu, 5 Apr 2018 17:35:37 +0300 Subject: [PATCH 03/51] new tabview examples (#5628) * new tabview exmples * tabs limit example * minor code snippet edits --- tests/app/ui/tab-view/tab-view.md | 129 ++++++++++++++++++++---------- 1 file changed, 88 insertions(+), 41 deletions(-) diff --git a/tests/app/ui/tab-view/tab-view.md b/tests/app/ui/tab-view/tab-view.md index e2e829955c..f21ab1292f 100644 --- a/tests/app/ui/tab-view/tab-view.md +++ b/tests/app/ui/tab-view/tab-view.md @@ -6,22 +6,27 @@ description: "Examples for using TabView" previous_url: /ApiReference/ui/tab-view/HOW-TO --- # TabView +The TabView is a component, which allows to navigate between different views. The general behaviour of the TabView component is to load its items on demand. This means that every TabViewItem view will be loaded when it is shown and will be unloaded when it disappears. Respectively loaded and unloaded events will be fired while showing or hiding each view. However, there are some specifics for each platform(iOS and Android), which are described in the notes below. + +> Note (iOS specific): `UITabBarController` is used in the implementation, which means that only one `TabViewItem` can be shown at a given time and only one needs to be loaded. When the user selects a new `TabViewItem`, we load the new item and unload the previous one. + +> Note (Android specific): In the Android implementation is used `ViewPager` controller, which allows using the `swipe` gesture to navigate to the next or previous tab. This means that only one `TabViewItem` can be shown, but multiple `TabViewItems` need to be loaded. Otherwise, after left or right swipe, you will not see the `TabViewItem`'s contents, after the swiping. By default, the ViewPager controller will pre-load one `TabViewItem` on the left and on on the right. Regarding that, if one of the items is already pre-loaded, it will not be loaded again. In the Android, we have exposed a property called `androidOffscreenTabLimit`, which allow specifying, how many components should be pre-load on the left and right (if you are setting up `androidOffscreenTabLimit` to 0, the Android TabView will match to the iOS TabView). + +The iOS and Android UX guidelines regarding the Tab controls differ greatly. The difference is described in the below points: + +* The iOS tabs have their tab bar, which will be displayed always on the bottom and does not allow swipe gesture for changing tabs. +* The Android tabs are on top and will enable the swipe navigation between the tabs. +* For Android we have `androidTabsPosition` property which has two options `top`(default value) and `bottom`. Setting up this property to `bottom` allows mimicking Bottom Tab Navigation control(provided by android support library v25 release). Setting the Tabs at the bottom will disable the swipe navigation and the items preloading functionality. + ### Declaring the TabView in xml. ``` XML - - - - + // ... - - + // ... - ``` @@ -37,11 +42,9 @@ Using a TabView requires the "ui/tab-view" module. {%snippet article-tabview-selectedIndexChanged%} ### Using selectedIndexChanged event from xml ```XML - - - ... - - + + ... + ``` ```TypeScript export function onSelectedIndexChanged(args) {...} @@ -57,37 +60,81 @@ For the TabView component could be set three different styling properties * `textTransform` (coresponding CSS property `text-transform`) - setting up textTransform individual for every `TabViewItem`. Value options: `capitalize`, `lowercase`, `none`, `uppercase`. ```XML - - - - - - - - - - - + + + + + + ``` * `androidSelectedTabHighlightColor`android specific property (coresponding CSS property `android-selected-tab-highlight-color`) - setup underline color of the `Tab`s in Android. ```XML - - - - - - - - - - - -``` \ No newline at end of file + + + + + +``` + +## Tabs Limit Android Secific + +Setting up the limit of the tabs, which should be pre-loaded on the left and right sides in Android. +```XML + + + + + + + + + + + +``` + +--- + +## Tabs Position Android Secific + +Setting up the bottom Tabs position for Android. +```XML + + + + + + + + + + + + +``` From c5fa92257939435907525f481d78e4a4844eee99 Mon Sep 17 00:00:00 2001 From: Svetoslav Date: Mon, 9 Apr 2018 20:09:21 +0300 Subject: [PATCH 04/51] Tsenov/issue 3714 (#5610) * test: added test case for issue 3714 * refactor: update remove grid layout element --- apps/app/ui-tests-app/issues/issue-3714.ts | 25 +++++++++++++++++++++ apps/app/ui-tests-app/issues/issue-3714.xml | 11 +++++++++ apps/app/ui-tests-app/issues/main-page.ts | 1 + 3 files changed, 37 insertions(+) create mode 100644 apps/app/ui-tests-app/issues/issue-3714.ts create mode 100644 apps/app/ui-tests-app/issues/issue-3714.xml diff --git a/apps/app/ui-tests-app/issues/issue-3714.ts b/apps/app/ui-tests-app/issues/issue-3714.ts new file mode 100644 index 0000000000..e7dab2c374 --- /dev/null +++ b/apps/app/ui-tests-app/issues/issue-3714.ts @@ -0,0 +1,25 @@ +import { EventData } from 'tns-core-modules/data/observable'; +import { Page } from 'tns-core-modules/ui/page'; +import { Button } from "tns-core-modules/ui/button"; +import { Label } from "tns-core-modules/ui/label"; +import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; +import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout"; + +export function toggle(args: EventData) { + const page = ((args.object).page); + + const getElementById = id => { return page.getViewById(id); } + + const toggleBtn = '); + var p = builder.parse(""); function testAction(views: Array) { var page = views[0]; var testButton = '); + var p = builder.parse(""); function testAction(views: Array) { var page = views[0]; var testButton = '); + var p = builder.parse(""); function testAction(views: Array) { var page = views[0]; var testButton = '); + var p = builder.parse(""); function testAction(views: Array) { var page = views[0]; var testButton =