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

Merge pull request #1116 from NativeScript/issue-364

Browse Source 
Issue 364
This commit is contained in:
Rossen Hristov
2015-11-18 17:10:38 +02:00
parent 50dccaecdb 78ddee5308
commit 66443dfb71
11 changed files with 167 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
CrossPlatformModules.csproj
View File

@@ -189,6 +189,9 @@
<SubType>Designer</SubType>
</Content>
<Content Include="apps\tests\pages\tab-view.xml" />
<Content Include="apps\ui-tests-app\action-bar\system-icons.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\css\white-space.xml">
<SubType>Designer</SubType>
</Content>
@@ -229,6 +232,9 @@
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\app.css" />
<TypeScriptCompile Include="apps\ui-tests-app\action-bar\system-icons.ts">
<DependentUpon>system-icons.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\action-bar\all.ts">
<DependentUpon>all.xml</DependentUpon>
</TypeScriptCompile>
@@ -2098,7 +2104,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>
</Project>

16
apps/action-bar-demo/pages/action-items-icon.ts
View File

@@ -1,9 +1,17 @@
export function leftTap(args) {
console.log("Left item tapped!");
export function searchTap(args) {
console.log("Search item tapped!");
}
export function rightTap(args) {
console.log("Right item tapped!");
export function cameraTap(args) {
console.log("Camera item tapped!");
}
export function trashTap(args) {
console.log("Trash item tapped!");
}
export function iconTap(args) {
console.log("Icon item tapped!");
}
export function popTap(args) {

8
apps/action-bar-demo/pages/action-items-icon.xml
View File

@@ -2,9 +2,11 @@
<Page.actionBar>
<ActionBar title="Title">
<ActionBar.actionItems>
<ActionItem tap="leftTap" icon="~/test-icon.png" iosPosition="left"/>
<ActionItem tap="rightTap" icon="~/test-icon.png" iosPosition="right"/>
<ActionItem tap="popTap" icon="res://ic_test" iosPosition="right" androidPosition="popup" text="pop"/>
<ActionItem tap="searchTap" ios.Position="left" ios.systemIcon="12" android.systemIcon="ic_menu_search"/>
<ActionItem tap="cameraTap" ios.Position="right" ios.systemIcon="15" android.systemIcon="ic_menu_camera"/>
<ActionItem tap="trashTap" ios.Position="right" ios.systemIcon="16" android.systemIcon="ic_menu_delete"/>
<ActionItem tap="iconTap" ios.position="right" icon="~/test-icon.png" />
<ActionItem tap="popTap" ios.position="right" android.position="popup" text="pop"/>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>

52
apps/tests/ui/action-bar/action-bar-tests-common.ts
View File

@@ -76,6 +76,58 @@ import actionBarModule = require("ui/action-bar");
// </Page>
//```
//
// ## Displaying Platform-Specific System Icons on Action Items
//```XML
// <Page>
// <Page.actionBar>
// <ActionBar>
// <ActionBar.actionItems>
// <ActionItem ios.systemIcon="12" android.systemIcon = "ic_menu_search" />
// <ActionItem ios.systemIcon="15" android.systemIcon = "ic_menu_camera" />
// <ActionItem ios.systemIcon="16" android.systemIcon = "ic_menu_delete" />
// </ActionBar.actionItems>
// </ActionBar>
// </Page.actionBar>
// ...
// </Page>
//```
//
//### iOS
//Set `ios.systemIcon` to a number representing the iOS system item to be displayed.
//Use this property instead of `ActionItemBase.icon` if you want to diplsay a built-in iOS system icon.
//The value should be a number from the `UIBarButtonSystemItem` enumeration
//(https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)
//0: Done
//1: Cancel
//2: Edit
//3: Save
//4: Add
//5: FlexibleSpace
//6: FixedSpace
//7: Compose
//8: Reply
//9: Action
//10: Organize
//11: Bookmarks
//12: Search
//13: Refresh
//14: Stop
//15: Camera
//16: Trash
//17: Play
//18: Pause
//19: Rewind
//20: FastForward
//21: Undo
//22: Redo
//23: PageCurl
//
//### Android
//Set `android.systemIcon` the name of the system drawable resource to be displayed.
//Use this property instead of `ActionItemBase.icon` if you want to diplsay a built-in Android system icon.
//The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example.
//For a full list of Android drawable names, please visit http://androiddrawables.com
//
// </snippet>
export function test_actionItem_inherit_bindingContext() {

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

@@ -0,0 +1,5 @@
import frame = require("ui/frame");
export function navigate(args) {
frame.topmost().navigate("action-bar/clean");
}

14
apps/ui-tests-app/action-bar/system-icons.xml Normal file
View File

@@ -0,0 +1,14 @@
<Page>
<Page.actionBar>
<ActionBar>
<ActionBar.actionItems>
<ActionItem ios.systemIcon="12" android.systemIcon="ic_menu_search"/>
<ActionItem ios.systemIcon="15" android.systemIcon="ic_menu_camera"/>
<ActionItem ios.systemIcon="16" android.systemIcon="ic_menu_delete"/>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="go to cleared page" tap="navigate"/>
</StackLayout>
</Page>

1
apps/ui-tests-app/mainPage.ts
View File

@@ -35,6 +35,7 @@ export function selectExample() {
examples.set("actColor", "action-bar/color");
examples.set("actBG", "action-bar/background");
examples.set("actStyle", "action-bar/all");
examples.set("actSystemIcons", "action-bar/system-icons");
examples.set("basics", "bindings/basics");
examples.set("xmlbasics", "bindings/xmlbasics");

1
tsconfig.json
View File

@@ -328,6 +328,7 @@
"apps/ui-tests-app/action-bar/background.ts",
"apps/ui-tests-app/action-bar/clean.ts",
"apps/ui-tests-app/action-bar/color.ts",
"apps/ui-tests-app/action-bar/system-icons.ts",
"apps/ui-tests-app/app.ts",
"apps/ui-tests-app/bindings/basics.ts",
"apps/ui-tests-app/bindings/xmlbasics.ts",

18
ui/action-bar/action-bar.android.ts
View File

@@ -16,7 +16,10 @@ var ACTION_ITEM_ID_OFFSET = 1000;
global.moduleMerge(common, exports);
export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
private _androidPosition: dts.AndroidActionItemSettings = { position: enums.AndroidActionItemPosition.actionBar };
private _androidPosition: dts.AndroidActionItemSettings = {
position: enums.AndroidActionItemPosition.actionBar,
systemIcon: undefined
};
public get android(): dts.AndroidActionItemSettings {
return this._androidPosition;
@@ -200,11 +203,22 @@ export class ActionBar extends common.ActionBar {
for (var i = 0; i < items.length; i++) {
var item = items[i];
var menuItem = menu.add(android.view.Menu.NONE, i + ACTION_ITEM_ID_OFFSET, android.view.Menu.NONE, item.text + "");
if (item.icon) {
if (item.android.systemIcon) {
// Try to look in the system resources.
let systemResourceId = android.content.res.Resources.getSystem().getIdentifier(item.android.systemIcon, "drawable", "android");
if (systemResourceId) {
menuItem.setIcon(systemResourceId);
}
}
else if (item.icon) {
var drawableOrId = getDrawableOrResourceId(item.icon, this._appResources);
if (drawableOrId) {
menuItem.setIcon(drawableOrId);
}
else {
throw new Error("Error loading icon from " + item.icon);
}
}
var showAsAction = getShowAsAction(item);

40
ui/action-bar/action-bar.d.ts vendored
View File

@@ -162,6 +162,14 @@ declare module "ui/action-bar" {
* 3. popup - item is shown in the popup menu.
*/
position: string;
/**
* Gets or sets the name of the system drawable resource to be displayed.
* Use this property instead of ActionItemBase.icon if you want to diplsay a built-in Android system icon.
* The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example.
* For a full list of Android drawable names, please visit http://androiddrawables.com
*/
systemIcon: string;
}
/**
@@ -174,6 +182,38 @@ declare module "ui/action-bar" {
* 2. right - items is shown at the right part of the navigation bar.
*/
position: string;
/**
* Gets or sets a number representing the iOS system item to be displayed.
* Use this property instead of ActionItemBase.icon if you want to diplsay a built-in iOS system icon.
* The value should be a number from the UIBarButtonSystemItem enumeration
* (https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)
* 0: Done
* 1: Cancel
* 2: Edit
* 3: Save
* 4: Add
* 5: FlexibleSpace
* 6: FixedSpace
* 7: Compose
* 8: Reply
* 9: Action
* 10: Organize
* 11: Bookmarks
* 12: Search
* 13: Refresh
* 14: Stop
* 15: Camera
* 16: Trash
* 17: Play
* 18: Pause
* 19: Rewind
* 20: FastForward
* 21: Undo
* 22: Redo
* 23: PageCurl
*/
systemIcon: number;
}
/**

15
ui/action-bar/action-bar.ios.ts
View File

@@ -5,11 +5,15 @@ import frameModule = require("ui/frame");
import enums = require("ui/enums");
import view = require("ui/core/view");
import utils = require("utils/utils");
import types = require("utils/types");
global.moduleMerge(common, exports);
export class ActionItem extends common.ActionItemBase implements dts.ActionItem {
private _ios: dts.IOSActionItemSettings = { position: enums.IOSActionItemPosition.left };
private _ios: dts.IOSActionItemSettings = {
position: enums.IOSActionItemPosition.left,
systemIcon: undefined
};
public get ios(): dts.IOSActionItemSettings {
return this._ios;
}
@@ -119,11 +123,18 @@ export class ActionBar extends common.ActionBar {
(<any>item).handler = tapHandler;
var barButtonItem: UIBarButtonItem;
if (item.icon) {
if (types.isNumber(item.ios.systemIcon)) {
barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(item.ios.systemIcon, tapHandler, "tap");
}
else if (item.icon) {
var img = imageSource.fromFileOrResource(item.icon);
if (img && img.ios) {
barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(img.ios, UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");
}
else {
throw new Error("Error loading icon from " + item.icon);
}
}
else {
barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text + "", UIBarButtonItemStyle.UIBarButtonItemStylePlain, tapHandler, "tap");