Rename "CommentsTabView" to "ChatView"

"CommentsTabView" is a legacy name from the original import of the code
from the Comments app; besides being a better fit, "ChatView" also
ensures that the CSS rules will not conflict with those from the
Comments app when the Talk UI is used in the Files app.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

4 files changed, 84 insertions, 84 deletions

diff --git a/css/comments.scss b/css/comments.scss
index 716960a47..94f90d4c0 100644
--- a/css/comments.scss
+++ b/css/comments.scss
@@ -8,30 +8,30 @@
  *
  */
 
-#commentsTabView .comments,
-#commentsTabView .emptycontent {
+#chatView .comments,
+#chatView .emptycontent {
 	flex-grow: 1;
 }
 
-#commentsTabView .emptycontent {
+#chatView .emptycontent {
 	margin-top: 0;
 }
 
-#commentsTabView .newCommentForm {
+#chatView .newCommentForm {
 	position: relative;
 }
 
-#commentsTabView .newCommentForm .message {
+#chatView .newCommentForm .message {
 	width: calc(100% - 36px);
 	margin-left: 36px;
 	padding-right: 30px;
 	display: block;
 }
 
-#commentsTabView .newCommentForm .submit,
-#commentsTabView .newCommentForm .submitLoading,
-#commentsTabView .newCommentForm .share,
-#commentsTabView .newCommentForm .shareLoading {
+#chatView .newCommentForm .submit,
+#chatView .newCommentForm .submitLoading,
+#chatView .newCommentForm .share,
+#chatView .newCommentForm .shareLoading {
 	position: absolute;
 
 	width: 44px;
@@ -41,58 +41,58 @@
 	margin: 0;
 }
 
-#commentsTabView .newCommentForm .submit,
-#commentsTabView .newCommentForm .submitLoading {
+#chatView .newCommentForm .submit,
+#chatView .newCommentForm .submitLoading {
 	right: 0;
 }
 
-#commentsTabView .newCommentForm .share,
-#commentsTabView .newCommentForm .shareLoading {
+#chatView .newCommentForm .share,
+#chatView .newCommentForm .shareLoading {
 	right: -44px;
 }
 
-#commentsTabView .newCommentForm .submit,
-#commentsTabView .newCommentForm .share {
+#chatView .newCommentForm .submit,
+#chatView .newCommentForm .share {
 	background-color: transparent;
 	border: none;
 	opacity: .3;
 }
-#commentsTabView .newCommentForm .submit:hover,
-#commentsTabView .newCommentForm .submit:focus,
-#commentsTabView .newCommentForm .share:hover,
-#commentsTabView .newCommentForm .share:focus {
+#chatView .newCommentForm .submit:hover,
+#chatView .newCommentForm .submit:focus,
+#chatView .newCommentForm .share:hover,
+#chatView .newCommentForm .share:focus {
 	opacity: 1;
 }
 
-#commentsTabView .newCommentForm .cancel {
+#chatView .newCommentForm .cancel {
 	margin-right: 6px;
 }
 
-#commentsTabView .newCommentForm div.message {
+#chatView .newCommentForm div.message {
 	resize: none;
 }
 
-#commentsTabView .newCommentForm div.message:empty:before {
+#chatView .newCommentForm div.message:empty:before {
 	content: attr(data-placeholder);
 	color: grey;
 }
 
 /* Internal wrappers used by the virtual list. */
-#commentsTabView .comments .wrapper-background,
-#commentsTabView .comments .wrapper {
+#chatView .comments .wrapper-background,
+#chatView .comments .wrapper {
 	position: absolute;
 	left: 0;
 	right: 0;
 }
 
-#commentsTabView .comment {
+#chatView .comment {
 	position: relative;
 	margin-bottom: 30px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 }
 
-#commentsTabView .comment .avatar,
+#chatView .comment .avatar,
 .atwho-view-ul * .avatar{
 	width: 32px;
 	height: 32px;
@@ -100,30 +100,30 @@
 	margin-right: 5px;
 }
 
