Merge pull request #1552 from NativeScript/tab-view-style-fix

TabView colors fix

CrossPlatformModules.csproj

@@ -84,15 +84,13 @@
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\animations\opacity.ts" />
     <TypeScriptCompile Include="apps\custom-root-view\app.ts" />
-    <TypeScriptCompile Include="apps\custom-root-view\list-view.ts">
-      <DependentUpon>list-view.xml</DependentUpon>
-    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\perf-tests\NavigationTest\list-picker-page.ts" />
     <TypeScriptCompile Include="apps\perf-tests\custom-transition.android.ts" />
     <TypeScriptCompile Include="apps\perf-tests\custom-transition.ios.ts" />
     <TypeScriptCompile Include="apps\tests\layouts\common-layout-tests.ts" />
     <TypeScriptCompile Include="apps\tests\navigation\custom-transition.android.ts" />
     <TypeScriptCompile Include="apps\tests\navigation\custom-transition.ios.ts" />
+    <TypeScriptCompile Include="apps\tests\navigation\transition-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.ts" />
     <TypeScriptCompile Include="apps\tests\ui\page\modal-page.ts">
       <DependentUpon>modal-page.xml</DependentUpon>

apps/tests/navigation/navigation-tests.ts

@@ -1,6 +1,5 @@
 import TKUnit = require("../TKUnit");
 import platform = require("platform");
-import transitionModule = require("ui/transition");
 import {Frame, Page, topmost as topmostFrame, NavigationEntry, NavigationTransition, AnimationCurve, WrapLayout, Button} from "ui";
 import color = require("color");
 import helper = require("../ui/helper");
@@ -14,73 +13,6 @@ var pageFactory = function(): Page {
     return page;
 };
 
