javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): dynamic styling colors fixed (#8460)

Browse Source 
* fix(tabs): dynamic styling colors fixed

* test(tabs): adding dynamic color change test
This commit is contained in:
Vasil Trifonov
2020-03-26 19:15:27 +02:00
committed by GitHub
parent 8759aa000d
commit 0a7bee61d9
13 changed files with 262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css Normal file
View File

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

10
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts Normal file
View File

@ -0,0 +1,10 @@
import { View } from "tns-core-modules/ui/core/view";
import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
bottomNavigation.tabStrip.className = "newTabsClass";
}

43
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml Normal file
View File

@ -0,0 +1,43 @@
<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" />
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="defaultCssClass">
<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>

1
e2e/ui-tests-app/app/bottom-navigation/main-page.ts
View File

@ -27,6 +27,7 @@ export function loadExamples() {
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;
}

25
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css Normal file
View File

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

10
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts Normal file
View File

@ -0,0 +1,10 @@
import { View } from "tns-core-modules/ui/core/view";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <Tabs>(page.getViewById("bottomNavigation"));
bottomNavigation.tabStrip.className = "newTabsClass";
}

43
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml Normal file
View File

@ -0,0 +1,43 @@
<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" />
</StackLayout>
<GridLayout row="1">
<Tabs automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="defaultCssClass">
<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>
</Tabs>
</GridLayout>
</GridLayout>
</Page>

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

@ -34,6 +34,7 @@ export function loadExamples() {
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
examples.set("frame-in-tabs", "tabs/frame-in-tabs");
examples.set("item-color", "tabs/item-color-page");
examples.set("dynamic-color-change", "tabs/dynamic-color-change-page");
return examples;
}

30
e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
View File

@ -319,4 +319,34 @@ describe(`${suite}-${spec}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-dynamic-color-change`, async function () {
await bottomNavigationBasePage.navigateToSample("dynamic-color-change");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
// go through the tabs and check that they are loaded
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
const changeStyleBtn = await driver.waitForElement("changeStyle");
console.log(changeStyleBtn);
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
});

30
e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
View File

@ -318,4 +318,34 @@ describe(`${imagePrefix}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-dynamic-color-change`, async function () {
await tabsViewBasePage.navigateToSample("dynamic-color-change");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
// go through the tabs and check that they are loaded
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
const changeStyleBtn = await driver.waitForElement("changeStyle");
console.log(changeStyleBtn);
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
});

21
nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
View File

@ -713,6 +713,25 @@ export class BottomNavigation extends TabNavigationBase {
} else {
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
}
this.updateTabStripItems();
}
private updateTabStripItems(): void {
this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
if (tabStripItem.nativeView) {
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
}
});
}
private setItemsColors(items: Array<TabStripItem>): void {
items.forEach((item) => {
if (item.nativeView) {
this._setItemColor(item);
}
});
}
public getTabBarSelectedItemColor(): Color {
@ -721,6 +740,7 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
}
public getTabBarUnSelectedItemColor(): Color {
@ -729,6 +749,7 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
}
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {

21
nativescript-core/ui/tabs/tabs.android.ts
View File

@ -796,6 +796,17 @@ export class Tabs extends TabsBase {
} else {
this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
}
this.updateTabStripItems();
}
private updateTabStripItems(): void {
this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
if (tabStripItem.nativeView) {
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
}
});
}
public getTabBarHighlightColor(): number {
@ -807,12 +818,21 @@ export class Tabs extends TabsBase {
this._tabsBar.setSelectedIndicatorColors([color]);
}
private setItemsColors(items: Array<TabStripItem>): void {
items.forEach((item) => {
if (item.nativeView) {
this._setItemColor(item);
}
});
}
public getTabBarSelectedItemColor(): Color {
return this._selectedItemColor;
}
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
}
public getTabBarUnSelectedItemColor(): Color {
@ -821,6 +841,7 @@ export class Tabs extends TabsBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
}
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {

2
nativescript-core/ui/tabs/tabs.ios.ts
View File

@ -1030,6 +1030,7 @@ export class Tabs extends TabsBase {
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.setItemColors();
}
public getTabBarUnSelectedItemColor(): Color {
@ -1038,6 +1039,7 @@ export class Tabs extends TabsBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.setItemColors();
}
private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {