Merge pull request #1116 from NativeScript/issue-364

Issue 364

apps/action-bar-demo/pages/action-items-icon.ts

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

apps/action-bar-demo/pages/action-items-icon.xml

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

apps/tests/ui/action-bar/action-bar-tests-common.ts

@@ -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() {

apps/ui-tests-app/action-bar/system-icons.ts

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

apps/ui-tests-app/action-bar/system-icons.xml

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

apps/ui-tests-app/mainPage.ts

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