Merge pull request #1316 from nextcloud/rename-commentstabview-to-chatview

Rename "commentsTabView" to "chatView"

8 files changed, 95 insertions, 103 deletions

diff --git a/css/comments.scss b/css/chatview.scss
index 716960a47..98d613288 100644
--- a/css/comments.scss
+++ b/css/chatview.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,89 +41,85 @@
 	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,
-.atwho-view-ul * .avatar{
+#chatView .comment .avatar,
+.atwho-view-ul .chat-view-mention-autocomplete .avatar{
 	width: 32px;
 	height: 32px;
 	line-height: 32px;
 	margin-right: 5px;
 }
 
-#commentsTabView .comment .message .avatar,
-.atwho-view-ul * .avatar
+#chatView .comment .message .avatar,
+.atwho-view-ul .chat-view-mention-autocomplete .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 +137,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 {
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper,
+#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 {
@@ -170,24 +166,24 @@ body:not(#body-public) #commentsTabView .comment .authorRow:not(.currentUser):no
 	}
 }
 
-.atwho-view-ul .avatar-name-wrapper,
-.atwho-view-ul .avatar-name-wrapper .avatar,
-.atwho-view-ul .avatar-name-wrapper .avatar img {
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper,
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar,
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar img {
 	cursor: pointer;
 }
 
-.atwho-view-ul * .avatar-name-wrapper {
+.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper {
 	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,62 +191,58 @@ 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;
 }
 
-.app-files .action-comment {
-	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 +257,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 +290,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 +299,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
 			});
 
diff --git a/js/views/chatview.js b/js/views/chatview.js
index bf2e6750e..bc0c14d60 100644
--- a/js/views/chatview.js
+++ b/js/views/chatview.js
@@ -89,7 +89,7 @@
 					sorter: function (q, items) { return items; }
 				},
 				displayTpl: function (item) {
-					return '<li>' +
+					return '<li class="chat-view-mention-autocomplete">' +
 						'<span class="avatar-name-wrapper">' +
 							'<span class="avatar" ' +
 									'data-user-id="' + escapeHTML(item.id) + '" ' +
diff --git a/lib/PublicShareAuth/TemplateLoader.php b/lib/PublicShareAuth/TemplateLoader.php
index 4ecf15218..1791998b0 100644
--- a/lib/PublicShareAuth/TemplateLoader.php
+++ b/lib/PublicShareAuth/TemplateLoader.php
@@ -73,7 +73,7 @@ class TemplateLoader {
 
 		Util::addStyle('spreed', 'publicshareauth');
 		Util::addStyle('spreed', 'style');
-		Util::addStyle('spreed', 'comments');
+		Util::addStyle('spreed', 'chatview');
 		Util::addStyle('spreed', 'autocomplete');
 
 		Util::addScript('spreed', 'vendor/backbone/backbone-min');
diff --git a/templates/index-public.php b/templates/index-public.php
index 0012d8cfa..abdcb93a1 100644
--- a/templates/index-public.php
+++ b/templates/index-public.php
@@ -6,7 +6,7 @@ vendor_script('select2/select2');
 vendor_style('select2/select2');
 
 style('spreed', 'style');
-style('spreed', 'comments');
+style('spreed', 'chatview');
 style('spreed', 'autocomplete');
 script(
 	'spreed',
diff --git a/templates/index.php b/templates/index.php
index 670549aa2..d351c92fd 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -6,7 +6,7 @@ vendor_script('select2/select2');
 vendor_style('select2/select2');
 
 style('spreed', 'style');
-style('spreed', 'comments');
+style('spreed', 'chatview');
 style('spreed', 'autocomplete');
 script(
 	'spreed',