Merge pull request #12853 from nextcloud/fix/noid/video-verify-styles

fix(PublicShareAuthSidebar): fix and refactor styles for video verification sidebar

css/publicshareauth.css

@@ -13,10 +13,8 @@
  * layout was adjusted. */
 body.talk-sidebar-enabled {
 	/* Move rules set for body by guest.scss to the wrapped body. */
-	display: unset;
-	flex-direction: unset;
-	justify-content: unset;
-	align-items: unset;
+	flex-direction: row;
+	height: 100vh;
 }
 
 body.talk-sidebar-enabled #body-login {

src/PublicShareAuthSidebar.vue

@@ -204,16 +204,24 @@ export default {
 }
 </script>
 
+<style lang="css">
+#talk-sidebar,
+#talk-sidebar *,
+#talk-sidebar *::before,
+#talk-sidebar *::after {
+	box-sizing: border-box;
+}
+</style>
+
 <style lang="scss" scoped>
 @import './assets/variables';
 
-/* Properties based on the app-sidebar */
+/* Styles based on the NcAppSidebar */
 #talk-sidebar {
 	position: relative;
 	flex-shrink: 0;
-	width: 27vw;
-	min-width: 300px;
-	max-width: 500px;
+	width: clamp(300px, 27vw, 500px);
+	height: 100%;
 
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
@@ -228,71 +236,57 @@ export default {
 
 	/* Unset conflicting rules from guest.css for the sidebar. */
 	text-align: left;
-}
 
-#talk-sidebar > .emptycontent {
-	/* Remove default margin-top as it is unneeded when showing only the empty
-	 * content in a flex sidebar. */
-	margin-top: 0;
-}
+	& > .emptycontent {
+		/* Remove default margin-top as it is unneeded when showing only the empty
+		 * content in a flex sidebar. */
+		margin-top: 0;
+	}
 
-#talk-sidebar #call-container {
-	position: relative;
-
-	flex-grow: 1;
+	& #call-container {
+		position: relative;
 
-	/* Prevent shadows of videos from leaking on other elements. */
-	overflow: hidden;
+		flex-grow: 1;
 
-	/* Distribute available height between call container and chat view. */
-	height: 50%;
+		/* Prevent shadows of videos from leaking on other elements. */
+		overflow: hidden;
 
-	/* Ensure that the background will be black also in voice only calls. */
-	background-color: $color-call-background;
-}
+		/* Distribute available height between call container and chat view. */
+		height: 40%;
 
-#talk-sidebar #call-container :deep(.videoContainer) {
-	/* The video container has some small padding to prevent the video from
-	 * reaching the edges, but it also uses "width: 100%", so the padding should
-	 * be included in the full width of the element. */
-	box-sizing: border-box;
-}
+		/* Ensure that the background will be black also in voice only calls. */
+		background-color: $color-call-background;
 
-#talk-sidebar #call-container :deep(.videoContainer.promoted video) {
-	/* Base the size of the video on its width instead of on its height;
-	 * otherwise the video could appear in full height but cropped on the sides
-	 * due to the space available in the sidebar being typically larger in
-	 * vertical than in horizontal. */
-	width: 100%;
-	height: auto;
-}
-
-#talk-sidebar #call-container :deep(.nameIndicator) {
-	/* The name indicator has some small padding to prevent the name from
-	 * reaching the edges, but it also uses "width: 100%", so the padding should
-	 * be included in the full width of the element. */
-	box-sizing: border-box;
-}
+		:deep(.videoContainer.promoted video) {
+			/* Base the size of the video on its width instead of on its height;
+			 * otherwise the video could appear in full height but cropped on the sides
+			 * due to the space available in the sidebar being typically larger in
+			 * vertical than in horizontal. */
+			width: 100%;
+			height: auto;
+		}
+	}
 
-#talk-sidebar .chatView {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	position: relative;
+	& .chatView {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
 
-	flex-grow: 1;
+		flex-grow: 1;
 
-	/* Distribute available height between call container and chat view. */
-	height: 50%;
-}
+		/* Distribute available height between call container and chat view. */
+		height: 60%;
+	}
 
