Skip to content

feat(ios): add icon rendering mode for bottom navigation #7738

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MartoYankov merged 3 commits into from
Aug 28, 2019
Merged

feat(ios): add icon rendering mode for bottom navigation #7738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f52f381
feat(ios): add icon rendering mode for bottom navigation
MartoYankov Aug 27, 2019
89d5abc
Merge branch 'release' into myankov/tab-icon-rendering-mode
MartoYankov Aug 28, 2019
2b53326
chore: fix ui tests
MartoYankov Aug 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
<TabStrip items="{{ tabStripItems }}">
<TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
</TabStrip>
</BottomNavigation>
</GridLayout>
Expand Down
39 changes: 1 addition & 38 deletions e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,8 @@
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>

<!-- w/o TabStrip -->
<!-- <BottomNavigation>
<TabContentItem>
<GridLayout>
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation> -->

<!-- w/ TabStrip -->
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabStrip>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
Expand Down Expand Up @@ -71,26 +56,4 @@
</StackLayout>
</TabContentItem>
</BottomNavigation>

<!-- =============================================================================================== -->

<!-- Bottom Bar with TabStrip -->
<!-- <BottomNavigationBar>
<TabStrip>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</TabStrip>
</BottomNavigationBar> -->

<!-- Bottom Bar w/o TabStrip -->
<!-- <BottomNavigationBar>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>
2 changes: 1 addition & 1 deletion e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="bottomNavigation" automationText="tabNavigation" class="font-awesome">
<TabStrip>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
<TabStripItem iconSource="font://&#xf206;" title="icon">
</TabStripItem>
Expand Down
2 changes: 1 addition & 1 deletion e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</ActionBar>

<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip>
Expand Down
18 changes: 16 additions & 2 deletions tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,15 @@ export class BottomNavigation extends TabNavigationBase {
}

private getIconRenderingMode(): UIImageRenderingMode {
return UIImageRenderingMode.AlwaysOriginal;
switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
case "alwaysOriginal":
return UIImageRenderingMode.AlwaysOriginal;
case "alwaysTemplate":
return UIImageRenderingMode.AlwaysTemplate;
case "automatic":
default:
return UIImageRenderingMode.Automatic;
}
}

private getIcon(tabStripItem: TabStripItem): UIImage {
Expand All @@ -547,10 +555,12 @@ export class BottomNavigation extends TabNavigationBase {
const color = target.style.color;
const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");

let isFontIcon = false;
let image: UIImage = this._iconsCache[iconTag];
if (!image) {
let is = new ImageSource;
if (isFontIconURI(iconSource)) {
isFontIcon = true;
const fontIconCode = iconSource.split("//")[1];
is = fromFontIconCode(fontIconCode, font, color);
} else {
Expand All @@ -564,7 +574,11 @@ export class BottomNavigation extends TabNavigationBase {
image = this.getFixedSizeIcon(image);
}

const originalRenderedImage = image.imageWithRenderingMode(this.getIconRenderingMode());
let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysOriginal;
if (!isFontIcon) {
renderingMode = this.getIconRenderingMode();
}
const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
this._iconsCache[iconTag] = originalRenderedImage;
image = originalRenderedImage;
} else {
Expand Down
1 change: 1 addition & 0 deletions tns-core-modules/ui/tabs/tabs.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -885,6 +885,7 @@ export class Tabs extends TabsBase {
}

private getIconRenderingMode(): UIImageRenderingMode {
// MDCTabBar doesn't work with rendering mode AlwaysTemplate
return UIImageRenderingMode.AlwaysOriginal;
}

Expand Down