FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(): local icon handling in actionbar and tabview by MartoYankov · Pull Request #7009 · NativeScript/NativeScript · GitHub

/ NativeScript Public

feat(): local icon handling in actionbar and tabview #7009

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
SvetoslavTsenov merged 3 commits into from
Mar 12, 2019
Conversation 3 Commits 3 Checks 0 Files changed
Merged

feat(): local icon handling in actionbar and tabview #7009

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
4206704
feat(): local icon handling in actionbar and tabview
MartoYankov Mar 8, 2019
89c96c8
Merge branch 'master' into myankov/android-icons
SvetoslavTsenov Mar 8, 2019
0a85a42
Merge branch 'master' into myankov/android-icons
SvetoslavTsenov Mar 12, 2019
File filter

Filter by extension

Filter by extension .ts  (11) .xml  (3) All 2 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
17 changes: 17 additions & 0 deletions apps/app/ui-tests-app/action-bar/icons.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as frame from "tns-core-modules/ui/frame";
import { EventData } from "tns-core-modules/ui/frame";
import { Button } from "tns-core-modules/ui/button";
import { ActionBar } from "tns-core-modules/ui/action-bar";

const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];

export function navigate(args) {
frame.topmost().navigate("ui-tests-app/action-bar/clean");
}

export function onChangeRenderingMode(args: EventData) {
const button = <Button>args.object;
const actionBar = <ActionBar>button.page.actionBar
actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
button.text = "" + actionBar.iosIconRenderingMode;
}
14 changes: 14 additions & 0 deletions apps/app/ui-tests-app/action-bar/icons.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Page>
<Page.actionBar>
<ActionBar>
<ActionBar.actionItems>
<ActionItem icon="res://icon" tap="navigate"/>
<ActionItem icon="res://add_to_fav" tap="navigate"/>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="go to cleared page" tap="navigate"/>
<Button text="undefined" tap="onChangeRenderingMode"/>
</StackLayout>
</Page>
17 changes: 17 additions & 0 deletions apps/app/ui-tests-app/action-bar/local-icons.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as frame from "tns-core-modules/ui/frame";
import { EventData } from "tns-core-modules/ui/frame";
import { Button } from "tns-core-modules/ui/button";
import { ActionBar } from "tns-core-modules/ui/action-bar";

const iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];

export function navigate(args) {
frame.topmost().navigate("ui-tests-app/action-bar/clean");
}

export function onChangeRenderingMode(args: EventData) {
const button = <Button>args.object;
const actionBar = <ActionBar>button.page.actionBar
actionBar.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(actionBar.iosIconRenderingMode) + 1) % iconModes.length];
button.text = "" + actionBar.iosIconRenderingMode;
}
14 changes: 14 additions & 0 deletions apps/app/ui-tests-app/action-bar/local-icons.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Page>
<Page.actionBar>
<ActionBar>
<ActionBar.actionItems>
<ActionItem icon="~/ui-tests-app/resources/images/icon.png" tap="navigate"/>
<ActionItem icon="~/ui-tests-app/resources/images/add_to_fav@3x.png" tap="navigate"/>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="go to cleared page" tap="navigate"/>
<Button text="undefined" tap="onChangeRenderingMode"/>
</StackLayout>
</Page>
2 changes: 2 additions & 0 deletions apps/app/ui-tests-app/action-bar/main-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export function loadExamples() {
examples.set("actBG", "action-bar/background");
examples.set("actStyle", "action-bar/all");
examples.set("actIcons", "action-bar/system-icons");
examples.set("actLocalIcons", "action-bar/local-icons");
examples.set("actResIcons", "action-bar/icons");
examples.set("actView", "action-bar/action-view");
examples.set("actionItemPosition", "action-bar/action-item-position");
examples.set("actBGCss", "action-bar/background-css");
Expand Down
1 change: 1 addition & 0 deletions apps/app/ui-tests-app/tab-view/main-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export function loadExamples() {
examples.set("tabmore", "tab-view/tab-view-more");
examples.set("tabViewCss", "tab-view/tab-view-css");
examples.set("tab-view-icons", "tab-view/tab-view-icon");
examples.set("tab-view-icons-local", "tab-view/tab-view-icon-local");
examples.set("tab-view-icon-change", "tab-view/tab-view-icon-change");
examples.set("text-transform", "tab-view/text-transform");
examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");
Expand Down
21 changes: 21 additions & 0 deletions apps/app/ui-tests-app/tab-view/tab-view-icon-local.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button";
import { TabView } from "tns-core-modules/ui/tab-view";

let iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];

export const onNavigate = updateButtons;

export function onChangeRenderingMode(args: EventData) {
let tabView = (<Button>args.object).page.getViewById<TabView>("tab-view");
tabView.iosIconRenderingMode = <"automatic" | "alwaysOriginal" | "alwaysTemplate">iconModes[(iconModes.indexOf(tabView.iosIconRenderingMode) + 1) % iconModes.length];
updateButtons(args);
}

function updateButtons(args) {
let button = (<Button>args.object);
let tabView = button.page.getViewById<TabView>("tab-view");
for (let i = 0, length = tabView.items.length; i < length; i++) {
(<Button>tabView.items[i].view).text = "" + tabView.iosIconRenderingMode;
}
}
26 changes: 26 additions & 0 deletions apps/app/ui-tests-app/tab-view/tab-view-icon-local.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
<TabView id="tab-view" tabTextColor="green" selectedTabTextColor="red" tabBackgroundColor="yellow">
<TabView.items>
<TabViewItem iconSource="~/ui-tests-app/resources/images/icon.png">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="~/ui-tests-app/resources/images/add_to_fav@3x.png">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="~/ui-tests-app/resources/images/icon.png" title="NativeScript">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="~/ui-tests-app/resources/images/add_to_fav@3x.png" title="Favorites">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>
8 changes: 8 additions & 0 deletions tns-core-modules/ui/action-bar/action-bar-common.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export class ActionBarBase extends View implements ActionBarDefinition {

public title: string;
public flat: boolean;
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";

get navigationButton(): NavigationButton {
return this._navigationButton;
Expand Down Expand Up @@ -88,6 +89,10 @@ export class ActionBarBase extends View implements ActionBarDefinition {
this.update();
}
}

get ios(): any {
return undefined;
}

get android(): AndroidActionBarSettings {
return undefined;
Expand Down Expand Up @@ -346,6 +351,9 @@ export function traceMissingIcon(icon: string) {
traceMessageType.error);
}

export const iosIconRenderingModeProperty = new Property<ActionBarBase, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "alwaysOriginal" });
iosIconRenderingModeProperty.register(ActionBarBase);

