1.5.1

Photo Album Native/.abignore

@@ -33,7 +33,7 @@ obj/**/*
 
 # Source control files
 .gitignore
-.git/**/*
+**/.git/**/*
 
 # AppBuilder files
 .abignore
@@ -46,6 +46,7 @@ obj/**/*
 # TypeScript files
 **/*.ts
 **/*.map
+tsconfig.json
 
 # Other
 **/*.bak

Photo Album Native/.abproject

@@ -1,6 +1,6 @@
 {
   "ProjectName": "Photo Album Native",
-  "ProjectGuid": "0e4e4d02-1e6c-4bbb-8974-a6cdb267c706",
+  "ProjectGuid": "aa52f3e9-2728-4a9c-a983-e63c6f675caa",
   "projectVersion": 1,
   "AppIdentifier": "com.telerik.PhotoAlbumNative",
   "DisplayName": "Photo Album Native",
@@ -23,6 +23,6 @@
   ],
   "AndroidHardwareAcceleration": "false",
   "iOSStatusBarStyle": "Default",
-  "FrameworkVersion": "1.4.3",
+  "FrameworkVersion": "1.5.2",
   "Framework": "NativeScript"
 }

Photo Album Native/.yo-rc.json

@@ -1,7 +1,7 @@
 {
   "generator-NativeScript": {
     "dependsOn": [
-      "generator-NativeScript@0.0.12"
+      "generator-NativeScript@0.0.14"
     ]
   }
-}
+}

Photo Album Native/app/app.css

@@ -1,3 +1,9 @@
+.km-icon {
+    font-family: 'kendoui';
+    vertical-align: center;
+    horizontal-align: center;
+}
+
 page {
     background-color: #fff;
 }
@@ -15,8 +21,7 @@ activityindicator {
 label,
 textfield,
 searchbar,
-switch
-{
+switch {
     vertical-align: center;
 }
 
@@ -24,22 +29,6 @@ switch {
     horizontal-align: right;
 }
 
-.action-bar {
-    padding: 10 4;
-    background-color: #e9e9e9;
-}
-
-.action-bar-title {
-    horizontal-align: left;
-    vertical-align: center;
-    font-size: 20;
-    color: #000;
-}
-
-.action-bar-border {
-    background-color: #bbb;
-}
-
 .form-item {
     padding: 0 12;
 }
@@ -56,8 +45,10 @@ switch {
     padding: 0 6;
 }
 
-.ios-form-button {
-    margin: 12 6;
+.form-link {
+    horizontal-align: center;
+    font-size: 18;
+    margin-top: 10;
 }
 
 .form-item-border {
@@ -66,9 +57,8 @@ switch {
     height: 1;
 }
 
-.page-title {
-    font-size: 14;
-    color: #fac950;
+.ios-form-button {
+    margin: 12 6;
 }
 
 .title {
@@ -103,6 +93,15 @@ switch {
     margin-right: 10;
 }
 
+.list-item {
+    padding: 10 16;
+}
+
+.list-icon {
+    width: 36;
+    text-align: center;
+}
+
 
 /* START_CUSTOM_CODE_nativeScriptApp */
 

Photo Album Native/app/components/homeView/homeView-view-model.js

@@ -0,0 +1,16 @@
+'use strict';
+var ViewModel,
+    Observable = require('data/observable').Observable;
+// additional requires
+
+ViewModel = new Observable({
+
+    pageTitle: 'Home View',
+    // additional properties
+});
+
+// START_CUSTOM_CODE_homeView
+// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
+
+// END_CUSTOM_CODE_homeView
+module.exports = ViewModel;

Photo Album Native/app/components/homeView/homeView.xml

@@ -1,3 +1,3 @@
-<Page xmlns="http://www.nativescript.org/tns.xsd">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
 	<!-- UI Declaration -->
 </Page>

Photo Album Native/app/navigation/navigation-view-model.js

@@ -6,7 +6,7 @@ var menuItems,
 menuItems = [{
     "title": "Home View",
     "modulePath": "components/homeView/homeView",
-    "icon": "~/images/icons/home.png"
+    "icon": "\uE0DD"
 }];
 
 navigationViewModel.set('menuItems', menuItems);

Photo Album Native/app/navigation/navigation.xml

@@ -1,13 +1,14 @@
-<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:widgets="utils/widgets" loaded="pageLoaded" actionBarHidden="true">
-    <GridLayout rows="auto, *">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:widgets="utils/widgets" loaded="pageLoaded">
+    <Page.actionBar>
         <widgets:action-bar />
-        <ListView row="1" items="{{ menuItems }}" itemTap="menuItemTap">
-            <ListView.itemTemplate>
-                <GridLayout columns="48, *" rows="*">
-                    <Image src="{{ icon }}" width="32" height="32" margin="8 6" />
-                    <Label col="1" text="{{ title }}" textWrap="true" />
-                </GridLayout>
-            </ListView.itemTemplate>
-        </ListView>
-    </GridLayout>
+    </Page.actionBar>
+
+    <ListView class="list" items="{{ menuItems }}" itemTap="menuItemTap">
+        <ListView.itemTemplate>
+            <GridLayout cssClass="list-item" columns="auto, *">
+                <Label cssClass="list-icon km-icon" text="{{ icon }}" />
+                <Label cssClass="list-title" col="1" text="{{ title }}" textWrap="true" />
+            </GridLayout>
+        </ListView.itemTemplate>
+    </ListView>
 </Page>

Photo Album Native/app/package.json

@@ -1,7 +1,7 @@
 {
     "name": "tns-template-blank",
     "main": "app.js",
-    "version": "1.4.0",
+    "version": "1.5.1",
     "author": "Telerik <support@telerik.com>",
     "description": "Nativescript blank project template",
     "license": "BSD",
@@ -15,6 +15,6 @@
         "template"
     ],
     "repository": {
-        "url": "https://github.com/NativeScript/NativeScript/commit/2647ee894483aed4f8d1e2dfdb1784f66d70f4f9"
+        "url": "https://github.com/NativeScript/NativeScript/commit/131208d58d73cd18423efe92ffa764db403896b6"
     }
 }

Photo Album Native/app/utils/widgets/action-bar.android.xml

@@ -1,19 +0,0 @@
-<GridLayout rows="auto, *" cssClass="page-header">
-
-    <GridLayout cssClass="action-bar" columns="47, *" colSpan="3">
-        <GridLayout columns="12, 30" tap="backTap" orientation="horizontal" cssClass="action-wrap" horizontalAlignment="left">
-            <Image col="0" width="12" src="~/images/icons/ic_arrow_back.png" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}" />
-            <Image col="1" width="30" heigth="30" src="~/images/icons/nativescript_logo.png" />
-        </GridLayout>
-
-        <Label col="2" text="{{ pageTitle }}" cssClass="action-bar-title" />
-
-        <StackLayout col="2" orientation="horizontal" horizontalAlignment="right" minWidth="35" verticalAlignment="center">
-            <Image width="24" heigth="24" src="~/images/icons/menu.png" tap="onIndex" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}" />
-        </StackLayout>
-    </GridLayout>
-
-    <!-- Workaround for one sided border -->
-    <StackLayout row="1" cssClass="action-bar-border" height="1"></StackLayout>
-
-</GridLayout>

Photo Album Native/app/utils/widgets/action-bar.ios.xml

@@ -1,20 +0,0 @@
-<GridLayout rows="auto, *" cssClass="page-header" loaded="widgetLoaded">
-
-    <GridLayout cssClass="action-bar" columns="auto, *, auto" colSpan="3" style="font-size: 18; padding: 0 10; color: #007aff; background-color: #f0f0f0">
-        <GridLayout col="0" columns="16, *" tap="backTap" orientation="horizontal" cssClass="action-wrap" horizontalAlignment="left" verticalAlignment="center" >
-            <Button text="⬗" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}" verticalAlignment="center" isUserInteractionEnabled="false"
-                    style="font-size: 44; height: 16; margin: -7 8 0 0; width: 12" />
-            <Button col="1" text="Back" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}" isUserInteractionEnabled="false" />
-        </GridLayout>
-
-        <Label col="1" text="{{ pageTitle }}" cssClass="action-bar-title" horizontalAlignment="center" verticalAlignment="center" style="margin: 10 0" />
-
-        <StackLayout col="2" orientation="horizontal" horizontalAlignment="right" minWidth="16" verticalAlignment="center">
-            <Button text="Index" tap="onIndex" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}" />
-        </StackLayout>
-    </GridLayout>
-
-    <!-- Workaround for one sided border -->
-    <StackLayout row="1" cssClass="action-bar-border" height="1" backgroundColor="#ddd" />
-
-</GridLayout>

Photo Album Native/app/utils/widgets/action-bar.js

@@ -1,13 +1,19 @@
 'use strict';
-var frame = require('ui/frame');
 
-function backTap() {
-    frame.topmost().goBack();
+var frameModule = require('ui/frame');
+
+function onBack() {
+    // Android only
+    var topmost = frameModule.topmost();
+
+    topmost.goBack();
 }
 
 function onIndex() {
-    frame.topmost().navigate('navigation/navigation');
+    var topmost = frameModule.topmost();
+
+    topmost.navigate('navigation/navigation');
 }
 
-exports.backTap = backTap;
+exports.onBack = onBack;
 exports.onIndex = onIndex;

Photo Album Native/app/utils/widgets/action-bar.xml

@@ -0,0 +1,18 @@
+<ActionBar title="Title">
+    <NavigationButton text="Back" android.systemIcon="ic_menu_back"
+        tap="onBack" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}">
+    </NavigationButton>
+
+    <ActionBar.actionItems>
+        <ActionItem text="Index" ios.position="right"
+            tap="onIndex" visibility="{{ backButtonHidden ? 'collapsed' : 'visible' }}">
+        </ActionItem>
+    </ActionBar.actionItems>
+
+    <ActionBar.titleView>
+        <GridLayout columns="auto, 5, *">
+          <Image src="~/images/nativescript_logo.png" width="36" height="36" />
+          <Label col="2" text="{{ pageTitle }}" minWidth="100" />
+        </GridLayout>
+    </ActionBar.titleView>
+</ActionBar>

Photo Album Native/app/utils/widgets/helper.js

@@ -12,7 +12,7 @@ function platformInit(page) {
     }
 
     if (ios) {
-        ios.navBarVisibility = 'never';
+        ios.navBarVisibility = 'always';
         // Restore back swipe gesture
         if (top.canGoBack()) {
             page.ios.navigationController.interactivePopGestureRecognizer.delegate = page.ios;

Photo Album Native/package.json

@@ -1,6 +1,6 @@
 {
     "dependencies": {
-        "tns-core-modules": "1.4.0"
+        "tns-core-modules": "1.5.1"
     },
     "devDependencies": {}
 }