[stable29] fix(sidebar): use open state to remove always working focus trap on mobile

package.json

@@ -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",

src/components/RightSidebar/RightSidebar.vue

@@ -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>