Remove topic from new room header and expand right panel topic (#12842)
* Remove topic from new Room Header Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Hide topic edit in right panel unless user has permission to edit Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Expand right panel room topic by default Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix text align of topic in right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix topic colour in right panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Exclude `Add topic` from text-align Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Don't show `Add topic` if !perms Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/24763/head
Michael Telatynski
GitHub
parent
2defb1041e
commit
fae5bf1612
|
|
@ -38,6 +38,5 @@ test.describe("Create Room", () => {
|
|||
await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
await expect(header).toContainText(name);
|
||||
await expect(header).toContainText(topic);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -53,12 +53,14 @@ limitations under the License.
|
|||
|
||||
.mx_RoomSummaryCard_topic {
|
||||
padding: 0 12px;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
|
||||
.mx_Box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_topic_container {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,31 +63,6 @@ limitations under the License.
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_topic {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: all var(--transition-standard) ease 0.1s;
|
||||
/* Emojis are rendered a bit bigger than text in the timeline
|
||||
Make them compact/the same size as text here */
|
||||
.mx_Emoji {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader:hover,
|
||||
.mx_RoomHeader:focus-within {
|
||||
.mx_RoomHeader_topic {
|
||||
/* height needed to compute the transition, it equals to the `line-height`
|
||||
value in pixels */
|
||||
height: calc($font-13px * 1.5);
|
||||
opacity: 1;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader_icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -301,17 +301,24 @@ const onRoomSettingsClick = (ev: Event): void => {
|
|||
};
|
||||
|
||||
const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
|
||||
const topic = useTopic(room);
|
||||
const body = topicToHtml(topic?.text, topic?.html);
|
||||
|
||||
const canEditTopic = useRoomState(room, (state) =>
|
||||
state.maySendStateEvent(EventType.RoomTopic, room.client.getSafeUserId()),
|
||||
);
|
||||
const onEditClick = (e: SyntheticEvent): void => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
defaultDispatcher.dispatch({ action: "open_room_settings" });
|
||||
};
|
||||
|
||||
if (!body && !canEditTopic) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!body) {
|
||||
return (
|
||||
<Flex
|
||||
|
|
@ -365,7 +372,7 @@ const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null
|
|||
<ChevronDownIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{expanded && (
|
||||
{expanded && canEditTopic && (
|
||||
<Box flex="1" className="mx_RoomSummaryCard_topic_edit">
|
||||
<Link kind="primary" onClick={onEditClick}>
|
||||
<Text size="sm" weight="regular">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/Ro
|
|||
|
||||
import { useRoomName } from "../../../hooks/useRoomName";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import { useTopic } from "../../../hooks/room/useTopic";
|
||||
import { useAccountData } from "../../../hooks/useAccountData";
|
||||
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
|
||||
import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
|
||||
|
|
@ -49,7 +48,6 @@ import { useRoomState } from "../../../hooks/useRoomState";
|
|||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import { formatCount } from "../../../utils/FormattingUtils";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import { Linkify, topicToHtml } from "../../../HtmlUtils";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
|
||||
import { RoomKnocksBar } from "./RoomKnocksBar";
|
||||
|
|
@ -71,7 +69,6 @@ export default function RoomHeader({
|
|||
const client = useMatrixClientContext();
|
||||
|
||||
const roomName = useRoomName(room);
|
||||
const roomTopic = useTopic(room);
|
||||
const roomState = useRoomState(room);
|
||||
|
||||
const members = useRoomMembers(room, 2500);
|
||||
|
|
@ -117,11 +114,6 @@ export default function RoomHeader({
|
|||
|
||||
const notificationsEnabled = useFeatureEnabled("feature_notifications");
|
||||
|
||||
const roomTopicBody = useMemo(
|
||||
() => topicToHtml(roomTopic?.text, roomTopic?.html),
|
||||
[roomTopic?.html, roomTopic?.text],
|
||||
);
|
||||
|
||||
const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
|
||||
|
||||
const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]);
|
||||
|
|
@ -310,15 +302,6 @@ export default function RoomHeader({
|
|||
</Tooltip>
|
||||
)}
|
||||
</BodyText>
|
||||
{roomTopic && (
|
||||
<BodyText
|
||||
as="div"
|
||||
size="sm"
|
||||
className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
|
||||
>
|
||||
<Linkify>{roomTopicBody}</Linkify>
|
||||
</BodyText>
|
||||
)}
|
||||
</Box>
|
||||
</button>
|
||||
</ReleaseAnnouncement>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ describe("<RoomSummaryCard />", () => {
|
|||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("has button to edit topic when expanded", () => {
|
||||
it("has button to edit topic", () => {
|
||||
room.currentState.setStateEvents([
|
||||
new MatrixEvent({
|
||||
type: "m.room.topic",
|
||||
|
|
@ -138,7 +138,6 @@ describe("<RoomSummaryCard />", () => {
|
|||
}),
|
||||
]);
|
||||
const { container, getByText } = getComponent();
|
||||
fireEvent.click(screen.getByText("This is the room's topic."));
|
||||
expect(getByText("Edit")).toBeInTheDocument();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
|
||||
exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-labelledby="room-summary-panel-tab"
|
||||
|
|
@ -893,7 +893,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
|
|||
</span>
|
||||
</section>
|
||||
<section
|
||||
class="mx_Flex mx_RoomSummaryCard_topic mx_RoomSummaryCard_topic_collapsed"
|
||||
class="mx_Flex mx_RoomSummaryCard_topic"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
|
||||
>
|
||||
<div
|
||||
|
|
@ -923,6 +923,22 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
|
|||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
|
||||
style="--mx-box-flex: 1;"
|
||||
>
|
||||
<a
|
||||
class="_link_1mzip_17"
|
||||
data-kind="primary"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
|
||||
>
|
||||
Edit
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ import {
|
|||
fireEvent,
|
||||
getAllByLabelText,
|
||||
getByLabelText,
|
||||
getByRole,
|
||||
getByText,
|
||||
queryAllByLabelText,
|
||||
queryByLabelText,
|
||||
|
|
@ -105,25 +104,6 @@ describe("RoomHeader", () => {
|
|||
expect(container).toHaveTextContent(ROOM_ID);
|
||||
});
|
||||
|
||||
it("renders the room topic", async () => {
|
||||
const TOPIC = "Hello World! http://element.io";
|
||||
|
||||
const roomTopic = new MatrixEvent({
|
||||
type: EventType.RoomTopic,
|
||||
event_id: "$00002",
|
||||
room_id: room.roomId,
|
||||
sender: "@alice:example.com",
|
||||
origin_server_ts: 1,
|
||||
content: { topic: TOPIC },
|
||||
state_key: "",
|
||||
});
|
||||
await room.addLiveEvents([roomTopic]);
|
||||
|
||||
const { container } = render(<RoomHeader room={room} />, getWrapper());
|
||||
expect(container).toHaveTextContent(TOPIC);
|
||||
expect(getByRole(container, "link")).toHaveTextContent("http://element.io");
|
||||
});
|
||||
|
||||
it("opens the room summary", async () => {
|
||||
const { container } = render(<RoomHeader room={room} />, getWrapper());
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue