From efd1cf57dad09829d8ba80d5ede7a70aa2701038 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 3 Aug 2016 13:18:09 +0200 Subject: [PATCH 1/5] fix design details in comments sidebar --- apps/comments/css/comments.css | 56 +++++++++++++++++++++-------- apps/comments/js/commentstabview.js | 24 ++++++------- 2 files changed, 53 insertions(+), 27 deletions(-) diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css index a9b72252e8..fc5bd7e51c 100644 --- a/apps/comments/css/comments.css +++ b/apps/comments/css/comments.css @@ -8,13 +8,35 @@ * */ +#commentsTabView .emptycontent { + margin-top: 0; +} + #commentsTabView .newCommentForm { + position: relative; margin-bottom: 20px; } #commentsTabView .newCommentForm .message { - width: 90%; - resize: vertical; + width: 76%; + margin-left: 32px; + padding-right: 30px; +} + +#commentsTabView .newCommentForm .submit { + position: absolute; + top: 0; + right: 0; + 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 { @@ -22,23 +44,20 @@ } #commentsTabView .comment { + position: relative; + z-index: 1; margin-bottom: 30px; } #commentsTabView .comment .avatar { - width: 28px; - height: 28px; - line-height: 28px; -} - -#commentsTabView .comment { - position: relative; - z-index: 1; + 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 +99,24 @@ } #commentsTabView .comment .authorRow { - margin-bottom: 5px; position: relative; } -#commentsTabView .comment .author { - font-weight: bold; +#commentsTabView .comment .author, +#commentsTabView .comment .date { + opacity: .5; +} +#commentsTabView .comment .author { + margin-left: 5px; } - #commentsTabView .comment .date { position: absolute; right: 0; + top: 5px; +} + +#commentsTabView .comments .message { + padding-left: 40px; } #commentsTabView .comment .action { diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index f71567f04d..971b83f143 100644 --- a/apps/comments/js/commentstabview.js +++ b/apps/comments/js/commentstabview.js @@ -14,7 +14,8 @@ var TEMPLATE = '' + - '' + + '' + '' + ''; @@ -31,8 +32,8 @@ '{{/if}}' + ' ' + '
' + - ' ' + - ' ' + + ' ' + + ' ' + '{{#if isEditMode}}' + ' ' + '{{/if}}' + @@ -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'), - moreLabel: t('comments', 'More comments...') + emptyResultLabel: t('comments', 'No comments yet, start the conversation!'), + 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); - From 252ddcc1a43012f0984fc0ba7cdccae941ef67dc Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 17 Aug 2016 11:35:18 +0200 Subject: [PATCH 2/5] Fix edit comment layout --- apps/comments/css/comments.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css index fc5bd7e51c..56e2428b86 100644 --- a/apps/comments/css/comments.css +++ b/apps/comments/css/comments.css @@ -115,7 +115,7 @@ top: 5px; } -#commentsTabView .comments .message { +#commentsTabView .comments li .message { padding-left: 40px; } From 0d964787581b8505556889aaa3e05ad83d3482a2 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 17 Aug 2016 11:46:11 +0200 Subject: [PATCH 3/5] Fix js unit test --- apps/comments/tests/js/commentstabviewSpec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/comments/tests/js/commentstabviewSpec.js b/apps/comments/tests/js/commentstabviewSpec.js index 70930da752..33c959e430 100644 --- a/apps/comments/tests/js/commentstabviewSpec.js +++ b/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); From 8c960821f1a826347e8d7ae3e9b96176fa2a58ac Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Thu, 18 Aug 2016 08:57:46 +0200 Subject: [PATCH 4/5] Fix layout of comments submit button on all screen sizes * tested in IE10, IE11, Edge, Chrome and Firefox --- apps/comments/css/comments.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css index 56e2428b86..81216a14a5 100644 --- a/apps/comments/css/comments.css +++ b/apps/comments/css/comments.css @@ -18,15 +18,15 @@ } #commentsTabView .newCommentForm .message { - width: 76%; - margin-left: 32px; + width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */ + margin-left: 36px; padding-right: 30px; } #commentsTabView .newCommentForm .submit { position: absolute; - top: 0; - right: 0; + top: 1px; + right: 8px; width: 30px; margin: 0; padding: 9px; From 869c8410822d9d9c16e135ceab9a268feb6031b4 Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Thu, 18 Aug 2016 09:07:03 +0200 Subject: [PATCH 5/5] Improve layout of cancel button in the comments sidebar --- apps/comments/css/comments.css | 4 ++++ apps/comments/js/commentstabview.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css index 81216a14a5..d33ce73544 100644 --- a/apps/comments/css/comments.css +++ b/apps/comments/css/comments.css @@ -43,6 +43,10 @@ background-position: left; } +#commentsTabView .newCommentForm .cancel { + margin-right: 6px; +} + #commentsTabView .comment { position: relative; z-index: 1; diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index 971b83f143..565f6a9929 100644 --- a/apps/comments/js/commentstabview.js +++ b/apps/comments/js/commentstabview.js @@ -35,7 +35,7 @@ ' ' + ' ' + '{{#if isEditMode}}' + - ' ' + + ' ' + '{{/if}}' + ' '+ ' ' +