move 'lower hand' button to TopBarMenu.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

2 files changed, 222 insertions, 236 deletions

diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index 621d7f145..6da7d75c5 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -19,118 +19,102 @@
   -->
 <template>
 	<div v-shortkey.push="disableKeyboardShortcuts ? null : ['space']"
+		class="buttons-bar"
 		@shortkey="handleShortkey">
-		<div class="buttons-bar">
-			<div class="network-connection-state">
-				<NcPopover v-if="qualityWarningTooltip"
-					:boundary="boundaryElement"
-					:aria-label="qualityWarningAriaLabel"
-					trigger="hover"
-					:auto-hide="false"
-					:shown="showQualityWarningTooltip">
-					<template #trigger>
-						<NcButton id="quality_warning_button"
-							type="tertiary-no-background"
-							class="trigger"
-							:aria-label="qualityWarningAriaLabel"
-							@click="mouseover = !mouseover">
-							<template #icon>
-								<NetworkStrength2Alert fill-color="#e9322d" :size="20" />
-							</template>
+		<div class="network-connection-state">
+			<NcPopover v-if="qualityWarningTooltip"
+				:boundary="boundaryElement"
+				:aria-label="qualityWarningAriaLabel"
+				trigger="hover"
+				:auto-hide="false"
+				:shown="showQualityWarningTooltip">
+				<template #trigger>
+					<NcButton id="quality_warning_button"
+						type="tertiary-no-background"
+						class="trigger"
+						:aria-label="qualityWarningAriaLabel"
+						@click="mouseover = !mouseover">
+						<template #icon>
+							<NetworkStrength2Alert fill-color="#e9322d" :size="20" />
+						</template>
+					</NcButton>
+				</template>
+				<div class="hint">
+					<span>{{ qualityWarningTooltip.content }}</span>
+					<div class="hint__actions">
+						<NcButton v-if="qualityWarningTooltip.action"
+							type="primary"
+							class="hint__button"
+							@click="executeQualityWarningTooltipAction">
+							{{ qualityWarningTooltip.actionLabel }}
+						</NcButton>
+						<NcButton v-if="!isQualityWarningTooltipDismissed"
+							type="tertiary"
+							class="hint__button"
+							@click="dismissQualityWarningTooltip">
+							{{ t('spreed', 'Dismiss') }}
 						</NcButton>
-					</template>
-					<div class="hint">
-						<span>{{ qualityWarningTooltip.content }}</span>
-						<div class="hint__actions">
-							<NcButton v-if="qualityWarningTooltip.action"
-								type="primary"
-								class="hint__button"
-								@click="executeQualityWarningTooltipAction">
-								{{ qualityWarningTooltip.actionLabel }}
-							</NcButton>
-							<NcButton v-if="!isQualityWarningTooltipDismissed"
-								type="tertiary"
-								class="hint__button"
-								@click="dismissQualityWarningTooltip">
-								{{ t('spreed', 'Dismiss') }}
-							</NcButton>
-						</div>
 					</div>
-				</NcPopover>
-			</div>
-
-			<LocalAudioControlButton :conversation="conversation" :model="model" color="#ffffff" />
-
-			<LocalVideoControlButton :conversation="conversation" :model="model" color="#ffffff" />
+				</div>
+			</NcPopover>
+		</div>
 
