Swap icon, make mobile view better.

2026-03-31 07:00:26 +00:00 · 2024-11-07 16:00:32 +00:00
parent 5a9eddfd70
commit 234bdaa842
4 changed files with 60 additions and 46 deletions
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -14,9 +14,11 @@
  top: 82vh !important;
 }

-.reactionPopupMenuModal > div > div {
-  padding-inline: var(--cpd-space-6x) !important;
-  padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
+@media not ((hover: none) or (pointer: coarse)) {
+  .reactionPopupMenuModal > div > div {
+    padding-inline: var(--cpd-space-6x) !important;
+    padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
+  }
 }

 .reactionPopupMenu menu {
@@ -24,6 +26,7 @@
  padding: 0;
  display: flex;
  flex-wrap: wrap;
+  gap: var(--cpd-separator-spacing);
 }

 .reactionPopupMenu section {
@@ -34,19 +37,14 @@

 .reactionPopupMenuItem {
  list-style: none;
-  margin-left: var(--cpd-separator-spacing);
-}
-
-.reactionPopupMenuItem:first-child {
-  margin-left: 0;
 }

 .reactionButton {
  padding: 1em;
-  font-size: 2em;
-  width: 2em;
-  height: 2em;
-  border-radius: 2em;
+  font-size: 1.8em;
+  width: 1.8em;
+  height: 1.8em;
+  border-radius: 1.8em;
 }

 .verticalSeperator {
--- a/src/button/ReactionToggleButton.test.tsx
+++ b/src/button/ReactionToggleButton.test.tsx
@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { act, fireEvent, render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import { act } from "react";
 import { expect, test } from "vitest";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -59,14 +60,14 @@ test("Can open menu", () => {
 test("Can raise hand", () => {
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, getByText, container } = render(
+  const { getByRole, getByLabelText, container } = render(
    <TestComponent rtcSession={rtcSession} room={room} />,
  );
  act(() => {
    getByRole("button").click();
  });
  act(() => {
-    getByText("🖐️").click();
+    getByLabelText("Toggle hand raised").click();
  });
  expect(room.testSentEvents).toEqual([
    [
@@ -87,7 +88,7 @@ test("Can raise hand", () => {
 test("Can lower hand", () => {
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, getByText, container } = render(
+  const { getByRole, getByLabelText, container } = render(
    <TestComponent rtcSession={rtcSession} room={room} />,
  );
  const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
@@ -95,7 +96,7 @@ test("Can lower hand", () => {
    getByRole("button").click();
  });
  act(() => {
-    getByText("🖐️").click();
+    getByLabelText("Toggle hand raised").click();
  });
  expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
  expect(container).toMatchSnapshot();
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -126,12 +126,10 @@ export function ReactionPopupMenu({
            kind={isHandRaised ? "primary" : "secondary"}
            aria-pressed={isHandRaised}
            aria-label="Toggle hand raised"
-            className={styles.reactionButton}
-            key="raise-hand"
            onClick={() => toggleRaisedHand()}
-          >
-            🖐️
-          </CpdButton>
+            iconOnly
+            Icon={RaisedHandSolidIcon}
+          />
        </Tooltip>
      </section>
      <div className={styles.verticalSeperator} />
@@ -177,21 +175,23 @@ export function ReactionPopupMenu({
              </Tooltip>
            </li>
          ))}
-          {!isSearching ? (
-            <li key="search" className={styles.reactionPopupMenuItem}>
-              <Tooltip label="Search">
-                <CpdButton
-                  iconOnly
-                  aria-label="Open reactions search"
-                  Icon={SearchIcon}
-                  kind="tertiary"
-                  onClick={() => setIsSearching(true)}
-                />
-              </Tooltip>
-            </li>
-          ) : null}
        </menu>
      </section>
+      {!isSearching ? (
+        <section>
+          <li key="search" className={styles.reactionPopupMenuItem}>
+            <Tooltip label="Search">
+              <CpdButton
+                iconOnly
+                aria-label="Open reactions search"
+                Icon={SearchIcon}
+                kind="tertiary"
+                onClick={() => setIsSearching(true)}
+              />
+            </Tooltip>
+          </li>
+        </section>
+      ) : null}
    </div>
  );
 }
@@ -302,7 +302,7 @@ export function ReactionToggleButton({
      <InnerButton
        disabled={busy}
        onClick={() => setShowReactionsMenu((show) => !show)}
-        raised={isHandRaised || showReactionsMenu}
+        raised={isHandRaised}
        open={showReactionsMenu}
      />
      <Modal
--- a/src/button/snapshots/ReactionToggleButton.test.tsx.snap
+++ b/src/button/snapshots/ReactionToggleButton.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Can close search 1`] = `
    aria-disabled="false"
    aria-expanded="true"
    aria-labelledby=":rec:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -24,7 +24,10 @@ exports[`Can close search 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
      />
    </svg>
  </button>
@@ -102,7 +105,7 @@ exports[`Can open menu 1`] = `
    aria-disabled="false"
    aria-expanded="true"
    aria-labelledby=":r0:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -117,7 +120,10 @@ exports[`Can open menu 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
      />
    </svg>
  </button>
@@ -133,7 +139,7 @@ exports[`Can raise hand 1`] = `
    aria-disabled="true"
    aria-expanded="true"
    aria-labelledby=":r1p:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -148,7 +154,10 @@ exports[`Can raise hand 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
      />
    </svg>
  </button>
@@ -164,7 +173,7 @@ exports[`Can search for and send emoji 1`] = `
    aria-disabled="false"
    aria-expanded="true"
    aria-labelledby=":r74:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -179,7 +188,10 @@ exports[`Can search for and send emoji 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
      />
    </svg>
  </button>
@@ -195,7 +207,7 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
    aria-disabled="false"
    aria-expanded="true"
    aria-labelledby=":ra3:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
    role="button"
@@ -210,7 +222,10 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
      />
    </svg>
  </button>