[stable23] Add the topbar in the sidebars

css/icons.scss

@@ -13,6 +13,7 @@
 
 .app-talk,
 .talk-modal,
+.talk-sidebar-callview,
 #talk-panel,
 #talk-sidebar,
 #call-container,
@@ -125,6 +126,6 @@
 .app-files {
 	// Needed to use white color also in dark mode.
 	.app-sidebar__close.forced-white {
-		background-image: url(icon-color-path('close', 'actions', 'fff', 1, true));
+		color: #ffffff;
 	}
 }

src/FilesSidebarCallViewApp.vue

@@ -21,7 +21,11 @@
   -->
 
 <template>
-	<div v-if="isInFile">
+	<div v-if="isInFile" class="talk-sidebar-callview">
+		<TopBar
+			v-show="showCallView"
+			:is-in-call="true"
+			:is-sidebar="true" />
 		<CallView
 			v-show="showCallView"
 			:token="token"
@@ -32,6 +36,7 @@
 
 <script>
 import CallView from './components/CallView/CallView'
+import TopBar from './components/TopBar/TopBar'
 import PreventUnload from 'vue-prevent-unload'
 import sessionIssueHandler from './mixins/sessionIssueHandler'
 import isInCall from './mixins/isInCall'
@@ -46,6 +51,7 @@ export default {
 	components: {
 		CallView,
 		PreventUnload,
+		TopBar,
 	},
 
 	mixins: [

src/PublicShareAuthSidebar.vue

@@ -28,6 +28,9 @@
 				<h2>{{ t('spreed', 'This conversation has ended') }}</h2>
 			</div>
 			<template v-else>
+				<TopBar
+					:is-in-call="true"
+					:is-sidebar="true" />
 				<CallView :token="token" :is-sidebar="true" />
 				<ChatView />
 			</template>
@@ -40,6 +43,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import CallView from './components/CallView/CallView'
 import ChatView from './components/ChatView'
+import TopBar from './components/TopBar/TopBar'
 import { EventBus } from './services/EventBus'
 import {
 	leaveConversationSync,
@@ -55,6 +59,7 @@ export default {
 	components: {
 		CallView,
 		ChatView,
+		TopBar,
 	},
 
 	mixins: [
@@ -185,6 +190,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './assets/variables.scss';
+
 /* Properties based on the app-sidebar */
 #talk-sidebar {
 	position: relative;
@@ -244,7 +251,7 @@ export default {
 	height: 50%;
 
 	/* Ensure that the background will be black also in voice only calls. */
-	background-color: #000;
+	background-color: $color-call-background;
 }
 
 #talk-sidebar #call-container ::v-deep .videoContainer {

src/components/CallView/shared/LocalMediaControls.vue

@@ -68,6 +68,25 @@
 					fill-color="#ffffff"
 					decorative />
 			</button>
+			<button
+				v-if="isVirtualBackgroundAvailable && !showActions"
+				v-tooltip="toggleVirtualBackgroundButtonLabel"
+				:aria-label="toggleVirtualBackgroundButtonLabel"
+				:class="blurButtonClass"
+				@click.stop="toggleVirtualBackground">
+				<Blur
+					v-if="isVirtualBackgroundEnabled"
+					:size="24"
+					title=""
+					fill-color="#ffffff"
+					decorative />
+				<BlurOff
+					v-else
+					:size="24"
+					title=""
+					fill-color="#ffffff"
+					decorative />
+			</button>
 			<Actions
 				v-if="!screenSharingButtonHidden"
 				id="screensharing-button"
@@ -305,6 +324,14 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * In the sidebar the conversation settings are hidden
+		 */
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -428,6 +455,12 @@ export default {
 			}
 		},
 
+		blurButtonClass() {
+			return {
+				'blur-disabled': this.isVirtualBackgroundEnabled,
+			}
+		},
+
 		showVideoOn() {
 			return this.model.attributes.videoAvailable && this.model.attributes.videoEnabled
 		},

src/components/TopBar/CallButton.vue

@@ -22,6 +22,7 @@
 <template>
 	<div>
 		<button v-if="showStartCallButton"
+			id="call_button"
 			v-tooltip="{
 				placement: 'auto',
 				trigger: 'hover',
@@ -39,6 +40,7 @@
 			{{ startCallLabel }}
 		</button>
 		<button v-else-if="showLeaveCallButton && !canEndForAll"
+			id="call_button"
 			class="top-bar__button error"
 			:disabled="loading"
 			@click="leaveCall(false)">
@@ -327,6 +329,12 @@ export default {
 	}
 }
 
+/** Required to make the text on the Video Verification page white */
+#call_button.success,
+#call_button.error {
+	color: white !important;
+}
+
 /* HACK: to override the default action button styles to make it look like a regular button */
 ::v-deep .trigger > button {
 	&,

src/components/TopBar/TopBar.vue

@@ -57,16 +57,19 @@
 			class="local-media-controls"
 			:token="token"
 			:model="localMediaModel"
+			:show-actions="!isSidebar"
+			:screen-sharing-button-hidden="isSidebar"
 			:local-call-participant-model="localCallParticipantModel" />
 		<div class="top-bar__buttons">
 			<CallButton class="top-bar__button" />
 
 			<!-- Vertical line -->
-			<div v-if="isInCall"
+			<div v-if="!isSidebar && isInCall"
 				class="top-bar__separator" />
 
 			<!-- sidebar toggle -->
 			<Actions
+				v-if="!isSidebar"
 				v-shortkey.once="['f']"
 				class="top-bar__button"
 				menu-align="right"
@@ -155,7 +158,7 @@
 			</Actions>
 		</div>
 		<CounterBubble
-			v-if="showOpenSidebarButton && isInCall && unreadMessagesCounter > 0"
+			v-if="!isSidebar && showOpenSidebarButton && isInCall && unreadMessagesCounter > 0"
 			class="unread-messages-counter"
 			:highlighted="hasUnreadMentions">
 			{{ unreadMessagesCounter }}
@@ -216,6 +219,14 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+
+		/**
+		 * In the sidebar the conversation settings are hidden
+		 */
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data: () => {
@@ -479,10 +490,13 @@ export default {
 	z-index: 10;
 	justify-content: flex-end;
 	padding: 8px;
-	width: 100%;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-border);
 
+	.talk-sidebar-callview & {
+		margin-right: $clickable-area;
+	}
+
 	&.in-call {
 		right: 0;
 		border: none;