[stable29] feat(mobile): use button without text if on mobile

src/components/TopBar/CallButton.vue

@@ -30,6 +30,7 @@
  autoHide: false,
  html: true
  }"
+ :aria-label="startCallLabel"
  :disabled="startCallButtonDisabled || loading"
  :type="startCallButtonType"
  @click="handleClick">
@@ -38,31 +39,40 @@
  <VideoOutlineIcon v-else-if="silentCall" :size="20" />
  <VideoIcon v-else :size="20" />
  </template>
- {{ startCallLabel }}
+ <template v-if="showButtonText" #default>
+ {{ startCallLabel }}
+ </template>
  </NcButton>
  <NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
  id="call_button"
+ :aria-label="endCallLabel"
  type="error"
  :disabled="loading"
  @click="leaveCall(true)">
  <template #icon>
  <PhoneHangup :size="20" />
  </template>
- {{ t('spreed', 'End call') }}
+ <template v-if="showButtonText" #default>
+ {{ endCallLabel }}
+ </template>
  </NcButton>
  <NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
  id="call_button"
+ :aria-label="leaveCallLabel"
  :type="isScreensharing ? 'tertiary' : 'error'"
  :disabled="loading"
  @click="leaveCall(false)">
  <template #icon>
  <VideoOff :size="20" />
  </template>
- {{ leaveCallLabel }}
+ <template v-if="showButtonText" #default>
+ {{ leaveCallLabel }}
+ </template>
  </NcButton>
  <NcActions v-else-if="showLeaveCallButton && (canEndForAll || isBreakoutRoom)"
  :disabled="loading"
- :menu-name="leaveCallCombinedLabel"
+ :aria-label="leaveCallCombinedLabel"
+ :menu-name="showButtonText ? leaveCallCombinedLabel : undefined"
  force-name
  :container="container"
  :type="isScreensharing ? 'tertiary' : 'error'">
@@ -110,6 +120,7 @@ import { loadState } from '@nextcloud/initial-state'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 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 { useIsInCall } from '../../composables/useIsInCall.js'
@@ -181,7 +192,15 @@ export default {
  isScreensharing: {
  type: Boolean,
  default: false,
- }
+ },
+
+ /**
+ * Whether the to use text on button at mobile view
+ */
+ shrinkOnMobile: {
+ type: Boolean,
+ default: false,
+ },
  },
 
  setup() {
@@ -190,6 +209,7 @@ export default {
  breakoutRoomsStore: useBreakoutRoomsStore(),
  talkHashStore: useTalkHashStore(),
  settingsStore: useSettingsStore(),
+ isMobile: useIsMobile(),
  }
  },
 
@@ -213,7 +233,9 @@ export default {
  conversation() {
  return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
  },
-
+ showButtonText() {
+ return !this.isMobile || !this.shrinkOnMobile
+ },
  showRecordingWarning() {
  return [CALL.RECORDING.VIDEO_STARTING, CALL.RECORDING.AUDIO_STARTING,
  CALL.RECORDING.VIDEO, CALL.RECORDING.AUDIO].includes(this.conversation.callRecording)
@@ -269,6 +291,10 @@ export default {
  return this.silentCall ? t('spreed', 'Start call silently') : t('spreed', 'Start call')
  },
 
+ endCallLabel() {
+ return t('spreed', 'End call')
+ },
+
  startCallToolTip() {
  if (this.isNextcloudTalkHashDirty) {
  return t('spreed', 'Nextcloud Talk was updated, you need to reload the page before you can start or join a call.')

src/components/TopBar/TopBar.vue

@@ -94,7 +94,7 @@
  :model="localMediaModel"
  @open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
- <CallButton :is-screensharing="!!localMediaModel.attributes.localScreen" />
+ <CallButton shrink-on-mobile :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
  <!-- sidebar toggle -->
  <template v-if="showOpenSidebarButton">