fixup! feat: switch focus to screenshare button instead of end call b…

…utton
nextcloud · Feb 14, 2024 · f097127 · f097127
1 parent 26dad96
commit f097127
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 54 deletions.
diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -20,7 +20,7 @@
 <template>
 	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['m']"
 		v-tooltip="audioButtonTooltip"
-		:type="ncButtonType"
+		:type="type"
 		:aria-label="audioButtonAriaLabel"
 		:class="{ 'no-audio-available': !isAudioAllowed || !model.attributes.audioAvailable }"
 		@shortkey="toggleAudio"
@@ -70,7 +70,7 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},

diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -20,7 +20,7 @@
 <template>
 	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['v']"
 		v-tooltip="videoButtonTooltip"
-		:type="ncButtonType"
+		:type="type"
 		:aria-label="videoButtonAriaLabel"
 		:class="{ 'no-video-available': !isVideoAllowed || !model.attributes.videoAvailable }"
 		@shortkey="toggleVideo"
@@ -68,7 +68,7 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
@@ -452,7 +452,4 @@ export default {
 	margin: 0 auto;
 }
 
-:deep(.button-vue--vue-tertiary) {
-	color: white !important;
-}
 </style>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="top-bar" :class="{ 'in-call': isInCall }">
+	<div class="top-bar" :data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -60,14 +60,12 @@
 
 		<!-- Call time -->
 		<CallTime v-if="isInCall"
-			:start="conversation.callStartTime"
-			class="top-bar__button dark-hover" />
+			:start="conversation.callStartTime" />
 
 		<!-- Participants counter -->
 		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
 			:title="participantsInCallAriaLabel"
 			:aria-label="participantsInCallAriaLabel"
-			class="top-bar__button dark-hover"
 			type="tertiary"
 			@click="openSidebar('participants')">
 			<template #icon>
@@ -79,14 +77,12 @@
 
 		<!-- Reactions menu -->
 		<ReactionMenu v-if="hasReactionSupport"
-			class="top-bar__button dark-hover"
 			:token="token"
 			:supported-reactions="supportedReactions"
 			:local-call-participant-model="localCallParticipantModel" />
 
 		<!-- Local media controls -->
 		<TopBarMediaControls v-if="isInCall"
-			class="local-media-controls dark-hover"
 			:token="token"
 			:model="localMediaModel"
 			:show-actions="!isSidebar"
@@ -95,23 +91,19 @@
 
 		<!-- TopBar menu -->
 		<TopBarMenu :token="token"
-			class="top-bar__button dark-hover"
 			:show-actions="!isSidebar"
 			:is-sidebar="isSidebar"
 			:model="localMediaModel"
 			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
-		<CallButton :is-screensharing="!!localMediaModel.attributes.localScreen"
-			class="top-bar__button"
-			:class="{'dark-hover' : !!localMediaModel.attributes.localScreen }" />
+		<CallButton :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
 		<!-- sidebar toggle -->
 		<template v-if="showOpenSidebarButton">
 			<!-- in chat: open last tab -->
 			<NcButton v-if="!isInCall"
 				:aria-label="t('spreed', 'Open sidebar')"
 				:title="t('spreed', 'Open sidebar')"
-				class="top-bar__button dark-hover"
 				close-after-click="true"
 				type="tertiary"
 				@click="openSidebar">
@@ -124,7 +116,7 @@
 			<NcButton v-else
 				:aria-label="t('spreed', 'Open chat')"
 				:title="t('spreed', 'Open chat')"
-				class="top-bar__button chat-button dark-hover"
+				class="chat-button"
 				type="tertiary"
 				@click="openSidebar('chat')">
 				<template #icon>
@@ -418,36 +410,13 @@ export default {
 		margin-right: var(--default-clickable-area);
 	}
 
-	&.in-call {
+	&[data-theme-dark="true"] {
 		right: 0;
 		border: none;
 		position: absolute;
 		top: 0;
-		left:0;
+		left: 0;
 		background-color: transparent;
-		display: flex;
-		flex-wrap: wrap;
-		& * {
-			color: #fff;
-		}
-
-		:deep(button.dark-hover:hover),
-		.dark-hover :deep(button:not(.button-vue--vue-error):hover),
-		.dark-hover :deep(.action-item--open button:not(.button-vue--vue-error)),
-		:deep(.action-item--open.dark-hover button) {
-			background-color: rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__button {
-		margin: 0 2px;
-		align-self: center;
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		.icon {
-			margin-right: 4px !important;
-		}
 	}
 
 	.chat-button {

diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
@@ -63,16 +63,18 @@
 			:token="token"
 			:conversation="conversation"
 			:model="model"
+			type="tertiary"
 			color="#ffffff" />
 
 		<LocalVideoControlButton :token="token"
 			:conversation="conversation"
 			:model="model"
+			type="tertiary"
 			color="#ffffff" />
 
 		<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
 			v-tooltip="toggleVirtualBackgroundButtonLabel"
-			type="tertiary-no-background"
+			type="tertiary"
 			:aria-label="toggleVirtualBackgroundButtonLabel"
 			:class="blurButtonClass"
 			@click.stop="toggleVirtualBackground">
@@ -82,10 +84,10 @@
 			</template>
 		</NcButton>
 
-		<NcActions v-if="!screenSharingButtonHidden"
+		<NcActions v-if="!screenSharingButtonHidden && isScreensharing"
 			id="screensharing-button"
 			v-tooltip="screenSharingButtonTooltip"
-			:type="isScreensharing ? 'error' : 'tertiary'"
+			type="error"
 			:aria-label="screenSharingButtonAriaLabel"
 			:class="screenSharingButtonClass"
 			class="app-navigation-entry-utils-menu-button"
@@ -99,13 +101,6 @@
 			</template>
 			<!-- /Actions button icon -->
 			<!-- Actions -->
-			<NcActionButton v-if="!screenSharingMenuOpen"
-				@click.stop="toggleScreenSharingMenu">
-				<template #icon>
-					<MonitorShare :size="20" fill-color="#ffffff" />
-				</template>
-				{{ screenSharingButtonTooltip }}
-			</NcActionButton>
 			<template v-if="isScreensharing">
 				<NcActionButton close-after-click @click="showScreen">
 					<template #icon>
@@ -121,6 +116,14 @@
 				</NcActionButton>
 			</template>
 		</NcActions>
+		<NcButton v-if="!screenSharingButtonHidden && !isScreensharing"
+			v-tooltip="screenSharingButtonTooltip"
+			type="tertiary"
+			@click.stop="toggleScreenSharingMenu">
+			<template #icon>
+				<MonitorShare :size="20" fill-color="#ffffff" />
+			</template>
+		</NcButton>
 	</div>
 </template>