Handle capabilities, mention editing and change edit timestamp design

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Jan 25, 2024 · 3315110 · 3315110
1 parent 91c4451
commit 3315110
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -67,14 +67,11 @@
 					</NcActionText>
 					<!-- Edited message timestamp -->
 					<NcActionButtonGroup v-if="lastEditTimestamp">
-						<NcActionText>
+						<NcActionText class="editor-timestamp">
 							<template #icon>
 								<ClockEditOutline :size="16" />
 							</template>
-							{{ lastEditActorDisplayName }}
-						</NcActionText>
-						<NcActionText>
-							{{ editedDateTime }}
+							{{ lastEditActorDisplayName + ' • ' + editedDateTime }}
 						</NcActionText>
 					</NcActionButtonGroup>
 					<NcActionSeparator />
@@ -314,6 +311,8 @@ import { useReactionsStore } from '../../../../../stores/reactions.js'
 
 const EmojiIndex = new EmojiIndexFactory(data)
 const supportReminders = getCapabilities()?.spreed?.features?.includes('remind-me-later')
+const canEditMessage = getCapabilities()?.spreed?.features?.includes('edit-messages')
+const canDeleteMessageUnlimited = getCapabilities()?.spreed?.features?.includes('delete-messages-unlimited')
 
 export default {
 	name: 'MessageButtonsBar',
@@ -518,7 +517,7 @@ export default {
 		},
 
 		isEditable() {
-			if (!this.isModifiable || this.isObjectShare
+			if (!canEditMessage || !this.isModifiable || this.isObjectShare
 					|| (!this.$store.getters.isModerator && !this.isMyMsg)) {
 				return false
 			}
@@ -531,7 +530,8 @@ export default {
 				return false
 			}
 
-			return (moment(this.timestamp * 1000).add(6, 'h')) > moment()
+			return ((moment(this.timestamp * 1000).add(6, 'h')) > moment()
+				|| canDeleteMessageUnlimited)
 				&& (this.messageType === 'comment' || this.messageType === 'voice-message')
 				&& !this.isDeleting
 				&& (this.isMyMsg
@@ -870,4 +870,10 @@ export default {
 		background: no-repeat center var(--icon-triangle-e-dark);
 	}
 }
+
+.editor-timestamp {
+	:deep(.action-text__longtext) {
+		color: var(--color-text-maxcontrast);
+	}
+}
 </style>
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -86,6 +86,10 @@
 					<Quote v-bind="messageToEdit ?? parentMessage"
 						:can-cancel="!!parentMessage"
 						:edit-message="!!messageToEdit" />
+					<!-- mention editing hint -->
+					<NcNoteCard v-if="showMentionEditHint" type="warning">
+						<p>{{ t('spreed','Adding a mention will only notify users who did not read the message.') }}</p>
+					</NcNoteCard>
 				</div>
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
@@ -194,13 +198,15 @@ import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
+import { showError } from '@nextcloud/dialogs'
 import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 
 import NewMessageAbsenceInfo from './NewMessageAbsenceInfo.vue'
@@ -235,6 +241,7 @@ export default {
 		NcActions,
 		NcButton,
 		NcEmojiPicker,
+		NcNoteCard,
 		NcRichContenteditable,
 		NewMessageAbsenceInfo,
 		NewMessageAttachments,
@@ -452,6 +459,10 @@ export default {
 		chatEditInput() {
 			return this.chatExtrasStore.getChatEditInput(this.token)
 		},
+
+		showMentionEditHint() {
+			return this.chatEditInput?.includes('@')
+		},
 	},
 
 	watch: {
@@ -689,6 +700,7 @@ export default {
 				this.chatExtrasStore.removeMessageIdToEdit(this.token)
 			} catch {
 				this.$emit('failure')
+				showError(t('spreed', 'The message could not be edited'))
 			}
 		},