Skip to content

Commit

Permalink
Added selectedItemColor and unSelectedItemColor to the TabStrip (#8431)
Browse files Browse the repository at this point in the history
* chore: add guard for ios

* feat(bottom-nav): adding new properties

* feat(tabs): new property implementation

* feat: new feature implementation in android

Implemented selectedItemColor and unSelectedItemColor properties on TabStrip

* chore: added some comments

* chore: change method return type

* fix: setting icon color

* fix: rendering mode setting

* chore: rename variable

* chore: fixed a typo

* chore: updated log in build gradle

* fix: item color setting in android

* fix: tab styling when no css aplied

* chore: private methods renamed

* tests: added selected-item test pages

* chore: renamed test pages

* chore: move css-tree package to the right place

* tests: added new ui tests

* fix: use renamed function

* fix: set item color

* tests: aded automationText attribute

* tests: trying to fix the tests

Co-authored-by: Dimitar Topuzov <dtopuzov@gmail.com>
  • Loading branch information
vtrifonov and dtopuzov authored Mar 16, 2020
1 parent e081340 commit 243dc98
Show file tree
Hide file tree
Showing 22 changed files with 670 additions and 191 deletions.
12 changes: 12 additions & 0 deletions api-reports/NativeScript.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -2225,8 +2225,12 @@ export class TabNavigationBase extends View {

getTabBarItemTextTransform(tabStripItem: TabStripItem): any

getTabBarSelectedItemColor(): Color

getTabBarTextTransform(): any

getTabBarUnSelectedItemColor(): Color

ios: any /* UITabBarController */;

items: Array<TabContentItem>;
Expand Down Expand Up @@ -2266,8 +2270,12 @@ export class TabNavigationBase extends View {

setTabBarItemTitle(tabStripItem: TabStripItem, value: any): any

setTabBarSelectedItemColor(value: Color)

setTabBarTextTransform(value: any): void

setTabBarUnSelectedItemColor(value: Color)

tabStrip: TabStrip;
}

Expand Down Expand Up @@ -2320,6 +2328,10 @@ export class TabStrip extends View {
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);

on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);

selectedItemColor: Color;

unSelectedItemColor: Color;
}

// @public
Expand Down
5 changes: 4 additions & 1 deletion e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { EventData } from "tns-core-modules/data/observable";
import { TabView } from "tns-core-modules/ui/tab-view";
import { isIOS } from "tns-core-modules/platform";

export function onLoaded(args: EventData) {
console.log("TEST", args.object);
const tabView = <TabView>args.object;
tabView.ios.tabBar.translucent = false;
if (isIOS) {
tabView.ios.tabBar.translucent = false;
}
}
7 changes: 7 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/item-color-page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.font-awesome {
font-family: "FontAwesome";
}

.font-size {
font-size: 36;
}
40 changes: 40 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<Page class="page">

<ActionBar title="BottomNavigation item-color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation automationText="tabNavigation">
<TabStrip selectedItemColor="red" unSelectedItemColor="green">
<TabStripItem>
<Label text="First"/>
<Image src="res://baseline_motorcycle_black_24"/>
</TabStripItem>
<TabStripItem>
<Label text="Second"/>
<Image src="res://up"/>
</TabStripItem>
<TabStripItem>
<Label text="Third"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
1 change: 1 addition & 0 deletions e2e/ui-tests-app/app/bottom-navigation/main-page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function loadExamples() {
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
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");

return examples;
}
2 changes: 1 addition & 1 deletion e2e/ui-tests-app/app/tabs/frame-in-tabs.xml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<Page class="page">
<StackLayout>
<Tabs highlightColor="red" offscreenTabLimit="1">
<Tabs highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
<TabStrip highlightColor="green" itemTap="onItemTap">
<TabStripItem title="1"></TabStripItem>
<TabStripItem title="2"></TabStripItem>
Expand Down
20 changes: 20 additions & 0 deletions e2e/ui-tests-app/app/tabs/item-color-page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.font-awesome {
font-family: "FontAwesome";
}

.font-size {
font-size: 36;
}


/* TabStrip {
color: mediumvioletred;
}
TabStripItem {
color: skyblue;
}
TabStripItem:active {
color: darkblue;
} */
40 changes: 40 additions & 0 deletions e2e/ui-tests-app/app/tabs/item-color-page.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<Page class="page">

<ActionBar title="Tabs item-color" icon="" class="action-bar">
</ActionBar>

<Tabs automationText="tabNavigation">
<TabStrip selectedItemColor="red" unSelectedItemColor="green">
<TabStripItem>
<Label text="First"/>
<Image src="res://baseline_motorcycle_black_24"/>
</TabStripItem>
<TabStripItem>
<Label text="Second"/>
<Image src="res://up"/>
</TabStripItem>
<TabStripItem>
<Label text="Third"/>
<Image src="font://&#xF10B;" class="font-awesome font-size" />
</TabStripItem>
</TabStrip>