-function _testTransition(navigationTransition: NavigationTransition) {
-    var testId = `Transition[${JSON.stringify(navigationTransition)}]`;
-    trace.write(`Testing ${testId}`, trace.categories.Test);
-    var navigationEntry: NavigationEntry = {
-        create: function (): Page {
-            var page = new Page();
-            page.id = testId;
-            page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
-            return page;
-        },
-        animated: true,
-        transition: navigationTransition
-    }
-
-    helper.navigateWithEntry(navigationEntry);
-    TKUnit.wait(0.100);
-    helper.goBack();
-    TKUnit.wait(0.100);
-    utils.GC();
-}
-
-// Extremely slow. Run only if needed.
-export var test_Transitions = function () {
-    helper.navigate(() => {
-        var page = new Page();
-        page.id = "TransitionsTestPage_MAIN"
-        page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
-        return page;
-    });
-
-    var transitions;
-    if (platform.device.os === platform.platformNames.ios) {
-        transitions = ["curl"];
-    }
-    else {
-        var _sdkVersion = parseInt(platform.device.sdkVersion);
-        transitions = _sdkVersion >= 21 ? ["explode"] : [];
-    }
-    transitions = transitions.concat(["fade", "flip", "slide"]);
-    var durations = [undefined, 500];
-    var curves = [undefined, AnimationCurve.easeIn];
-
-    // Built-in transitions
-    var t, d, c;
-    var tlen = transitions.length;
-    var dlen = durations.length;
-    var clen = curves.length;
-    for (t = 0; t < tlen; t++) {
-        for (d = 0; d < dlen; d++) {
-            for (c = 0; c < clen; c++) {
-                _testTransition({
-                    name: transitions[t],
-                    duration: durations[d],
-                    curve: curves[c]
-                });
-            }
-        }
-    }
-
-    // Custom transition
-    var customTransitionModule = require("./custom-transition");
-    var customTransition = new customTransitionModule.CustomTransition();
-    _testTransition({ instance: customTransition });
-
-    helper.goBack();
-}
-
 export var test_backstackVisible = function () {
     var mainTestPage = topmostFrame().currentPage;
     topmostFrame().navigate({ create: pageFactory });

apps/tests/navigation/transition-tests.ts

@@ -0,0 +1,75 @@
+import TKUnit = require("../TKUnit");
+import platform = require("platform");
+import transitionModule = require("ui/transition");
+import color = require("color");
+import helper = require("../ui/helper");
+import utils = require("utils/utils");
+import trace = require("trace");
+import {Frame, Page, topmost as topmostFrame, NavigationEntry, NavigationTransition, AnimationCurve, WrapLayout, Button} from "ui";
+
+function _testTransition(navigationTransition: NavigationTransition) {
+    var testId = `Transition[${JSON.stringify(navigationTransition)}]`;
+    trace.write(`Testing ${testId}`, trace.categories.Test);
+    var navigationEntry: NavigationEntry = {
+        create: function (): Page {
+            var page = new Page();
+            page.id = testId;
+            page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+            return page;
+        },
+        animated: true,
+        transition: navigationTransition
+    }
+
+    helper.navigateWithEntry(navigationEntry);
+    TKUnit.wait(0.100);
+    helper.goBack();
+    TKUnit.wait(0.100);
+    utils.GC();
+}
+
+// Extremely slow. Run only if needed.
+export var test_Transitions = function () {
+    helper.navigate(() => {
+        var page = new Page();
+        page.id = "TransitionsTestPage_MAIN"
+        page.style.backgroundColor = new color.Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+        return page;
+    });
+
+    var transitions;
+    if (platform.device.os === platform.platformNames.ios) {
+        transitions = ["curl"];
+    }
+    else {
+        var _sdkVersion = parseInt(platform.device.sdkVersion);
+        transitions = _sdkVersion >= 21 ? ["explode"] : [];
+    }
+    transitions = transitions.concat(["fade", "flip", "slide"]);
+    var durations = [undefined, 500];
+    var curves = [undefined, AnimationCurve.easeIn];
+
+    // Built-in transitions
+    var t, d, c;
+    var tlen = transitions.length;
+    var dlen = durations.length;
+    var clen = curves.length;
+    for (t = 0; t < tlen; t++) {
+        for (d = 0; d < dlen; d++) {
+            for (c = 0; c < clen; c++) {
+                _testTransition({
+                    name: transitions[t],
+                    duration: durations[d],
+                    curve: curves[c]
+                });
+            }
+        }
+    }
+
+    // Custom transition
+    var customTransitionModule = require("./custom-transition");
+    var customTransition = new customTransitionModule.CustomTransition();
+    _testTransition({ instance: customTransition });
+
+    helper.goBack();
+}

apps/tests/testRunner.ts

@@ -91,6 +91,11 @@ if (!isRunningOnEmulator()) {
     allTests["LOCATION"] = require("./location-tests");
 }
 
+// Skip transitions on android emulators with API 23
+if (!(platform.device.os === platform.platformNames.android && parseInt(platform.device.sdkVersion) === 23 && isRunningOnEmulator())) {
+    allTests["TANSITIONS"] = require("./navigation/transition-tests");
+}
+
 // Navigation tests should always be last.
 allTests["NAVIGATION"] = require("./navigation/navigation-tests");
 

tsconfig.json

@@ -186,6 +186,7 @@
         "apps/tests/navigation/custom-transition.android.ts",
         "apps/tests/navigation/custom-transition.ios.ts",
         "apps/tests/navigation/navigation-tests.ts",
+        "apps/tests/navigation/transition-tests.ts",
         "apps/tests/observable-array-tests.ts",
         "apps/tests/observable-tests.ts",
         "apps/tests/pages/app.ts",

ui/tab-view/tab-view.android.ts

@@ -173,7 +173,7 @@ function ensurePageChangedListenerClass() {
 function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var tabLayout = (<TabView>data.object)._getAndroidTabView();
     if (tabLayout && data.newValue instanceof color.Color) {
-        tabLayout.setSelectedIndicatorColors([data.newValue._nativeView]);
+        tabLayout.setSelectedIndicatorColors([data.newValue.android]);
     }
 }
 (<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
@@ -181,7 +181,7 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
 function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var tabLayout = (<TabView>data.object)._getAndroidTabView();
     if (tabLayout && data.newValue instanceof color.Color) {
-        tabLayout.setBackgroundColor(data.newValue._nativeView);
+        tabLayout.setBackgroundColor(data.newValue.android);
     }
 }
 (<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;