From 9dc8270709251c9b00c53c39ad5978542c92d086 Mon Sep 17 00:00:00 2001
From: vishnuraghavb <design@vishnuraghav.com>
Date: Tue, 23 Mar 2021 15:29:00 +0530
Subject: [PATCH] new appbar

---
 app/app.scss                                  | 104 +++++------
 app/components/App.vue                        |   2 +-
 app/components/EditRecipe.vue                 |   4 +-
 app/components/EnRecipes.vue                  | 170 +++++++++---------
 app/components/ViewRecipe.vue                 |   4 +-
 app/components/modal/ActionDialog.vue         |   4 +-
 app/main.js                                   |   3 -
 .../Android/src/main/res/values/styles.xml    |   4 +-
 package-lock.json                             |  17 --
 package.json                                  |   1 -
 10 files changed, 140 insertions(+), 173 deletions(-)

diff --git a/app/app.scss b/app/app.scss
index e0982e99..74f2a227 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -54,7 +54,6 @@ Page {
   ActionBar,
   ListPicker,
   Page,
-  SearchBar,
   TabStripItem,
   Tabs {
     color: $gray9;
@@ -107,7 +106,7 @@ Page {
   MDProgress {
     progress-background-color: $gray4;
   }
-  MDFloatingActionButton {
+  .fab {
     color: $gray0;
   }
   .emptyState .icon {
@@ -119,7 +118,6 @@ Page {
   ActionBar,
   ListPicker,
   Page,
-  SearchBar,
   TabStripItem,
   Tabs {
     color: $gray2;
@@ -172,7 +170,7 @@ Page {
   MDProgress {
     progress-background-color: $gray5;
   }
-  MDFloatingActionButton {
+  .fab {
     color: $gray9;
   }
   .emptyState .icon {
@@ -198,10 +196,9 @@ TextView {
 ListPicker {
   width: 25%;
 }
-SearchBar {
-  font-family: "Inter-Regular";
-  font-size: 14;
-  text-field-hint-color: $gray5;
+TextField.searchBar {
+  margin: 0;
+  border-color: transparent;
 }
 TabView {
   tab-text-color: $gray5;
@@ -237,27 +234,6 @@ Switch {
   off-background-color: $gray5;
 }
 // -----------------------------
-// ActionBar
-ActionBar {
-  height: 64;
-  margin: 0;
-  padding: 0 8;
-  GridLayout {
-    padding: 0;
-    margin: 0;
-  }
-  MDButton.er {
-    padding: 0;
-    margin: 0;
-  }
-  .title {
-    @extend .tb;
-    padding: 0 0 0 12;
-    text-align: left;
-    font-size: 18;
-  }
-}
-// -----------------------------
 // Side Drawer
 .sd {
   padding: 8 0;
@@ -675,18 +651,41 @@ CollectionView {
   }
 }
 // -----------------------------
-// FAB
-#btnFabContainer {
-  z-index: 100;
-  width: 100%;
-  height: 100%;
-}
-MDFloatingActionButton {
-  width: 56;
+// APPBAR
+.appbar {
+  z-index: 99;
   height: 56;
-  margin: 16;
-  background: $orange;
-  ripple-color: $fabRipple;
+  margin: 8;
+  padding: 0;
+  border-radius: 99;
+  background: $gray0;
+  elevation: 16;
+  android-elevation: 16;
+  GridLayout {
+    padding: 0;
+    margin: 0;
+  }
+  .er {
+    padding: 0;
+    margin: 4 4 4 0;
+    &.menu {
+      margin: 4;
+    }
+  }
+  .fab {
+    width: 56;
+    height: 56;
+    margin: 0;
+    background: $orange;
+    ripple-color: $fabRipple;
+  }
+  .title {
+    @extend .tb;
+    padding: 0 0 0 8;
+    text-align: left;
+    vertical-align: center;
+    font-size: 18;
+  }
 }
 // -----------------------------
 // EDIT RECIPE
@@ -877,9 +876,8 @@ MDActivityIndicator {
   animation-timing-function: ease-in-out;
 }
 .bounce-leave-active {
-  animation-name: bounce-out;
-  animation-duration: 0.25s;
-  animation-fill-mode: forwards;
+  transform: scale(0);
+  opacity: 0;
 }
 @keyframes bounce-in {
   0% {
@@ -887,25 +885,13 @@ MDActivityIndicator {
     opacity: 0;
   }
   25% {
-    transform: scale(1.2);
+    transform: scale(1);
     opacity: 1;
   }
-  50% {
-    transform: scale(0.9);
+  55% {
+    transform: scale(0.8);
   }
-  75% {
-    transform: scale(1.1);
-  }
-  100% {
+  80% {
     transform: scale(1);
   }
 }
-@keyframes bounce-out {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-    opacity: 0;
-  }
-}
diff --git a/app/components/App.vue b/app/components/App.vue
index 8447e5e2..a88ad9e0 100644
--- a/app/components/App.vue
+++ b/app/components/App.vue
@@ -7,7 +7,7 @@
     <Drawer
       @loaded="drawerLoad"
       :gestureEnabled="gestures"
-      leftSwipeDistance="128"
+      leftSwipeDistance="32"
     >
       <GridLayout ~leftDrawer rows="*, auto" columns="*" width="280" class="sd">
         <StackLayout row="0">
diff --git a/app/components/EditRecipe.vue b/app/components/EditRecipe.vue
index a0b0232e..62572ebf 100644
--- a/app/components/EditRecipe.vue
+++ b/app/components/EditRecipe.vue
@@ -46,7 +46,7 @@
               :text="icon.img"
             />
           </StackLayout>
-          <transition :name="recipeContent.imageSrc ? 'null' : 'bounce'">
+          <!-- <transition :name="recipeContent.imageSrc ? 'null' : 'bounce'">
             <MDFloatingActionButton
               v-if="showFab"
               :top="screenWidth - 44"
@@ -55,7 +55,7 @@
               src="res://cam"
               @tap="imageHandler"
             />
-          </transition>
+          </transition> -->
         </AbsoluteLayout>
         <StackLayout margin="0 16 24">
           <StackLayout class="inputField">
diff --git a/app/components/EnRecipes.vue b/app/components/EnRecipes.vue
index 9cccac94..957a7d73 100644
--- a/app/components/EnRecipes.vue
+++ b/app/components/EnRecipes.vue
@@ -1,66 +1,8 @@
 <template>
-  <Page @loaded="onPageLoad" @unloaded="onPageUnload">
-    <ActionBar flat="true">
-      <GridLayout
-        v-if="showSearch"
-        columns="auto, *"
-        verticalAlignment="center"
-      >
-        <MDButton
-          class="er"
-          :text="icon.back"
-          variant="text"
-          automationText="Back"
-          col="0"
-          @tap="closeSearch"
-        />
-        <SearchBar
-          col="1"
-          :hint="'ser' | L"
-          @textChange="updateList($event.value)"
-          @clear="clearSearch"
-        />
-      </GridLayout>
-      <GridLayout v-else columns="auto, *, auto, auto">
-        <MDButton
-          class="er"
-          col="0"
-          variant="text"
-          @tap="selectMode ? clearSelection() : showDrawer()"
-          :text="selectMode ? icon.x : icon.menu"
-        />
-        <Label
-          v-if="selectMode"
-          class="title tb"
-          :text="`${selection.length} ${$options.filters.L('sltd')}`"
-          col="1"
-        />
-        <Label
-          v-else
-          class="title tb"
-          :text="`${currentComponent}` | L"
-          col="1"
-        />
-        <MDButton
-          v-if="recipes.length && !selectMode"
-          class="er"
-          :text="selectMode ? icon.export : icon.sear"
-          variant="text"
-          col="2"
-          @tap="selectMode ? exportSelection() : openSearch()"
-        />
-        <MDButton
-          v-if="recipes.length"
-          class="er"
-          :text="selectMode ? icon.del : icon.sort"
-          variant="text"
-          col="3"
-          @tap="selectMode ? deleteSelection() : sortDialog()"
-        />
-      </GridLayout>
-    </ActionBar>
-    <AbsoluteLayout>
+  <Page @loaded="onPageLoad" @unloaded="onPageUnload" actionBarHidden="true">
+    <GridLayout rows="*, auto" columns="*">
       <CollectionView
+        rowSpan="2"
         width="100%"
         height="100%"
         for="recipe in filteredRecipes"
@@ -68,9 +10,11 @@
         :itemTemplateSelector="getLayout"
         :colWidth="layout == 'grid' ? '50%' : '100%'"
       >
+        <v-template name="header">
+          <StackLayout> <Label text="Title" textWrap="true" /> </StackLayout>
+        </v-template>
         <v-template name="detailed">
           <GridLayout class="recipeContainer" :class="getItemPos(recipe.id)">
-            <!-- elevation="1" -->
             <GridLayout
               class="recipeItem layout1 mdr"
               rows="96"
@@ -154,7 +98,6 @@
         </v-template>
         <v-template name="simple">
           <GridLayout class="recipeContainer" :class="getItemPos(recipe.id)">
-            <!-- elevation="1" -->
             <GridLayout
               class="recipeItem layout1 layout2 mdr"
               rows="auto"
@@ -187,7 +130,6 @@
                   <Label
                     v-for="(tag, index) in recipe.tags"
                     :key="index"
-                    v-if="tag"
                     class="tag"
                     :text="tag"
                   />
@@ -198,7 +140,6 @@
         </v-template>
         <v-template name="grid">
           <GridLayout class="recipeContainer" :class="getItemPos(recipe.id)">
-            <!-- elevation="1" -->
             <GridLayout
               class="recipeItem layout3 mdr"
               rows="auto, auto"
@@ -252,7 +193,6 @@
                   <Label
                     v-for="(tag, index) in recipe.tags"
                     :key="index"
-                    v-if="tag"
                     class="tag"
                     :text="tag"
                   />
@@ -262,7 +202,12 @@
           </GridLayout>
         </v-template>
       </CollectionView>
-      <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
+      <GridLayout
+        rowSpan="2"
+        rows="*, auto, *, 88"
+        columns="*"
+        class="emptyStateContainer"
+      >
         <StackLayout
           row="1"
           class="emptyState"
@@ -313,19 +258,76 @@
           />
         </StackLayout>
       </GridLayout>
-      <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
+      <GridLayout
+        row="1"
+        class="appbar"
+        rows="auto"
+        columns="auto, *, auto, auto, auto"
+      >
+        <MDButton
+          class="er menu"
+          variant="text"
+          @tap="
+            showSearch
+              ? closeSearch()
+              : selectMode
+              ? clearSelection()
+              : showDrawer()
+          "
+          :text="showSearch ? icon.back : selectMode ? icon.x : icon.menu"
+        />
+        <TextField
+          class="searchBar"
+          @loaded="focusField"
+          v-if="showSearch"
+          col="1"
+          colSpan="4"
+          :hint="'ser' | L"
+          @textChange="updateList($event.value)"
+        />
+        <Label
+          v-if="selectMode"
+          class="title tb"
+          :text="`${selection.length} ${$options.filters.L('sltd')}`"
+          col="1"
+        />
+        <MDButton
+          v-if="recipes.length && !selectMode && !showSearch"
+          class="er"
+          :text="selectMode ? icon.export : icon.sear"
+          variant="text"
+          col="2"
+          @tap="selectMode ? exportSelection() : openSearch()"
+        />
+        <MDButton
+          v-if="recipes.length && !showSearch && !selectMode"
+          class="er"
+          :text="icon.sort"
+          variant="text"
+          col="3"
+          @tap="sortDialog()"
+        />
         <transition name="bounce">
-          <MDFloatingActionButton
+          <MDButton
             v-if="showFAB"
-            row="1"
-            col="1"
-            class="er fab-button"
-            src="res://plus"
-            @tap="addRecipe"
+            class="er fab"
+            :text="icon.plus"
+          variant="text"
+
+            col="4"
+            @tap="showFAB && addRecipe()"
           />
         </transition>
+        <MDButton
+          v-if="selectMode"
+          class="er"
+          :text="icon.del"
+          variant="text"
+          col="4"
+          @tap="deleteSelection()"
+        />
       </GridLayout>
-    </AbsoluteLayout>
+    </GridLayout>
   </Page>
 </template>
 <script>
@@ -376,6 +378,7 @@ export default {
     return {
       searchQuery: "",
       showSearch: false,
+      searchBar: null,
       rightAction: false,
       deletionDialogActive: false,
       showFAB: false,
@@ -508,28 +511,31 @@ export default {
 
     // HELPERS
     openSearch() {
-      this.showSearch = true;
       this.showFAB = false;
+      this.showSearch = true;
       this.hijackLocalBackEvent();
     },
+    focusField(args) {
+      setTimeout((e) => {
+        args.object.focus();
+        setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 100);
+      }, 100);
+    },
     closeSearch() {
+      this.showFAB = true;
       this.searchQuery = "";
       Utils.ad.dismissSoftInput();
       this.showSearch = false;
-      this.showFAB = true;
       this.releaseLocalBackEvent();
     },
     setComponent(comp) {
       this.setCurrentComponentAction(comp);
       this.hijackGlobalBackEvent();
     },
-    clearSearch() {
-      this.searchQuery = "";
-    },
     updateList(value) {
       clearTimeout(typingTimer);
       typingTimer = setTimeout((e) => {
-        this.searchQuery = value;
+        this.searchQuery = value.toLowerCase();
       }, 750);
     },
     formattedTotalTime(prepTime, cookTime) {
@@ -753,6 +759,7 @@ export default {
       if (!this.selection.length) this.clearSelection();
     },
     clearSelection() {
+      this.showFAB = true;
       this.selectMode = false;
       this.$emit("selectModeOn", true);
       this.selection = [];
@@ -760,7 +767,6 @@ export default {
         e.className = e.className.replace(/selected/g, "");
       });
       this.releaseLocalBackEvent();
-      this.showFAB = true;
     },
     deleteSelection() {
       this.selection.length === 1
diff --git a/app/components/ViewRecipe.vue b/app/components/ViewRecipe.vue
index e8aeeae2..d08b02d6 100644
--- a/app/components/ViewRecipe.vue
+++ b/app/components/ViewRecipe.vue
@@ -411,7 +411,7 @@
         </TabContentItem>
       </Tabs>
       <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
-        <transition name="bounce" appear>
+        <!-- <transition name="bounce" appear>
           <MDFloatingActionButton
             row="1"
             col="1"
@@ -419,7 +419,7 @@
             @tap="shareHandler"
             v-if="showFab"
           />
-        </transition>
+        </transition> -->
       </GridLayout>
     </AbsoluteLayout>
   </Page>
diff --git a/app/components/modal/ActionDialog.vue b/app/components/modal/ActionDialog.vue
index 0e8d3315..34ba4f98 100644
--- a/app/components/modal/ActionDialog.vue
+++ b/app/components/modal/ActionDialog.vue
@@ -23,9 +23,7 @@
               class="actionItem mdr"
               :class="{ tb: title === 'srt' && sortType === item }"
               :color="title === 'srt' && sortType === item ? '#ff5200' : ''"
-              :text="`${localized(item)}${
-                title === 'srt' && sortType === item ? '*' : ''
-              }`"
+              :text="`${localized(item)}`"
               @tap="tapAction(item)"
               @longPress="removeItem(item)"
             />
diff --git a/app/main.js b/app/main.js
index 5e8bfe8c..7546f763 100644
--- a/app/main.js
+++ b/app/main.js
@@ -30,9 +30,6 @@ Vue.use(ButtonPlugin)
 import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue'
 Vue.use(ActivityIndicatorPlugin)
 
-import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue'
-Vue.use(FloatingActionButtonPlugin)
-
 import ProgressPlugin from '@nativescript-community/ui-material-progress/vue'
 Vue.use(ProgressPlugin)
 
diff --git a/app/resources/Android/src/main/res/values/styles.xml b/app/resources/Android/src/main/res/values/styles.xml
index 9e105fb8..41c826fd 100644
--- a/app/resources/Android/src/main/res/values/styles.xml
+++ b/app/resources/Android/src/main/res/values/styles.xml
@@ -74,10 +74,8 @@
 		<item name="searchHintIcon">
 			@null
 		</item>
-		<!--
 		<item name="closeIcon">
-		@null
+			@null
 		</item>
-		-->
 	</style>
 </resources>
diff --git a/package-lock.json b/package-lock.json
index b8c1cb77..6cc78431 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@nativescript-community/ui-drawer": "^0.0.24",
         "@nativescript-community/ui-material-activityindicator": "^5.2.10",
         "@nativescript-community/ui-material-button": "^5.2.10",
-        "@nativescript-community/ui-material-floatingactionbutton": "^5.2.10",
         "@nativescript-community/ui-material-progress": "^5.2.10",
         "@nativescript-community/ui-material-snackbar": "^5.2.10",
         "@nativescript/core": "7.3.0",
@@ -1358,14 +1357,6 @@
         "@nativescript/hook": "~2.0.0"
       }
     },
-    "node_modules/@nativescript-community/ui-material-floatingactionbutton": {
-      "version": "5.2.10",
-      "resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-floatingactionbutton/-/ui-material-floatingactionbutton-5.2.10.tgz",
-      "integrity": "sha512-x3aQNS9k1oYs763jXgMchQOnOIg87k2KQA/96VX0kemUl0Oco9p21uQexsbab5BQkk1wCVSgPesMwMrGpi21BA==",
-      "dependencies": {
-        "@nativescript-community/ui-material-core": "^5.2.10"
-      }
-    },
     "node_modules/@nativescript-community/ui-material-progress": {
       "version": "5.2.10",
       "resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-progress/-/ui-material-progress-5.2.10.tgz",
@@ -13083,14 +13074,6 @@
         "@nativescript/hook": "~2.0.0"
       }
     },
-    "@nativescript-community/ui-material-floatingactionbutton": {
-      "version": "5.2.10",
-      "resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-floatingactionbutton/-/ui-material-floatingactionbutton-5.2.10.tgz",
-      "integrity": "sha512-x3aQNS9k1oYs763jXgMchQOnOIg87k2KQA/96VX0kemUl0Oco9p21uQexsbab5BQkk1wCVSgPesMwMrGpi21BA==",
-      "requires": {
-        "@nativescript-community/ui-material-core": "^5.2.10"
-      }
-    },
     "@nativescript-community/ui-material-progress": {
       "version": "5.2.10",
       "resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-progress/-/ui-material-progress-5.2.10.tgz",
diff --git a/package.json b/package.json
index 27127e7c..f3b88bf1 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
     "@nativescript-community/ui-drawer": "^0.0.24",
     "@nativescript-community/ui-material-activityindicator": "^5.2.10",
     "@nativescript-community/ui-material-button": "^5.2.10",
-    "@nativescript-community/ui-material-floatingactionbutton": "^5.2.10",
     "@nativescript-community/ui-material-progress": "^5.2.10",
     "@nativescript-community/ui-material-snackbar": "^5.2.10",
     "@nativescript/core": "7.3.0",