Skip to content

Commit

Permalink
Merge pull request #12610 from nextcloud/backport/12387/stable29
Browse files Browse the repository at this point in the history
[stable29] fix(sidebar): use open state to remove always working focus trap on mobile
  • Loading branch information
nickvergessen authored Jul 12, 2024
2 parents 614f0fe + 7dc61c5 commit 06c0953
Showing 4 changed files with 134 additions and 121 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@
"@nextcloud/paths": "^2.1.0",
"@nextcloud/router": "^3.0.1",
"@nextcloud/upload": "^1.0.5",
"@nextcloud/vue": "^8.13.0",
"@nextcloud/vue": "^8.14.0",
"crypto-js": "^4.2.0",
"debounce": "^2.0.0",
"emoji-regex": "^10.3.0",
125 changes: 123 additions & 2 deletions src/components/RightSidebar/RightSidebar.vue
Original file line number Diff line number Diff line change
@@ -21,13 +21,33 @@
-->

<template>
<NcAppSidebar v-show="opened"
<NcAppSidebar v-if="token"
:open="opened"
:name="conversation.displayName"
:title="conversation.displayName"
:active.sync="activeTab"
:class="'active-tab-' + activeTab"
:toggle-classes="{ 'chat-button-sidebar-toggle': isInCall }"
:toggle-attrs="isInCall ? inCallToggleAttrs : undefined"
@update:open="handleUpdateOpen"
@update:active="handleUpdateActive"
@closed="handleClosed"
@close="handleClose">
<!-- Use a custom icon when sidebar is used for chat messages during the call -->
<template #toggle-icon>
<template v-if="isInCall">
<MessageText :size="20" />
<NcCounterBubble v-if="unreadMessagesCounter > 0"
class="chat-button__unread-messages-counter"
:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
{{ unreadMessagesCounter }}
</NcCounterBubble>
</template>
<template v-else>
<!-- Use the old icon on older versions -->
<MenuIcon :size="20" />
</template>
</template>
<template #description>
<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
</template>
@@ -110,14 +130,18 @@ import CogIcon from 'vue-material-design-icons/Cog.vue'
import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
import MenuIcon from 'vue-material-design-icons/Menu.vue'
import Message from 'vue-material-design-icons/Message.vue'
import MessageText from 'vue-material-design-icons/MessageText.vue'

import { getCapabilities } from '@nextcloud/capabilities'
import { showMessage } from '@nextcloud/dialogs'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'

import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'

import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
import LobbyStatus from './LobbyStatus.vue'
@@ -141,6 +165,7 @@ export default {
NcAppSidebar,
NcAppSidebarTab,
NcButton,
NcCounterBubble,
ParticipantsTab,
SetGuestUsername,
SharedItemsTab,
@@ -152,6 +177,8 @@ export default {
FolderMultipleImage,
InformationOutline,
Message,
MessageText,
MenuIcon,
},

props: {
@@ -165,6 +192,7 @@ export default {
return {
activeTab: 'participants',
contactsLoading: false,
unreadNotificationHandle: null,
}
},

@@ -173,7 +201,7 @@ export default {
return this.$store.getters.getSidebarStatus
},
opened() {
return !!this.token && !this.isInLobby && this.show
return !this.isInLobby && this.show
},
token() {
return this.$store.getters.getToken()
@@ -271,6 +299,21 @@ export default {
breakoutRoomsText() {
return t('spreed', 'Breakout rooms')
},

unreadMessagesCounter() {
return this.conversation.unreadMessages
},
hasUnreadMentions() {
return this.conversation.unreadMention
},

inCallToggleAttrs() {
return {
'data-theme-dark': true,
'aria-label': t('spreed', 'Open chat'),
title: t('spreed', 'Open chat')
}
},
},

watch: {
@@ -301,13 +344,37 @@ export default {
},
},

unreadMessagesCounter(newValue, oldValue) {
if (!this.isInCall || this.opened) {
return
}

// new messages arrived
if (newValue > 0 && oldValue === 0 && !this.hasUnreadMentions) {
this.notifyUnreadMessages(t('spreed', 'You have new unread messages in the chat.'))
}
},

hasUnreadMentions(newValue) {
if (!this.isInCall || this.opened) {
return
}

if (newValue) {
this.notifyUnreadMessages(t('spreed', 'You have been mentioned in the chat.'))
}
},

isInCall(newValue) {
if (newValue) {
// Set 'chat' tab as active, and switch to it if sidebar is open
this.activeTab = 'chat'
return
}

// discard notification if the call ends
this.notifyUnreadMessages(null)

// If 'chat' tab wasn't active, leave it as is
if (this.activeTab !== 'chat') {
return
@@ -348,11 +415,28 @@ export default {
},

methods: {
openSidebar() {
// In call by default open on chat
if (this.isInCall) {
this.activeTab = 'chat'
}
this.$store.dispatch('showSidebar')
BrowserStorage.setItem('sidebarOpen', 'true')
},

handleClose() {
this.$store.dispatch('hideSidebar')
BrowserStorage.setItem('sidebarOpen', 'false')
},

handleUpdateOpen(open) {
if (open) {
this.openSidebar()
} else {
this.handleClose()
}
},

handleUpdateActive(active) {
this.activeTab = active
},
@@ -364,6 +448,21 @@ export default {
handleClosed() {
emit('files:sidebar:closed', {})
},

notifyUnreadMessages(message) {
if (this.unreadNotificationHandle) {
this.unreadNotificationHandle.hideToast()
this.unreadNotificationHandle = null
}
if (message) {
this.unreadNotificationHandle = showMessage(message, {
onClick: () => {
this.activeTab = 'chat'
this.openSidebar()
},
})
}
},
},
}
</script>
@@ -404,4 +503,26 @@ export default {
height: 100%;
}

.chat-button__unread-messages-counter {
position: absolute;
bottom: 2px;
right: 2px;
pointer-events: none;

&.counter-bubble__counter--highlighted {
color: var(--color-primary-text);
}
}
</style>

<style lang="scss">
/*
* NcAppSidebar toggle it rendered on the page outside the sidebar element, so we need global styles here.
* It is _quite_ safe, as chat-button-sidebar-toggle class is defined here manually, not an internal class.
*/
.chat-button-sidebar-toggle {
position: relative;
// Allow unread counter to overflow rounded button
overflow: visible !important;
}
</style>
Loading

0 comments on commit 06c0953

Please sign in to comment.