Skip to content
Merged
112 changes: 54 additions & 58 deletions apps/comments/css/comments.css → apps/comments/css/comments.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,53 +13,40 @@
}

#commentsTabView .newCommentForm {
position: relative;
margin-bottom: 20px;
margin-left: 36px;
}

#commentsTabView .newCommentForm .message {
width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */
margin-left: 36px;
padding-right: 30px;
display: block;
/* width = 100% - (width of submit button (44px) + margin (3px) + inline-block gap) */
width: calc(100% - 52px);
display: inline-block;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes the empty input to have a too big cursor in Safari:

bildschirmfoto 2018-04-03 um 17 47 53

See also this thread https://stackoverflow.com/a/9132362

I could also not figure out how to enforce this without the display: block;, font-size, line-heightand height all didn't worked out :/

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once the first character is typed all is fine.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MorrisJobke - I'll check this over the weekend.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merged this and we should fix this little issue in #9150

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got a new laptop and was setting it up. :) This kind of took a back seat.

}

#commentsTabView .newCommentForm .submit {
position: absolute;
bottom: 0px;
right: 8px;
width: 30px;
width: 44px;
margin: 0;
padding: 7px 9px;
padding: 13px;
background-color: transparent;
border: none;
opacity: .3;
vertical-align: bottom;
}
#commentsTabView .newCommentForm .submit:not(:disabled):hover,
#commentsTabView .newCommentForm .submit:not(:disabled):focus {
opacity: 1;
}

#commentsTabView .newCommentForm .submitLoading {
background-position: left;

/* Match rules for '#commentsTabView .newCommentForm .submit' to place the
loading icon at the same position as the confirm icon */
position: absolute;
bottom: 0px;
right: 8px;
width: 30px;
margin: 0;
padding: 7px 9px;
#commentsTabView .deleteLoading {
float: right;
padding: 14px;
vertical-align: middle;
}

/* Match rules for 'input[type="submit"]' to place the loading icon at the
same position as the confirm icon */
min-height: 34px;
box-sizing: border-box;
#commentsTabView .submitLoading {
vertical-align: bottom;
display: inline-block;
padding: 14px;
}

#commentsTabView .newCommentForm .cancel {
margin-right: 6px;
#commentsTabView .newCommentForm .submit:not(:disabled):hover,
#commentsTabView .newCommentForm .submit:not(:disabled):focus {
opacity: 1;
}

#commentsTabView .newCommentForm div.message {
Expand All @@ -73,11 +60,16 @@

#commentsTabView .comment {
position: relative;
margin-bottom: 30px;
/** padding bottom is little more so that the top and bottom gap look uniform **/
padding: 10px 0px 15px;
word-wrap: break-word;
overflow-wrap: break-word;
}

#commentsTabView .comments .comment {
border-top: 1px solid $color-border;
}

#commentsTabView .comment .avatar,
.atwho-view-ul * .avatar{
width: 32px;
Expand Down Expand Up @@ -123,19 +115,22 @@
background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF');
background-repeat: no-repeat;
}

#commentsTabView .authorRow>div:not(.contactsmenu-popover) {
display: inline-block;
vertical-align: middle;
}

#commentsTabView .authorRow>div.hidden {
#commentsTabView .hidden {
display: none !important;
}

/** set min-height as 44px to ensure that it fits the button sizes. **/
#commentsTabView .comment .authorRow {
min-height: 44px;
}
#commentsTabView .comment .authorRow .tooltip {
/** because of the padding on the element, the tooltip appear too far up,
adding this brings them closer to the element**/
margin-top: 5px;
}
#commentsTabView .comments li .message .avatar-name-wrapper,
.atwho-view-ul * .avatar-name-wrapper,
#commentsTabView .comment .authorRow {
Expand Down Expand Up @@ -164,47 +159,48 @@
.atwho-view-ul * .avatar-name-wrapper {
white-space: nowrap;
}

