Style channel message operations (edit & pin/unpin)

This commit is contained in:
N-Pex 2024-10-16 15:33:35 +02:00
parent ca777a83be
commit d3ffc3d15b
5 changed files with 74 additions and 21 deletions

View file

@ -1,11 +1,25 @@
<template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<v-btn id="btn-pin" icon @click.stop="pin" class="ma-0 pa-0" v-if="userCanPin && !event.isPinned">
<v-icon small>$vuetify.icons.ic_pin_filled</v-icon>
</v-btn>
<v-btn id="btn-unpin" icon @click.stop="unpin" class="ma-0 pa-0" v-if="userCanPin && event.isPinned">
<v-icon small>$vuetify.icons.ic_pin</v-icon>
</v-btn>
<div :class="{ 'message-operations': true, 'incoming': incoming, 'outgoing': !incoming }">
<v-list dense>
<v-list-item key="edit" v-if="isEditable" @click.stop="edit">
<v-list-item-icon><v-icon>$vuetify.icons.ic_edit</v-icon></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("menu.edit") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item key="pin" v-if="userCanPin && !event.isPinned" @click.stop="pin">
<v-list-item-icon><v-icon>$vuetify.icons.ic_pin</v-icon></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("menu.pin") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item key="unpin" v-if="userCanPin && event.isPinned" @click.stop="unpin">
<v-list-item-icon><v-icon>$vuetify.icons.ic_pin</v-icon></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("menu.unpin") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</div>
</template>