From 2dd10bb906eb9b7f8bfdd9f1d8ca209c286a1f94 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 20 Mar 2020 11:18:12 +0100 Subject: [PATCH 1/3] Allow wrapping of reactions --- source/features/reactions-avatars.css | 18 ++++-------------- source/features/reactions-avatars.tsx | 5 ----- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/source/features/reactions-avatars.css b/source/features/reactions-avatars.css index 49662f48491..015b91f3c3a 100644 --- a/source/features/reactions-avatars.css +++ b/source/features/reactions-avatars.css @@ -2,6 +2,10 @@ padding-right: 0.7em !important; padding-left: 0.7em !important; } +button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */ + border-bottom: 1px solid #e1e4e8; + margin-bottom: -1px; +} .reaction-summary-item.user-has-reacted { --background: #f2f8fa; } @@ -16,7 +20,6 @@ background: #efefef; /* Placeholder before the images load */ box-shadow: 0 0 0 2px var(--background, #fff); font-size: 10px; /* Base sizer */ - transition: margin-left 0.2s; } .reaction-summary-item a:first-of-type { margin-left: 0.5em; @@ -34,16 +37,3 @@ border-radius: inherit; background-color: var(--background); } - -/* Overlap reaction avatars when there are 5+ types of reactions */ -.rgh-reactions-near-limit .reaction-summary-item:not(:hover) a:not(:first-of-type) { - margin-left: -12px; -} -/* Avoid wrapping */ -.has-reactions, -.rgh-reactions-near-limit { - display: flex; -} -.rgh-reactions-near-limit { - background: #fff; -} diff --git a/source/features/reactions-avatars.tsx b/source/features/reactions-avatars.tsx index 09cce1395ad..b32ee1119ec 100644 --- a/source/features/reactions-avatars.tsx +++ b/source/features/reactions-avatars.tsx @@ -65,11 +65,6 @@ function init(): void { list.classList.add('rgh-reactions'); - // Overlap reaction avatars when near the avatarLimit - if (flatParticipants.length > avatarLimit * 0.9) { - list.classList.add('rgh-reactions-near-limit'); - } - onUpdatableContentUpdate(list.closest('.js-updatable-content')!, init); } } From 03cacefc2838e0c9cd549f6dc5718d8009078155 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 20 Mar 2020 11:26:29 +0100 Subject: [PATCH 2/3] Fix border when the second line is longer than the first one --- source/features/reactions-avatars.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/source/features/reactions-avatars.css b/source/features/reactions-avatars.css index 015b91f3c3a..306625ef0d9 100644 --- a/source/features/reactions-avatars.css +++ b/source/features/reactions-avatars.css @@ -3,9 +3,14 @@ padding-left: 0.7em !important; } button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */ - border-bottom: 1px solid #e1e4e8; - margin-bottom: -1px; + border-top: 1px solid #e1e4e8; /* Required when the second line is longer than the first line */ + border-bottom: 1px solid #e1e4e8; /* Required when the first line is longer than the second line */ + margin-bottom: -1px; /* Makes up for `order-bottom` */ } +.comment-reactions .js-pick-reaction { + margin-top: -1px; /* Makes up for `.reaction-summary-item {border-top}` */ +} + .reaction-summary-item.user-has-reacted { --background: #f2f8fa; } From 6fc73bd2f03e3838f816a78218168e77b68d3d57 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 20 Mar 2020 11:26:39 +0100 Subject: [PATCH 3/3] Slightly increase overlap to allow for more avatars --- source/features/reactions-avatars.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/features/reactions-avatars.css b/source/features/reactions-avatars.css index 306625ef0d9..8824363d01f 100644 --- a/source/features/reactions-avatars.css +++ b/source/features/reactions-avatars.css @@ -20,7 +20,7 @@ button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */ height: 2em; border-radius: 3px; margin-top: -0.3em; - margin-left: -0.2em; + margin-left: -0.5em; vertical-align: middle; background: #efefef; /* Placeholder before the images load */ box-shadow: 0 0 0 2px var(--background, #fff);