Make spoiler click to toggle (#176)

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 6b0e47639b0f338d550a8dfd8380bb32f8d06294..c545ab72e272d15f4edda5a572a97975b8eb96d5 100644 (file)
--- 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 e0dad0466a4bf29fc489b6df3ea92ef65c339357..c7ba8f915749e6f16e90954deb3a2a73a97443f3 100644 (file)
--- 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 { target, nativeEvent } = e;
+
   const userId = target.getAttribute('data-mx-pill');
-  if (!userId) return;
+  if (userId) {
+    const roomId = navigation.selectedRoomId;
+    openProfileViewer(userId, roomId);
+  }
 
-  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) {