Add icons and some final touches on the what-is-new page

Author: PanayotCankov

FIREBASE.ms

@@ -1,7 +1,7 @@
 Updating the news in firebase manually:
 Update the firebase-database.json with the added articles and "import" in firebase.
 
-Sending push notifications:
+Sending push notifications from the firebase console:
 Make sure to set:
  - Message text: the message text
  - Message label: message title displayed in firebase
@@ -10,5 +10,6 @@ In the Advanced:
  - In custom data add the fields:
     - inAppTitle: repeat the "Title"
     - inAppBody: repeat the "Message text"
-    - url: link to the page to be opened on tap
+    - url: link to the page to be opened on tap (best matched with the news article)
+    - id: the id of the news 
 

app/App_Resources/Android/drawable-hdpi/ic_menu_main_new.png

@@ -96,7 +96,7 @@ export class ViewModel extends Observable {
     }
 
     updateNews(updates: FirebaseArticle[]) {
-        this.news = updates.map(fb => new Article(fb));
+        this.news = updates.filter(fb => !!fb).map(fb => new Article(fb));
         this.updateHasNews();
         this.updateHasUnreadNews();
         this.notifyPropertyChange("news", this.news);
@@ -163,6 +163,7 @@ function firebaseInit() {
             console.log(JSON.stringify(message));
 
             let url = (<any>message).url;
+            let id = (<any>message).id;
             if (url) {
                 if (message.foreground) {
                     dialogs.confirm({
@@ -173,7 +174,10 @@ function firebaseInit() {
                     }).then(result => {
                         if (result) {
                             utils.openUrl(url);
-                            // TODO: Mark as read!!!
+                            if (id) {
+                                markAsRead(id);
+                                viewModel.news.filter(a => a.id === a.id).forEach(a => a.isRead = true);
+                            }
                             navigator.navigateToWhatIsNew();
                         }
                     });

app/App_Resources/Android/drawable-hdpi/ic_notification.png

@@ -19,7 +19,7 @@ import { LayoutBase } from "ui/layouts/layout-base";
 import { RadSideDrawer } from "nativescript-telerik-ui-pro/sidedrawer";
 import {onAfterIntro} from "../../common/firebase";
 
-export function pageLoaded(args){
+export function pageLoaded(args) {
     prof.stop("main-page");
     let page = <pages.Page>(<View>args.object).page;
     setTimeout(() => (<any>page).canEnter = true, 3500);

app/App_Resources/Android/drawable-mdpi/ic_menu_main_new.png

@@ -21,16 +21,13 @@
     <sdp:DrawerPage.actionBar>
         <ActionBar automationText="ActionBar" android:opacity="0">
             <android>
-                <NavigationButton icon="{{ firebase.hasUnreadNews ? 'res://ic_new' : 'res://ic_menu_main' }}" tap="showSlideout" automationText="SidebarMenu" />
+                <NavigationButton icon="{{ firebase.hasUnreadNews ? 'res://ic_menu_main_new' : 'res://ic_menu_main' }}" tap="showSlideout" automationText="SidebarMenu" />
             </android>
-            <!--<iOS>
-                <NavigationButton icon="res://ic_back" />
-            </iOS>-->
             <ActionBar.actionItems>
                 <iOS>
                     <ActionItem id="actionbar-menu" ios.position="left" tap="showSlideout" automationText="SidebarMenu">
                         <ActionItem.actionView>
-                            <Image src="{{ firebase.hasUnreadNews, firebase.hasUnreadNews ? 'res://ic_new' : 'res://ic_menu_main' }}" width="22" height="22" margin="0, 8, 0, -8" />
+                            <Image src="{{ firebase.hasUnreadNews, firebase.hasUnreadNews ? 'res://ic_menu_main_new' : 'res://ic_menu_main' }}" width="22" height="22" margin="0, 8, 0, -8" />
                         </ActionItem.actionView>
                     </ActionItem>
                 </iOS>

app/App_Resources/Android/drawable-mdpi/ic_notification.png

@@ -7,8 +7,8 @@
 
         <GridLayout class="drawer-news-link" tap="tapWhatIsNew">
             <GridLayout class="drawer-news-icon">
-                <Image src="res://ic_outside_link" visibility="{{ firebase.hasUnreadNews, firebase.hasUnreadNews ? 'visible' : 'collapse' }}" width="22" height="22" horizontalAlignment="left" />
-                <Label text="What's new" class="drawer-news-label" margin="0 22" />
+                <Image src="res://ic_notification" visibility="{{ firebase.hasUnreadNews, firebase.hasUnreadNews ? 'visible' : 'collapse' }}" width="10" height="10" horizontalAlignment="left" />
+                <Label text="What's new" class="drawer-news-label" margin="0 18" />
             </GridLayout>
         </GridLayout>
 

app/App_Resources/Android/drawable-xhdpi/ic_menu_main_new.png

@@ -18,6 +18,6 @@
             </ListView.itemTemplate>
         </ListView>
         <!-- New line char: &#xA; -->
-        <Label visibility="{{ hasNews ? 'collapse' : 'visible' }}" text="Stay tuned for the latest NativeScript news here!" class="empty-placeholder" />
+        <Label visibility="{{ hasNews ? 'collapse' : 'visible' }}" text="You need an internet access to see what's new." class="empty-placeholder" />
     </GridLayout>
 </Page>