diff options
author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2016-08-03 13:18:09 +0200 |
---|---|---|
committer | Roeland Jago Douma <roeland@famdouma.nl> | 2016-08-17 11:12:49 +0200 |
commit | efd1cf57dad09829d8ba80d5ede7a70aa2701038 (patch) | |
tree | ecd54ead8880d4fe823fdc34126cca4d923ebeb4 /apps/comments | |
parent | ce0604bd0627c62671d46d443639815ade4d4852 (diff) | |
download | nextcloud-server-efd1cf57dad09829d8ba80d5ede7a70aa2701038.tar.gz nextcloud-server-efd1cf57dad09829d8ba80d5ede7a70aa2701038.zip |
fix design details in comments sidebar
Diffstat (limited to 'apps/comments')
-rw-r--r-- | apps/comments/css/comments.css | 54 | ||||
-rw-r--r-- | apps/comments/js/commentstabview.js | 24 |
2 files changed, 52 insertions, 26 deletions
diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css index a9b72252e88..fc5bd7e51cc 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, +#commentsTabView .comment .date { + opacity: .5; +} #commentsTabView .comment .author { - font-weight: bold; + 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 f71567f04d1..971b83f143a 100644 --- a/apps/comments/js/commentstabview.js +++ b/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,8 +32,8 @@ '{{/if}}' + ' </div>' + ' <form class="newCommentForm">' + - ' <textarea class="message" placeholder="{{newMessagePlaceholder}}">{{{message}}}</textarea>' + - ' <input class="submit" type="submit" value="{{submitText}}" />' + + ' <input type="text" class="message" placeholder="{{newMessagePlaceholder}}" value="{{{message}}}"" />' + + ' <input class="submit icon-confirm" type="submit" value="" />' + '{{#if isEditMode}}' + ' <input class="cancel" type="button" value="{{cancelText}}" />' + '{{/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); - |