From 3c7ccc90b29fa97339a897d205bee918cba0e460 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Wed, 23 Jun 2021 17:48:21 +0200
Subject: [PATCH] fix css for reaction view and do some renaming

also add some user-select:none
---
 src/platform/web/ui/css/themes/element/timeline.css | 13 +++++++------
 .../web/ui/session/room/timeline/ReactionsView.js   |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index af5fb041..fef9598b 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/src/platform/web/ui/css/themes/element/timeline.css
@@ -59,6 +59,7 @@ limitations under the License.
 .Timeline_message:hover > .Timeline_messageOptions,
 .Timeline_message.menuOpen > .Timeline_messageOptions {
     display: block;
+    user-select: none;
 }
 
 .Timeline_messageAvatar {
@@ -106,6 +107,7 @@ limitations under the License.
 
 .Timeline_messageBody time {
     padding: 2px 0 0px 10px;
+    user-select: none;
 }
 
 .Timeline_messageBody time, .Timeline_messageTime {
@@ -135,6 +137,9 @@ limitations under the License.
 .hydrogen .Timeline_messageSender.usercolor7 { color: var(--usercolor7); }
 .hydrogen .Timeline_messageSender.usercolor8 { color: var(--usercolor8); }
 
+.Timeline_messageBody a {
+    word-break: break-all;
+}
 
 .Timeline_messageBody .media {
     display: grid;
@@ -231,7 +236,7 @@ only loads when the top comes into view*/
     vertical-align: middle;
 }
 
-.Timeline_messageReactions button.haveReacted {
+.Timeline_messageReactions button.active {
     background-color: #e9fff9;
     border-color: #0DBD8B;
 }
@@ -241,7 +246,7 @@ only loads when the top comes into view*/
     100% { border-color: #0DBD8B; }
 }
 
-.Timeline_messageReactions button.haveReacted.isPending {
+.Timeline_messageReactions button.active.pending {
     animation-name: glow-reaction-border;
     animation-duration: 0.5s;
     animation-direction: alternate;
@@ -265,7 +270,3 @@ only loads when the top comes into view*/
 .GapView > :not(:first-child) {
     margin-left: 12px;
 }
-
-.Timeline_messageBody a {
-    word-break: break-all;
-}
diff --git a/src/platform/web/ui/session/room/timeline/ReactionsView.js b/src/platform/web/ui/session/room/timeline/ReactionsView.js
index 3cf9ca1e..0f243465 100644
--- a/src/platform/web/ui/session/room/timeline/ReactionsView.js
+++ b/src/platform/web/ui/session/room/timeline/ReactionsView.js
@@ -34,7 +34,7 @@ class ReactionView extends TemplateView {
         return t.button({
             className: {
                 active: vm => vm.isActive,
-                isPending: vm => vm.isPending
+                pending: vm => vm.isPending
             },
         }, [vm.key, " ", vm => `${vm.count}`]);
     }