OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

make room info button to open room details (#11951)

pull/28217/head
Kerry 2023-11-29 10:15:21 +13:00 committed by GitHub
parent c686766767
commit cd985d6d6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 105 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
res/css/views/rooms/_RoomHeader.pcss
View File

@ -21,15 +21,27 @@ limitations under the License.
border-bottom: 1px solid $separator; border-bottom: 1px solid $separator;
background-color: $background; background-color: $background;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer;
} }
.mx_RoomHeader:hover { .mx_RoomHeader:hover {
background-color: $header-panel-bg-hover; background-color: $header-panel-bg-hover;
} }
.mx_RoomHeader_info { .mx_RoomHeader_infoWrapper {
// unset button styles
background: unset;
border: unset;
flex: 1; flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
cursor: pointer;
gap: var(--cpd-space-3x);
text-align: left;
}
.mx_RoomHeader_info {
/* We want the spacing to be 64px, 13x = 52px but we have a flex gap of /* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
12px set on the flex container, which sums up to 64 */ 12px set on the flex container, which sums up to 64 */
padding-right: var(--cpd-space-13x); padding-right: var(--cpd-space-13x);

119
src/components/views/rooms/RoomHeader.tsx
View File

@ -116,67 +116,72 @@ export default function RoomHeader({
); );
return ( return (
<Flex <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
as="header" <button
align="center" aria-label={_t("right_panel|room_summary_card|title")}
gap="var(--cpd-space-3x)" tabIndex={0}
className="mx_RoomHeader light-panel" onClick={() => {
onClick={() => { RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary); }}
}} className="mx_RoomHeader_infoWrapper"
> >
<RoomAvatar room={room} size="40px" /> <RoomAvatar room={room} size="40px" />
<Box flex="1" className="mx_RoomHeader_info"> <Box flex="1" className="mx_RoomHeader_info">
<BodyText <BodyText
as="div" as="div"
size="lg" size="lg"
weight="semibold" weight="semibold"
dir="auto" dir="auto"
role="heading" role="heading"
aria-level={1} aria-level={1}
className="mx_RoomHeader_heading" className="mx_RoomHeader_heading"
> >
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span> <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && ( {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} side="right"> <Tooltip label={_t("common|public_room")} side="right">
<PublicIcon <PublicIcon
width="16px" width="16px"
height="16px" height="16px"
className="mx_RoomHeader_icon text-secondary" className="mx_RoomHeader_icon text-secondary"
aria-label={_t("common|public_room")} aria-label={_t("common|public_room")}
/> />
</Tooltip> </Tooltip>
)} )}
{isDirectMessage && e2eStatus === E2EStatus.Verified && ( {isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} side="right"> <Tooltip label={_t("common|verified")} side="right">
<VerifiedIcon <VerifiedIcon
width="16px" width="16px"
height="16px" height="16px"
className="mx_RoomHeader_icon mx_Verified" className="mx_RoomHeader_icon mx_Verified"
aria-label={_t("common|verified")} aria-label={_t("common|verified")}
/> />
</Tooltip> </Tooltip>
)} )}
{isDirectMessage && e2eStatus === E2EStatus.Warning && ( {isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} side="right"> <Tooltip label={_t("room|header_untrusted_label")} side="right">
<ErrorIcon <ErrorIcon
width="16px" width="16px"
height="16px" height="16px"
className="mx_RoomHeader_icon mx_Untrusted" className="mx_RoomHeader_icon mx_Untrusted"
aria-label={_t("room|header_untrusted_label")} aria-label={_t("room|header_untrusted_label")}
/> />
</Tooltip> </Tooltip>
)} )}
</BodyText>
{roomTopic && (
<BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp">
<Linkify>{roomTopicBody}</Linkify>
</BodyText> </BodyText>
)} {roomTopic && (
</Box> <BodyText
as="div"
size="sm"
className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
>
<Linkify>{roomTopicBody}</Linkify>
</BodyText>
)}
</Box>
</button>
<Flex as="nav" align="center" gap="var(--cpd-space-2x)"> <Flex as="nav" align="center" gap="var(--cpd-space-2x)">
{additionalButtons?.map((props) => { {additionalButtons?.map((props) => {
const label = props.label(); const label = props.label();

52
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View File

@ -6,33 +6,39 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
class="mx_Flex mx_RoomHeader light-panel" class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);" style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
> >
<span <button
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" aria-label="Room info"
data-color="7" class="mx_RoomHeader_infoWrapper"
data-testid="avatar-img" tabindex="0"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
> >
! <span
</span> class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
<div data-color="7"
class="mx_Box mx_RoomHeader_info mx_Box--flex" data-testid="avatar-img"
style="--mx-box-flex: 1;" data-type="round"
> role="presentation"
<div style="--cpd-avatar-size: 40px;"
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
> >
<span !
class="mx_RoomHeader_truncated mx_lineClamp" </span>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
> >
!1:example.org <span
</span> class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div> </div>
</div> </button>
<nav <nav
class="mx_Flex" class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);" style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"