imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New Header edgecase fixes: Close lobby button not shown, disable join button in various places, more... (#12235)

Browse source 
* Add missing tooltip

Signed-off-by: Timo K <toger5@hotmail.de>

* fix incoming call toast (icon + disabled button if there is an ongoing call)

Signed-off-by: Timo K <toger5@hotmail.de>

* room header
 - fix join button not getting disabled if there is an ongoing call
 - fix close lobby button not shown (instead we see the join button)

Signed-off-by: Timo K <toger5@hotmail.de>

* additional tests

Signed-off-by: Timo K <toger5@hotmail.de>

* fix tests

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshot

Signed-off-by: Timo K <toger5@hotmail.de>

* fix not open menu if disabled

Signed-off-by: Timo K <toger5@hotmail.de>

* add tooltip provider

Signed-off-by: Timo K <toger5@hotmail.de>

* update snap class

Signed-off-by: Timo K <toger5@hotmail.de>

* room header snap update

Signed-off-by: Timo K <toger5@hotmail.de>

* fix snapshot

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo 2024-02-08 17:48:50 +01:00 • committed by GitHub
parent 1c789cbb18
commit 552c65db98
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 132 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/views/rooms/RoomHeader.tsx
View file

@ -125,30 +125,45 @@ export default function RoomHeader({
</IconButton>
</Tooltip>
);
const joinCallButton = (
<Button
size="sm"
onClick={videoClick}
Icon={VideoCallIcon}
className="mx_RoomHeader_join_button"
color="primary"
>
{_t("action|join")}
</Button>
<Tooltip label={videoCallDisabledReason ?? _t("voip|video_call")}>
<Button
size="sm"
onClick={videoClick}
Icon={VideoCallIcon}
className="mx_RoomHeader_join_button"
disabled={!!videoCallDisabledReason}
color="primary"
aria-label={videoCallDisabledReason ?? _t("action|join")}
>
{_t("action|join")}
</Button>
</Tooltip>
);
const [menuOpen, setMenuOpen] = useState(false);
const callIconWithTooltip = (
<Tooltip label={videoCallDisabledReason ?? _t("voip|video_call")}>
<VideoCallIcon />
</Tooltip>
);
const [menuOpen, setMenuOpen] = useState(false);
const onOpenChange = useCallback(
(newOpen: boolean) => {
if (!videoCallDisabledReason) setMenuOpen(newOpen);
},
[videoCallDisabledReason],
);
const startVideoCallButton = (
<>
{/* Can be either a menu or just a button depending on the number of call options.*/}
{callOptions.length > 1 ? (
<Menu
open={menuOpen}
onOpenChange={setMenuOpen}
onOpenChange={onOpenChange}
title={_t("voip|video_call_using")}
trigger={
<IconButton
@ -165,6 +180,7 @@ export default function RoomHeader({
<MenuItem
key={option}
label={getPlatformCallTypeLabel(option)}
aria-label={getPlatformCallTypeLabel(option)}
onClick={(ev) => videoCallClick(ev, option)}
Icon={VideoCallIcon}
onSelect={() => {} /* Dummy handler since we want the click event.*/}
@ -195,7 +211,7 @@ export default function RoomHeader({
);
const closeLobbyButton = (
<Tooltip label={_t("voip|close_lobby")}>
<IconButton onClick={toggleCall}>
<IconButton onClick={toggleCall} aria-label={_t("voip|close_lobby")}>
<CloseCallIcon />
</IconButton>
</Tooltip>
@ -296,7 +312,7 @@ export default function RoomHeader({
{((isConnectedToCall && isViewingCall) || isVideoRoom(room)) && <VideoRoomChatButton room={room} />}
{hasActiveCallSession && !isConnectedToCall ? (
{hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (
joinCallButton
) : (
<>