Fix empty call view in sidebar

Make empty call view look better in sidebar

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

3 files changed, 25 insertions, 2 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 66dd52629..08f29dea8 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -21,7 +21,10 @@
 
 <template>
 	<div id="call-container">
-		<EmptyCallView v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid" />
+		<EmptyCallView
+			v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid"
+			:is-sidebar="isSidebar"
+		/>
 		<div id="videos">
 			<LocalMediaControls
 				v-if="!isGrid"
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 18f1af4be..253cad4de 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -759,6 +759,7 @@ export default {
 
 .empty-call-view {
 	position: relative;
+	padding: 16px;
 }
 
 .local-video-stripe {
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 987ff7f3b..2f4b40a64 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -19,7 +19,7 @@
   -->
 
 <template>
-	<div class="empty-call-view">
+	<div class="empty-call-view" :class="{'empty-call-view--sidebar': isSidebar}">
 		<div class="icon" :class="iconClass" />
 		<h2>
 			{{ title }}
@@ -49,6 +49,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
@@ -173,6 +178,20 @@ export default {
 	h2, p {
 		color: #ffffff;
 	}
+
+	&--sidebar {
+		padding-bottom: 16px;
+
+		h2, p {
+			font-size: 90%;
+		}
+
+		.icon {
+			transform: scale(0.7);
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
 }
 
 </style>