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

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

Browse Source
This commit is contained in:
Martin Yankov
2019-03-12 15:08:51 +02:00
committed by Svetoslav
parent 5a5435abc2
commit cd66300e3a
14 changed files with 160 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/app/ui-tests-app/action-bar/icons.ts Normal file
View File

@ -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
apps/app/ui-tests-app/action-bar/icons.xml Normal file
View File

@ -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
apps/app/ui-tests-app/action-bar/local-icons.ts Normal file
View File

@ -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
apps/app/ui-tests-app/action-bar/local-icons.xml Normal file
View File

@ -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
apps/app/ui-tests-app/action-bar/main-page.ts
View File

@ -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");

1
apps/app/ui-tests-app/tab-view/main-page.ts
View File

@ -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");

21
apps/app/ui-tests-app/tab-view/tab-view-icon-local.ts Normal file
View File

@ -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
apps/app/ui-tests-app/tab-view/tab-view-icon-local.xml Normal file
View File

@ -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
tns-core-modules/ui/action-bar/action-bar-common.ts
View File

@ -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;
@ -89,6 +90,10 @@ export class ActionBarBase extends View implements ActionBarDefinition {
}
}
get ios(): any {
return undefined;
}
get android(): AndroidActionBarSettings {
return undefined;
}
@ -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);

2
tns-core-modules/ui/action-bar/action-bar.android.ts
View File

@ -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;

14
tns-core-modules/ui/action-bar/action-bar.d.ts vendored
View File

@ -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.
*/

24
tns-core-modules/ui/action-bar/action-bar.ios.ts
View File

@ -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";
@ -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.
@ -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());
barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(image, UIBarButtonItemStyle.Plain, tapHandler, "tap");
} else {
barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text + "", UIBarButtonItemStyle.Plain, tapHandler, "tap");
}
@ -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
tns-core-modules/ui/tab-view/tab-view.android.ts
View File

@ -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";
@ -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);
}

2
tns-core-modules/ui/tab-view/tab-view.d.ts vendored
View File

@ -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