-			<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
-				v-tooltip="toggleVirtualBackgroundButtonLabel"
-				type="tertiary-no-background"
-				:aria-label="toggleVirtualBackgroundButtonLabel"
-				:class="blurButtonClass"
-				@click.stop="toggleVirtualBackground">
+		<LocalAudioControlButton :conversation="conversation" :model="model" color="#ffffff" />
+
+		<LocalVideoControlButton :conversation="conversation" :model="model" color="#ffffff" />
+
+		<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
+			v-tooltip="toggleVirtualBackgroundButtonLabel"
+			type="tertiary-no-background"
+			:aria-label="toggleVirtualBackgroundButtonLabel"
+			:class="blurButtonClass"
+			@click.stop="toggleVirtualBackground">
+			<template #icon>
+				<Blur v-if="isVirtualBackgroundEnabled" :size="20" fill-color="#ffffff" />
+				<BlurOff v-else :size="20" fill-color="#ffffff" />
+			</template>
+		</NcButton>
+
+		<NcActions v-if="!screenSharingButtonHidden"
+			id="screensharing-button"
+			v-tooltip="screenSharingButtonTooltip"
+			:aria-label="screenSharingButtonAriaLabel"
+			:class="screenSharingButtonClass"
+			class="app-navigation-entry-utils-menu-button"
+			:boundaries-element="boundaryElement"
+			:container="container"
+			:open="screenSharingMenuOpen"
+			@update:open="screenSharingMenuOpen = true"
+			@update:close="screenSharingMenuOpen = false">
+			<!-- Actions button icon -->
+			<template #icon>
+				<CancelPresentation v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" />
+				<PresentToAll v-else :size="20" fill-color="#ffffff" />
+			</template>
+			<!-- /Actions button icon -->
+			<!-- Actions -->
+			<NcActionButton v-if="!screenSharingMenuOpen"
+				@click.stop="toggleScreenSharingMenu">
 				<template #icon>
-					<Blur v-if="isVirtualBackgroundEnabled" :size="20" fill-color="#ffffff" />
-					<BlurOff v-else :size="20" fill-color="#ffffff" />
+					<PresentToAll :size="20" fill-color="#ffffff" />
 				</template>
-			</NcButton>
-
-			<NcActions v-if="!screenSharingButtonHidden"
-				id="screensharing-button"
-				v-tooltip="screenSharingButtonTooltip"
-				:aria-label="screenSharingButtonAriaLabel"
-				:class="screenSharingButtonClass"
-				class="app-navigation-entry-utils-menu-button"
-				:boundaries-element="boundaryElement"
-				:container="container"
-				:open="screenSharingMenuOpen"
-				@update:open="screenSharingMenuOpen = true"
-				@update:close="screenSharingMenuOpen = false">
-				<!-- Actions button icon -->
+				{{ screenSharingButtonTooltip }}
+			</NcActionButton>
+			<NcActionButton v-if="model.attributes.localScreen"
+				@click="showScreen">
 				<template #icon>
-					<CancelPresentation v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" />
-					<PresentToAll v-else :size="20" fill-color="#ffffff" />
+					<Monitor :size="20" />
 				</template>
-				<!-- /Actions button icon -->
-				<!-- Actions -->
-				<NcActionButton v-if="!screenSharingMenuOpen"
-					@click.stop="toggleScreenSharingMenu">
-					<template #icon>
-						<PresentToAll :size="20" fill-color="#ffffff" />
-					</template>
-					{{ screenSharingButtonTooltip }}
-				</NcActionButton>
-				<NcActionButton v-if="model.attributes.localScreen"
-					@click="showScreen">
-					<template #icon>
-						<Monitor :size="20" />
-					</template>
-					{{ t('spreed', 'Show your screen') }}
-				</NcActionButton>
-				<NcActionButton v-if="model.attributes.localScreen"
-					@click="stopScreen">
-					<template #icon>
-						<CancelPresentation :size="20" />
-					</template>
-					{{ t('spreed', 'Stop screensharing') }}
-				</NcActionButton>
-			</NcActions>
-			<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
-				v-tooltip="lowerHandAriaLabel"
-				:aria-label="lowerHandAriaLabel"
-				type="tertiary-no-background"
-				class="lower-hand"
-				:class="model.attributes.raisedHand.state ? '' : 'hidden-visually'"
-				:tabindex="model.attributes.raisedHand.state ? 0 : -1"
-				@shortkey="toggleHandRaised"
-				@click.stop="toggleHandRaised">
+				{{ t('spreed', 'Show your screen') }}
+			</NcActionButton>
+			<NcActionButton v-if="model.attributes.localScreen"
+				@click="stopScreen">
 				<template #icon>
-					<!-- The following icon is much bigger than all the others
-						so we reduce its size -->
-					<HandBackLeft :size="18" fill-color="#ffffff" />
+					<CancelPresentation :size="20" />
 				</template>
