updated icons, status bar dynamic icons colors

App_Resources/Android/app.gradle

@@ -17,7 +17,7 @@ android {
   defaultConfig {
     versionCode 2
     versionName '1.0.0'
-    minSdkVersion 19
+    minSdkVersion 21
     generatedDensities = []
     ndk {
       abiFilters.clear()

App_Resources/Android/src/main/AndroidManifest.xml

@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="__PACKAGE__" android:versionCode="10000" android:versionName="1.0">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="__PACKAGE__" android:versionCode="10000" android:versionName="1.0">
 	<supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" />
 	<uses-permission android:name="android.permission.CAMERA" />
 	<uses-feature android:name="android.hardware.camera" android:required="false" />
 	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-	<application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/ic_launcher" android:roundIcon="@drawable/ic_launcher_round" android:label="@string/app_name" android:hardwareAccelerated="true" android:largeHeap="true" android:theme="@style/AppTheme" android:requestLegacyExternalStorage="true">
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" tools:node="remove" />
+	<uses-permission android:name="android.permission.INTERNET" tools:node="remove" />
+	<uses-permission android:name="android.permission.RECORD_AUDIO" tools:node="remove" />
+	<application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:hardwareAccelerated="true" android:largeHeap="true" android:theme="@style/AppTheme" android:requestLegacyExternalStorage="true">
 		<activity android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera" android:screenOrientation="portrait" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode" android:theme="@style/LaunchScreenTheme" android:windowSoftInputMode="adjustPan">
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
 			<intent-filter>

App_Resources/Android/src/main/res/drawable-anydpi-v26/ic_launcher.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-	<background android:drawable="@drawable/ic_launcher_background" />
+	<background android:drawable="@color/ns_accent" />
 	<foreground android:drawable="@drawable/ic_launcher_foreground" />
 </adaptive-icon>

App_Resources/Android/src/main/res/drawable-anydpi-v26/ic_launcher_round.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-	<background android:drawable="@drawable/ic_launcher_background" />
+	<background android:drawable="@color/ns_accent" />
 	<foreground android:drawable="@drawable/ic_launcher_foreground" />
 </adaptive-icon>

App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml

@@ -1,11 +1,10 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
 	<item>
 		<shape android:shape="rectangle">
-			<!-- <solid android:color="@android:color/white" /> -->
-			<solid android:color="#ff5722" />
+			<solid android:color="@color/ns_accent" />
 		</shape>
 	</item>
 	<item>
-		<bitmap android:gravity="center" android:src="@drawable/logo_white" />
+		<bitmap android:gravity="center" android:src="@drawable/logo_light" />
 	</item>
 </layer-list>

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

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 	<color name="ns_primary">
-		#FFFFFF
+		#fafafa
 	</color>
 	<color name="ns_primaryDark">
-		#ff7043
+		#ff5722
 	</color>
 	<color name="ns_accent">
-		#ff7043
+		#ff5722
 	</color>
 </resources>

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

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <string name="app_name">EnRecipes</string>
-    <string name="title_activity_kimera">EnRecipes</string>
-</resources>

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

@@ -3,7 +3,7 @@
 
     <!-- Application theme -->
     <style name="AppThemeBase21" parent="AppThemeBase">
-        <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:windowTranslucentStatus">false</item>
         <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
         <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
     </style>
@@ -23,6 +23,6 @@
 
     <style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
         <item name="android:elevation">4dp</item>
-        <item name="android:paddingTop">24dp</item>
+        <!-- <item name="android:paddingTop">24dp</item> -->
     </style>
 </resources>

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

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 	<color name="ns_primary">
-		#FFFFFF
+		#fafafa
 	</color>
 	<color name="ns_primaryDark">
-		#ff7043
+		#ff5722
 	</color>
 	<color name="ns_accent">
-		#ff7043
+		#ff5722
 	</color>
 </resources>

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

@@ -21,7 +21,7 @@
 			true
 		</item>
 		<item name="android:windowTranslucentStatus">
-			true
+			false
 		</item>
 	</style>
 	<style name="LaunchScreenTheme" parent="LaunchScreenThemeBase">

app/app.scss

@@ -27,9 +27,6 @@ Page {
 .orkm {
   font-family: "Orkney-Medium";
 }
-.orkb {
-  font-family: "Orkney-Bold";
-}
 .bx {
   font-family: "boxicons";
   font-size: 24;
@@ -87,7 +84,7 @@ Page {
     }
   }
   .imageHolder {
-    color: $grayL1;
+    color: $gray;
     background: $grayL2;
   }
   .count {
@@ -96,16 +93,9 @@ Page {
   }
   .instruction {
     border-color: $grayD4;
-  } // prettier-ignore
-  .text-btn,
-  .group-header,
-  .category,
-  ActivityIndicator,
-  .selected-sd-item,
-  Progress {
-    color: $orange;
   }
 }
+
 .ns-dark {
   Page,
   ActionBar,
@@ -153,7 +143,7 @@ Page {
     }
   }
   .imageHolder {
-    color: $grayD4;
+    color: $gray;
     background: #111;
   }
   .count {
@@ -163,15 +153,6 @@ Page {
   .instruction {
     border-color: $grayL4;
   }
-  // prettier-ignore
-  .text-btn,
-  .group-header,
-  .category,
-  ActivityIndicator,
-  .selected-sd-item,
-  Progress {
-    color: $orange;
-  }
 }
 // -----------------------------
 // Elements
@@ -205,10 +186,18 @@ TabView {
 .progressContainer{
   width: 100%;
 }
+// prettier-ignore
+.text-btn,
+.group-header,
+.category,
+ActivityIndicator,
+Progress {
+  color: $orange;
+}
 // -----------------------------
 // ActionBar
 ActionBar {
-  margin: 24 0 0 0;
+  margin: 0;
   padding: 0;
   height: 64;
   .bx {
@@ -225,7 +214,7 @@ ActionBar {
 // -----------------------------
 // Side Drawer
 .sd {
-  padding: 32 8 8;
+  padding: 8;
 }
 .sd-item {
   border-radius: 4;
@@ -235,6 +224,9 @@ ActionBar {
   .bx {
     font-size: 24;
   }
+  &.selected-sd-item {
+    color: $orange;
+  }
   // prettier-ignore
   Label {
     font-size: 16;
@@ -489,6 +481,7 @@ RadListView {
 .closeBtn {
   padding: 4;
   margin-top: 16;
+  vertical-alignment: top;
 }
 // -----------------------------
 // DIALOGS

app/components/About.vue

@@ -19,7 +19,7 @@
           orientation="horizontal"
           class="appIconContainer"
         >
-          <Image src="res://logo_white" class="appIcon" stretch="aspectFit" />
+          <Image src="res://logo_light" class="appIcon" stretch="aspectFit" />
         </StackLayout>
         <StackLayout orientation="horizontal" class="option">
           <Label class="bx" :text="icon.info" />

app/components/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <Page actionBarHidden="true">
+  <Page
+    @loaded="initialize"
+    actionBarHidden="true"
+    :androidStatusBarBackground="themeName == 'Light' ? '#fafafa' : '#212121'"
+  >
     <RadSideDrawer
       ref="drawer"
       allowEdgeSwipe="true"
@@ -173,6 +177,7 @@ export default {
         },
       ],
       catEditMode: false,
+      themeName: "Light",
     }
   },
   computed: {
@@ -198,6 +203,14 @@ export default {
       "initializeYieldUnits",
       "renameCategoryAction",
     ]),
+    initialize() {
+      if (this.themeName === "Light") {
+        const View = android.view.View
+        const window = Application.android.startActivity.getWindow()
+        const decorView = window.getDecorView()
+        decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR)
+      }
+    },
     toggleCatEdit() {
       this.catEditMode = !this.catEditMode
       if (this.selectedCategory) this.setComponent("EnRecipes")
@@ -353,8 +366,10 @@ export default {
     },
   },
   created() {
-    let themeName = ApplicationSettings.getString("appTheme", "Light")
-    setTimeout((e) => Theme.setMode(Theme[themeName]), 50)
+    this.themeName = ApplicationSettings.getString("appTheme", "Light")
+    setTimeout((e) => {
+      Theme.setMode(Theme[this.themeName])
+    }, 50)
     if (!this.recipes.length) this.initializeRecipes()
     if (!this.categories.length) this.initializeCategories()
     if (!this.yieldUnits.length) this.initializeYieldUnits()

app/components/EditRecipe.vue

@@ -39,8 +39,9 @@
                 v-if="recipeContent.imageSrc"
                 :src="recipeContent.imageSrc"
                 stretch="aspectFill"
-                width="100%"
-                :height="screenWidth"
+                decodeWidth="100%"
+                :decodeHeight="screenWidth"
+                loadMode="async"
               />
               <Label
                 v-else
@@ -248,7 +249,7 @@
 
 <script>
 import { WorkerService } from "../worker.service"
-var workerService = new WorkerService()
+const workerService = new WorkerService()
 
 import {
   Screen,
@@ -261,9 +262,8 @@ import {
   File,
   ApplicationSettings,
 } from "@nativescript/core"
-import { Mediafilepicker } from "nativescript-mediafilepicker"
 
-import { DateTimePicker, TimePickerField } from "@nativescript/datetimepicker"
+import { Mediafilepicker } from "nativescript-mediafilepicker"
 
 import { mapState, mapActions } from "vuex"
 

app/components/EnRecipes.vue

@@ -66,8 +66,8 @@
           <GridLayout
             class="recipeItem"
             rows="112"
-            columns="112, *"
-            androidElevation="2"
+            columns="112, 100%"
+            androidElevation="1"
           >
             <GridLayout class="imageHolder card" rows="112" columns="112">
               <Image
@@ -78,11 +78,12 @@
                 stretch="aspectFill"
                 decodeWidth="112"
                 decodeHeight="112"
+                loadMode="async"
               />
               <Label
+                v-else
                 row="0"
                 col="0"
-                v-else
                 horizontalAlignment="center"
                 class="bx"
                 fontSize="56"

app/components/ViewRecipe.vue

@@ -1,9 +1,9 @@
 <template>
   <Page @loaded="initializePage" @unloaded="hideInfo">
-    <ActionBar height="136" margin="0" flat="true">
-      <GridLayout rows="24, 64, 48" columns="auto, *, auto,auto, auto">
+    <ActionBar height="112" margin="0" flat="true">
+      <GridLayout rows="64, 48" columns="auto, *, auto,auto, auto">
         <Label
-          row="1"
+          row="0"
           col="0"
           class="bx"
           :text="icon.back"
@@ -11,7 +11,7 @@
           @tap="$navigateBack()"
         />
         <ScrollView
-          row="2"
+          row="1"
           col="1"
           colSpan="3"
           orientation="horizontal"
@@ -24,7 +24,7 @@
           />
         </ScrollView>
         <Label
-          row="1"
+          row="0"
           col="3"
           class="bx"
           :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
@@ -32,7 +32,7 @@
         />
         <Label
           v-if="!filterTrylater"
-          row="1"
+          row="0"
           col="4"
           class="bx"
           :text="recipe.tried ? icon.trylaterOutline : icon.trylater"
@@ -40,13 +40,13 @@
         />
         <Label
           v-if="!busy"
-          row="1"
+          row="0"
           col="2"
           class="bx"
           :text="icon.edit"
           @tap="editRecipe"
         />
-        <ActivityIndicator v-else row="1" col="2" :busy="busy" />
+        <ActivityIndicator v-else row="0" col="2" :busy="busy" />
       </GridLayout>
     </ActionBar>
     <AbsoluteLayout>
@@ -71,8 +71,9 @@
                   v-if="recipe.imageSrc"
                   :src="recipe.imageSrc"
                   stretch="aspectFill"
-                  width="100%"
-                  :height="screenWidth"
+                  decodeWidth="100%"
+                  :decodeHeight="screenWidth"
+                  loadMode="async"
                 />
                 <Label
                   v-else
@@ -296,7 +297,7 @@
                 <Label
                   verticalAlignment="top"
                   horizontalAlignment="center"
-                  class="count orkb"
+                  class="count orkm"
                   col="0"
                   :text="index + 1"
                 />
@@ -338,7 +339,7 @@
                 <Label
                   verticalAlignment="top"
                   horizontalAlignment="center"
-                  class="count square orkb"
+                  class="count square orkm"
                   col="0"
                   :text="index + 1"
                 />

app/main.js

@@ -5,9 +5,6 @@ import store from "./store"
 import RadListView from "nativescript-ui-listview/vue"
 Vue.use(RadListView)
 
-import DateTimePicker from "@nativescript/datetimepicker/vue"
-Vue.use(DateTimePicker)
-
 Vue.registerElement(
   "RadSideDrawer",
   () => require("nativescript-ui-sidedrawer").RadSideDrawer

package-lock.json

@@ -1117,11 +1117,6 @@
         "tslib": "~2.0.0"
       }
     },
-    "@nativescript/datetimepicker": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@nativescript/datetimepicker/-/datetimepicker-2.0.4.tgz",
-      "integrity": "sha512-fhRFx70FYx/ge9W+qg+63UVlZ0jwEWT9TUz8cKeRD8UAhf+8lc0Fu3cHfAiqXw1eTVxTJt7+tRwMjX4h8qVTKA=="
-    },
     "@nativescript/hook": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@nativescript/hook/-/hook-2.0.0.tgz",

package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "@nativescript-community/perms": "^2.1.1",
     "@nativescript/core": "~7.0.0",
-    "@nativescript/datetimepicker": "^2.0.4",
     "@nativescript/theme": "^3.0.0",
     "@nativescript/webpack": "3.0.0",
     "@nativescript/zip": "^5.0.0",