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>
<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();