#commentsTabView .comment .author,
#commentsTabView .comment .date {
opacity: .5;
}
#commentsTabView .comment .author {
max-width: 210px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#commentsTabView .comment .date {
margin-left: auto;
/** this is to fix the tooltip being too close due to the margin-top applied
to bring the tooltip closer for the action icons **/
padding: 10px 0px;
}

#commentsTabView .comments li .message {
#commentsTabView .comments > li:not(.newCommentRow) .message {
padding-left: 40px;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}

#commentsTabView .comment .action {
opacity: 0;
padding: 5px;
}

#commentsTabView .comment:hover .action {
opacity: 0.3;
padding: 14px;
display: block;
}

#commentsTabView .comment .action:hover {
#commentsTabView .comment .action:hover,
#commentsTabView .comment .action:focus {
opacity: 1;
}

#commentsTabView .comment .action.delete,
#commentsTabView .comment .deleteLoading {
position: absolute;
right: 0;
#commentsTabView .newCommentRow .action-container {
margin-left: auto;
}

#commentsTabView .comment.disabled {
#commentsTabView .comment.disabled .message {
opacity: 0.3;
}

#commentsTabView .comment.disabled .action {
visibility: hidden;
display: none;
}

#commentsTabView .message.error {
Expand All @@ -215,4 +211,4 @@

.app-files .action-comment {
padding: 16px 14px;
}
}
124 changes: 124 additions & 0 deletions apps/comments/js/commentsmodifymenu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/*
* Copyright (c) 2018
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/

/* global Handlebars */
(function() {
var TEMPLATE_MENU =
'<ul>' +
'{{#each items}}' +
'<li>' +
'<a href="#" class="menuitem action {{name}} permanent" data-action="{{name}}">' +
'{{#if iconClass}}' +
'<span class="icon {{iconClass}}"></span>' +
'{{else}}' +
'<span class="no-icon"></span>' +
'{{/if}}' +
'<span>{{displayName}}</span>' +
'</li>' +
'{{/each}}' +
'</ul>';

/**
* Construct a new CommentsModifyMenuinstance
* @constructs CommentsModifyMenu
* @memberof OC.Comments
*/
var CommentsModifyMenu = OC.Backbone.View.extend({
tagName: 'div',
className: 'commentsModifyMenu popovermenu bubble menu',
_scopes: [
{
name: 'edit',
displayName: t('comments', 'Edit comment'),
iconClass: 'icon-rename'
},
{
name: 'delete',
displayName: t('comments', 'Delete comment'),
iconClass: 'icon-delete'
}
],
initialize: function() {

},
events: {
'click a.action': '_onClickAction'
},

template: Handlebars.compile(TEMPLATE_MENU),

/**
* Event handler whenever an action has been clicked within the menu
*
* @param {Object} event event object
*/
_onClickAction: function(event) {
var $target = $(event.currentTarget);
if (!$target.hasClass('menuitem')) {
$target = $target.closest('.menuitem');
}

OC.hideMenus();

this.trigger('select:menu-item-clicked', event, $target.data('action'));
},

/**
* Renders the menu with the currently set items
*/
render: function() {
this.$el.html(this.template({
items: this._scopes
}));
},

/**
* Displays the menu
*/
show: function(context) {
this._context = context;

for(var i in this._scopes) {
this._scopes[i].active = false;
}


var $el = $(context.target);
var offsetIcon = $el.offset();
var offsetContainer = $el.closest('.authorRow').offset();

// adding some extra top offset to push the menu below the button.
var position = {
top: offsetIcon.top - offsetContainer.top + 48,
left: '',
right: ''
};

position.left = offsetIcon.left - offsetContainer.left;

if (position.left > 200) {
// we need to position the menu to the right.
position.left = '';
position.right = this.$el.closest('.comment').find('.date').width();
this.$el.removeClass('menu-left').addClass('menu-right');
} else {
this.$el.removeClass('menu-right').addClass('menu-left');
}
this.$el.css(position);
this.render();
this.$el.removeClass('hidden');

OC.showMenu(null, this.$el);
}
});

OCA.Comments = OCA.Comments || {};
OCA.Comments.CommentsModifyMenu = CommentsModifyMenu;
})(OC, OCA);
Loading