From 0a7bee61d9a7744179e34dca5485758a941b350e Mon Sep 17 00:00:00 2001
From: Vasil Trifonov <v.trifonov@gmail.com>
Date: Thu, 26 Mar 2020 19:15:27 +0200
Subject: [PATCH] fix(tabs): dynamic styling colors fixed (#8460)

* fix(tabs): dynamic styling colors fixed

* test(tabs): adding dynamic color change test
---
 .../dynamic-color-change-page.css             | 25 +++++++++++
 .../dynamic-color-change-page.ts              | 10 +++++
 .../dynamic-color-change-page.xml             | 43 +++++++++++++++++++
 .../app/bottom-navigation/main-page.ts        |  1 +
 .../app/tabs/dynamic-color-change-page.css    | 25 +++++++++++
 .../app/tabs/dynamic-color-change-page.ts     | 10 +++++
 .../app/tabs/dynamic-color-change-page.xml    | 43 +++++++++++++++++++
 e2e/ui-tests-app/app/tabs/main-page.ts        |  1 +
 .../bottom-navigation.e2e-spec.ts             | 30 +++++++++++++
 .../tabs/tabs-tests.e2e-spec.ts               | 30 +++++++++++++
 .../bottom-navigation.android.ts              | 21 +++++++++
 nativescript-core/ui/tabs/tabs.android.ts     | 21 +++++++++
 nativescript-core/ui/tabs/tabs.ios.ts         |  2 +
 13 files changed, 262 insertions(+)
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
 create mode 100644 e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
 create mode 100644 e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
 create mode 100644 e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
 create mode 100644 e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml

diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
new file mode 100644
index 000000000..46d672d3e
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
@@ -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;
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
new file mode 100644
index 000000000..a815c39a3
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
@@ -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";
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
new file mode 100644
index 000000000..f76227b01
--- /dev/null
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
@@ -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>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
index 77fa47e6f..840fbd9ce 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
+++ b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
@@ -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;
 }
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
new file mode 100644
index 000000000..46d672d3e
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
@@ -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;
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
new file mode 100644
index 000000000..3e22ffbc3
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
@@ -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";
+}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
new file mode 100644
index 000000000..8001f3494
--- /dev/null
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
@@ -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>
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
index 2262190fe..bfee3c3ab 100644
--- a/e2e/ui-tests-app/app/tabs/main-page.ts
+++ b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -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;
 }
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
index d6be6846e..973c9bacd 100644
--- a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
+++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
@@ -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();
+    });
 });
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
index c690d1ba7..b5f334468 100644
--- a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
+++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
@@ -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();
+    });
 });
diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
index edbf93294..beef55fa5 100644
--- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
+++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
@@ -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 {
diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts
index 67df258f1..5dde7d49a 100644
--- a/nativescript-core/ui/tabs/tabs.android.ts
+++ b/nativescript-core/ui/tabs/tabs.android.ts
@@ -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 {
diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts
index b5af27d00..43fd51461 100644
--- a/nativescript-core/ui/tabs/tabs.ios.ts
+++ b/nativescript-core/ui/tabs/tabs.ios.ts
@@ -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) => {}) {