Improve wording and UI

Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Jan 17, 2024 · f95bce0 · f95bce0
1 parent ea531ef
commit f95bce0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 20 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -246,7 +246,7 @@
 						{{ t('spreed', 'Back') }}
 					</NcActionButton>
 					<NcActionText>
-						{{ t('spreed', 'Edited by : {actor}',
+						{{ t('spreed', 'Edited by: {actor}',
 							{actor : messageObject.lastEditActorDisplayName}) }}
 					</NcActionText>
 					<NcActionSeparator />

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -143,12 +143,13 @@ export default {
 
 		getLastEditor() {
 			if (this.lastEditActorId === this.actorId && this.lastEditActorType === this.actorType) {
+				// TRANSLATORS Edited by the author of the message themselves
 				return t('spreed', '(edited)')
 			} else if (this.lastEditActorId === this.$store.getters.getActorId()
 						&& this.lastEditActorType === this.$store.getters.getActorType()) {
 				return t('spreed', '(edited by you)')
 			} else {
-				return t('spreed', '(edited by {user1})', { user1: this.lastEditActorDisplayName })
+				return t('spreed', '(edited by {moderator})', { moderator: this.lastEditActorDisplayName })
 			}
 
 		},

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -83,7 +83,9 @@
 					</NcButton>
 				</div>
 				<div v-if="parentMessage || messageToEdit" class="new-message-form__quote">
-					<Quote is-new-message-quote :edit-message="!!messageToEdit" v-bind="messageToEdit ?? parentMessage" />
+					<Quote v-bind="messageToEdit ?? parentMessage"
+						:can-cancel="!!parentMessage"
+						:edit-message="!!messageToEdit" />
 				</div>
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
@@ -111,17 +113,27 @@
 				@audio-file="handleAudioFile" />
 
 			<!-- Edit -->
-			<NcButton v-else-if="messageToEdit"
-				:disabled="disabledEdit"
-				type="tertiary"
-				native-type="submit"
-				:title="t('spreed', 'Edit message')"
-				:aria-label="t('spreed', 'Edit message')"
-				@click="handleEdit">
-				<template #icon>
-					<CheckBold :size="16" />
-				</template>
-			</NcButton>
+			<template v-else-if="messageToEdit">
+				<NcButton type="tertiary"
+					native-type="submit"
+					:title="t('spreed', 'Cancel editing')"
+					:aria-label="t('spreed', 'Cancel editing')"
+					@click="handleAbortEdit">
+					<template #icon>
+						<CloseIcon :size="20" />
+					</template>
+				</NcButton>
+				<NcButton :disabled="disabledEdit"
+					type="tertiary"
+					native-type="submit"
+					:title="t('spreed', 'Edit message')"
+					:aria-label="t('spreed', 'Edit message')"
+					@click="handleEdit">
+					<template #icon>
+						<CheckIcon :size="20" />
+					</template>
+				</NcButton>
+			</template>
 
 			<!-- Send buttons -->
 			<template v-else>
@@ -176,7 +188,8 @@
 
 <script>
 import BellOff from 'vue-material-design-icons/BellOff.vue'
-import CheckBold from 'vue-material-design-icons/CheckBold.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
@@ -232,7 +245,8 @@ export default {
 		Quote,
 		// Icons
 		BellOff,
-		CheckBold,
+		CheckIcon,
+		CloseIcon,
 		EmoticonOutline,
 		Send,
 	},
@@ -917,7 +931,11 @@ export default {
 				// Remove stored absence status
 				this.chatExtrasStore.removeUserAbsence(this.token)
 			}
-		}
+		},
+
+		handleAbortEdit() {
+			this.chatExtrasStore.removeMessageIdToEdit(this.token)
+		},
 	},
 }
 </script>

diff --git a/src/components/Quote.vue b/src/components/Quote.vue
@@ -40,7 +40,8 @@ components.
 					:size="AVATAR.SIZE.EXTRA_SMALL"
 					disable-menu />
 				{{ getDisplayName }}
-				<div v-if="editMessage">
+				<div v-if="editMessage" class="quote__main__edit-hint">
+					<PencilIcon :size="20" />
 					{{ t('spreed', '(editing)') }}
 				</div>
 			</div>
@@ -54,7 +55,7 @@ components.
 				<p dir="auto">{{ shortenedQuoteMessage }}</p>
 			</blockquote>
 		</div>
-		<div v-if="isNewMessageQuote" class="quote__main__right">
+		<div v-if="canCancel" class="quote__main__right">
 			<NcButton type="tertiary"
 				:aria-label="cancelQuoteLabel"
 				@click="handleAbort">
@@ -68,6 +69,7 @@ components.
 
 <script>
 import Close from 'vue-material-design-icons/Close.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
@@ -87,6 +89,7 @@ export default {
 		NcButton,
 		Close,
 		NcRichText,
+		PencilIcon,
 	},
 	props: {
 		actorId: {
@@ -139,7 +142,7 @@ export default {
 		 * If the quote component is used in the `NewMessage` component we display
 		 * the remove button.
 		 */
-		isNewMessageQuote: {
+		canCancel: {
 			type: Boolean,
 			default: false,
 		},
@@ -333,6 +336,11 @@ export default {
 				text-align: start;
 			}
 		}
+		&__edit-hint {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
 	}
 	&__right {
 		flex: 0 0 44px;