Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-29 21:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Swap icon, make mobile view better.

Browse Source
This commit is contained in:
Half-Shot
2024-11-07 16:00:32 +00:00
parent 5a9eddfd70
commit 234bdaa842
4 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/button/ReactionToggleButton.module.css
View File

@@ -14,9 +14,11 @@
top: 82vh !important; top: 82vh !important;
} }
.reactionPopupMenuModal > div > div { @media not ((hover: none) or (pointer: coarse)) {
padding-inline: var(--cpd-space-6x) !important; .reactionPopupMenuModal > div > div {
padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important; padding-inline: var(--cpd-space-6x) !important;
padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
}
} }
.reactionPopupMenu menu { .reactionPopupMenu menu {
@@ -24,6 +26,7 @@
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--cpd-separator-spacing);
} }
.reactionPopupMenu section { .reactionPopupMenu section {
@@ -34,19 +37,14 @@
.reactionPopupMenuItem { .reactionPopupMenuItem {
list-style: none; list-style: none;
margin-left: var(--cpd-separator-spacing);
}
.reactionPopupMenuItem:first-child {
margin-left: 0;
} }
.reactionButton { .reactionButton {
padding: 1em; padding: 1em;
font-size: 2em; font-size: 1.8em;
width: 2em; width: 1.8em;
height: 2em; height: 1.8em;
border-radius: 2em; border-radius: 1.8em;
} }
.verticalSeperator { .verticalSeperator {

11
src/button/ReactionToggleButton.test.tsx
View File

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details. 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 { expect, test } from "vitest";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
import { TooltipProvider } from "@vector-im/compound-web"; import { TooltipProvider } from "@vector-im/compound-web";
@@ -59,14 +60,14 @@ test("Can open menu", () => {
test("Can raise hand", () => { test("Can raise hand", () => {
const room = new MockRoom(memberUserIdAlice); const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership); const rtcSession = new MockRTCSession(room, membership);
const { getByRole, getByText, container } = render( const { getByRole, getByLabelText, container } = render(
<TestComponent rtcSession={rtcSession} room={room} />, <TestComponent rtcSession={rtcSession} room={room} />,
); );
act(() => { act(() => {
getByRole("button").click(); getByRole("button").click();
}); });
act(() => { act(() => {
getByText("🖐️").click(); getByLabelText("Toggle hand raised").click();
}); });
expect(room.testSentEvents).toEqual([ expect(room.testSentEvents).toEqual([
[ [
@@ -87,7 +88,7 @@ test("Can raise hand", () => {
test("Can lower hand", () => { test("Can lower hand", () => {
const room = new MockRoom(memberUserIdAlice); const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership); const rtcSession = new MockRTCSession(room, membership);
const { getByRole, getByText, container } = render( const { getByRole, getByLabelText, container } = render(
<TestComponent rtcSession={rtcSession} room={room} />, <TestComponent rtcSession={rtcSession} room={room} />,
); );
const reactionEvent = room.testSendHandRaise(memberEventAlice, membership); const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
@@ -95,7 +96,7 @@ test("Can lower hand", () => {
getByRole("button").click(); getByRole("button").click();
}); });
act(() => { act(() => {
getByText("🖐️").click(); getByLabelText("Toggle hand raised").click();
}); });
expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]); expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();

38
src/button/ReactionToggleButton.tsx
View File

@@ -126,12 +126,10 @@ export function ReactionPopupMenu({
kind={isHandRaised ? "primary" : "secondary"} kind={isHandRaised ? "primary" : "secondary"}
aria-pressed={isHandRaised} aria-pressed={isHandRaised}
aria-label="Toggle hand raised" aria-label="Toggle hand raised"
className={styles.reactionButton}
key="raise-hand"
onClick={() => toggleRaisedHand()} onClick={() => toggleRaisedHand()}
> iconOnly
🖐️ Icon={RaisedHandSolidIcon}
</CpdButton> />
</Tooltip> </Tooltip>
</section> </section>
<div className={styles.verticalSeperator} /> <div className={styles.verticalSeperator} />
@@ -177,21 +175,23 @@ export function ReactionPopupMenu({
</Tooltip> </Tooltip>
</li> </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> </menu>
</section> </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> </div>
); );
} }
@@ -302,7 +302,7 @@ export function ReactionToggleButton({
<InnerButton <InnerButton
disabled={busy} disabled={busy}
onClick={() => setShowReactionsMenu((show) => !show)} onClick={() => setShowReactionsMenu((show) => !show)}
raised={isHandRaised || showReactionsMenu} raised={isHandRaised}
open={showReactionsMenu} open={showReactionsMenu}
/> />
<Modal <Modal

35
src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
View File

@@ -9,7 +9,7 @@ exports[`Can close search 1`] = `
aria-disabled="false" aria-disabled="false"
aria-expanded="true" aria-expanded="true"
aria-labelledby=":rec:" 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-kind="primary"
data-size="lg" data-size="lg"
role="button" role="button"
@@ -24,7 +24,10 @@ exports[`Can close search 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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> </svg>
</button> </button>
@@ -102,7 +105,7 @@ exports[`Can open menu 1`] = `
aria-disabled="false" aria-disabled="false"
aria-expanded="true" aria-expanded="true"
aria-labelledby=":r0:" 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-kind="primary"
data-size="lg" data-size="lg"
role="button" role="button"
@@ -117,7 +120,10 @@ exports[`Can open menu 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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> </svg>
</button> </button>
@@ -133,7 +139,7 @@ exports[`Can raise hand 1`] = `
aria-disabled="true" aria-disabled="true"
aria-expanded="true" aria-expanded="true"
aria-labelledby=":r1p:" 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-kind="primary"
data-size="lg" data-size="lg"
role="button" role="button"
@@ -148,7 +154,10 @@ exports[`Can raise hand 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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> </svg>
</button> </button>
@@ -164,7 +173,7 @@ exports[`Can search for and send emoji 1`] = `
aria-disabled="false" aria-disabled="false"
aria-expanded="true" aria-expanded="true"
aria-labelledby=":r74:" 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-kind="primary"
data-size="lg" data-size="lg"
role="button" role="button"
@@ -179,7 +188,10 @@ exports[`Can search for and send emoji 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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> </svg>
</button> </button>
@@ -195,7 +207,7 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
aria-disabled="false" aria-disabled="false"
aria-expanded="true" aria-expanded="true"
aria-labelledby=":ra3:" 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-kind="primary"
data-size="lg" data-size="lg"
role="button" role="button"
@@ -210,7 +222,10 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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> </svg>
</button> </button>