Merge pull request #3 from modos189/up2

Implement Enhanced WebView System with Sliding Panel Navigation

App_Resources/Android/src/main/res/values-v21/styles.xml

@@ -3,7 +3,8 @@
 
     <!-- Application theme -->
     <style name="AppThemeBase21" parent="AppThemeBase">
-        <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:statusBarColor">@color/ns_primary</item>
+        <item name="android:windowLightStatusBar">false</item>
         <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
         <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
     </style>
@@ -25,4 +26,4 @@
         <item name="android:elevation">4dp</item>
         <item name="android:paddingTop">24dp</item>
     </style>
-</resources>
+</resources>

App_Resources/Android/src/main/res/values/colors.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ns_primary">#F5F5F5</color>
-	<color name="ns_primaryDark">#757575</color>
-	<color name="ns_accent">#65ADF1</color>
+    <color name="ns_primary">#0e3d4e</color>
+	<color name="ns_primaryDark">#0e3d4e</color>
+	<color name="ns_accent">#0b303e</color>
     <color name="ns_blue">#272734</color>
-</resources>
+</resources>

App_Resources/Android/src/main/res/values/styles.xml

@@ -12,14 +12,15 @@
         <item name="android:windowBackground">@drawable/splash_screen</item>
 
         <item name="android:windowActionBarOverlay">true</item>
-        <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:statusBarColor">@color/ns_primary</item>
+        <item name="android:windowLightStatusBar">false</item>
     </style>
 
     <style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">
     </style>
 
     <!-- theme to use AFTER launch screen is loaded-->
-    <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppThemeBase" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
 
         <item name="colorPrimary">@color/ns_primary</item>

app/app.js

@@ -1,26 +1,32 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
-// import VueDevtools from 'nativescript-vue-devtools'
 import Vue from 'nativescript-vue'
 
+import { FontIcon, fonticon } from '@nativescript-community/fonticon';
+import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
+import CanvasSVG from '@nativescript-community/ui-svg/vue';
+import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
+import WebViewPlugin from '@nativescript-community/ui-webview/vue';
+
 import Main from '~/components/Main'
+import store from './store';
 
-import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
-TNSFontIcon.paths = { 'mdi': './assets/css/material-design-icons.css' }
-TNSFontIcon.loadCss()
-Vue.filter('fonticon', fonticon)
+FontIcon.paths = {
+  'fa': './assets/css/Font-Awesome.css',
+};
+FontIcon.loadCssSync();
+Vue.filter('fonticon', fonticon);
 
-import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
 import { install } from "@nativescript-community/ui-material-bottomsheet";
 install();
 Vue.use(BottomSheetPlugin);
 
-import CanvasSVG from '@nativescript-community/ui-svg/vue';
 Vue.use(CanvasSVG);
 
-import store from './store';
+Vue.use(ButtonPlugin);
+
+Vue.use(WebViewPlugin);
 
-// Vue.use(VueDevtools, { host: '192.168.42.10' })
 Vue.config.silent = false;
 
 new Vue({

app/app.scss

@@ -6,8 +6,8 @@
 // Place any CSS rules you want to apply on both iOS and Android here.
 // This is where the vast majority of your CSS code goes.
 
-.mdi {
-  font-family: "Material Icons", "material-design-icons";
+.fa {
+  font-family: "Font Awesome 5 Free", "fa-solid-900";
   font-weight: 900;
 }