Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[stable30] fix: improve silent message visibility #13824

Merged
merged 4 commits into from
Nov 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/MessagesList/MessagesGroup/Message/Message.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
}
},

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -321,6 +329,7 @@ export default {
AccountIcon,
AlarmIcon,
ArrowLeft,
IconBellOff,
CalendarClock,
CloseCircleOutline,
Check,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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'
Expand Down Expand Up @@ -159,6 +166,7 @@ export default {
Quote,
// Icons
AlertCircleIcon,
IconBellOff,
CancelIcon,
CheckIcon,
CheckAllIcon,
Expand Down
53 changes: 35 additions & 18 deletions src/components/NewMessage/NewMessage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -538,8 +548,8 @@ export default {
this.text = ''
}
this.clearTypingInterval()

this.checkAbsenceStatus()
this.clearSilentState()
}
},
},
Expand Down Expand Up @@ -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>
Expand Down
Loading