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

TabView colors fix
This commit is contained in:
Vasil Chimev
2016-02-15 16:45:26 +02:00
6 changed files with 84 additions and 73 deletions

View File

@ -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>

View File

@ -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 });

View File

@ -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();
}

View File

@ -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");

View File

@ -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",

View File

@ -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;