fix(TopBar): hide some buttons under menu on mobile

src/components/TopBar/ParticipantsCounter.vue

@@ -0,0 +1,70 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<script setup>
+import { computed } from 'vue'
+
+import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+
+import { emit } from '@nextcloud/event-bus'
+import { n } from '@nextcloud/l10n'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+import { useStore } from '../../composables/useStore.js'
+import BrowserStorage from '../../services/BrowserStorage.js'
+
+const props = defineProps({
+	token: {
+		type: String,
+		required: true,
+	},
+	inMenu: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const store = useStore()
+
+const ButtonComponent = computed(() => props.inMenu ? NcActionButton : NcButton)
+
+const participantsInCall = computed(() => store.getters.participantsInCall(props.token))
+
+const participantsInCallLabel = computed(() =>
+	n('spreed', '%n participant in call', '%n participants in call', participantsInCall.value),
+)
+
+const text = computed(() => props.inMenu ? participantsInCallLabel.value : participantsInCall.value || '')
+
+/**
+ * Open the sidebar
+ * @param {string} [activeTab] - tab id to open
+ */
+function openSidebar(activeTab) {
+	if (typeof activeTab === 'string') {
+		emit('spreed:select-active-sidebar-tab', activeTab)
+	}
+	store.dispatch('showSidebar')
+	BrowserStorage.setItem('sidebarOpen', 'true')
+}
+</script>
+
+<template>
+	<ButtonComponent :title="participantsInCallLabel"
+		:aria-label="participantsInCallLabel"
+		type="tertiary"
+		@click="openSidebar('participants')">
+		<template #icon>
+			<IconAccountMultiple :size="20" />
+		</template>
+		{{ text }}
+	</ButtonComponent>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/TopBar/TopBar.vue

@@ -46,21 +46,14 @@
 			</div>
 		</a>
 
-		<!-- Call time -->
-		<CallTime v-if="isInCall"
-			:start="conversation.callStartTime" />
-
-		<!-- Participants counter -->
-		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
-			:title="participantsInCallAriaLabel"
-			:aria-label="participantsInCallAriaLabel"
-			type="tertiary"
-			@click="openSidebar('participants')">
-			<template #icon>
-				<AccountMultiple :size="20" />
-			</template>
-			{{ participantsInCall }}
-		</NcButton>
+		<!-- Additional items, moved to the menu on mobile -->
+		<template v-if="!isMobile && isInCall">
+			<!-- Call time -->
+			<CallTime :start="conversation.callStartTime" />
+
+			<!-- Participants counter -->
+			<ParticipantsCounter v-if="!isOneToOneConversation && isModeratorOrUser" :token="token" />
+		</template>
 
 		<!-- Reactions menu -->
 		<ReactionMenu v-if="isInCall && hasReactionSupport"
@@ -92,17 +85,16 @@
 </template>
 
 <script>
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
-
 import { emit } from '@nextcloud/event-bus'
 import { t, n } from '@nextcloud/l10n'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
 
 import CallButton from './CallButton.vue'
 import CallTime from './CallTime.vue'
+import ParticipantsCounter from './ParticipantsCounter.vue'
 import ReactionMenu from './ReactionMenu.vue'
 import TopBarMediaControls from './TopBarMediaControls.vue'
 import TopBarMenu from './TopBarMenu.vue'
@@ -111,7 +103,6 @@ import ConversationIcon from '../ConversationIcon.vue'
 
 import { useGetParticipants } from '../../composables/useGetParticipants.js'
 import { CONVERSATION } from '../../constants.js'
-import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { getStatusMessage } from '../../utils/userStatus.js'
 import { localCallParticipantModel, localMediaModel } from '../../utils/webrtc/index.js'
@@ -128,13 +119,11 @@ export default {
 		BreakoutRoomsEditor,
 		CallButton,
 		CallTime,
+		ParticipantsCounter,
 		ConversationIcon,
 		TopBarMediaControls,
-		NcButton,
 		TopBarMenu,
 		ReactionMenu,
-		// Icons
-		AccountMultiple,
 	},
 
 	mixins: [richEditor],
@@ -158,10 +147,12 @@ export default {
 		useGetParticipants()
 		const iconSize = parseFloat(getComputedStyle(document.documentElement)
 			.getPropertyValue('--default-clickable-area'))
+		const isMobile = useIsMobile()
 		return {
 			localCallParticipantModel,
 			localMediaModel,
 			iconSize,
+			isMobile,
 		}
 	},
 
@@ -235,14 +226,6 @@ export default {
 			} else return false
 		},
 
-		participantsInCall() {
-			return this.$store.getters.participantsInCall(this.token) || ''
-		},
-
-		participantsInCallAriaLabel() {
-			return n('spreed', '%n participant in call', '%n participants in call', this.$store.getters.participantsInCall(this.token))
-		},
-
 		supportedReactions() {
 			return getTalkConfig(this.token, 'call', 'supported-reactions')
 		},
@@ -278,13 +261,6 @@ export default {
 	methods: {
 		t,
 		n,
-		openSidebar(activeTab) {
-			if (typeof activeTab === 'string') {
-				emit('spreed:select-active-sidebar-tab', activeTab)
-			}
-			this.$store.dispatch('showSidebar')
-			BrowserStorage.setItem('sidebarOpen', 'true')
-		},
 
 		fullScreenChanged() {
 			this.$store.dispatch(

src/components/TopBar/TopBarMenu.vue

@@ -31,6 +31,12 @@
 				<DotsHorizontal :size="20" />
 			</template>
 			<template v-if="showActions && isInCall">
+				<template v-if="isMobile">
+<!--					<CallTime :start="conversation.callStartTime" />-->
+					<ParticipantsCounter v-if="!isOneToOneConversation && isModeratorOrUser" :token="token" in-menu />
+					<NcActionSeparator />
+				</template>
+
 				<!-- Raise hand -->
 				<NcActionButton close-after-click
 					@click="toggleHandRaised">
@@ -178,13 +184,18 @@ import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { generateAbsoluteUrl } from '../../utils/handleUrl.ts'
 import { callParticipantCollection } from '../../utils/webrtc/index.js'
+import ParticipantsCounter from './ParticipantsCounter.vue'
+import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
+import CallTime from './CallTime.vue'
 
 const AUTO_LOWER_HAND_THRESHOLD = 3000
 
 export default {
 	name: 'TopBarMenu',
 
 	components: {
+		CallTime,
+		ParticipantsCounter,
 		NcActionButton,
 		NcActionLink,
 		NcActionSeparator,
@@ -245,9 +256,11 @@ export default {
 	emits: ['open-breakout-rooms-editor'],
 
 	setup() {
+		const isMobile = useIsMobile()
 		return {
 			isInCall: useIsInCall(),
 			breakoutRoomsStore: useBreakoutRoomsStore(),
+			isMobile,
 		}
 	},
 
@@ -293,6 +306,10 @@ export default {
 				|| this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
 		},
 
+		isModeratorOrUser() {
+			return this.$store.getters.isModeratorOrUser
+		},
+
 		container() {
 			return this.$store.getters.getMainContainerSelector()
 		},