76 lines
No EOL
2.1 KiB
Vue
76 lines
No EOL
2.1 KiB
Vue
<template>
|
|
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
|
|
<template v-for="(item,index) in getEmojis" :key="item.i">
|
|
<v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.i)" class="ma-0 pa-0" density="compact">
|
|
<span class="recent-emoji">{{ item.i }}</span>
|
|
</v-btn>
|
|
</template>
|
|
<v-btn v-if="userCanSendReactionAndAnswerPoll" id="btn-more" icon @click.stop="more" class="ma-0 pa-0">
|
|
<v-icon size="small"> $vuetify.icons.addReaction </v-icon>
|
|
</v-btn>
|
|
<v-btn v-if="userCanSendMessage" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0">
|
|
<v-icon>reply</v-icon>
|
|
</v-btn>
|
|
<v-btn id="btn-edit" icon @click.stop="edit" class="ma-0 pa-0" v-if="isEditable">
|
|
<v-icon size="small">edit</v-icon>
|
|
</v-btn>
|
|
<v-btn id="btn-redact" icon @click.stop="redact" class="ma-0 pa-0" v-if="isRedactable">
|
|
<v-icon size="small">delete</v-icon>
|
|
</v-btn>
|
|
<v-btn id="btn-download" icon @click.stop="download" class="ma-0 pa-0" v-if="isDownloadable">
|
|
<v-icon size="small">get_app</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import messageMixin from "./messageMixin";
|
|
import messageOperationsMixin from "./messageOperationsMixin";
|
|
|
|
export default {
|
|
mixins: [messageMixin, messageOperationsMixin],
|
|
data() {
|
|
return {
|
|
maxRecents: 3
|
|
}
|
|
},
|
|
props: {
|
|
emojis: {
|
|
type: Array,
|
|
default: function () {
|
|
return []
|
|
}
|
|
},
|
|
userCanSendMessage: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return true;
|
|
}
|
|
},
|
|
userCanSendReactionAndAnswerPoll: {
|
|
type: Boolean,
|
|
default: function() {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
getEmojis() {
|
|
return this.emojis.slice(0,2);
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
emojis: {
|
|
immediate: true,
|
|
handler(newVal, oldVal) {
|
|
console.log("Emojis changed", newVal, oldVal);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/assets/css/chat.scss" as *;
|
|
</style> |