feat(tab): migrate template to use BottomNavigation component (#79)

Author: manoldonev

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-hdpi/browse.png

@@ -53,14 +53,14 @@
     "nativescript-theme-core": "~1.0.6",
     "reflect-metadata": "~0.1.12",
     "rxjs": "^6.4.0",
-    "tns-core-modules": "~6.0.0",
+    "tns-core-modules": "next",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular/compiler-cli": "~8.2.0",
     "@ngtools/webpack": "~8.2.0",
     "codelyzer": "~4.5.0",
-    "nativescript-dev-webpack": "~1.1.0",
+    "nativescript-dev-webpack": "next",
     "node-sass": "^4.7.1",
     "tslint": "~5.11.0",
     "typescript": "~3.5.3"

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-hdpi/home.png

@@ -1,7 +1,20 @@
 @import 'app.component';
 
 // Place any CSS rules you want to apply only on Android here
-TabView {
-    tab-text-color: $blue-dark;
-    selected-tab-text-color: $item-active-color;
-}
+TabStripItem Label {
+    color: $blue-dark;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+TabStripItem:active Label {
+    color: $item-active-color;
+}
+
+TabStripItem Image {
+    color: $blue-dark;
+}
+
+TabStripItem:active Image {
+    color: $item-active-color;
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-hdpi/search.png

@@ -1,18 +1,43 @@
-<TabView androidTabsPosition="bottom">
+<BottomNavigation>
+    <TabStrip>
+        <!--
+            Besides the approach demonstrated below there is alternative shorthand syntax for setting TabStripItem title and icon:
 
-    <page-router-outlet
-        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
-        name="homeTab">
-    </page-router-outlet>
+            <TabStripItem title="Home" iconSource="res://tabIcons/home" />
 
-    <page-router-outlet
-        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
-        name="browseTab">
-    </page-router-outlet>
+            Both shorthand and verbose syntax can use
+            TabStripItem Label {...} css selector to style the title label,
+            and TabStriptItem Image {...} css selector to style the icon image (see _app-common.scss).
+            Note that when working with font icons we recommend the usage of the verbose syntax as it
+            is explicit and describes better the need to provide font icon as well as set the respective font (e.g. via class name).
+         -->
+        <TabStripItem>
+            <!--
+                Note TabStripItem will only accept single Label and/or single Image elements that it
+                will "adopt"; any other layout elements you try to specify will be ignored
+            -->
+            <Label text="Home"></Label>
+            <Image src="font://&#xf015;" class="fa"></Image>
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Browse"></Label>
+            <Image src="font://&#xf1ea;" class="fa"></Image>
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Search"></Label>
+            <Image src="font://&#xf002;" class="fa"></Image>
+        </TabStripItem>
+    </TabStrip>
 
-    <page-router-outlet
-        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
-        name="searchTab">
-    </page-router-outlet>
+    <TabContentItem>
+        <page-router-outlet name="homeTab"></page-router-outlet>
+    </TabContentItem>
 
-</TabView>
+    <TabContentItem>
+        <page-router-outlet name="browseTab"></page-router-outlet>
+    </TabContentItem>
+
+    <TabContentItem>
+        <page-router-outlet name="searchTab"></page-router-outlet>
+    </TabContentItem>
+</BottomNavigation>

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-mdpi/browse.png

@@ -1,6 +1,18 @@
 @import 'app.component';
 
 // Place any CSS rules you want to apply only on IOS here
-TabView {
-    selected-tab-text-color: $item-active-color;
-}
+TabStripItem Label {
+    color: $blue-dark;
+}
+
+TabStripItem:active Label {
+    color: $item-active-color;
+}
+
+TabStripItem Image {
+    color: $blue-dark;
+}
+
+TabStripItem:active Image {
+    color: $item-active-color;
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-mdpi/home.png

@@ -15,10 +15,4 @@ export class AppComponent implements OnInit {
     ngOnInit(): void {
         // Init your component properties here.
     }
-
-    getIconSource(icon: string): string {
-        const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
-
-        return iconPrefix + icon;
-    }
 }

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-mdpi/search.png

@@ -25,4 +25,20 @@
 //Action bar
 ActionBar .action-bar-title {
     horizontal-align: center;
-}
+}
+
+TabStripItem Label {
+    color: $blue-dark;
+}
+
+TabStripItem:active Label {
+    color: $item-active-color;
+}
+
+TabStripItem Image {
+    color: $blue-dark;
+}
+
+TabStripItem:active Image {
+    color: $item-active-color;
+}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xhdpi/browse.png

@@ -1,19 +1,51 @@
 <!--
-The TabView component provides a simple way to navigate between different views by
-tapping on some of the tabs or by swiping between the views.
-Learn more about the TabView component in this documentation article:
-http://docs.nativescript.org/cookbook/ui/tab-view
+The BottomNavigation component provides a way for high level navigation between different views by
+tapping on some of the tabs. Learn more about the BottomNavigation component
+in this documentation article: https://docs.nativescript.org/ui/ns-ui-widgets/bottom-navigation.
+Tabs component is similar to BottomNavigation but suitable for mid level navigation scenarios thus
+supports swiping between the views. Learn more about the Tabs component in this documentation article:
+https://docs.nativescript.org/angular/ui/ng-ui-widgets/tabs.
 -->
-<TabView androidTabsPosition="bottom">
-    <TabViewItem title="Home" ios:iconSource="res://tabIcons/home" android:iconSource="res://home">
-        <Frame defaultPage="home/home-items-page"></Frame>
-    </TabViewItem>
+<BottomNavigation>
+    <TabStrip>
+        <!--
+            Besides the approach demonstrated below there is alternative shorthand syntax for setting TabStripItem title and icon:
 
-    <TabViewItem title="Browse" ios:iconSource="res://tabIcons/browse" android:iconSource="res://browse">
-        <Frame defaultPage="browse/browse-page"></Frame>
-    </TabViewItem>
+            <TabStripItem title="Home" iconSource="res://tabIcons/home" />
 
-    <TabViewItem title="Search" ios:iconSource="res://tabIcons/search" android:iconSource="res://search">
-        <Frame defaultPage="search/search-page"></Frame>
-    </TabViewItem>
-</TabView>
+            Both shorthand and verbose syntax can use
+            TabStripItem Label {...} css selector to style the title label,
+            and TabStriptItem Image {...} css selector to style the icon image (see _app-common.scss).
+            Note that when working with font icons we recommend the usage of the verbose syntax as it
+            is explicit and describes better the need to provide font icon as well as set the respective font (e.g. via class name).
+         -->
+        <TabStripItem>
+            <!--
+                Note TabStripItem will only accept single Label and/or single Image elements that it
+                will "adopt"; any other layout elements you try to specify will be ignored
+            -->
+            <Label text="Home" />
+            <Image src="font://&#xf015;" class="fa" />
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Browse" />
+            <Image src="font://&#xf1ea;" class="fa" />
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Search" />
+            <Image src="font://&#xf002;" class="fa" />
+        </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <Frame defaultPage="home/home-items-page" />
+    </TabContentItem>
+
+    <TabContentItem>
+        <Frame defaultPage="browse/browse-page" />
+    </TabContentItem>
+
+    <TabContentItem>
+        <Frame defaultPage="search/search-page" />
+    </TabContentItem>
+</BottomNavigation>

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xhdpi/home.png

@@ -9,9 +9,8 @@
 @import 'app-common';
 
 // Place any CSS rules you want to apply only on Android here
-TabView {
-    tab-text-color: $blue-dark;
-    selected-tab-text-color: $item-active-color;
+TabStripItem Label {
+    text-transform: uppercase;
+    font-weight: bold;
 }
 
-

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xhdpi/search.png

@@ -9,6 +9,3 @@
 @import 'app-common';
 
 // Place any CSS rules you want to apply only on iOS here
-TabView {
-    selected-tab-text-color: $item-active-color;
-}

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/browse.png

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "nativescript-theme-core": "~1.0.6",
-    "tns-core-modules": "~6.0.0"
+    "tns-core-modules": "next"
   },
   "devDependencies": {
     "nativescript-dev-webpack": "~1.1.0",

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/home.png

@@ -2,27 +2,43 @@
 // This is where the vast majority of your CSS code goes.
 // Font icon class
 .fa {
-   font-family: "FontAwesome";
-}
-// Common page class
-.page-content {
-    .page-placeholder {
-        color: $page-icon-color;
-        font-size: $page-content-placeholder-font-size;
-        vertical-align: center;
-        horizontal-align: center;
-    }
+    font-family: "FontAwesome";
+ }
+ // Common page class
+ .page-content {
+     .page-placeholder {
+         color: $page-icon-color;
+         font-size: $page-content-placeholder-font-size;
+         vertical-align: center;
+         horizontal-align: center;
+     }
 
-    .page-icon {
-        font-size: 72;
-        vertical-align: top;
-        horizontal-align: center;
-        color: $page-icon-color;
-        margin-top: 20%;
-    }
-}
+     .page-icon {
+         font-size: 72;
+         vertical-align: top;
+         horizontal-align: center;
+         color: $page-icon-color;
+         margin-top: 20%;
+     }
+ }
 
-//Action bar
-ActionBar .action-bar-title {
-    horizontal-align: center;
-}
+ //Action bar
+ ActionBar .action-bar-title {
+     horizontal-align: center;
+ }
+
+ TabStripItem Label {
+     color: $blue-dark;
+ }
+
+ TabStripItem:active Label {
+     color: $item-active-color;
+ }
+
+ TabStripItem Image {
+     color: $blue-dark;
+ }
+
+ TabStripItem:active Image {
+     color: $item-active-color;
+ }

packages/template-tab-navigation-ng/App_Resources/Android/src/main/res/drawable-xxhdpi/search.png

@@ -1,19 +1,51 @@
 <!--
-The TabView component provides a simple way to navigate between different views by
-tapping on some of the tabs or by swiping between the views.
-Learn more about the TabView component in this documentation article:
-http://docs.nativescript.org/cookbook/ui/tab-view
+The BottomNavigation component provides a way for high level navigation between different views by
+tapping on some of the tabs. Learn more about the BottomNavigation component
+in this documentation article: https://docs.nativescript.org/ui/ns-ui-widgets/bottom-navigation.
+Tabs component is similar to BottomNavigation but suitable for mid level navigation scenarios thus
+supports swiping between the views. Learn more about the Tabs component in this documentation article:
+https://docs.nativescript.org/angular/ui/ng-ui-widgets/tabs.
 -->
-<TabView androidTabsPosition="bottom">
-    <TabViewItem title="Home" ios:iconSource="res://tabIcons/home" android:iconSource="res://home">
-        <Frame defaultPage="home/home-items-page"></Frame>
-    </TabViewItem>
+<BottomNavigation>
+    <TabStrip>
+        <!--
+            Besides the approach demonstrated below there is alternative shorthand syntax for setting TabStripItem title and icon:
 
-    <TabViewItem title="Browse" ios:iconSource="res://tabIcons/browse" android:iconSource="res://browse">
-        <Frame defaultPage="browse/browse-page"></Frame>
-    </TabViewItem>
+            <TabStripItem title="Home" iconSource="res://tabIcons/home" />
 
-    <TabViewItem title="Search" ios:iconSource="res://tabIcons/search" android:iconSource="res://search">
-        <Frame defaultPage="search/search-page"></Frame>
-    </TabViewItem>
-</TabView>
+            Both shorthand and verbose syntax can use
+            TabStripItem Label {...} css selector to style the title label,
+            and TabStriptItem Image {...} css selector to style the icon image (see _app-common.scss).
+            Note that when working with font icons we recommend the usage of the verbose syntax as it
+            is explicit and describes better the need to provide font icon as well as set the respective font (e.g. via class name).
+         -->
+        <TabStripItem>
+            <!--
+                Note TabStripItem will only accept single Label and/or single Image elements that it
+                will "adopt"; any other layout elements you try to specify will be ignored
+            -->
+            <Label text="Home" />
+            <Image src="font://&#xf015;" class="fa" />
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Browse" />
+            <Image src="font://&#xf1ea;" class="fa" />
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Search" />
+            <Image src="font://&#xf002;" class="fa" />
+        </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+        <Frame defaultPage="home/home-items-page" />
+    </TabContentItem>
+
+    <TabContentItem>
+        <Frame defaultPage="browse/browse-page" />
+    </TabContentItem>
+
+    <TabContentItem>
+        <Frame defaultPage="search/search-page" />
+    </TabContentItem>
+</BottomNavigation>