Merge pull request #544 from nextcloud/show-chat-view-as-main-view-when-in-a-room-but-not-in-a-call

Show chat view as main view when in a room but not in a call

1 files changed, 46 insertions, 0 deletions

diff --git a/css/style.css b/css/style.css
index 8a64eb394..b9d0bac37 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,6 +141,45 @@
 }
 
 /**
+ * Main view chat styles
+ */
+#app-content-wrapper {
+	height: 100%;
+}
+
+#app-content-wrapper #commentsTabView {
+	width: 100%;
+	height: 100%;
+
+	display: flex;
+	flex-direction: column;
+
+	padding-top: 15px;
+}
+
+/* The lateral padding is set for each child instead of for the chat view as a
+   whole to prevent showing the scroll bar padded from the border of the chat
+   view (which could be fixed by using a negative margin and a positive padding
+   in the list of messages) and to ensure that the contacts menu is not clipped
+   due to overflowing the chat view on its left (much harder to fix). */
+#app-content-wrapper #commentsTabView .newCommentRow {
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+#app-content-wrapper #commentsTabView .comments {
+	overflow-y: auto;
+
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+/* Hide all siblings of the chat view when shown as the main view */
+#app-content-wrapper #commentsTabView ~ * {
+	display: none !important;
+}
+
+/**
  * Video styles
  */
 
@@ -699,6 +738,13 @@ video {
 	}
 }
 
+/* The header element contains the header div; as the header div uses a fixed
+   position the header element has no height, so it must be explicitly set to
+   prevent #app-content-wrapper from overlapping with the header element */
+#body-public header {
+	height: 45px;
+}
+
 /* make blue header bar transparent in shared room */
 #body-public #app-content:not(.participants-1) #header.spreed-public {
 	background: transparent;