Merge pull request #714 from nextcloud/comments-layout

fix design details in comments sidebar

apps/comments/css/comments.css

@@ -8,37 +8,60 @@
  *
  */
 
+#commentsTabView .emptycontent {
+	margin-top: 0;
+}
+
 #commentsTabView .newCommentForm {
+	position: relative;
 	margin-bottom: 20px;
 }
 
 #commentsTabView .newCommentForm .message {
-	width: 90%;
+	width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */
-	resize: vertical;
+	margin-left: 36px;
+	padding-right: 30px;
+}
+
+#commentsTabView .newCommentForm .submit {
+	position: absolute;
+	top: 1px;
+	right: 8px;
+	width: 30px;
+	margin: 0;
+	padding: 9px;
+	background-color: transparent;
+	border: none;
+	opacity: .3;
+}
+#commentsTabView .newCommentForm .submit:hover,
+#commentsTabView .newCommentForm .submit:focus {
+	opacity: 1;
 }
 
 #commentsTabView .newCommentForm .submitLoading {
 	background-position: left;
 }
 
-#commentsTabView .comment {
+#commentsTabView .newCommentForm .cancel {
-	margin-bottom: 30px;
+	margin-right: 6px;
-}
-
-#commentsTabView .comment .avatar {
-	width: 28px;
-	height: 28px;
-	line-height: 28px;
 }
 
 #commentsTabView .comment {
 	position: relative;
 	z-index: 1;
+	margin-bottom: 30px;
+}
+
+#commentsTabView .comment .avatar {
+	width: 32px;
+	height: 32px;
+	line-height: 32px;
 }
 
 #commentsTabView .comment.collapsed .message {
 	white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
-	white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
+	white-space: -webkit-pre-wrap; /*Chrome & Safari */
 	white-space: -pre-wrap;      /* Opera 4-6 */
 	white-space: -o-pre-wrap;    /* Opera 7 */
 	white-space: pre-wrap;       /* css-3 */
@@ -80,17 +103,24 @@
 }
 
 #commentsTabView .comment .authorRow {
-	margin-bottom: 5px;
 	position: relative;
 }
 
-#commentsTabView .comment .author {
+#commentsTabView .comment .author,
-	font-weight: bold;
+#commentsTabView .comment .date {
+	opacity: .5;
+}
+#commentsTabView .comment .author {
+	margin-left: 5px;
 }
-
 #commentsTabView .comment .date {
 	position: absolute;
 	right: 0;
+	top: 5px;
+}
+
+#commentsTabView .comments li .message {
+	padding-left: 40px;
 }
 
 #commentsTabView .comment .action {

apps/comments/js/commentstabview.js

@@ -14,7 +14,8 @@
 	var TEMPLATE =
 		'<ul class="comments">' +
 		'</ul>' +
-		'<div class="empty hidden">{{emptyResultLabel}}</div>' +
+		'<div class="emptycontent hidden"><div class="icon-comment"></div>' +
+		'<p>{{emptyResultLabel}}</p></div>' +
 		'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
 		' name="show-more" id="show-more" />' +
 		'<div class="loading hidden" style="height: 50px"></div>';
@@ -31,10 +32,10 @@
 		'{{/if}}' +
 		'    </div>' +
 		'    <form class="newCommentForm">' +
-		'        <textarea class="message" placeholder="{{newMessagePlaceholder}}">{{{message}}}</textarea>' +
+		'        <input type="text" class="message" placeholder="{{newMessagePlaceholder}}" value="{{{message}}}"" />' +
-		'        <input class="submit" type="submit" value="{{submitText}}" />' +
+		'        <input class="submit icon-confirm" type="submit" value="" />' +
 		'{{#if isEditMode}}' +
-		'        <input class="cancel" type="button" value="{{cancelText}}" />' +
+		'        <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
 		'{{/if}}' +
 		'        <div class="submitLoading icon-loading-small hidden"></div>'+
 		'    </form>' +
@@ -113,7 +114,7 @@
 				avatarEnabled: this._avatarsEnabled,
 				actorId: currentUser.uid,
 				actorDisplayName: currentUser.displayName,
-				newMessagePlaceholder: t('comments', 'Type in a new comment...'),
+				newMessagePlaceholder: t('comments', 'New comment …'),
 				deleteTooltip: t('comments', 'Delete comment'),
 				submitText: t('comments', 'Post'),
 				cancelText: t('comments', 'Cancel')
@@ -162,17 +163,17 @@
 
 		render: function() {
 			this.$el.html(this.template({
-				emptyResultLabel: t('comments', 'No other comments available'),
+				emptyResultLabel: t('comments', 'No comments yet, start the conversation!'),
-				moreLabel: t('comments', 'More comments...')
+				moreLabel: t('comments', 'More comments …')
 			}));
 			this.$el.find('.comments').before(this.editCommentTemplate({}));
 			this.$el.find('.has-tooltip').tooltip();
 			this.$container = this.$el.find('ul.comments');
 			if (this._avatarsEnabled) {
-				this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 28);
+				this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 32);
 			}
 			this.delegateEvents();
-			this.$el.find('textarea').on('keydown input change', this._onTypeComment);
+			this.$el.find('.message').on('keydown input change', this._onTypeComment);
 		},
 
 		_formatItem: function(commentModel) {
@@ -200,7 +201,7 @@
 		_onEndRequest: function(type) {
 			var fileInfoModel = this.model;
 			this._toggleLoading(false);
-			this.$el.find('.empty').toggleClass('hidden', !!this.collection.length);
+			this.$el.find('.emptycontent').toggleClass('hidden', !!this.collection.length);
 			this.$el.find('.showMore').toggleClass('hidden', !this.collection.hasMoreResults());
 
 			if (type !== 'REPORT') {
@@ -238,7 +239,7 @@
 			if(this._avatarsEnabled) {
 				$el.find('.avatar').each(function() {
 					var $this = $(this);
-					$this.avatar($this.attr('data-username'), 28);
+					$this.avatar($this.attr('data-username'), 32);
 				});
 			}
 		},
@@ -360,7 +361,7 @@
 			var currentUser = OC.getCurrentUser();
 			var $submit = $form.find('.submit');
 			var $loading = $form.find('.submitLoading');
-			var $textArea = $form.find('textarea');
+			var $textArea = $form.find('.message');
 			var message = $textArea.val().trim();
 			e.preventDefault();
 
@@ -437,4 +438,3 @@
 
 	OCA.Comments.CommentsTabView = CommentsTabView;
 })(OC, OCA);
-

apps/comments/tests/js/commentstabviewSpec.js

@@ -328,12 +328,12 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 			var $formRow = view.$el.find('.newCommentRow.comment[data-id=1]');
 			expect($formRow.length).toEqual(1);
 
-			$formRow.find('textarea').val('modified\nmessage');
+			$formRow.find('input').val('modified message');
 			$formRow.find('form').submit();
 
 			expect(saveStub.calledOnce).toEqual(true);
 			expect(saveStub.lastCall.args[0]).toEqual({
-				message: 'modified\nmessage'
+				message: 'modified message'
 			});
 
 			var model = view.collection.get(1);