fixed FAB size after search

app/app.scss

@@ -491,6 +491,8 @@ RadListView {
   height: 100%;
 }
 MDFloatingActionButton {
+  width: 56;
+  height: 56;
   margin: 16;
   background: $orange;
   ripple-color: $fabRipple;
@@ -567,7 +569,7 @@ MDButton.closeBtn {
 MDActivityIndicator {
   width: 24;
   height: 24;
-  margin: 16;
+  margin: 16 12;
 }
 // -----------------------------
 // Transitions

app/components/EditRecipe.vue

@@ -41,8 +41,8 @@
                 v-if="recipeContent.imageSrc"
                 :src="recipeContent.imageSrc"
                 stretch="aspectFill"
-                decodeWidth="100%"
+                width="100%"
-                :decodeHeight="screenWidth"
+                :height="screenWidth"
               />
               <Label
                 v-else
@@ -262,8 +262,6 @@
 </template>
 
 <script>
-// import { WorkerService } from "../worker.service"
-// const workerService = new WorkerService()
 import {
   AndroidApplication,
   Application,
@@ -278,7 +276,6 @@ import {
 } from "@nativescript/core"
 import * as Permissions from "@nativescript-community/perms"
 import * as Toast from "nativescript-toast"
-import * as ImagePicker from "@nativescript/imagepicker"
 import * as Filepicker from "nativescript-plugin-filepicker"
 import { ImageCropper } from "nativescript-imagecropper"
 import { mapState, mapActions } from "vuex"
@@ -592,10 +589,7 @@ export default {
         }).then((action) => {
           this.blockModal = false
           if (action) {
-            this.permissionCheck(
+            this.permissionCheck(this.permissionConfirmation, this.imagePicker)
-              this.permissionConfirmation,
-              this.imagePicker
-            )
           } else if (action != null) {
             this.recipeContent.imageSrc = null
             this.releaseBackEvent()
@@ -651,8 +645,6 @@ export default {
         knownFolders.temp().path,
         `${this.getRandomID()}.jpg`
       )
-      console.log(this.cacheImagePath)
-      let screenWidth = Math.round(this.screenWidth * 2)
       Filepicker.create({
         mode: "single",
         extensions: ["png", "jpeg", "jpg"],
@@ -665,8 +657,8 @@ export default {
               .show(
                 image,
                 {
-                  width: screenWidth,
+                  width: 1080,
-                  height: screenWidth,
+                  height: 1080,
                 },
                 {
                   hideBottomControls: true,
@@ -685,39 +677,8 @@ export default {
               })
           })
         })
-      // ImagePicker.create({
-      //   mode: "single",
-      //   mediaType: ImagePicker.ImagePickerMediaType.Image,
-      // })
-      //   .present()
-      //   .then((selection) => {
-      //     let imgPath = selection[0]._android
-      //     ImageSource.fromFile(imgPath).then((image) => {
-      //       ImageCropper.prototype
-      //         .show(
-      //           image,
-      //           {
-      //             width: screenWidth,
-      //             height: screenWidth,
-      //           },
-      //           {
-      //             hideBottomControls: true,
-      //             toolbarTitle: "Crop photo",
-      //             statusBarColor: "#ff5200",
-      //             toolbarTextColor:
-      //               this.appTheme == "light" ? "#212529" : "#f1f3f5",
-      //             toolbarColor:
-      //               this.appTheme == "light" ? "#f1f3f5" : "#212529",
-      //             cropFrameColor: "#ff5200",
-      //           }
-      //         )
-      //         .then((cropped) => {
-      //           cropped.image.saveToFile(this.cacheImagePath, "jpg", 75)
-      //           this.recipeContent.imageSrc = this.cacheImagePath
-      //         })
-      //     })
-      //   })
     },
+
     // INPUT FIELD HANDLERS
     fieldDeletionConfirm(item) {
       return this.$showModal(ConfirmDialog, {
@@ -830,25 +791,6 @@ export default {
       }
       this.saveRecipe()
     },
-    // imageSaveOperation() {
-    //   let imgSavedToPath = path.join(
-    //     knownFolders
-    //       .documents()
-    //       .getFolder("EnRecipes")
-    //       .getFolder("Images").path,
-    //     `${this.getRandomID()}.jpg`
-    //   )
-    //   let workerService = new WorkerService()
-    //   let ImageProcessor = workerService.initImageProcessor()
-    //   ImageProcessor.postMessage({
-    //     imgFile: this.recipeContent.imageSrc,
-    //     imgSavedToPath,
-    //   })
-    //   ImageProcessor.onmessage = ({ data }) => {
-    //     this.recipeContent.imageSrc = imgSavedToPath
-    //     this.saveRecipe()
-    //   }
-    // },
     saveRecipe() {
       if (this.recipeID) {
         this.overwriteRecipeAction({
@@ -863,7 +805,9 @@ export default {
           recipe: this.recipeContent,
         })
       }
-      this.imageLoading = false
+      setTimeout(() => {
+        this.imageLoading = false
+      }, 100)
       this.$navigateBack()
     },
   },

app/components/EnRecipes.vue

@@ -64,7 +64,6 @@
         :filteringFunction="filterFunction"
         :sortingFunction="sortFunction"
       >
-        <!-- @itemTap="viewRecipe" -->
         <v-template>
           <GridLayout
             class="recipeItem"

app/components/ViewRecipe.vue

@@ -78,9 +78,8 @@
                   v-if="recipe.imageSrc"
                   :src="recipe.imageSrc"
                   stretch="aspectFill"
-                  decodeWidth="100%"
+                  width="100%"
-                  :decodeHeight="screenWidth"
+                  :height="screenWidth"
-                  loadMode="async"
                 />
                 <Label
                   v-else
@@ -668,7 +667,7 @@ export default {
         })
         shareContent += references
       }
-      let sharenote = "\nCreated and shared via EnRecipes.\nGet it on F-Droid."
+      let sharenote = "\nCreated and shared via EnRecipes. Get it on F-Droid."
 
       shareContent += sharenote
 

app/worker.service.js

@@ -1,22 +0,0 @@
-const workers = []
-
-export class WorkerService {
-  constructor() {}
-  initImageProcessor() {
-    if (this.imageProcessor) {
-      return this.imageProcessor
-    }
-    const ImageProcessor = require("nativescript-worker-loader!./workers/ImageProcessor.worker.js")
-    this.imageProcessor = new ImageProcessor()
-    workers.push(this.imageProcessor)
-    return this.imageProcessor
-  }
-}
-
-if (module.hot) {
-  module.hot.dispose(() => {
-    workers.forEach((w) => {
-      w.terminate()
-    })
-  })
-}

app/workers/ImageProcessor.worker.js

@@ -1,51 +0,0 @@
-require("tns-core-modules/globals")
-import { ImageSource } from "@nativescript/core"
-var ImageCropper = require("nativescript-imagecropper").ImageCropper
-
-global.onmessage = function({ data }) {
-  console.log(data)
-  let imgSavedToPath = data.imgSavedToPath
-  let imgPath = data.imgPath
-  let screenWidth = data.screenWidth
-  let toolbarTextColor = data.toolbarTextColor
-  let toolbarColor = data.toolbarColor
-
-  ImageSource.fromFile(imgPath).then((image) => {
-    ImageCropper.prototype
-      .show(
-        image,
-        {
-          width: screenWidth,
-          height: screenWidth,
-          // compressionQuality: 75,
-        },
-        {
-          hideBottomControls: true,
-          toolbarTitle: "Crop photo",
-          statusBarColor: "#ff5200",
-          toolbarTextColor,
-          toolbarColor,
-          cropFrameColor: "#ff5200",
-        }
-      )
-      .then((cropped) => {
-        if (cropped.image.saveToFile(imgSavedToPath, "jpg", 75))
-          global.postMessage("savedToFile")
-      })
-  })
-}
-
-// global.onmessage = function({ data }) {
-//   let imgSavedToPath = data.imgSavedToPath
-//   let imgAsset = new ImageAsset(data.imgFile)
-//   imgAsset.options = {
-//     width: 1200,
-//     height: 1200,
-//     keepAspectRatio: true,
-//   }
-//   ImageSource.fromAsset(imgAsset).then((imgData) => {
-//     if (imgData.saveToFile(imgSavedToPath, "jpg", 75)) {
-//       global.postMessage("savedToFile")
-//     }
-//   })
-// }