export const textProperty = new Property<ActionItemBase, string>({ name: "text", defaultValue: "", valueChanged: onItemChanged });
textProperty.register(ActionItemBase);

Expand Down
2 changes: 1 addition & 1 deletion tns-core-modules/ui/action-bar/action-bar.android.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ function getDrawableOrResourceId(icon: string, resources: android.content.res.Re

let is = fromFileOrResource(icon);
if (is) {
drawable = new android.graphics.drawable.BitmapDrawable(is.android);
drawable = new android.graphics.drawable.BitmapDrawable(appResources, is.android);
}

result = drawable;
Expand Down
14 changes: 14 additions & 0 deletions tns-core-modules/ui/action-bar/action-bar.d.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,20 @@ export class ActionBar extends View {
*/
android: AndroidActionBarSettings;

/**
* Gets the native iOS [UINavigationBar](https://developer.apple.com/documentation/uikit/uinavigationbar) that represents the user interface for this component. Valid only when running on iOS.
*/
ios: any /* UITabBarController */;

/**
* Gets or set the UIImageRenderingMode of the action bar icons in iOS. Defaults to "alwaysOriginal"
* Valid values are:
* - automatic
* - alwaysOriginal
* - alwaysTemplate
*/
iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";

/**
* Updates the action bar.
*/
Expand Down
24 changes: 22 additions & 2 deletions tns-core-modules/ui/action-bar/action-bar.ios.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { IOSActionItemSettings, ActionItem as ActionItemDefinition } from ".";
import {
ActionItemBase, ActionBarBase, isVisible, View,
colorProperty, backgroundColorProperty,
backgroundInternalProperty, flatProperty,
backgroundInternalProperty, flatProperty, iosIconRenderingModeProperty,
layout, Color, traceMissingIcon } from "./action-bar-common";
import { fromFileOrResource } from "../../image-source";
import { ios as iosUtils } from "../../utils/utils";
Expand Down Expand Up @@ -120,6 +120,18 @@ export class ActionBar extends ActionBarBase {
this.layout(0, 0, width, height, false);
}

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

public update() {
const page = this.page;
// Page should be attached to frame to update the action bar.
Expand Down Expand Up @@ -241,7 +253,8 @@ export class ActionBar extends ActionBarBase {
barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(id, tapHandler, "tap");
} else if (item.icon) {
const img = loadActionIconFromFileOrResource(item.icon);
barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(img, UIBarButtonItemStyle.Plain, tapHandler, "tap");
const image = img.imageWithRenderingMode(this._getIconRenderingMode());

manoldonev Mar 12, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Guard the img usage as here

NativeScript/tns-core-modules/ui/action-bar/action-bar.ios.ts

Line 188 in 0a85a42

if (img) {
?
barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(image, UIBarButtonItemStyle.Plain, tapHandler, "tap");
} else {
barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text + "", UIBarButtonItemStyle.Plain, tapHandler, "tap");
}
Expand Down Expand Up @@ -392,4 +405,11 @@ export class ActionBar extends ActionBarBase {
this.updateFlatness(navBar);
}
}

[iosIconRenderingModeProperty.getDefault](): "automatic" | "alwaysOriginal" | "alwaysTemplate" {
return "alwaysOriginal";
}
[iosIconRenderingModeProperty.setNative](value: "automatic" | "alwaysOriginal" | "alwaysTemplate") {
this.update();
}
}
3 changes: 2 additions & 1 deletion tns-core-modules/ui/tab-view/tab-view.android.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { textTransformProperty, TextTransform, getTransformedText } from "../tex
import { fromFileOrResource } from "../../image-source";
import { RESOURCE_PREFIX, ad } from "../../utils/utils";
import { Frame } from "../frame";
import * as application from "../../application";

export * from "./tab-view-common";

Expand Down Expand Up @@ -242,7 +243,7 @@ function createTabItemSpec(item: TabViewItem): org.nativescript.widgets.TabItemS
const is = fromFileOrResource(item.iconSource);
if (is) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
result.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android);
} else {
traceMissingIcon(item.iconSource);
}
Expand Down
2 changes: 1 addition & 1 deletion tns-core-modules/ui/tab-view/tab-view.d.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export class TabView extends View {
ios: any /* UITabBarController */;

/**
* Gets or set the UIImageRenderingMode of the tab icons in iOS.
* Gets or set the UIImageRenderingMode of the tab icons in iOS. Defaults to "automatic"
* Valid values are:
* - automatic
* - alwaysOriginal
Expand Down
Back | FazBrowse Home | New Git URL