fixed tabs refresh issue

app/app.scss

@@ -42,7 +42,8 @@ Page,
   Page,
   ActionBar,
   SearchBar,
-  TabView,
+  Tabs,
+  TabStripItem,
   ListPicker {
     color: $gray9;
     background: $gray1;
@@ -51,11 +52,6 @@ Page,
   MDButton {
     ripple-color: rgba($gray6, 0.2);
   }
-
-  TabView {
-    tab-background-color: $gray1;
-    selected-tab-text-color: $gray9;
-  }
   .hr {
     border-color: $gray3;
   }
@@ -63,13 +59,15 @@ Page,
   .fieldLabel {
     background: $gray1;
   }
-  .referenceItem,
+  .urlCard,
-  .recipeText,
+  .textCard,
   .overviewItem,
-  .recipeItem,
+  .recipeItem {
-  TextField.combinationToken {
     background: white;
   }
+  TextField.combinationToken {
+    background: $gray3;
+  }
 
   .sd-item,
   .sd-group-header,
@@ -108,15 +106,16 @@ Page,
   Page,
   ActionBar,
   SearchBar,
-  TabView,
+  Tabs,
+  TabStripItem,
   ListPicker {
     color: $gray1;
     background: $gray9;
   }
-  TabView {
+  // TabView {
-    tab-background-color: $gray9;
+  //   tab-background-color: $gray9;
-    selected-tab-text-color: $gray1;
+  //   selected-tab-text-color: $gray1;
-  }
+  // }
   MDRipple,
   MDButton {
     ripple-color: rgba($gray4, 0.1);
@@ -129,8 +128,8 @@ Page,
   .fieldLabel {
     background: $gray9;
   }
-  .referenceItem,
+  .urlCard,
-  .recipeText,
+  .textCard,
   .overviewItem,
   .recipeItem,
   TextField.combinationToken {
@@ -194,7 +193,7 @@ TabView {
   tab-text-color: $gray6;
 }
 .inputField {
-  margin-bottom: 14;
+  margin-bottom: 4;
 }
 .fieldLabel {
   font-size: 12;
@@ -218,8 +217,8 @@ MDProgress {
 // ActionBar
 ActionBar {
   margin: 0;
-  padding: 0 8;
+  padding: 6 8;
-  height: 64;
+  // height: 64;
   GridLayout {
     padding: 0;
     margin: 0;
@@ -227,6 +226,9 @@ ActionBar {
   MDButton.bx {
     padding: 0;
     margin: 0;
+    &.flip {
+      transform: scaleX(-1);
+    }
   }
   .title {
     padding-left: 12;
@@ -268,7 +270,7 @@ ActionBar {
 }
 .sd-group-header {
   width: 100%;
-  padding: 8 0 8 8;
+  padding: 8;
 }
 MDRipple {
   border-radius: 4;
@@ -318,9 +320,6 @@ MDButton {
       vertical-alignment: center;
     }
   }
-  &.noResult {
-    margin-top: 32;
-  }
 }
 // -----------------------------
 // Recipe Items
@@ -375,18 +374,18 @@ RadListView {
   padding: 8;
 }
 .main-container {
-  padding: 8 8 128;
+  padding: 8 8 88;
   .option {
     font-size: 16;
     .bx {
-      margin: 16 24 16 16;
+      margin: 11 24 11 16;
     }
     .info {
       font-size: 12;
       line-height: 4;
     }
     StackLayout {
-      margin: 16 24 16 0;
+      margin: 9 24 9 0;
     }
   }
 }
@@ -406,8 +405,7 @@ RadListView {
 .viewRecipe {
   .category,
   .time,
-  .ingredient,
+  .ingredient {
-  .ingredient-check {
     font-size: 16;
   }
   .category {
@@ -440,12 +438,8 @@ RadListView {
       }
     }
   }
-  .ingredient,
+  .ingredient {
-  .ingredient-check {
     line-height: 6;
-    padding-bottom: 12;
-  }
-  .ingredient-check {
     padding-bottom: 0;
   }
   .count {
@@ -455,54 +449,37 @@ RadListView {
     margin: 0 0 0 8;
     text-align: center;
     border-radius: 99;
-    &.square {
-      clip-path: polygon(
-        5% 0,
-        95% 0,
-        100% 5%,
-        100% 65%,
-        65% 100%,
-        5% 100%,
-        0 95%,
-        0 5%
-      );
   }
-  }
+  .instruction {
-  .instruction,
-  .note,
-  .reference {
     font-size: 16;
     line-height: 6;
-    padding: 2 0 14 36;
+    padding: 1 0 24 36;
     margin: 0 0 0 19;
     border-width: 0 0 0 2;
   }
   .instruction.noBorder {
     border-color: transparent;
   }
-  .note {
+  .urlCard {
-    border-width: 0;
-  }
-  .referenceItem {
     margin: 8 16;
     border-radius: 4;
     font-size: 16;
     .bx {
       font-size: 24;
     }
-    .recipeLink {
+    .link {
-      padding: 16;
+      padding: 13 16 13 11;
       margin: 0;
       line-height: 6;
     }
     .linkIcon {
-      padding: 0 16 0 0;
+      padding: 0 0 0 12;
     }
   }
-  .recipeText {
+  .textCard {
     font-size: 16;
     line-height: 6;
-    padding: 16;
+    padding: 13 16;
     margin: 8 16;
     border-radius: 4;
   }
@@ -510,6 +487,7 @@ RadListView {
 // -----------------------------
 // FAB
 #btnFabContainer {
+  z-index: 100;
   width: 100%;
   height: 100%;
 }
@@ -539,13 +517,10 @@ MDButton.closeBtn {
   min-width: 0;
   vertical-alignment: top;
 }
-TextField.combinationToken {
-  border-width: 0;
-}
 // -----------------------------
 // MEAL PLANNER
 .dayPlan {
-  padding: 0;
+  padding: 0 0 88;
   width: 100%;
   .plansContainer {
     padding: 8 4;
@@ -614,7 +589,7 @@ TextField.combinationToken {
     letter-spacing: 0;
     text-transform: none;
     line-height: 6;
-    padding: 16 24;
+    padding: 13 24;
     margin: 0;
   }
   .actionsContainer {

app/components/About.vue

@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <GridLayout rows="*" columns="auto, *">
         <MDButton
           variant="text"
@@ -13,7 +13,7 @@
         <Label class="title orkm" text="About" col="1" />
       </GridLayout>
     </ActionBar>
-    <ScrollView scrollBarIndicatorVisible="true" @scroll="onScroll">
+    <ScrollView @scroll="onScroll">
       <StackLayout class="main-container">
         <StackLayout
           horizontalAlignment="center"
@@ -118,9 +118,7 @@ export default {
       utils.showDrawer()
     },
     onScroll(args) {
-      args.scrollY
+      this.viewIsScrolled = args.scrollY ? true : false
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
     },
     openURL(url) {
       Utils.openUrl(url)

app/components/App.vue

@@ -169,20 +169,20 @@ export default {
       MealPlanner: MealPlanner,
       topmenu: [
         {
-          title: "Home",
+          title: "EnRecipes",
           component: "EnRecipes",
           icon: "home",
         },
-        {
-          title: "Favorites",
-          component: "Favorites",
-          icon: "heart",
-        },
         {
           title: "Try Later",
           component: "Try Later",
           icon: "trylater",
         },
+        {
+          title: "Favorites",
+          component: "Favorites",
+          icon: "heart",
+        },
       ],
       bottommenu: [
         {

app/components/EditRecipe.vue

@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad" @unloaded="releaseBackEvent">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <GridLayout rows="*" columns="auto, *, auto">
         <MDButton
           variant="text"
@@ -22,13 +22,8 @@
         <MDActivityIndicator col="2" v-if="saving" :busy="saving" />
       </GridLayout>
     </ActionBar>
-    <ScrollView
+    <ScrollView width="100%" height="100%" @scroll="onScroll">
-      width="100%"
+      <StackLayout width="100%" padding="0 0 88">
-      height="100%"
-      @scroll="onScroll"
-      scrollBarIndicatorVisible="true"
-    >
-      <StackLayout width="100%" padding="0 0 128">
         <AbsoluteLayout>
           <StackLayout
             width="100%"
@@ -133,7 +128,7 @@
               returnKeyType="next"
             />
             <TextField
-              width="68"
+              width="60"
               col="2"
               v-model="recipeContent.ingredients[index].quantity"
               hint="1.00"
@@ -141,7 +136,7 @@
               returnKeyType="next"
             />
             <TextField
-              width="68"
+              width="76"
               col="4"
               v-model="recipeContent.ingredients[index].unit"
               hint="Unit"
@@ -198,66 +193,6 @@
         </StackLayout>
 
         <StackLayout margin="0 16">
-          <Label text="Notes" class="sectionTitle" />
-          <GridLayout
-            columns="*,8,auto"
-            v-for="(note, index) in recipeContent.notes"
-            :key="index"
-          >
-            <TextView
-              @loaded="focusField($event, 'multiLine')"
-              col="0"
-              :hint="`Note ${index + 1}`"
-              v-model="recipeContent.notes[index]"
-            />
-            <MDButton
-              variant="text"
-              col="2"
-              class="bx closeBtn"
-              :text="icon.close"
-              @tap="removeNote(index)"
-            />
-          </GridLayout>
-          <MDButton
-            variant="text"
-            class="text-btn orkm"
-            text="+ ADD NOTE"
-            @tap="addNote"
-          />
-          <StackLayout class="hr" margin="24 16"></StackLayout>
-        </StackLayout>
-
-        <StackLayout margin="0 16">
-          <Label text="References" class="sectionTitle" />
-          <GridLayout
-            columns="*,8,auto"
-            v-for="(reference, index) in recipeContent.references"
-            :key="index"
-          >
-            <TextView
-              @loaded="focusField($event, 'multiLine')"
-              col="0"
-              v-model="recipeContent.references[index]"
-              hint="Text or Website/Video URL"
-            />
-            <MDButton
-              variant="text"
-              col="2"
-              class="bx closeBtn"
-              :text="icon.close"
-              @tap="removeReference(index)"
-            />
-          </GridLayout>
-          <MDButton
-            variant="text"
-            class="text-btn orkm"
-            text="+ ADD REFERENCE"
-            @tap="addReference"
-          />
-          <StackLayout class="hr" margin="24 16"></StackLayout>
-        </StackLayout>
-
-        <StackLayout margin="0 16 24">
           <Label text="Combinations" class="sectionTitle" />
           <GridLayout
             columns="*,8,auto"
@@ -284,6 +219,36 @@
             text="+ ADD COMBINATION"
             @tap="showCombinations"
           />
+          <StackLayout class="hr" margin="24 16"></StackLayout>
+        </StackLayout>
+
+        <StackLayout margin="0 16">
+          <Label text="Notes" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto"
+            v-for="(note, index) in recipeContent.notes"
+            :key="index"
+          >
+            <TextView
+              @loaded="focusField($event, 'multiLine')"
+              col="0"
+              hint="Text or URL"
+              v-model="recipeContent.notes[index]"
+            />
+            <MDButton
+              variant="text"
+              col="2"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeNote(index)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD NOTE"
+            @tap="addNote"
+          />
         </StackLayout>
       </StackLayout>
     </ScrollView>
@@ -310,6 +275,8 @@ import * as Filepicker from "nativescript-plugin-filepicker"
 import { ImageCropper } from "nativescript-imagecropper"
 import { mapState, mapActions } from "vuex"
 
+import ViewRecipe from "./ViewRecipe.vue"
+
 import ActionDialog from "./modal/ActionDialog.vue"
 import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
 import ConfirmDialog from "./modal/ConfirmDialog.vue"
@@ -319,7 +286,13 @@ import ListPicker from "./modal/ListPicker.vue"
 import * as utils from "~/shared/utils"
 
 export default {
-  props: ["recipeID", "selectedCategory", "filterFavorites", "filterTrylater"],
+  props: [
+    "recipeID",
+    "selectedCategory",
+    "filterFavorites",
+    "filterTrylater",
+    "navigationFromView",
+  ],
   data() {
     return {
       title: "New recipe",
@@ -335,9 +308,8 @@ export default {
         },
         ingredients: [],
         instructions: [],
-        notes: [],
-        references: [],
         combinations: [],
+        notes: [],
         isFavorite: false,
         tried: true,
         lastTried: null,
@@ -460,9 +432,7 @@ export default {
       })
     },
     onScroll(args) {
-      args.scrollY
+      this.viewIsScrolled = args.scrollY ? true : false
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
     },
 
     // DATA LIST
@@ -576,6 +546,17 @@ export default {
     },
 
     // NAVIGATION HANDLERS
+    navigateBackController() {
+      if (this.navigationFromView) {
+        this.$navigateTo(ViewRecipe, {
+          props: {
+            filterTrylater: this.filterTrylater,
+            recipeID: this.recipeID,
+          },
+          backstackVisible: false,
+        })
+      } else this.$navigateBack()
+    },
     navigateBack() {
       if (this.hasChanges) {
         this.blockModal = true
@@ -590,12 +571,12 @@ export default {
         }).then((action) => {
           this.blockModal = false
           if (action != null && !action) {
-            this.$navigateBack()
+            this.navigateBackController()
             this.releaseBackEvent()
           }
         })
       } else {
-        this.$navigateBack()
+        this.navigateBackController()
         this.releaseBackEvent()
       }
     },
@@ -722,12 +703,12 @@ export default {
     },
 
     // INPUT FIELD HANDLERS
-    fieldDeletionConfirm(item) {
+    fieldDeletionConfirm(title) {
       return this.$showModal(ConfirmDialog, {
         props: {
-          title: `Delete ${item}?`,
+          title,
           cancelButtonText: "CANCEL",
-          okButtonText: "DELETE",
+          okButtonText: "REMOVE",
         },
       })
     },
@@ -740,7 +721,7 @@ export default {
     },
     removeIngredient(index) {
       if (this.recipeContent.ingredients[index].item.length) {
-        this.fieldDeletionConfirm("ingredient").then((res) => {
+        this.fieldDeletionConfirm("Remove ingredient").then((res) => {
           if (res) {
             this.recipeContent.ingredients.splice(index, 1)
           }
@@ -753,7 +734,7 @@ export default {
     },
     removeInstruction(index) {
       if (this.recipeContent.instructions[index].length) {
-        this.fieldDeletionConfirm("instruction").then((res) => {
+        this.fieldDeletionConfirm("Remove instruction").then((res) => {
           res && this.recipeContent.instructions.splice(index, 1)
         })
       } else this.recipeContent.instructions.splice(index, 1)
@@ -783,7 +764,7 @@ export default {
     },
     removeCombination(id) {
       let index = this.recipeContent.combinations.indexOf(id)
-      this.fieldDeletionConfirm("combination").then((res) => {
+      this.fieldDeletionConfirm("Remove combination").then((res) => {
         if (res) {
           this.recipeContent.combinations.splice(index, 1)
           this.unSyncCombinations.push(id)
@@ -796,25 +777,12 @@ export default {
     },
     removeNote(index) {
       if (this.recipeContent.notes[index].length) {
-        this.fieldDeletionConfirm("note").then((res) => {
+        this.fieldDeletionConfirm("Remove note").then((res) => {
           if (res) this.recipeContent.notes.splice(index, 1)
         })
       } else this.recipeContent.notes.splice(index, 1)
     },
 
-    addReference() {
-      this.recipeContent.references.push("")
-    },
-    removeReference(index) {
-      if (this.recipeContent.references[index].length) {
-        this.fieldDeletionConfirm("reference").then((res) => {
-          if (res) {
-            this.recipeContent.references.splice(index, 1)
-          }
-        })
-      } else this.recipeContent.references.splice(index, 1)
-    },
-
     // SAVE OPERATION
     clearEmptyFields() {
       if (!this.recipeContent.title)
@@ -830,10 +798,9 @@ export default {
       }
       clearEmpty("instructions")
       clearEmpty("notes")
-      clearEmpty("references")
     },
     saveOperation() {
-      this.saving = true
+      this.saving = this.modalOpen = true
       this.clearEmptyFields()
       this.recipeContent.lastModified = new Date()
       if (this.cacheImagePath) {
@@ -881,7 +848,7 @@ export default {
       setTimeout(() => {
         this.saving = false
       }, 100)
-      this.$navigateBack()
+      this.navigateBackController()
     },
   },
   created() {

app/components/EnRecipes.vue

@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <!-- Search Actionbar -->
       <GridLayout
         v-if="showSearch"
@@ -114,12 +114,11 @@
           </GridLayout>
         </v-template>
         <v-template name="footer">
-          <StackLayout height="128"></StackLayout>
+          <StackLayout height="80"></StackLayout>
         </v-template>
       </RadListView>
       <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
         <StackLayout
-          col="0"
           row="1"
           class="emptyState"
           v-if="
@@ -143,20 +142,6 @@
           </StackLayout>
         </StackLayout>
         <StackLayout
-          col="0"
-          row="1"
-          class="emptyState"
-          v-if="!filteredRecipes.length && filterFavorites && !searchQuery"
-        >
-          <Label class="bx icon" :text="icon.heartOutline" textWrap="true" />
-          <Label class="title orkm" text="No favorites yet" textWrap="true" />
-          <Label
-            text="Recipes you mark as favorite will be listed here"
-            textWrap="true"
-          />
-        </StackLayout>
-        <StackLayout
-          col="0"
           row="1"
           class="emptyState"
           v-if="!filteredRecipes.length && filterTrylater && !searchQuery"
@@ -169,15 +154,21 @@
           />
         </StackLayout>
         <StackLayout
-          col="0"
           row="1"
           class="emptyState"
-          v-if="
+          v-if="!filteredRecipes.length && filterFavorites && !searchQuery"
-            !filteredRecipes.length &&
+        >
-              !filterFavorites &&
+          <Label class="bx icon" :text="icon.heartOutline" textWrap="true" />
-              !filterTrylater &&
+          <Label class="title orkm" text="No favorites yet" textWrap="true" />
-              selectedCategory
+          <Label
-          "
+            text="Recipes you mark as favorite will be listed here"
+            textWrap="true"
+          />
+        </StackLayout>
+        <StackLayout
+          row="1"
+          class="emptyState"
+          v-if="!filteredRecipes.length && !searchQuery && selectedCategory"
         >
           <Label class="bx icon" :text="icon.labelOutline" textWrap="true" />
           <Label
@@ -192,20 +183,15 @@
           </StackLayout>
         </StackLayout>
         <StackLayout
-          col="0"
+          row="1"
-          row="0"
+          class="emptyState"
-          class="emptyState noResult"
           v-if="!filteredRecipes.length && searchQuery"
         >
           <Label class="bx icon" :text="icon.search" textWrap="true" />
           <Label class="title orkm" text="No recipes found" textWrap="true" />
           <Label
             :text="
-              `Your search &quot;${searchQuery}&quot; did not match any recipes${
+              `Your search &quot;${searchQuery}&quot; did not match any recipes${noResultFor}`
-                filterFavorites || filterTrylater || selectedCategory
-                  ? ' in this category'
-                  : ''
-              }`
             "
             textWrap="true"
           />
@@ -287,6 +273,12 @@ export default {
         )
       }
     },
+    noResultFor() {
+      if (this.selectedCategory) return " in this category"
+      if (this.filterFavorites) return " in your favorites"
+      if (this.filterTrylater) return " in your try later list"
+      return ""
+    },
   },
   methods: {
     ...mapActions(["setCurrentComponentAction", "deleteRecipeAction"]),
@@ -337,9 +329,7 @@ export default {
       }
     },
     onScroll(args) {
-      args.scrollOffset
+      this.viewIsScrolled = args.scrollOffset ? true : false
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
     },
 
     // NAVIGATION HANDLERS
@@ -379,6 +369,7 @@ export default {
           filterTrylater: this.filterTrylater,
           recipeID,
         },
+        backstackVisible: false,
       })
     },
 
@@ -389,7 +380,7 @@ export default {
         props: {
           title: "Sort by",
           list: ["Natural order", "Title", "Duration", "Last modified"],
-          height: "225",
+          height: "192",
         },
       }).then((action) => {
         if (action && action !== "Cancel" && this.sortType !== action) {

app/components/MealPlanner.vue

@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar flat="true">
       <GridLayout rows="*" columns="auto, *, auto">
         <MDButton
           class="bx left"
@@ -23,6 +23,7 @@
     </ActionBar>
     <GridLayout rows="280, *">
       <RadCalendar
+        :androidElevation="viewIsScrolled ? 4 : 0"
         class="orkm"
         row="0"
         ref="calendar"
@@ -35,12 +36,7 @@
         :eventsViewMode="eventsViewMode"
         :eventSource="getMealPlans"
       ></RadCalendar>
-      <ScrollView
+      <ScrollView row="1" width="100%" height="100%" @scroll="onScroll">
-        row="1"
-        width="100%"
-        height="100%"
-        scrollBarIndicatorVisible="true"
-      >
         <StackLayout class="dayPlan">
           <StackLayout
             v-for="(mealType, index) in mealTimes"
@@ -186,7 +182,7 @@ export default {
       dayNameCellStyle.cellBorderColor = this.isLightMode
         ? this.color.gray2
         : this.color.black
-      dayNameCellStyle.cellTextSize = 12
+      dayNameCellStyle.cellTextSize = 10
       dayNameCellStyle.cellAlignment = CalendarCellAlignment.Center
       dayNameCellStyle.cellTextFontName = this.appFontMedium
       monthViewStyle.dayNameCellStyle = dayNameCellStyle
@@ -200,7 +196,7 @@ export default {
       dayCellStyle.cellTextSize = 16
       dayCellStyle.cellTextColor = this.isLightMode
         ? this.color.gray9
-        : this.color.gray2
+        : this.color.gray1
       dayCellStyle.cellAlignment = CalendarCellAlignment.Bottom
       dayCellStyle.cellBackgroundColor = this.isLightMode
         ? this.color.gray1
@@ -328,9 +324,7 @@ export default {
       utils.showDrawer()
     },
     onScroll(args) {
-      args.scrollY
+      this.viewIsScrolled = args.scrollY ? true : false
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
     },
     getDate(index) {
       let date = new Date()

app/components/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <GridLayout rows="*" columns="auto, *">
         <MDButton
           class="bx left"
@@ -13,7 +13,7 @@
         <Label class="title orkm" text="Settings" col="1" />
       </GridLayout>
     </ActionBar>
-    <ScrollView scrollBarIndicatorVisible="true" @scroll="onScroll">
+    <ScrollView @scroll="onScroll">
       <StackLayout class="main-container">
         <Label text="Interface" class="group-header orkm" />
         <GridLayout columns="auto, *" class="option">
@@ -128,9 +128,7 @@ export default {
       utils.showDrawer()
     },
     onScroll(args) {
-      args.scrollY
+      this.viewIsScrolled = args.scrollY ? true : false
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
     },
 
     // THEME SELECTION
@@ -139,7 +137,7 @@ export default {
         props: {
           title: "Theme",
           list: ["Light", "Dark"],
-          height: "113",
+          height: "96",
         },
       }).then((action) => {
         if (action && action !== "Cancel" && this.appTheme !== action) {

app/components/ViewRecipe.vue

@@ -1,7 +1,7 @@
 <template>
   <Page @loaded="onPageLoad" @unloaded="onPageUnload">
-    <ActionBar height="112" margin="0" flat="true">
+    <ActionBar flat="true">
-      <GridLayout rows="64, 48" columns="auto, *, auto,auto, auto">
+      <GridLayout rows="48" columns="auto, *, auto">
         <MDButton
           variant="text"
           row="0"
@@ -11,10 +11,10 @@
           automationText="Back"
           @tap="$navigateBack()"
         />
-        <ScrollView
+        <!-- <ScrollView
-          row="1"
+          row="0"
-          col="0"
+          col="1"
-          colSpan="4"
+          :colSpan="hideActionBar ? 2 : 1"
           orientation="horizontal"
           scrollBarIndicatorVisible="false"
         >
@@ -23,22 +23,8 @@
             :text="recipe.title"
             verticalAlignment="bottom"
           />
-        </ScrollView>
+        </ScrollView> -->
         <FlexboxLayout row="0" col="2" alignItems="center">
-          <MDButton
-            variant="text"
-            v-if="!busy"
-            class="bx"
-            :text="icon.edit"
-            @tap="editRecipe"
-          />
-          <MDActivityIndicator v-else :busy="busy" />
-          <MDButton
-            variant="text"
-            class="bx"
-            :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
-            @tap="toggleFavorite"
-          />
           <MDButton
             v-if="!filterTrylater"
             variant="text"
@@ -50,23 +36,54 @@
             v-else
             variant="text"
             class="bx"
-            :text="icon.share"
+            :text="icon.check"
-            @tap="shareHandler"
+            @tap="recipeTried"
           />
+          <MDButton
+            variant="text"
+            class="bx"
+            :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
+            @tap="toggleFavorite"
+          />
+          <MDButton
+            variant="text"
+            v-if="!busy"
+            class="bx"
+            :text="icon.edit"
+            @tap="editRecipe"
+          />
+          <MDActivityIndicator v-else :busy="busy" />
         </FlexboxLayout>
       </GridLayout>
     </ActionBar>
     <AbsoluteLayout>
-      <TabView
+      <Tabs
-        :selectedIndex="selectedTabIndex"
-        @selectedIndexChange="selectedIndexChange"
-        androidElevation="0"
         width="100%"
         height="100%"
+        :selectedIndex="selectedTabIndex"
+        @selectedIndexChange="selectedIndexChange"
         class="viewRecipe"
       >
-        <TabViewItem title="Overview">
+        <TabStrip :androidElevation="viewIsScrolled ? 4 : 0">
-          <ScrollView scrollBarIndicatorVisible="true">
+          <TabStripItem>
+            <Label text="Overview"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Ingredients"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Instructions"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Combinations"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Notes"></Label>
+          </TabStripItem>
+        </TabStrip>
+
+        <TabContentItem>
+          <ScrollView @scroll="onScroll">
             <StackLayout>
               <StackLayout
                 width="100%"
@@ -89,7 +106,7 @@
                   :text="icon.image"
                 />
               </StackLayout>
-              <StackLayout margin="16 8 144">
+              <StackLayout margin="16 8 80">
                 <Label class="category orkm" :text="recipe.category" />
                 <Label
                   margin="0 8"
@@ -102,7 +119,7 @@
                   <Label :text="` ${formattedTime(recipe.timeRequired)}`" />
                 </StackLayout>
                 <GridLayout
-                  rows="auto, auto, auto"
+                  rows="auto, auto"
                   columns="*, *"
                   class="overviewContainer"
                 >
@@ -150,7 +167,6 @@
                       textWrap="true"
                     />
                   </GridLayout>
-
                   <GridLayout
                     class="overviewItem"
                     row="1"
@@ -159,48 +175,6 @@
                     columns="*"
                   >
                     <MDRipple rowSpan="2" @tap="selectedTabIndex = 3" />
-                    <Label row="0" class="bx" :text="icon.note" />
-                    <Label
-                      row="1"
-                      class="itemCount"
-                      :text="
-                        `${recipe.notes.length} ${
-                          recipe.notes.length == 1 ? 'Note' : 'Notes'
-                        }`
-                      "
-                      textWrap="true"
-                    />
-                  </GridLayout>
-                  <GridLayout
-                    class="overviewItem"
-                    row="1"
-                    col="1"
-                    rows="auto, auto"
-                    columns="*"
-                  >
-                    <MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
-                    <Label row="0" class="bx" :text="icon.source" />
-                    <Label
-                      row="1"
-                      class="itemCount"
-                      :text="
-                        `${recipe.references.length} ${
-                          recipe.references.length == 1
-                            ? 'Reference'
-                            : 'References'
-                        }`
-                      "
-                      textWrap="true"
-                    />
-                  </GridLayout>
-                  <GridLayout
-                    class="overviewItem"
-                    row="2"
-                    col="0"
-                    rows="auto, auto"
-                    columns="*"
-                  >
-                    <MDRipple rowSpan="2" @tap="selectedTabIndex = 5" />
                     <Label row="0" class="bx" :text="icon.outline" />
                     <Label
                       row="1"
@@ -215,13 +189,33 @@
                       textWrap="true"
                     />
                   </GridLayout>
+                  <GridLayout
+                    class="overviewItem"
+                    row="1"
+                    col="1"
+                    rows="auto, auto"
+                    columns="*"
+                  >
+                    <MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
+                    <Label row="0" class="bx" :text="icon.note" />
+                    <Label
+                      row="1"
+                      class="itemCount"
+                      :text="
+                        `${recipe.notes.length} ${
+                          recipe.notes.length == 1 ? 'Note' : 'Notes'
+                        }`
+                      "
+                      textWrap="true"
+                    />
+                  </GridLayout>
                 </GridLayout>
               </StackLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
+        </TabContentItem>
-        <TabViewItem title="Ingredients">
+        <TabContentItem>
-          <ScrollView scrollBarIndicatorVisible="true">
+          <ScrollView @scroll="onScroll">
             <GridLayout
               v-if="!recipe.ingredients.length"
               rows="*, auto, *, 88"
@@ -238,7 +232,7 @@
                 <Label text="to add some ingredients" textWrap="true" />
               </StackLayout>
             </GridLayout>
-            <StackLayout v-else padding="32 16 134">
+            <StackLayout v-else padding="24 16 72">
               <AbsoluteLayout class="inputField">
                 <TextField
                   width="50%"
@@ -265,7 +259,7 @@
                 :key="index"
               >
                 <check-box
-                  class="ingredient-check"
+                  class="ingredient"
                   checkPadding="16"
                   fillColor="#ff5200"
                   :text="
@@ -281,9 +275,9 @@
               </StackLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
+        </TabContentItem>
-        <TabViewItem title="Instructions">
+        <TabContentItem>
-          <ScrollView scrollBarIndicatorVisible="true">
+          <ScrollView @scroll="onScroll">
             <GridLayout
               v-if="!recipe.instructions.length"
               rows="*, auto, *, 88"
@@ -300,7 +294,7 @@
                 <Label text="to add some instructions" textWrap="true" />
               </StackLayout>
             </GridLayout>
-            <StackLayout v-else padding="32 16 132">
+            <StackLayout v-else padding="28 16 62">
               <GridLayout
                 columns="auto ,*"
                 v-for="(instruction, index) in recipe.instructions"
@@ -326,104 +320,9 @@
               </GridLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
+        </TabContentItem>
-        <TabViewItem title="Notes">
+        <TabContentItem>
-          <ScrollView scrollBarIndicatorVisible="true">
+          <ScrollView @scroll="onScroll">
-            <GridLayout
-              v-if="!recipe.notes.length"
-              rows="*, auto, *, 88"
-              columns="*"
-              class="emptyStateContainer"
-            >
-              <StackLayout col="0" row="1" class="emptyState">
-                <Label class="bx icon" :text="icon.note" textWrap="true" />
-                <StackLayout orientation="horizontal" class="title orkm">
-                  <Label text="Use the " />
-                  <Label class="bx" :text="icon.edit" />
-                  <Label text=" button" />
-                </StackLayout>
-                <Label text="to add some notes" textWrap="true" />
-              </StackLayout>
-            </GridLayout>
-            <StackLayout v-else padding="32 16 132">
-              <GridLayout
-                columns="auto ,*"
-                v-for="(note, index) in recipe.notes"
-                :key="index"
-              >
-                <Label
-                  col="0"
-                  colSpan="2"
-                  class="note"
-                  :text="note"
-                  textWrap="true"
-                />
-                <Label
-                  verticalAlignment="top"
-                  horizontalAlignment="center"
-                  class="count square orkm"
-                  col="0"
-                  :text="index + 1"
-                />
-              </GridLayout>
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="References">
-          <ScrollView scrollBarIndicatorVisible="true">
-            <GridLayout
-              v-if="!recipe.references.length"
-              rows="*, auto, *, 88"
-              columns="*"
-              class="emptyStateContainer"
-            >
-              <StackLayout col="0" row="1" class="emptyState">
-                <Label class="bx icon" :text="icon.source" textWrap="true" />
-                <StackLayout orientation="horizontal" class="title orkm">
-                  <Label text="Use the " />
-                  <Label class="bx" :text="icon.edit" />
-                  <Label text=" button" />
-                </StackLayout>
-                <Label text="to add some references" textWrap="true" />
-              </StackLayout>
-            </GridLayout>
-            <StackLayout v-else padding="10 0 132">
-              <StackLayout
-                v-for="(reference, index) in recipe.references"
-                :key="index"
-              >
-                <GridLayout
-                  v-if="isValidURL(reference)"
-                  columns="*, auto"
-                  class="referenceItem"
-                  androidElevation="1"
-                >
-                  <MDRipple
-                    colSpan="2"
-                    @longPress="copyURL(reference)"
-                    @tap="openURL(reference)"
-                  />
-                  <Label
-                    col="0"
-                    verticalAlignment="center"
-                    class="recipeLink"
-                    :text="reference"
-                    textWrap="false"
-                  />
-                  <Label col="1" class="bx linkIcon" :text="icon.source" />
-                </GridLayout>
-                <Label
-                  v-else
-                  class="recipeText"
-                  :text="reference"
-                  textWrap="true"
-                />
-              </StackLayout>
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="Combinations">
-          <ScrollView scrollBarIndicatorVisible="true">
             <GridLayout
               v-if="!recipe.combinations.length"
               rows="*, auto, *, 88"
@@ -440,42 +339,81 @@
                 <Label text="to add some combinations" textWrap="true" />
               </StackLayout>
             </GridLayout>
-            <StackLayout v-else padding="10 0 132">
+            <StackLayout v-else padding="8 0 80">
               <GridLayout
-                columns="*"
+                columns="auto, *"
                 v-for="(combination, index) in recipe.combinations"
                 :key="index"
                 androidElevation="1"
-                class="referenceItem"
+                class="urlCard"
               >
-                <MDRipple col="0" @tap="viewCombination(combination)" />
+                <MDRipple colSpan="2" @tap="viewCombination(combination)" />
+                <Label col="0" class="bx linkIcon" :text="icon.food" />
                 <Label
-                  col="0"
+                  col="1"
                   verticalAlignment="center"
-                  class="recipeLink"
+                  class="link"
                   :text="getCombinationTitle(combination)"
                   textWrap="true"
                 />
               </GridLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
+        </TabContentItem>
-      </TabView>
+        <TabContentItem>
-      <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
+          <ScrollView @scroll="onScroll">
-        <MDFloatingActionButton
+            <GridLayout
-          row="1"
+              v-if="!recipe.notes.length"
-          col="1"
+              rows="*, auto, *, 88"
-          src="res://check"
+              columns="*"
-          @tap="recipeTried"
+              class="emptyStateContainer"
-          v-if="filterTrylater"
+            >
+              <StackLayout col="0" row="1" class="emptyState">
+                <Label class="bx icon" :text="icon.note" textWrap="true" />
+                <StackLayout orientation="horizontal" class="title orkm">
+                  <Label text="Use the " />
+                  <Label class="bx" :text="icon.edit" />
+                  <Label text=" button" />
+                </StackLayout>
+                <Label text="to add some notes" textWrap="true" />
+              </StackLayout>
+            </GridLayout>
+            <StackLayout v-else padding="8 0 80">
+              <StackLayout v-for="(note, index) in recipe.notes" :key="index">
+                <GridLayout
+                  v-if="isValidURL(note)"
+                  columns="auto, *"
+                  class="urlCard"
+                  androidElevation="1"
+                >
+                  <MDRipple
+                    colSpan="2"
+                    @longPress="copyURL(note)"
+                    @tap="openURL(note)"
                   />
+                  <Label col="0" class="bx linkIcon" :text="icon.source" />
+                  <Label
+                    col="1"
+                    verticalAlignment="center"
+                    class="link"
+                    :text="note"
+                    textWrap="false"
+                  />
+                </GridLayout>
+                <Label v-else class="textCard" :text="note" textWrap="true" />
+              </StackLayout>
+            </StackLayout>
+          </ScrollView>
+        </TabContentItem>
+      </Tabs>
+      <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
         <transition name="dolly" appear>
           <MDFloatingActionButton
             row="1"
             col="1"
             src="res://share"
             @tap="shareHandler"
-            v-if="!filterTrylater && showFab"
+            v-if="showFab"
           />
         </transition>
       </GridLayout>
@@ -494,6 +432,8 @@ import {
   ImageSource,
   Screen,
   Utils,
+  GestureTypes,
+  Tabs,
 } from "@nativescript/core"
 import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback"
 import * as Toast from "nativescript-toast"
@@ -517,6 +457,9 @@ export default {
       showFab: false,
       selectedTabIndex: 0,
       currentRecipeID: this.recipeID,
+      viewIsScrolled: false,
+      isScrolled: [false, false, false, false, false, false],
+      hideActionBar: false,
     }
   },
   computed: {
@@ -525,7 +468,9 @@ export default {
       return Screen.mainScreen.widthDIPs
     },
     positiveYieldMultiplier() {
-      return this.yieldMultiplier > 0 ? parseFloat(this.yieldMultiplier) : 1
+      return Math.abs(this.yieldMultiplier) > 0
+        ? Math.abs(parseFloat(this.yieldMultiplier))
+        : 1
     },
     isLightMode() {
       return Application.systemAppearance() === "light"
@@ -543,8 +488,8 @@ export default {
       setTimeout((e) => {
         this.setCurrentComponentAction("ViewRecipe")
       }, 500)
-      this.yieldMultiplier = this.recipe.yield.quantity
       this.showFab = true
+      this.yieldMultiplier = this.recipe.yield.quantity
       this.keepScreenOn(true)
       this.syncCombinations()
     },
@@ -572,6 +517,7 @@ export default {
     },
     selectedIndexChange(args) {
       this.selectedTabIndex = args.object.selectedIndex
+      this.viewIsScrolled = this.isScrolled[this.selectedTabIndex]
     },
     showLastTried() {
       feedback.show({
@@ -583,7 +529,7 @@ export default {
       })
     },
     roundedQuantity(quantity) {
-      return (
+      return Math.abs(
         Math.round(
           (quantity / this.recipe.yield.quantity) *
             this.positiveYieldMultiplier *
@@ -612,7 +558,7 @@ export default {
       return h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`
     },
     isValidURL(string) {
-      let pattern = new RegExp("^https?|www", "ig")
+      let pattern = new RegExp("^https?|^www", "ig")
       return pattern.test(string)
     },
     getCombinationTitle(id) {
@@ -634,13 +580,20 @@ export default {
     },
 
     // NAVIGATION HANDLERS
+    onScroll(args) {
+      this.viewIsScrolled = this.isScrolled[this.selectedTabIndex] =
+        args.scrollY > 8 ? true : false
+    },
     editRecipe() {
       this.showFab = false
       this.busy = true
       this.$navigateTo(EditRecipe, {
         props: {
+          navigationFromView: true,
+          filterTrylater: this.filterTrylater,
           recipeID: this.currentRecipeID,
         },
+        backstackVisible: false,
       })
     },
     viewCombination(combination) {
@@ -720,13 +673,6 @@ export default {
         })
         shareContent += notes
       }
-      if (this.recipe.references.length) {
-        let references = `\nReferences:\n\n`
-        this.recipe.references.forEach((e, i) => {
-          references += `${i + 1}. ${e}\n\n`
-        })
-        shareContent += references
-      }
       let sharenote = "\nCreated and shared via EnRecipes. Get it on F-Droid."
 
       shareContent += sharenote
@@ -775,7 +721,7 @@ export default {
       const clipboard = Utils.ad
         .getApplicationContext()
         .getSystemService(android.content.Context.CLIPBOARD_SERVICE)
-      const clip = android.content.ClipData.newPlainText("Reference URl", url)
+      const clip = android.content.ClipData.newPlainText("URl", url)
       clipboard.setPrimaryClip(clip)
       Toast.makeText("URL Copied").show()
     },

app/components/modal/ActionDialog.vue

@@ -2,7 +2,7 @@
   <Page>
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label class="dialogTitle orkm" :text="title" />
-      <ScrollView width="100%" :height="height ? height : screenHeight - 320">
+      <ScrollView width="100%" :height="height ? height : screenHeight - 256">
         <StackLayout>
           <MDButton
             v-for="(item, index) in list"

app/store.js

@@ -104,9 +104,6 @@ export default new Vuex.Store({
       //   notes: [
       //     "Nutrition Facts: 3/4 cup: 409 calories, 22g fat (12g saturated fat), 61mg cholesterol, 667mg sodium, 41g carbohydrate (3g sugars, 2g fiber), 11g protein.",
       //   ],
-      //   references: [
-      //     "https://www.tasteofhome.com/recipes/mushroom-spinach-risotto/",
-      //   ],
       //   isFavorite: false,
       //   tried: false,
       //   lastTried: "2020-10-28T18:19:06.528Z",
@@ -180,7 +177,7 @@ export default new Vuex.Store({
       trylaterOutline: "\ue94a",
       note: "\ueb04",
       copy: "\ue9e6",
-      check: "\ue9ab",
+      check: "\ue9a4",
       telegram: "\ueec7",
       time: "\ueba2",
       item: "\ue99d",