<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>
</Page>
1 change: 1 addition & 0 deletions e2e/ui-tests-app/app/tabs/main-page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export function loadExamples() {
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
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");

return examples;
}
Original file line number Diff line number Diff line change
Expand Up @@ -303,4 +303,20 @@ describe(`${suite}-${spec}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});

it(`${spec}-item-color`, async function () {
await bottomNavigationBasePage.navigateToSample("item-color");
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();

assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -284,21 +284,38 @@ describe(`${imagePrefix}-suite`, async function () {
await tabsViewBasePage.navigateBackToSuitMainPage();
});

// it(`${imagePrefix}-frame-in-tabs`, async function () {
// await tabsViewBasePage.navigateToSample("frame-in-tabs");
// await driver.imageHelper.compareScreen();
it(`${imagePrefix}-frame-in-tabs`, async function () {
await tabsViewBasePage.navigateToSample("frame-in-tabs");
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();
// 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(2);
await driver.imageHelper.compareScreen();

// await tabsViewBasePage.tabOnItem(3);
// await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(3);
await driver.imageHelper.compareScreen();

// assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
// await tabsViewBasePage.navigateBackToSuitMainPage();
// });
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});

it(`${spec}-item-color`, async function () {
await tabsViewBasePage.navigateToSample("item-color");
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();

assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
});
118 changes: 58 additions & 60 deletions nativescript-core/package.json
Original file line number Diff line number Diff line change
@@ -1,63 +1,61 @@
{
"name": "@nativescript/core",
"main": "index",
"types": "index.d.ts",
"description": "Telerik NativeScript Core Modules",
"version": "6.5.0",
"homepage": "https://www.nativescript.org",
"repository": {
"type": "git",
"url": "https://github.com/NativeScript/NativeScript"
},
"files": [
"**/*.d.ts",
"**/*.js",
"**/platforms/ios/**",
"**/platforms/android/**",
"**/package.json",
"!org.nativescript.widgets.d.ts"
],
"license": "Apache-2.0",
"dependencies": {
"nativescript-hook": "0.2.5",
"reduce-css-calc": "^2.1.6",
"css-tree": "^1.0.0-alpha.37",
"semver": "6.3.0",
"tns-core-modules-widgets": "next",
"tslib": "1.10.0"
},
"devDependencies": {
"@types/chai": "~4.2.5",
"@types/node": "~10.12.18",
"tns-platform-declarations": "next"
},
"scripts": {
"version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md",
"postinstall": "node cli-hooks/postinstall.js",
"preuninstall": "node cli-hooks/preuninstall.js"
},
"nativescript": {
"platforms": {
"ios": "6.0.0",
"android": "6.0.0"
"name": "@nativescript/core",
"main": "index",
"types": "index.d.ts",
"description": "Telerik NativeScript Core Modules",
"version": "6.5.0",
"homepage": "https://www.nativescript.org",
"repository": {
"type": "git",
"url": "https://github.com/NativeScript/NativeScript"
},
"hooks": [
{
"name": "nativescript-core",
"type": "before-checkForChanges",
"script": "cli-hooks/before-checkForChanges.js",
"inject": true
}
]
},
"snapshot": {
"android": {
"tns-java-classes": {
"modules": [
"ui/frame/activity",
"ui/frame/fragment"
]
}
"files": [
"**/*.d.ts",
"**/*.js",
"**/platforms/ios/**",
"**/platforms/android/**",
"**/package.json",
"!org.nativescript.widgets.d.ts"
],
"license": "Apache-2.0",
"dependencies": {
"css-tree": "^1.0.0-alpha.37",
"nativescript-hook": "0.2.5",
"reduce-css-calc": "^2.1.6",
"semver": "6.3.0",
"tns-core-modules-widgets": "next",
"tslib": "1.10.0"
},
"devDependencies": {
"@types/chai": "~4.2.5",
"@types/node": "~10.12.18",
"tns-platform-declarations": "next"
},
"scripts": {
"version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md",
"postinstall": "node cli-hooks/postinstall.js",
"preuninstall": "node cli-hooks/preuninstall.js"
},
"nativescript": {
"platforms": {
"ios": "6.0.0",
"android": "6.0.0"
},
"hooks": [{
"name": "nativescript-core",
"type": "before-checkForChanges",
"script": "cli-hooks/before-checkForChanges.js",
"inject": true
}]
},
"snapshot": {
"android": {
"tns-java-classes": {
"modules": [
"ui/frame/activity",
"ui/frame/fragment"
]
}
}
}
}
}
}
Loading

0 comments on commit 243dc98

Please sign in to comment.