Merge pull request #12926 from nextcloud/fix/raise-hand-animation

fix(TopBar): hand raised button animation

src/components/MediaSettings/MediaSettingsTabs.vue

@@ -9,7 +9,7 @@ import type { Component } from 'vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import TransitionExpandDown from './TransitionExpandDown.vue'
+import TransitionExpand from './TransitionExpand.vue'
 
 type TabDefinition = {
 	id: string,
@@ -112,7 +112,10 @@ function handleTabsAfterClosed() {
 			</NcButton>
 		</div>
 
-		<TransitionExpandDown :show="isOpen" @after-enter="handleTabsAfterOpen" @after-leave="handleTabsAfterClosed">
+		<TransitionExpand :show="isOpen"
+			direction="vertical"
+			@after-enter="handleTabsAfterOpen"
+			@after-leave="handleTabsAfterClosed">
 			<div class="tab-panels-container">
 				<div v-for="tab in tabs"
 					:id="getRefId('panel', tab.id)"
@@ -127,7 +130,7 @@ function handleTabsAfterClosed() {
 					<slot :name="`tab-panel:${tab.id}`" />
 				</div>
 			</div>
-		</TransitionExpandDown>
+		</TransitionExpand>
 	</div>
 </template>
 

src/components/MediaSettings/TransitionExpand.vue

@@ -0,0 +1,78 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+defineProps<{
+	show: boolean,
+	direction: 'vertical' | 'horizontal',
+}>()
+
+const emit = defineEmits<{
+	(event: 'after-enter'): void,
+	(event: 'after-leave'): void,
+}>()
+</script>
+
+<template>
+	<Transition :name="`expand-${direction}`"
+		@after-enter="emit('after-enter')"
+		@after-leave="emit('after-leave')">
+		<div v-show="show" class="expand-wrapper">
+			<div class="expand-wrapper__content">
+				<slot />
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style lang="scss" scoped>
+.expand-wrapper {
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+
+	&__content {
+		overflow: hidden;
+	}
+}
+
+/*
+ * Vertical expand transition
+ */
+
+.expand-vertical-enter-active,
+.expand-vertical-leave-active {
+	transition: grid-template-rows ease var(--animation-slow);
+}
+
+.expand-vertical-enter,
+.expand-vertical-leave-to {
+	grid-template-rows: 0fr;
+}
+
+.expand-vertical-enter-to,
+.expand-vertical-leave {
+	grid-template-rows: 1fr;
+}
+
+/*
+ * Horizontal expand transition
+ */
+
+.expand-horizontal-enter-active,
+.expand-horizontal-leave-active {
+	transition: grid-template-columns ease var(--animation-slow);
+}
+
+.expand-horizontal-enter,
+.expand-horizontal-leave-to {
+	grid-template-columns: 0fr;
+}
+
+.expand-horizontal-enter-to,
+.expand-horizontal-leave {
+	grid-template-columns: 1fr;
+}
+</style>

src/components/MediaSettings/TransitionExpandDown.vue

@@ -1,49 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<script setup lang="ts">
-defineProps<{
-	show: boolean,
-}>()
-
-const emit = defineEmits<{
-	(event: 'after-enter'): void,
-	(event: 'after-leave'): void,
-}>()
-</script>
-
-<template>
-	<Transition name="expand-down"
-		@after-enter="emit('after-enter')"
-		@after-leave="emit('after-leave')">
-		<div v-show="show" class="expand-down-wrapper">
-			<slot />
-		</div>
-	</Transition>
-</template>
-
-<style scoped>
-.expand-down-wrapper {
-	display: grid;
-	grid-template-rows: 1fr;
-	grid-template-columns: 1fr;
-	overflow: hidden;
-}
-
-.expand-down-enter-active,
-.expand-down-leave-active {
-	transition: grid-template-rows ease var(--animation-slow);
-}
-
-.expand-down-enter,
-.expand-down-leave-to {
-	grid-template-rows: 0fr;
-}
-
-.expand-down-enter-to,
-.expand-down-leave {
-	grid-template-rows: 1fr;
-}
-</style>

src/components/TopBar/TopBarMenu.vue

@@ -5,19 +5,20 @@
 
 <template>
 	<div class="top-bar__wrapper">
-		<NcButton v-show="isInCall && isHandRaised"
-			v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
-			v-tooltip="raiseHandButtonLabel"
-			:aria-label="raiseHandButtonLabel"
-			type="tertiary"
-			@shortkey="toggleHandRaised"
-			@click.stop="toggleHandRaised">
-			<template #icon>
-				<!-- The following icon is much bigger than all the others
-					so we reduce its size -->
-				<HandBackLeft :size="18" />
-			</template>
-		</NcButton>
+		<TransitionExpand v-if="isInCall" :show="isHandRaised" direction="horizontal">
+			<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
+				v-tooltip="raiseHandButtonLabel"
+				:aria-label="raiseHandButtonLabel"
+				type="tertiary"
+				@shortkey="toggleHandRaised"
+				@click.stop="toggleHandRaised">
+				<template #icon>
+					<!-- The following icon is much bigger than all the others
+						so we reduce its size -->
+					<HandBackLeft :size="18" />
+				</template>
+			</NcButton>
+		</TransitionExpand>
 
 		<NcActions v-if="!isSidebar"
 			v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
@@ -30,6 +31,7 @@
 			<template v-if="isInCall" #icon>
 				<DotsHorizontal :size="20" />
 			</template>
+
 			<template v-if="showActions && isInCall">
 				<!-- Raise hand -->
 				<NcActionButton close-after-click
@@ -95,6 +97,7 @@
 				</template>
 				{{ t('spreed', 'Go to file') }}
 			</NcActionLink>
+
 			<!-- Call recording -->
 			<template v-if="canModerateRecording">
 				<NcActionButton v-if="!isRecording && !isStartingRecording && isInCall"
@@ -172,6 +175,8 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
+import TransitionExpand from '../MediaSettings/TransitionExpand.vue'
+
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@@ -185,6 +190,7 @@ export default {
 	name: 'TopBarMenu',
 
 	components: {
+		TransitionExpand,
 		NcActionButton,
 		NcActionLink,
 		NcActionSeparator,