Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
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;
background-color: $background;
transition: all 0.3s ease;
cursor: pointer;
}
.mx_RoomHeader:hover {
background-color: $header-panel-bg-hover;
}
.mx_RoomHeader_info {
.mx_RoomHeader_infoWrapper {
// unset button styles
background: unset;
border: unset;
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
12px set on the flex container, which sums up to 64 */
padding-right: var(--cpd-space-13x);

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

@ -116,14 +116,14 @@ export default function RoomHeader({
);
return (
<Flex
as="header"
align="center"
gap="var(--cpd-space-3x)"
className="mx_RoomHeader light-panel"
<Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
<button
aria-label={_t("right_panel|room_summary_card|title")}
tabIndex={0}
onClick={() => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
}}
className="mx_RoomHeader_infoWrapper"
>
<RoomAvatar room={room} size="40px" />
<Box flex="1" className="mx_RoomHeader_info">
@ -172,11 +172,16 @@ export default function RoomHeader({
)}
</BodyText>
{roomTopic && (
<BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp">
<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)">
{additionalButtons?.map((props) => {
const label = props.label();

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

@ -5,6 +5,11 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
<header
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);"
>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<span
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
@ -33,6 +38,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
</span>
</div>
</div>
</button>
<nav
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);"