Style channel message operations (edit & pin/unpin)
This commit is contained in:
N-Pex
parent
ca777a83be
commit
d3ffc3d15b
5 changed files with 74 additions and 21 deletions
|
|
@ -127,4 +127,16 @@
|
|||
.messageIn.from-admin.pinned {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
.message-operations {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
background-color: white;
|
||||
height: fit-content;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
9
src/assets/icons/ic_edit.vue
Normal file
9
src/assets/icons/ic_edit.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 6L18 11" stroke="black" stroke-width="1.2" />
|
||||
<path d="M5 14L10 19" stroke="black" stroke-width="1.2" />
|
||||
<path
|
||||
d="M14.4692 4.98995L5.19822 14.2609C5.18642 14.2727 5.17463 14.2845 5.16288 14.2962C5.00326 14.4554 4.84981 14.6084 4.74141 14.7999C4.63302 14.9913 4.58076 15.2016 4.52639 15.4204C4.52239 15.4365 4.51838 15.4526 4.51433 15.4688L3.62003 19.046C3.61762 19.0557 3.61518 19.0654 3.61272 19.0752C3.57411 19.2293 3.53044 19.4035 3.51593 19.5518C3.49978 19.7169 3.50127 20.0162 3.74255 20.2575C3.98384 20.4987 4.28307 20.5002 4.4482 20.4841C4.59644 20.4696 4.77068 20.4259 4.92474 20.3873C4.93457 20.3848 4.94432 20.3824 4.95397 20.38L4.80845 19.7979L4.95397 20.38L8.53117 19.4857C8.54736 19.4816 8.56352 19.4776 8.57962 19.4736C8.79839 19.4192 9.0087 19.367 9.20015 19.2586L8.90453 18.7365L9.20015 19.2586C9.39159 19.1502 9.5446 18.9967 9.70378 18.8371C9.7155 18.8254 9.72725 18.8136 9.73906 18.8018L19.0101 9.53079L19.0369 9.50395C19.3472 9.19367 19.6215 8.91946 19.8128 8.66869C20.0202 8.39688 20.1858 8.08335 20.1858 7.69231C20.1858 7.30127 20.0202 6.98774 19.8128 6.71592C19.6215 6.46516 19.3472 6.19095 19.0369 5.88066L19.0101 5.85383L18.1462 4.98995L18.1193 4.96311C17.8091 4.65278 17.5348 4.37853 17.2841 4.1872C17.0123 3.97981 16.6987 3.81421 16.3077 3.81421C15.9167 3.81421 15.6031 3.97981 15.3313 4.1872C15.0805 4.37853 14.8063 4.6528 14.496 4.96314L14.4692 4.98995Z"
|
||||
stroke="black" stroke-width="1.2" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -46,7 +46,9 @@
|
|||
"user_kick_and_ban": "Kick out",
|
||||
"user_make_admin": "Make admin",
|
||||
"user_make_moderator": "Make moderator",
|
||||
"user_revoke_moderator": "Revoke moderator"
|
||||
"user_revoke_moderator": "Revoke moderator",
|
||||
"pin": "Pin post",
|
||||
"unpin": "Unpin post"
|
||||
},
|
||||
"message": {
|
||||
"you": "You",
|
||||
|
|
|
|||
|
|
@ -35,22 +35,28 @@
|
|||
<div v-if="!useVoiceMode && !useFileModeNonAdmin" :class="{'chat-content': true, 'flex-grow-1': true, 'flex-shrink-1': true, 'invisible': !initialLoadDone}" ref="chatContainer"
|
||||
v-on:scroll="onScroll" @click="closeContextMenusIfOpen">
|
||||
<div ref="messageOperationsStrut" class="message-operations-strut">
|
||||
<message-operations-channel ref="messageOperations" :style="opStyle" v-on:close="showContextMenu = false;" v-if="showMessageOperations && room.displayType == ROOM_TYPE_CHANNEL" :userCanPin="true"
|
||||
:originalEvent="selectedEvent" :timelineSet="timelineSet"
|
||||
v-on:pin="pin(selectedEvent)"
|
||||
v-on:unpin="unpin(selectedEvent)"
|
||||
/>
|
||||
<message-operations ref="messageOperations" :style="opStyle" :emojis="recentEmojis" v-on:close="
|
||||
showContextMenu = false;
|
||||
" v-else-if="showMessageOperations" v-on:addreaction="addReaction" v-on:addquickreaction="addQuickReaction"
|
||||
v-on:addreply="addReply(selectedEvent)" v-on:edit="edit(selectedEvent)" v-on:redact="redact(selectedEvent)"
|
||||
v-on:download="download(selectedEvent)" v-on:more="
|
||||
<component :is="messageOperationsComponent" ref="messageOperations" :style="opStyle"
|
||||
v-if="showMessageOperations"
|
||||
v-on:close="showContextMenu = false;"
|
||||
:emojis="recentEmojis"
|
||||
:originalEvent="selectedEvent"
|
||||
:timelineSet="timelineSet"
|
||||
v-on:pin="pin(selectedEvent)"
|
||||
v-on:unpin="unpin(selectedEvent)"
|
||||
v-on:addreaction="addReaction"
|
||||
v-on:addquickreaction="addQuickReaction"
|
||||
v-on:addreply="addReply(selectedEvent)"
|
||||
v-on:edit="edit(selectedEvent)"
|
||||
v-on:redact="redact(selectedEvent)"
|
||||
v-on:download="download(selectedEvent)"
|
||||
v-on:more="
|
||||
isEmojiQuickReaction= true
|
||||
showMoreMessageOperations({event: selectedEvent, anchor: $event.anchor})
|
||||
" :originalEvent="selectedEvent" :timelineSet="timelineSet"
|
||||
"
|
||||
:userCanSendReactionAndAnswerPoll="$matrix.userCanSendReactionAndAnswerPollInCurrentRoom"
|
||||
:userCanSendMessage="$matrix.userCanSendMessageInCurrentRoom"
|
||||
/>
|
||||
:userCanPin="canCreatePoll"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
|
||||
|
|
@ -723,11 +729,12 @@ export default {
|
|||
|
||||
// Add read marker, if it is not newer than the "latest" message we are going to display
|
||||
//
|
||||
let showReadMarker = false;
|
||||
let lastDisplayedEvent = undefined;
|
||||
events = events.flatMap((e) => {
|
||||
let result = [];
|
||||
Vue.set(e, "component", this.componentForEvent(e, false));
|
||||
if (e.getId() == this.readMarker && lastDisplayedEvent !== undefined) {
|
||||
if (e.getId() == this.readMarker && showReadMarker) {
|
||||
const readMarkerEvent = ROOM_READ_MARKER_EVENT_PLACEHOLDER;
|
||||
Vue.set(readMarkerEvent, "component", this.componentForEvent(readMarkerEvent, false));
|
||||
if (readMarkerEvent.component) {
|
||||
|
|
@ -738,6 +745,9 @@ export default {
|
|||
if (e.component) {
|
||||
Vue.set(e, "nextDisplayedEvent", lastDisplayedEvent);
|
||||
lastDisplayedEvent = e;
|
||||
if (e.getSender() !== this.$matrix.currentUserId) {
|
||||
showReadMarker = true;
|
||||
}
|
||||
}
|
||||
result.push(e);
|
||||
return result;
|
||||
|
|
@ -777,6 +787,12 @@ export default {
|
|||
}
|
||||
return null;
|
||||
},
|
||||
messageOperationsComponent() {
|
||||
if (this.room.displayType == ROOM_TYPE_CHANNEL) {
|
||||
return MessageOperationsChannel;
|
||||
}
|
||||
return MessageOperations;
|
||||
},
|
||||
chatContainerStyle() {
|
||||
if (this.$config.chat_backgrounds && this.room && this.roomId) {
|
||||
const roomType = this.isDirectRoom ? "direct" : this.isPublicRoom ? "public" : "invite";
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue