new appbar

2021-03-23 15:29:00 +05:30 · 2021-03-23 15:29:00 +05:30 · 9dc8270709
parent 12cd254616
commit 9dc8270709
10 changed files with 140 additions and 173 deletions
--- 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;
-  }
-}
--- 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">
--- 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">
--- 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
--- 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>
--- 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)"
            />
--- 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)

--- 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>
--- 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",
--- 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",