From 29820d3721bf70e27dff19ac8b4e6ed121a48d53 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sun, 11 Apr 2021 15:49:09 -0800
Subject: [PATCH] pin editor buttons on scroll

---
 .../src/components/Recipe/EditorButtonRow.vue | 98 ++++++++++++-------
 1 file changed, 64 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/Recipe/EditorButtonRow.vue b/frontend/src/components/Recipe/EditorButtonRow.vue
index 1607518bc..2b12023a9 100644
--- a/frontend/src/components/Recipe/EditorButtonRow.vue
+++ b/frontend/src/components/Recipe/EditorButtonRow.vue
@@ -1,42 +1,51 @@
 <template>
-  <v-toolbar class="card-btn" flat height="0" extension-height="0">
-    <template v-slot:extension>
-      <v-col></v-col>
-      <div v-if="open">
-        <v-btn
-          class="mr-2"
-          fab
-          dark
-          small
-          color="error"
-          @click="deleteRecipeConfrim"
-        >
-          <v-icon>mdi-delete</v-icon>
+  <v-expand-transition>
+    <v-toolbar
+      class="card-btn pt-1"
+      flat
+      :height="isSticky ? null : '0'"
+      :extension-height="isSticky ? '20' : '0'"
+      color="rgb(255, 0, 0, 0.0)"
+    >
+      <Confirmation
+        :title="$t('recipe.delete-recipe')"
+        :message="$t('recipe.delete-confirmation')"
+        color="error"
+        icon="mdi-alert-circle"
+        ref="deleteRecipieConfirm"
+        v-on:confirm="deleteRecipe()"
+      />
+      <template v-slot:extension>
+        <v-col></v-col>
+        <div v-if="open">
+          <v-btn
+            class="mr-2"
+            fab
+            dark
+            small
+            color="error"
+            @click="deleteRecipeConfrim"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+
+          <v-btn class="mr-2" fab dark small color="success" @click="save">
+            <v-icon>mdi-content-save</v-icon>
+          </v-btn>
+          <v-btn class="mr-5" fab dark small color="secondary" @click="json">
+            <v-icon>mdi-code-braces</v-icon>
+          </v-btn>
+        </div>
+        <v-btn color="accent" fab dark small @click="editor">
+          <v-icon>mdi-square-edit-outline</v-icon>
         </v-btn>
-        <Confirmation
-          :title="$t('recipe.delete-recipe')"
-          :message="$t('recipe.delete-confirmation')"
-          color="error"
-          icon="mdi-alert-circle"
-          ref="deleteRecipieConfirm"
-          v-on:confirm="deleteRecipe()"
-        />
-        <v-btn class="mr-2" fab dark small color="success" @click="save">
-          <v-icon>mdi-content-save</v-icon>
-        </v-btn>
-        <v-btn class="mr-5" fab dark small color="secondary" @click="json">
-          <v-icon>mdi-code-braces</v-icon>
-        </v-btn>
-      </div>
-      <v-btn color="accent" fab dark small @click="editor">
-        <v-icon>mdi-square-edit-outline</v-icon>
-      </v-btn>
-    </template>
-  </v-toolbar>
+      </template>
+    </v-toolbar>
+  </v-expand-transition>
 </template>
 
 <script>
-import Confirmation from "../../components/UI/Confirmation.vue";
+import Confirmation from "@/components/UI/Confirmation.vue";
 
 export default {
   props: {
@@ -49,6 +58,24 @@ export default {
   components: {
     Confirmation,
   },
+  data() {
+    return {
+      stickyTop: 50,
+      scrollPosition: null,
+    };
+  },
+  mounted() {
+    window.addEventListener("scroll", this.updateScroll);
+  },
+  destroy() {
+    window.removeEventListener("scroll", this.updateScroll);
+  },
+
+  computed: {
+    isSticky() {
+      return this.scrollPosition >= 500;
+    },
+  },
 
   methods: {
     editor() {
@@ -57,6 +84,9 @@ export default {
     save() {
       this.$emit("save");
     },
+    updateScroll() {
+      this.scrollPosition = window.scrollY;
+    },
 
     deleteRecipeConfrim() {
       this.$refs.deleteRecipieConfirm.open();