86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<template lang="pug">
|
|
.sidebar.h-full.rounded.flex.flex-col.justify-between.pt-4.px-2
|
|
.flex.flex-col.gap-y-4
|
|
q-btn(
|
|
style="width: 48px; height: 48px",
|
|
id="print",
|
|
rounded,
|
|
padding="0px",
|
|
icon="print",
|
|
text-color="blue",
|
|
size="xl"
|
|
)
|
|
q-btn(
|
|
v-if="!editMode",
|
|
style="width: 48px; height: 48px",
|
|
id="edit",
|
|
rounded,
|
|
padding="0px",
|
|
icon="edit",
|
|
text-color="blue",
|
|
size="xl",
|
|
@click="toggleEditMode",
|
|
)
|
|
q-btn(
|
|
v-if="editMode",
|
|
style="width: 48px; height: 48px",
|
|
id="edit",
|
|
rounded,
|
|
padding="0px",
|
|
icon="check",
|
|
text-color="blue",
|
|
size="xl"
|
|
@click="save",
|
|
)
|
|
q-btn(
|
|
v-if="editMode",
|
|
style="width: 48px; height: 48px",
|
|
id="edit",
|
|
rounded,
|
|
padding="0px",
|
|
icon="cancel",
|
|
text-color="blue",
|
|
size="xl",
|
|
@click="cancel",
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TheRightMenu",
|
|
emits: ["save", "cancel", "update:editMode"],
|
|
data() {
|
|
return {
|
|
editMode: false,
|
|
};
|
|
},
|
|
methods: {
|
|
toggleEditMode() {
|
|
this.editMode = !this.editMode;
|
|
this.$emit("update:editMode", this.editMode);
|
|
},
|
|
save() {
|
|
this.toggleEditMode();
|
|
this.$emit("save");
|
|
},
|
|
cancel() {
|
|
this.toggleEditMode();
|
|
this.$emit("cancel");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.sidebar
|
|
max-width: 64px
|
|
min-width: 64px
|
|
background-color: var(--default-white)
|
|
|
|
.button:hover
|
|
background-color: var(--bg-light-blue-color)
|
|
color: var(--btn-blue-color)
|
|
.hover :deep(path)
|
|
fill: #9294A7
|
|
</style>
|