-#commentsTabView .comment .message .avatar,
+#chatView .comment .message .avatar,
 .atwho-view-ul * .avatar
 {
 	display: inline-block;
 }
 
 #activityTabView li.comment.collapsed .activitymessage,
-#commentsTabView .comment.collapsed .message {
+#chatView .comment.collapsed .message {
 	white-space: pre-wrap;
 }
 
 #activityTabView li.comment.collapsed .activitymessage,
-#commentsTabView .comment.collapsed .message {
+#chatView .comment.collapsed .message {
 	max-height: 70px;
 	overflow: hidden;
 }
 
 #activityTabView li.comment .message-overlay,
-#commentsTabView .comment .message-overlay {
+#chatView .comment .message-overlay {
 	display: none;
 }
 
 #activityTabView li.comment.collapsed .message-overlay,
-#commentsTabView .comment.collapsed .message-overlay {
+#chatView .comment.collapsed .message-overlay {
 	display: block;
 	position: absolute;
 	z-index: 2;
@@ -141,28 +141,28 @@
 	background-repeat: no-repeat;
 }
 
-#commentsTabView .authorRow>div {
+#chatView .authorRow>div {
 	display: inline-block;
 	vertical-align: middle;
 }
 
-#commentsTabView .authorRow>div.hidden {
+#chatView .authorRow>div.hidden {
 	display: none !important;
 }
 
 .atwho-view-ul * .avatar-name-wrapper,
-#commentsTabView .comment .authorRow {
+#chatView .comment .authorRow {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
 	width: 100%;
 }
 
-#commentsTabView .comment .authorRow .contactsmenu-popover {
+#chatView .comment .authorRow .contactsmenu-popover {
 	top: 32px;
 }
 
-body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):not(.guestUser) {
+body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.guestUser) {
 	.avatar,
 	.avatar img,
 	.author {
@@ -180,14 +180,14 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	white-space: nowrap;
 }
 
-#commentsTabView .comment .author,
-#commentsTabView .comment .date {
+#chatView .comment .author,
+#chatView .comment .date {
 	color: var(--color-text-maxcontrast);
 }
-#commentsTabView .comment .author {
+#chatView .comment .author {
 	margin-left: 5px;
 }
-#commentsTabView .comment .date {
+#chatView .comment .date {
 	/* "margin-left: auto" aligns the block to the right, while
 	 * "text-align: right" aligns the text inside the block to the right, for
 	 * example, when it uses two lines due to a limited width. */
@@ -195,38 +195,38 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	text-align: right;
 }
 
-#commentsTabView .comments li .message {
+#chatView .comments li .message {
 	padding-left: 40px;
 }
 
-#commentsTabView .comment .action {
+#chatView .comment .action {
 	opacity: 0;
 	vertical-align: middle;
 	display: inline-block;
 }
 
-#commentsTabView .comment:hover .action {
+#chatView .comment:hover .action {
 	opacity: 0.3;
 }
 
-#commentsTabView .comment .action:hover {
+#chatView .comment .action:hover {
 	opacity: 1;
 }
 
-#commentsTabView .comment .action.delete {
+#chatView .comment .action.delete {
 	position: absolute;
 	right: 0;
 }
 
-#commentsTabView .comment.disabled {
+#chatView .comment.disabled {
 	opacity: 0.3;
 }
 
-#commentsTabView .comment.disabled .action {
+#chatView .comment.disabled .action {
 	visibility: hidden;
 }
 
-#commentsTabView .message.error {
+#chatView .message.error {
 	color: #e9322d;
 	border-color: #e9322d;
 	box-shadow: 0 0 6px #f8b9b7;
@@ -236,21 +236,21 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	padding: 16px 14px;
 }
 
-#commentsTabView .comment.grouped .authorRow {
+#chatView .comment.grouped .authorRow {
 	display: none;
 }
 