-#talk-sidebar :deep(.wrapper) {
-	margin-top: 0;
-}
+	& :deep(.wrapper) {
+		margin-top: 0;
+	}
 
-/* Restore rules from style.scss overriden by guest.css for the sidebar. */
-#talk-sidebar :deep(a) {
-	color: var(--color-main-text);
-	font-weight: inherit;
+	/* Restore rules from style.scss overwritten by guest.css for the sidebar. */
+	& :deep(a) {
+		color: var(--color-main-text);
+		font-weight: inherit;
+	}
 }
 </style>

src/PublicShareSidebar.vue

@@ -26,7 +26,7 @@
 				<CallView v-if="isInCall"
 					:token="token"
 					:is-sidebar="true" />
-				<CallButton class="call-button" />
+				<CallButton v-if="!isInCall" class="call-button" />
 				<ChatView />
 				<PollViewer />
 				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
@@ -274,7 +274,6 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	padding: var(--default-grid-baseline) 0;
 }
 
 #talk-sidebar > .emptycontent {
@@ -297,7 +296,7 @@ export default {
 }
 
 #talk-sidebar .call-button {
-	margin: 0 auto calc(var(--default-grid-baseline) * 2);
+	margin: calc(var(--default-grid-baseline) * 2) auto;
 }
 
 #talk-sidebar .button-centered {

src/components/ConversationIcon.vue

@@ -272,6 +272,7 @@ export default {
 		width: 18px;
 		border: 2px solid var(--color-main-background);
 		background-color: var(--color-main-background);
+		color: var(--color-main-text);
 		border-radius: 50%;
 	}
 

src/components/TopBar/CallButton.vue

@@ -178,7 +178,15 @@ export default {
 		},
 
 		/**
-		 * Whether the to use text on button at mobile view
+		 * Whether to use text on button (e.g. at sidebar)
+		 */
+		hideText: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Whether to use text on button at mobile view
 		 */
 		shrinkOnMobile: {
 			type: Boolean,
@@ -217,7 +225,7 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 		showButtonText() {
-			return !this.isMobile || !this.shrinkOnMobile
+			return !this.hideText && (!this.isMobile || !this.shrinkOnMobile)
 		},
 		showRecordingWarning() {
 			return [CALL.RECORDING.VIDEO_STARTING, CALL.RECORDING.AUDIO_STARTING,

src/components/TopBar/TopBar.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<div class="top-bar" :style="topBarStyle" :data-theme-dark="isInCall">
+	<div class="top-bar"
+		:class="{ 'top-bar--sidebar': isSidebar}"
+		:style="topBarStyle"
+		:data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -79,7 +82,7 @@
 			:model="localMediaModel"
 			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
-		<CallButton shrink-on-mobile :is-screensharing="!!localMediaModel.attributes.localScreen" />
+		<CallButton shrink-on-mobile :hide-text="isSidebar" :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
 		<!-- Breakout rooms editor -->
 		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
@@ -250,6 +253,7 @@ export default {
 
 		topBarStyle() {
 			return {
+				'--original-color-main-text': window.getComputedStyle(document.body).getPropertyValue('--color-main-text'),
 				'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background')
 			}
 		},
@@ -307,7 +311,7 @@ export default {
 	justify-content: flex-end;
 	padding: calc(2 * var(--default-grid-baseline));
 	// Reserve space for the sidebar toggle button
-	padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset));
+	padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset, 0));
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-border);
 
@@ -323,6 +327,14 @@ export default {
 		left: 0;
 		background-color: transparent;
 	}
+
+	&--sidebar {
+		padding: calc(2 * var(--default-grid-baseline));
+
+		.conversation-icon {
+			margin-left: 0;
+		}
+	}
 }
 
 .conversation-icon {
@@ -368,6 +380,7 @@ export default {
 }
 
 :deep(.conversation-icon__type) {
+	color: var(--original-color-main-text) !important;
 	border-color: var(--original-color-main-background) !important;
 	background-color: var(--original-color-main-background) !important;
 }