diff --git a/src/App.vue b/src/App.vue index 5966516e831..0110218dda6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -67,6 +67,7 @@ import ConversationSettingsDialog from './components/ConversationSettings/Conver import '@nextcloud/dialogs/styles/toast.scss' import { CONVERSATION } from './constants.js' import DeviceChecker from './components/DeviceChecker/DeviceChecker.vue' +import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js' export default { name: 'App', @@ -88,6 +89,7 @@ export default { sessionIssueHandler, isInCall, participant, + isMobile, ], data() { @@ -213,7 +215,7 @@ export default { token() { // Collapse the sidebar if it's a 1to1 conversation - if (this.isOneToOne || BrowserStorage.getItem('sidebarOpen') === 'false' || window.screen.width < (getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-mobile') / 2)) { + if (this.isOneToOne || BrowserStorage.getItem('sidebarOpen') === 'false' || this.isMobile) { this.$store.dispatch('hideSidebar') } else if (BrowserStorage.getItem('sidebarOpen') === 'true') { this.$store.dispatch('showSidebar') @@ -375,6 +377,12 @@ export default { } else if (BrowserStorage.getItem('sidebarOpen') === 'true') { this.$store.dispatch('showSidebar') } + if (this.$route.name === 'root' && this.isMobile) { + await this.$nextTick() + emit('toggle-navigation', { + open: true, + }) + } }, methods: { diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue index 5f3c2c86341..5da8a332f9b 100644 --- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue +++ b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue @@ -38,6 +38,8 @@ import Conversation from './Conversation.vue' import Hint from '../../Hint.vue' import LoadingPlaceholder from '../../LoadingPlaceholder.vue' import { EventBus } from '../../../services/EventBus.js' +import { emit } from '@nextcloud/event-bus' +import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js' export default { name: 'ConversationsList', @@ -46,6 +48,7 @@ export default { Hint, LoadingPlaceholder, }, + mixins: [isMobile], props: { searchText: { type: String, @@ -117,6 +120,11 @@ export default { // Emit the click event so the search text in the leftsidebar can be reset. handleConversationClick(item) { this.$emit('click-search-result', item.token) + if (this.isMobile) { + emit('toggle-navigation', { + open: false, + }) + } }, }, } diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue index 1f6da2a6ae9..206d68530e0 100644 --- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue +++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue @@ -313,6 +313,9 @@ export default { * Focuses the contenteditable div input */ focusInput() { + if (this.isMobile) { + return + } if (!this.$route || this.$route.name === 'conversation') { const contentEditable = this.$refs.contentEditable // This is a hack but it's the only way I've found to focus a contenteditable div @@ -416,6 +419,10 @@ export default { return 'user' }, + + isMobile() { + return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) + }, }, }