-#commentsTabView .comment.grouped {
+#chatView .comment.grouped {
 	margin-top: -20px;
 }
 
-#commentsTabView .comment.showDate {
+#chatView .comment.showDate {
 	margin-top: 40px;
 	border-top: 1px solid #dbdbdb;
 	padding-top: 10px;
 }
 
-#commentsTabView .comment.showDate:before {
+#chatView .comment.showDate:before {
 	content: attr(data-date);
 
 	position: absolute;
@@ -265,11 +265,11 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	background-color: #fff;
 }
 
-#commentsTabView .comment.showDate .authorRow {
+#chatView .comment.showDate .authorRow {
 	display: inline-flex;
 }
 
-#commentsTabView .comment .message .mention-user {
+#chatView .comment .message .mention-user {
 	/* Make the mention the positioning context of its child contacts menu */
 	position: relative;
 
@@ -298,7 +298,7 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	}
 }
 
-#commentsTabView .comment:not(.systemMessage) .message .mention-user {
+#chatView .comment:not(.systemMessage) .message .mention-user {
 	font-weight: bold;
 
 	&.currentUser {
@@ -307,50 +307,50 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	}
 }
 
-#commentsTabView .comment.systemMessage .message .mention-user {
+#chatView .comment.systemMessage .message .mention-user {
 	color: var(--color-main-text);
 }
 
 /* System messages have no author, so the author row only contains the date.
  * Instead of showing the date on its own row and the message below it the
  * message and the date are merged in a single row using flexboxes. */
-#commentsTabView .comment.systemMessage {
+#chatView .comment.systemMessage {
 	display: flex;
 	flex-direction: row;
 }
 
-#commentsTabView .comment.systemMessage .authorRow {
+#chatView .comment.systemMessage .authorRow {
 	order: 1;
 	flex-grow: 0;
 	width: auto;
 	padding-left: 10px;
 }
 
-#commentsTabView .comment.systemMessage .message {
+#chatView .comment.systemMessage .message {
 	order: 0;
 	flex-grow: 1;
 	color: var(--color-text-maxcontrast);
 }
 
-body:not(#body-public) #commentsTabView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser),
-body:not(#body-public) #commentsTabView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar,
-body:not(#body-public) #commentsTabView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar img {
+body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser),
+body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar,
+body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar img {
 	cursor: pointer;
 }
 
-#commentsTabView .comment .message .contactsmenu-popover {
+#chatView .comment .message .contactsmenu-popover {
 	left: -6px;
 	top: 24px;
 }
 
-#commentsTabView .comment .message .filePreviewContainer .filePreview {
+#chatView .comment .message .filePreviewContainer .filePreview {
 	/* The file preview can not be a block; otherwise it would fill the whole
 	 * width of the container and the loading icon would not be centered on the
 	 * image. */
 	display: inline-block;
 }
 
-#commentsTabView .comment .message .filePreviewContainer strong {
+#chatView .comment .message .filePreviewContainer strong {
 	/* As the file preview is an inline block the name is set as a block to
 	 * force it to be on its own line below the preview. */
 	display: block;
diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss
index f077f3fc1..9d2772fac 100644
--- a/css/publicshareauth.scss
+++ b/css/publicshareauth.scss
@@ -175,7 +175,7 @@ input#request-password-button:disabled ~ .icon {
  * The list of messages should stretch to fill the available space at the bottom
  * of the right sidebar, so the height is cascaded using flex boxes.
  */
-#talk-sidebar #commentsTabView {
+#talk-sidebar #chatView {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
@@ -195,21 +195,21 @@ input#request-password-button:disabled ~ .icon {
 	position: relative;
 }
 
-#talk-sidebar #commentsTabView .newCommentRow,
-#talk-sidebar #commentsTabView .comments {
+#talk-sidebar #chatView .newCommentRow,
+#talk-sidebar #chatView .comments {
 	padding-left: 15px;
 	padding-right: 15px;
 }
 
