From c22c407ee5a955a48e845adac70f786244a1cb99 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 13 Dec 2021 15:14:57 +0530
Subject: [PATCH] Make spoiler click to toggle (#176)

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/message/Message.scss     | 16 ++++++++--------
 src/app/organisms/room/RoomViewContent.jsx | 16 +++++++++++-----
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 6b0e4763..c545ab72 100644
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -210,6 +210,7 @@
     border-radius: 4px;
     background-color: rgba(124, 124, 124, 0.5);
     color:transparent;
+    cursor: pointer;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -219,15 +220,14 @@
     & > * {
       opacity: 0;
     }
-    &:focus, &:hover {
-      background-color: transparent;
-      color: inherit;
-      user-select: initial;
-      & > * {
-        opacity: inherit;
-      }
+  }
+  .data-mx-spoiler--visible {
+    background-color: var(--bg-surface-active) !important;
+    color: inherit !important;
+    user-select: initial !important;
+    & > * {
+      opacity: inherit !important;
     }
-
   }
   &-edited {
     color: var(--tc-surface-low);
diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx
index e0dad046..c7ba8f91 100644
--- a/src/app/organisms/room/RoomViewContent.jsx
+++ b/src/app/organisms/room/RoomViewContent.jsx
@@ -74,12 +74,18 @@ function genRoomIntro(mEvent, roomTimeline) {
 }
 
 function handleOnClickCapture(e) {
-  const { target } = e;
-  const userId = target.getAttribute('data-mx-pill');
-  if (!userId) return;
+  const { target, nativeEvent } = e;
 
-  const roomId = navigation.selectedRoomId;
-  openProfileViewer(userId, roomId);
+  const userId = target.getAttribute('data-mx-pill');
+  if (userId) {
+    const roomId = navigation.selectedRoomId;
+    openProfileViewer(userId, roomId);
+  }
+
+  const spoiler = nativeEvent.path.find((el) => el?.hasAttribute?.('data-mx-spoiler'));
+  if (spoiler) {
+    spoiler.classList.toggle('data-mx-spoiler--visible');
+  }
 }
 
 function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {