106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
class="bookmark-actions"
|
|
v-if="!editMode"
|
|
>
|
|
<a
|
|
:class="{'bookmark-actions__action--bookmarked': bookmarked}"
|
|
class="bookmark-actions__action bookmark-actions__bookmark"
|
|
data-cy="bookmark-action"
|
|
@click="$emit('bookmark')"
|
|
>
|
|
<bookmark-icon :bookmarked="bookmarked" />
|
|
</a>
|
|
<a
|
|
class="bookmark-actions__action bookmark-actions__add-note"
|
|
data-cy="add-note-action"
|
|
v-if="bookmarked && !note"
|
|
@click="$emit('add-note')"
|
|
>
|
|
<add-note-icon />
|
|
</a>
|
|
<a
|
|
:data-scrollto="note.id"
|
|
data-cy="edit-note-action"
|
|
class="bookmark-actions__action bookmark-actions__edit-note bookmark-actions__action--noted"
|
|
v-if="note"
|
|
@click="$emit('edit-note')"
|
|
>
|
|
<note-icon />
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {defineAsyncComponent} from 'vue';
|
|
const BookmarkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon'));
|
|
const AddNoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon'));
|
|
const NoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon'));
|
|
|
|
export default {
|
|
props: {
|
|
bookmarked: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
note: {
|
|
type: [Object, Boolean],
|
|
default: false
|
|
},
|
|
editMode: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
BookmarkIcon,
|
|
AddNoteIcon,
|
|
NoteIcon
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.bookmark-actions {
|
|
height: 100%;
|
|
min-height: 60px;
|
|
|
|
padding: 0 2*$large-spacing;
|
|
position: absolute;
|
|
right: -5*$large-spacing;
|
|
|
|
display: none;
|
|
|
|
@include desktop {
|
|
display: flex;
|
|
}
|
|
|
|
flex-direction: column;
|
|
align-content: center;
|
|
|
|
&__action {
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
cursor: pointer;
|
|
width: 26px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
&--bookmarked, &--noted {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
$parent: &;
|
|
|
|
&:hover {
|
|
#{$parent}__action {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|