github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

pin editor buttons on scroll

Browse source
This commit is contained in:
hay-kot 2021-04-11 15:49:09 -08:00
commit 29820d3721
1 changed files with 64 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

98
frontend/src/components/Recipe/EditorButtonRow.vue
View file

@ -1,42 +1,51 @@
<template> <template>
<v-toolbar class="card-btn" flat height="0" extension-height="0"> <v-expand-transition>
<template v-slot:extension> <v-toolbar
<v-col></v-col> class="card-btn pt-1"
<div v-if="open"> flat
<v-btn :height="isSticky ? null : '0'"
class="mr-2" :extension-height="isSticky ? '20' : '0'"
fab color="rgb(255, 0, 0, 0.0)"
dark >
small <Confirmation
color="error" :title="$t('recipe.delete-recipe')"
@click="deleteRecipeConfrim" :message="$t('recipe.delete-confirmation')"
> color="error"
<v-icon>mdi-delete</v-icon> 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> </v-btn>
<Confirmation </template>
:title="$t('recipe.delete-recipe')" </v-toolbar>
:message="$t('recipe.delete-confirmation')" </v-expand-transition>
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> </template>
<script> <script>
import Confirmation from "../../components/UI/Confirmation.vue"; import Confirmation from "@/components/UI/Confirmation.vue";
export default { export default {
props: { props: {
@ -49,6 +58,24 @@ export default {
components: { components: {
Confirmation, 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: { methods: {
editor() { editor() {
@ -57,6 +84,9 @@ export default {
save() { save() {
this.$emit("save"); this.$emit("save");
}, },
updateScroll() {
this.scrollPosition = window.scrollY;
},
deleteRecipeConfrim() { deleteRecipeConfrim() {
this.$refs.deleteRecipieConfirm.open(); this.$refs.deleteRecipieConfirm.open();