-			</NcButton>
-		</div>
+				{{ t('spreed', 'Stop screensharing') }}
+			</NcActionButton>
+		</NcActions>
 	</div>
 </template>
 
@@ -139,7 +123,6 @@ import escapeHtml from 'escape-html'
 
 import Blur from 'vue-material-design-icons/Blur.vue'
 import BlurOff from 'vue-material-design-icons/BlurOff.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Monitor from 'vue-material-design-icons/Monitor.vue'
 import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
 
@@ -176,7 +159,6 @@ export default {
 		Blur,
 		BlurOff,
 		CancelPresentation,
-		HandBackLeft,
 		Monitor,
 		NcActions,
 		NcActionButton,
@@ -258,12 +240,6 @@ export default {
 			return this.conversation.permissions & PARTICIPANT.PERMISSIONS.PUBLISH_SCREEN
 		},
 
-		lowerHandAriaLabel() {
-			return this.disableKeyboardShortcuts
-				? t('spreed', 'Lower hand')
-				: t('spreed', 'Lower hand (R)')
-		},
-
 		blurButtonClass() {
 			return {
 				'blur-disabled': this.isVirtualBackgroundEnabled,
@@ -524,18 +500,6 @@ export default {
 			}
 		},
 
-		toggleHandRaised() {
-			const state = !this.model.attributes.raisedHand?.state
-			this.model.toggleHandRaised(state)
-			this.$store.dispatch(
-				'setParticipantHandRaised',
-				{
-					sessionId: this.$store.getters.getSessionId(),
-					raisedHand: this.model.attributes.raisedHand,
-				}
-			)
-		},
-
 		showScreen() {
 			if (this.model.attributes.localScreen) {
 				emit('switch-screen-to-id', this.localCallParticipantModel.attributes.peerId)
@@ -621,15 +585,6 @@ export default {
 	align-items: center;
 }
 
-.buttons-bar button.lower-hand.hidden-visually {
-	position: absolute;
-	left: -10000px;
-	top: -10000px;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-}
-
 .buttons-bar #screensharing-menu button {
 	width: 100%;
 	height: auto;
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index fc6dc1aee..1d3a58f65 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -20,130 +20,146 @@
 -->
 
 <template>
-	<NcActions v-if="!isSidebar"
-		v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
-		v-tooltip="t('spreed', 'Conversation actions')"
-		:aria-label="t('spreed', 'Conversation actions')"
-		:container="container"
-		@shortkey.native="toggleFullscreen">
-		<!-- Menu icon: white if in call -->
-		<template v-if="isInCall" #icon>
-			<DotsHorizontal :size="20"
-				fill-color="#ffffff" />
-		</template>
-		<template v-if="showActions && isInCall">
-			<!-- Raise hand -->
-			<NcActionButton :close-after-click="true"
-				@click="toggleHandRaised">
+	<div class="top-bar__wrapper">
+		<NcButton v-show="isInCall && isHandRaised"
+			v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
+			v-tooltip="raiseHandButtonLabel"
+			:aria-label="raiseHandButtonLabel"
+			type="tertiary-no-background"
+			@shortkey="toggleHandRaised"
+			@click.stop="toggleHandRaised">
+			<template #icon>
 				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
-				<template #icon>
-					<HandBackLeft :size="16" />
+				<HandBackLeft :size="18" fill-color="#ffffff" />
+			</template>
+		</NcButton>
+
+		<NcActions v-if="!isSidebar"
+			v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
+			v-tooltip="t('spreed', 'Conversation actions')"
+			:aria-label="t('spreed', 'Conversation actions')"
+			:container="container"
+			@shortkey.native="toggleFullscreen">
+			<!-- Menu icon: white if in call -->
+			<template v-if="isInCall" #icon>
+				<DotsHorizontal :size="20"
+					fill-color="#ffffff" />
+			</template>
+			<template v-if="showActions && isInCall">
+				<!-- Raise hand -->
+				<NcActionButton close-after-click
+					@click="toggleHandRaised">
+					<!-- The following icon is much bigger than all the others
+					so we reduce its size -->
+					<template #icon>
+						<HandBackLeft :size="16" />
+					</template>
+					{{ raiseHandButtonLabel }}
+				</NcActionButton>
+
+				<!-- Mute others -->
+				<template v-if="!isOneToOneConversation && canFullModerate">
+					<NcActionButton close-after-click
+						@click="forceMuteOthers">
+						<template #icon>
+							<MicrophoneOff :size="20" />
+						</template>
+						{{ t('spreed', 'Mute others') }}
+					</NcActionButton>
 				</template>
-				{{ raiseHandButtonLabel }}
-			</NcActionButton>
 
-			<!-- Mute others -->
-			<template v-if="!isOneToOneConversation && canFullModerate">
-				<NcActionButton :close-after-click="true"
-					@click="forceMuteOthers">
+				<!-- Device settings -->
+				<NcActionButton close-after-click
+					@click="showMediaSettings">
 					<template #icon>
-						<MicrophoneOff :size="20" />
+						<VideoIcon :size="20" />
 					</template>
-					{{ t('spreed', 'Mute others') }}
+					{{ t('spreed', 'Media settings') }}
 				</NcActionButton>
+				<NcActionSeparator />
 			</template>
 
-			<!-- Device settings -->
-			<NcActionButton :close-after-click="true"
-				@click="showMediaSettings">
+			<!-- Call layout switcher -->
+			<NcActionButton v-if="showActions && isInCall"
+				close-after-click
+				@click="changeView">
 				<template #icon>
-					<VideoIcon :size="20" />
+					<GridView v-if="!isGrid"
+						:size="20" />
+					<PromotedView v-else
+						:size="20" />
 				</template>
-				{{ t('spreed', 'Media settings') }}
+				{{ changeViewText }}
 			</NcActionButton>
-			<NcActionSeparator />
-		</template>
-
-		<!-- Call layout switcher -->
-		<NcActionButton v-if="showActions && isInCall"
-			:close-after-click="true"
-			@click="changeView">
-			<template #icon>
-				<GridView v-if="!isGrid"
-					:size="20" />
-				<PromotedView v-else
-					:size="20" />
-			</template>
-			{{ changeViewText }}
-		</NcActionButton>
-
-		<!-- Fullscreen -->
-		<NcActionButton :aria-label="t('spreed', 'Toggle full screen')"
-			:close-after-click="true"
-			@click="toggleFullscreen">
-			<template #icon>
-				<Fullscreen v-if="!isFullscreen" :size="20" />
-				<FullscreenExit v-else :size="20" />
-			</template>
-			{{ labelFullscreen }}
-		</NcActionButton>
 
-		<!-- Go to file -->
-		<NcActionLink v-if="isFileConversation"
-			:href="linkToFile">
-			<template #icon>
-				<File :size="20" />
-			</template>
-			{{ t('spreed', 'Go to file') }}
-		</NcActionLink>
-		<!-- Call recording -->
-		<template v-if="canModerateRecording">
-			<NcActionButton v-if="!isRecording && !isStartingRecording && isInCall"
-				:close-after-click="true"
-				@click="startRecording">
+			<!-- Fullscreen -->
+			<NcActionButton :aria-label="t('spreed', 'Toggle full screen')"
+				close-after-click
+				@click="toggleFullscreen">
 				<template #icon>
-					<RecordCircle :size="20" />
+					<Fullscreen v-if="!isFullscreen" :size="20" />
+					<FullscreenExit v-else :size="20" />
 				</template>
-				{{ t('spreed', 'Start recording') }}
+				{{ labelFullscreen }}
 			</NcActionButton>
-			<NcActionButton v-else-if="isStartingRecording && isInCall"
-				:close-after-click="true"
-				@click="stopRecording">
+
+			<!-- Go to file -->
+			<NcActionLink v-if="isFileConversation"
+				:href="linkToFile">
 				<template #icon>
-					<NcLoadingIcon :size="20" />
+					<File :size="20" />
 				</template>
-				{{ t('spreed', 'Cancel recording start') }}
-			</NcActionButton>
-			<NcActionButton v-else-if="isRecording && isInCall"
-				:close-after-click="true"
-				@click="stopRecording">
+				{{ t('spreed', 'Go to file') }}
+			</NcActionLink>
+			<!-- Call recording -->
+			<template v-if="canModerateRecording">
+				<NcActionButton v-if="!isRecording && !isStartingRecording && isInCall"
+					close-after-click
+					@click="startRecording">
+					<template #icon>
+						<RecordCircle :size="20" />
+					</template>
+					{{ t('spreed', 'Start recording') }}
+				</NcActionButton>
+				<NcActionButton v-else-if="isStartingRecording && isInCall"
+					close-after-click
+					@click="stopRecording">
+					<template #icon>
+						<NcLoadingIcon :size="20" />
+					</template>
+					{{ t('spreed', 'Cancel recording start') }}
+				</NcActionButton>
+				<NcActionButton v-else-if="isRecording && isInCall"
+					close-after-click
+					@click="stopRecording">
+					<template #icon>
+						<StopIcon :size="20" />
+					</template>
+					{{ t('spreed', 'Stop recording') }}
+				</NcActionButton>
+			</template>
+
+			<!-- Breakout rooms -->
+			<NcActionButton v-if="canConfigureBreakoutRooms"
+				close-after-click
+				@click="$emit('open-breakout-rooms-editor')">
 				<template #icon>
-					<StopIcon :size="20" />
+					<DotsCircle :size="20" />
 				</template>
-				{{ t('spreed', 'Stop recording') }}
+				{{ t('spreed', 'Set up breakout rooms') }}
 			</NcActionButton>
-		</template>
 
-		<!-- Breakout rooms -->
-		<NcActionButton v-if="canConfigureBreakoutRooms"
-			:close-after-click="true"
-			@click="$emit('open-breakout-rooms-editor')">
-			<template #icon>
-				<DotsCircle :size="20" />
-			</template>
-			{{ t('spreed', 'Set up breakout rooms') }}
-		</NcActionButton>
-
-		<!-- Conversation settings -->
-		<NcActionButton :close-after-click="true"
-			@click="openConversationSettings">
-			<template #icon>
-				<Cog :size="20" />
-			</template>
-			{{ t('spreed', 'Conversation settings') }}
-		</NcActionButton>
-	</NcActions>
+			<!-- Conversation settings -->
+			<NcActionButton close-after-click
+				@click="openConversationSettings">
+				<template #icon>
+					<Cog :size="20" />
+				</template>
+				{{ t('spreed', 'Conversation settings') }}
+			</NcActionButton>
+		</NcActions>
+	</div>
 </template>
 
 <script>
@@ -165,6 +181,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import GridView from '../missingMaterialDesignIcons/GridView.vue'
@@ -179,6 +196,7 @@ export default {
 	name: 'TopBarMenu',
 
 	components: {
+		NcButton,
 		NcActions,
 		NcActionSeparator,
 		NcActionLink,
@@ -299,8 +317,12 @@ export default {
 			return this.model.attributes.virtualBackgroundEnabled
 		},
 
+		isHandRaised() {
+			return this.model.attributes.raisedHand?.state === true
+		},
+
 		raiseHandButtonLabel() {
-			if (!this.model.attributes.raisedHand.state) {
+			if (!this.isHandRaised) {
 				if (this.disableKeyboardShortcuts) {
 					return t('spreed', 'Raise hand')
 				}
@@ -429,8 +451,8 @@ export default {
 		},
 
 		toggleHandRaised() {
-			const state = !this.model.attributes.raisedHand?.state
-			this.model.toggleHandRaised(state)
+			const newState = !this.isHandRaised
+			this.model.toggleHandRaised(newState)
 			this.$store.dispatch(
 				'setParticipantHandRaised',
 				{
@@ -466,3 +488,12 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+@import '../../assets/variables';
+.top-bar {
+	&__wrapper {
+		display: flex;
+	}
+}
+</style>