Merge pull request #13824 from nextcloud/backport/13806/stable30

[stable30] fix: improve silent message visibility
nextcloud · Nov 20, 2024 · f8ccd18 · f8ccd18
2 parents de4ee0f + 5fe1f9c
commit f8ccd18
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 19 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -332,6 +332,8 @@ export default {
 				commonReadIconTitle: t('spreed', 'Message read by everyone who shares their reading status'),
 				showSentIcon: this.showSentIcon,
 				sentIconTitle: t('spreed', 'Message sent'),
+				showSilentIcon: this.message.silent,
+				silentIconTitle: t('spreed', 'Sent without notification'),
 			}
 		},
 

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -57,6 +57,13 @@
 						</template>
 						{{ editedDateTime }}
 					</NcActionText>
+					<!-- Silent message information -->
+					<NcActionText v-if="readInfo.showSilentIcon">
+						<template #icon>
+							<IconBellOff :size="16" />
+						</template>
+						{{ readInfo.silentIconTitle }}
+					</NcActionText>
 					<NcActionSeparator />
 
 					<NcActionButton v-if="supportReminders"
@@ -260,6 +267,7 @@ import { toRefs } from 'vue'
 import AccountIcon from 'vue-material-design-icons/Account.vue'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import IconBellOff from 'vue-material-design-icons/BellOff.vue'
 import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import CheckAll from 'vue-material-design-icons/CheckAll.vue'
@@ -321,6 +329,7 @@ export default {
 		AccountIcon,
 		AlarmIcon,
 		ArrowLeft,
+		IconBellOff,
 		CalendarClock,
 		CloseCircleOutline,
 		Check,

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -109,6 +109,12 @@
 				:aria-label="readInfo.sentIconTitle">
 				<CheckIcon :size="16" />
 			</div>
+			<div v-else-if="readInfo.showSilentIcon"
+				:title="readInfo.silentIconTitle"
+				class="message-status"
+				:aria-label="readInfo.silentIconTitle">
+				<IconBellOff :size="16" />
+			</div>
 		</div>
 
 		<!-- Reactions slot -->
@@ -119,9 +125,10 @@
 <script>
 import { vIntersectionObserver as IntersectionObserver, vElementSize as ElementSize } from '@vueuse/components'
 import emojiRegex from 'emoji-regex'
-import { toRefs, ref } from 'vue'
+import { toRefs } from 'vue'
 
 import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
+import IconBellOff from 'vue-material-design-icons/BellOff.vue'
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CheckAllIcon from 'vue-material-design-icons/CheckAll.vue'
@@ -159,6 +166,7 @@ export default {
 		Quote,
 		// Icons
 		AlertCircleIcon,
+		IconBellOff,
 		CancelIcon,
 		CheckIcon,
 		CheckAllIcon,

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -88,6 +88,24 @@
 					@submit="handleSubmit" />
 			</div>
 
+			<!-- Silent chat -->
+			<NcActions v-if="showSilentToggle"
+				force-menu
+				:primary="silentChat">
+				<template #icon>
+					<BellOffIcon v-if="silentChat" :size="16" />
+				</template>
+				<NcActionButton close-after-click
+					:model-value="silentChat"
+					:name="silentSendLabel"
+					@click="toggleSilentChat">
+					{{ silentSendInfo }}
+					<template #icon>
+						<BellOffIcon :size="16" />
+					</template>
+				</NcActionButton>
+			</NcActions>
+
 			<!-- Audio recorder -->
 			<NewMessageAudioRecorder v-if="showAudioRecorder"
 				:disabled="disabled"
@@ -119,21 +137,6 @@
 
 			<!-- Send buttons -->
 			<template v-else>
-				<NcActions v-if="!broadcast" force-menu>
-					<template #icon>
-						<BellOffIcon v-if="silentChat" :size="16" />
-					</template>
-					<NcActionButton close-after-click
-						:model-value="silentChat"
-						:name="silentSendLabel"
-						@click="toggleSilentChat">
-						{{ silentSendInfo }}
-						<template #icon>
-							<BellOffIcon :size="16" />
-						</template>
-					</NcActionButton>
-				</NcActions>
-
 				<NcButton :disabled="disabled"
 					type="tertiary"
 					native-type="submit"
@@ -174,7 +177,7 @@
 
 <script>
 import debounce from 'debounce'
-import { toRefs } from 'vue'
+import { toRefs, ref } from 'vue'
 
 import BellOffIcon from 'vue-material-design-icons/BellOff.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
@@ -295,7 +298,6 @@ export default {
 		const supportTypingStatus = getTalkConfig(token.value, 'chat', 'typing-privacy') !== undefined
 		const { autoComplete, userData } = useChatMentions(token)
 		const { createTemporaryMessage } = useTemporaryMessage()
-
 		return {
 			breakoutRoomsStore: useBreakoutRoomsStore(),
 			chatExtrasStore: useChatExtrasStore(),
@@ -354,6 +356,8 @@ export default {
 				return t('spreed', 'No permission to post messages in this conversation')
 			} else if (!this.currentConversationIsJoined) {
 				return t('spreed', 'Joining conversation …')
+			} else if (this.silentChat) {
+				return t('spreed', 'Write a message without notification')
 			} else {
 				// Use the default placeholder
 				return undefined
@@ -433,6 +437,10 @@ export default {
 				: t('spreed', 'Participants will not be notified about new messages')
 		},
 
+		showSilentToggle() {
+			return !this.broadcast && !this.isRecordingAudio && !this.messageToEdit
+		},
+
 		showAttachmentsMenu() {
 			return (this.canUploadFiles || this.canShareFiles || this.canCreatePoll) && !this.broadcast && !this.upload && !this.messageToEdit
 		},
@@ -492,6 +500,8 @@ export default {
 				// reset or fill main input in chat view from the store
 				this.text = this.chatInput
 			}
+			// update the silent chat state
+			this.silentChat = BrowserStorage.getItem('silentChat_' + this.token)
 		},
 
 		text(newValue) {
@@ -538,8 +548,8 @@ export default {
 					this.text = ''
 				}
 				this.clearTypingInterval()
-
 				this.checkAbsenceStatus()
+				this.clearSilentState()
 			}
 		},
 	},
@@ -1003,6 +1013,13 @@ export default {
 				BrowserStorage.removeItem('silentChat_' + this.token)
 			}
 		},
+
+		clearSilentState() {
+			// FIXME text that is only one line should be cleared in upstream
+			if ((this.text === '' || this.text === '\n') && this.silentChat && !this.upload) {
+				this.toggleSilentChat()
+			}
+		}
 	},
 }
 </script>