From c9ce96ff054788f31d45d774dcfa008c0de095c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 08:36:35 +0200 Subject: [PATCH 1/9] Show avatar using "span" instead of "div" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Visually it makes no difference, but as the ".avatar" element is inside a "span" element it can not be a block element to be compliant with the HTML specification. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/js/commentstabview.js | Bin 24202 -> 24209 bytes apps/comments/tests/js/commentstabviewSpec.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index 8b20bac571b0153a8779296ba3c3d2bcede2a88f..11b33e9f0cc9c67516c22c7ec8b7f82ce2d73b36 100644 GIT binary patch delta 76 zcmeC$%Q$f_R delta 68 zcmbQZm$7RvCB@z_h*e5oG@6_cF5?K?0lmUser Name'); expect($newCommentForm.find('.message').text()).not.toContain('@'); // In this case the default behaviour is prevented by the From db1fce6a59e4e6aa8a192cfe76dfa6937ce16e8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 09:10:32 +0200 Subject: [PATCH 2/9] Remove space between avatar and user name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The avatar should be shown immediately after the avatar to be able to accurately define the space between them using only CSS rules. Note that in the case of the "atwho" menu it is not really needed, as a whitespace removal seems to be done automatically by the plugin, but it was modified for its displayed elements too for consistency. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/js/commentstabview.js | Bin 24209 -> 24206 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index 11b33e9f0cc9c67516c22c7ec8b7f82ce2d73b36..6d4d5b2ca85e5cfbabb68a3e6cc63d79e499e4b1 100644 GIT binary patch delta 24 gcmbQZm$7dz;|6c(%|6oW88`otnX0&XlHGrK0D`>=o&W#< delta 34 pcmeC%%Q$f_;|6bOMupAZ((4%+6()O2J8rg?4N(M&^xOTH2LQ;t3pM}% From 63ab5d919ea3912ffc5d33c14ed41bee8e5db598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 09:28:34 +0200 Subject: [PATCH 3/9] Reformat embedded HTML code to resemble HTML code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Daniel Calviño Sánchez --- apps/comments/js/commentstabview.js | Bin 24206 -> 24281 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index 6d4d5b2ca85e5cfbabb68a3e6cc63d79e499e4b1..3c428fe86a62e01efbae57b7935a41b8da872d3b 100644 GIT binary patch delta 523 zcmeC%%Xo7y;|6IdP6cf)PB54pC?zu4LP~%OF2V^E66Zm1IXNfUicBt-kziF&SI}0N zyg*8n1*lbh@=hsrWw4OGzCv1lkwS8QUP)qdNpWs!UMbXcusTL*3pt=pn2@@SesMu! zo*k0VWG`t$Bqy~XQv@6;TBkrDY~p z+e&l76sb?1W*fu~)iL?KtvLrwH#BZ|C;QnMD8mFf6U!1y5{uwmb(`XnqWrvcV0cch Ww3Su@hAxZ`bp(2VZ@y%=M;-w6a$hh2 delta 487 zcmcb)m$7dz;|6IdPA*O`&{mk7W2dO6WTy@nP`4>ANX%16&PgmTwpB_jODst&Qc^&Y zSD0)iqb;q@sjsh)mS3a*QBjQ0uP}MPlsdCIC+Fn#GEyws3hD}z&&pT`+USGKMY3pe zytE;bJ7!9|A@K%@t2W2VZjhJ76C%I>G__UZf&>rPuj#gm$lS9slC0pcnf$;`nn}rS z@)g@4cCY|YtFE0noSkDAC Date: Wed, 5 Sep 2018 10:19:57 +0200 Subject: [PATCH 4/9] Ensure that the user name is shown in bold in mentions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Different browsers use different font weights for strong elements (Chromium uses "bold", but Firefox uses "bolder", which is relative to the font weight of the parent), so now the user name in mentions is explicitly shown with a bold weight. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/css/comments.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss index 75daeff875..56d55e1c86 100644 --- a/apps/comments/css/comments.scss +++ b/apps/comments/css/comments.scss @@ -171,6 +171,11 @@ margin-left: 0; margin-right: 2px; } + strong { + /* Ensure that the user name is shown in bold, as different browsers + * use different font weights for strong elements. */ + font-weight: bold; + } } } From 83bf3095cf14f63dff551c567dfffb82a061ce8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 10:50:32 +0200 Subject: [PATCH 5/9] Highlight mentions to the current user MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Like done in Talk, mentions to the current user are now shown with the primary colors to make them more prominent. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/css/comments.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss index 56d55e1c86..11f9df701b 100644 --- a/apps/comments/css/comments.scss +++ b/apps/comments/css/comments.scss @@ -177,6 +177,10 @@ font-weight: bold; } } + .avatar-name-wrapper.currentUser { + background-color: var(--color-primary); + color: var(--color-primary-text); + } } .atwho-view-ul * .avatar-name-wrapper { From 99989b37ffd28f9f010f780f4456ca8709cbea5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 17:02:48 +0200 Subject: [PATCH 6/9] Fix pointer cursor not shown on avatars MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the cursor is on an avatar wrapper the cursor is shown as a pointer to inform the user that it can be clicked (which will either show the contacts menu or insert a mention, depending on the case); the cursor must be explicitly defined for the "img" element that shows the avatar too, or otherwise the default cursor would be shown. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/css/comments.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss index 11f9df701b..0ce355cb3a 100644 --- a/apps/comments/css/comments.scss +++ b/apps/comments/css/comments.scss @@ -141,13 +141,15 @@ #commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser), #commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar, +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img, #commentsTabView .comment .authorRow .avatar:not(.currentUser), #commentsTabView .comment .authorRow .author:not(.currentUser) { cursor: pointer; } .atwho-view-ul .avatar-name-wrapper, -.atwho-view-ul .avatar-name-wrapper .avatar { +.atwho-view-ul .avatar-name-wrapper .avatar, +.atwho-view-ul .avatar-name-wrapper .avatar img { cursor: pointer; } From 45cde96d83f414792b9797e6a746db243dc3f770 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 17:13:59 +0200 Subject: [PATCH 7/9] Remove unneeded CSS rule for mentions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Most of the properties of the rule are not needed for mentions, so the rule is no longer applied to them; the only needed property was moved to the main rule for mentions. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/css/comments.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss index 0ce355cb3a..01b739e5f5 100644 --- a/apps/comments/css/comments.scss +++ b/apps/comments/css/comments.scss @@ -130,7 +130,7 @@ 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 { position: relative; @@ -156,6 +156,10 @@ #commentsTabView .comments li .message .atwho-inserted, #commentsTabView .newCommentForm .atwho-inserted { .avatar-name-wrapper { + /* Make the wrapper the positioning context of its child contacts + * menu. */ + position: relative; + display: inline; vertical-align: top; background-color: var(--color-background-dark); From 92bf1cec44d372ea660373e953b89c4fc75d4d16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 17:37:50 +0200 Subject: [PATCH 8/9] Ensure that the avatar and the user name will be kept together MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Otherwise a line break could be added between the avatar and the user name when the wrapper is close to the right border of the message. Signed-off-by: Daniel Calviño Sánchez --- apps/comments/css/comments.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss index 01b739e5f5..62a8e35eef 100644 --- a/apps/comments/css/comments.scss +++ b/apps/comments/css/comments.scss @@ -165,6 +165,10 @@ background-color: var(--color-background-dark); border-radius: 50vh; padding: 1px 7px 1px 1px; + + /* Ensure that the avatar and the user name will be kept together. */ + white-space: nowrap; + .avatar { img { vertical-align: top; From bd7536601664964c17a5a01bc09e3a76b39cee6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 5 Sep 2018 17:40:09 +0200 Subject: [PATCH 9/9] Add new line at the end of file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Daniel Calviño Sánchez --- apps/comments/css/comments.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss index 62a8e35eef..e3e5a21032 100644 --- a/apps/comments/css/comments.scss +++ b/apps/comments/css/comments.scss @@ -250,4 +250,4 @@ .app-files .action-comment { padding: 16px 14px; -} \ No newline at end of file +}