-#talk-sidebar #commentsTabView .comments .wrapper-background,
-#talk-sidebar #commentsTabView .comments .wrapper {
+#talk-sidebar #chatView .comments .wrapper-background,
+#talk-sidebar #chatView .comments .wrapper {
 	/* Padding is not respected in the comment wrapper due to its absolute
 	 * positioning, so it must be set through its position. */
 	left: 15px;
 	right: 15px;
 }
 
-#talk-sidebar #commentsTabView .comments .wrapper {
+#talk-sidebar #chatView .comments .wrapper {
 	/* Reset the rules set for ".wrapper" elements by "guest.scss" in server, as
 	 * they affect too the virtual list wrapper when they should not. */
 	width: auto;
diff --git a/css/style.scss b/css/style.scss
index 5d1e698a4..73885da18 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -217,7 +217,7 @@
 	height: 100%;
 }
 
-#app-content-wrapper #commentsTabView {
+#app-content-wrapper #chatView {
 	width: 100%;
 	height: 100%;
 
@@ -230,12 +230,12 @@
    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 {
+#app-content-wrapper #chatView .newCommentRow {
 	padding-left: 44px;
 	padding-right: 44px;
 }
 
-#app-content-wrapper #commentsTabView .comments {
+#app-content-wrapper #chatView .comments {
 	overflow-y: auto;
 
 	/* Needed for proper calculation of comment positions in the scrolling
@@ -248,8 +248,8 @@
 }
 
 
-#app-content-wrapper #commentsTabView .comments .wrapper-background,
-#app-content-wrapper #commentsTabView .comments .wrapper {
+#app-content-wrapper #chatView .comments .wrapper-background,
+#app-content-wrapper #chatView .comments .wrapper {
 	/* Padding is not respected in the comment wrapper due to its absolute
 	 * positioning, so it must be set through its position. */
 	left: 44px;
@@ -257,7 +257,7 @@
 }
 
 /* Hide all siblings of the chat view when shown as the main view */
-#app-content-wrapper #commentsTabView ~ *:not(#video-fullscreen):not([id^=tooltip]) {
+#app-content-wrapper #chatView ~ *:not(#video-fullscreen):not([id^=tooltip]) {
 	display: none !important;
 }
 
@@ -1185,7 +1185,7 @@ video {
 	flex-grow: 1;
 }
 
-#app-sidebar #commentsTabView {
+#app-sidebar #chatView {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
@@ -1219,21 +1219,21 @@ video {
 	padding-bottom: 0;
 }
 
-#app-sidebar #commentsTabView .newCommentRow,
-#app-sidebar #commentsTabView .comments {
+#app-sidebar #chatView .newCommentRow,
+#app-sidebar #chatView .comments {
 	padding-left: 15px;
 	padding-right: 15px;
 }
 
-#app-sidebar #commentsTabView .comments .wrapper-background,
-#app-sidebar #commentsTabView .comments .wrapper {
+#app-sidebar #chatView .comments .wrapper-background,
+#app-sidebar #chatView .comments .wrapper {
 	/* Padding is not respected in the comment wrapper due to its absolute
 	 * positioning, so it must be set through its position. */
 	left: 15px;
 	right: 15px;
 }
 
-#app-sidebar #commentsTabView .newCommentForm {
+#app-sidebar #chatView .newCommentForm {
 	/* Make room to show the "Add" button when chat is shown in the sidebar. */
 	margin-right: 44px;
 }
diff --git a/js/app.js b/js/app.js
index b2a699f95..9d64d60a8 100644
--- a/js/app.js
+++ b/js/app.js
@@ -616,7 +616,7 @@
 			this._messageCollection = new OCA.SpreedMe.Models.ChatMessageCollection(null, {token: null});
 			this._chatView = new OCA.SpreedMe.Views.ChatView({
 				collection: this._messageCollection,
-				id: 'commentsTabView',
+				id: 'chatView',
 				guestNameModel: this._localStorageModel
 			});