Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style room header icons and facepile for toggled state #28968

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

Style room header icons and facepile for toggled state #28968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a2e53f9
Fix tiny typo in existing code
MidhunSureshR Jan 12, 2025
921ec06
Create a hook that uses the right panel store
MidhunSureshR Jan 12, 2025
0a5f737
Create a context that wraps the previous hook we created
MidhunSureshR Jan 12, 2025
402cf56
Create a hook that tells you if a panel is open or not
MidhunSureshR Jan 12, 2025
13b26bb
Create component that wraps Icon
MidhunSureshR Jan 12, 2025
14ae321
Style room header icons for when they are toggled
MidhunSureshR Jan 12, 2025
4eace4f
Style face pile for toggle state
MidhunSureshR Jan 12, 2025
745892a
Fix broken CI
MidhunSureshR Jan 12, 2025
d52937d
Give directory a better name
MidhunSureshR Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions res/css/views/rooms/_RoomHeader.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ Please see LICENSE files in the repository root for full details.
padding: var(--cpd-space-1-5x);
cursor: pointer;
user-select: none;
font: var(--cpd-font-body-sm-medium);

/* RoomAvatar doesn't pass classes down to avatar
So set style here
Expand All @@ -83,6 +84,12 @@ Please see LICENSE files in the repository root for full details.
color: $primary-content;
background: var(--cpd-color-bg-subtle-primary);
}

&.mx_FacePile_toggled {
background: var(--cpd-color-bg-success-subtle);
color: var(--cpd-color-text-action-accent);
font: var(--cpd-font-body-sm-semibold);
}
}

.mx_RoomHeader .mx_BaseAvatar {
Expand All @@ -93,3 +100,7 @@ Please see LICENSE files in the repository root for full details.
/* Workaround for https://github.com/element-hq/compound/issues/331 */
min-width: 240px;
}

.mx_RoomHeader .mx_RoomHeader_toggled {
color: var(--cpd-color-icon-accent-primary);
}
2 changes: 1 addition & 1 deletion src/components/structures/RoomView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
import RoomPreviewCard from "../views/rooms/RoomPreviewCard";
import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
import AuxPanel from "../views/rooms/AuxPanel";
import RoomHeader from "../views/rooms/RoomHeader";
import RoomHeader from "../views/rooms/RoomHeader/RoomHeader";
import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
import EffectsOverlay from "../views/elements/EffectsOverlay";
import { containsEmoji } from "../../effects/utils";
Expand Down
2 changes: 1 addition & 1 deletion src/components/structures/WaitingForThirdPartyRoomView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";

import ResizeNotifier from "../../utils/ResizeNotifier";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import RoomHeader from "../views/rooms/RoomHeader";
import RoomHeader from "../views/rooms/RoomHeader/RoomHeader.tsx";
import ScrollPanel from "./ScrollPanel";
import EventTileBubble from "../views/messages/EventTileBubble";
import NewRoomIntro from "../views/rooms/NewRoomIntro";
Expand Down
11 changes: 10 additions & 1 deletion src/components/views/elements/FacePile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ Please see LICENSE files in the repository root for full details.
import React, { FC, HTMLAttributes, ReactNode } from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { AvatarStack, Tooltip } from "@vector-im/compound-web";
import classNames from "classnames";

import MemberAvatar from "../avatars/MemberAvatar";
import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
import { useToggled } from "../rooms/RoomHeader/toggle/useToggled";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";

interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
members: RoomMember[];
Expand Down Expand Up @@ -57,8 +60,14 @@ const FacePile: FC<IProps> = ({
</>
);

const toggled = useToggled(RightPanelPhases.MemberList);
const classes = classNames({
mx_FacePile: true,
mx_FacePile_toggled: toggled,
});

const content = (
<AccessibleButton {...props} className="mx_FacePile" onClick={onClick ?? null}>
<AccessibleButton {...props} className={classes} onClick={onClick ?? null}>
<AvatarStack>{pileContents}</AvatarStack>
{children}
</AccessibleButton>
Expand Down
Loading
Loading