50 lines
991 B
Vue
50 lines
991 B
Vue
<template>
|
|
<div class="sticky-comment" :style="{width: constants.gutterWidth + 'px', top: top + 'px'}">
|
|
<comment v-if="currentDiscussionLastComment" :comment="currentDiscussionLastComment"></comment>
|
|
<new-comment v-if="isCommenting"></new-comment>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from 'vuex';
|
|
import Comment from './Comment';
|
|
import NewComment from './NewComment';
|
|
|
|
export default {
|
|
components: {
|
|
Comment,
|
|
NewComment,
|
|
},
|
|
data: () => ({
|
|
top: 0,
|
|
}),
|
|
computed: {
|
|
...mapGetters('layout', [
|
|
'constants',
|
|
]),
|
|
...mapState('discussion', [
|
|
'isCommenting',
|
|
]),
|
|
...mapGetters('discussion', [
|
|
'currentDiscussionLastComment',
|
|
]),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../../styles/variables.scss';
|
|
|
|
.sticky-comment {
|
|
position: absolute;
|
|
right: 0;
|
|
font-size: 15px;
|
|
padding-top: 10px;
|
|
border-bottom: 2px solid;
|
|
|
|
.current-discussion & {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
</style>
|