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

Add a pinned message badge under a pinned message (#118)

Browse source 
* Add pinned message badge for Modern Layout

* Add Bubble layout support

* Add thread support

* Add irc support

* Rename event tile badges

* Don't render footer when there is no reactions

* Add a test for `PinnedMessageBadge.tsx`

* Add a test in EventTile-test.tsx

* Add e2e test
This commit is contained in:
Florian Duros 2024-10-04 09:11:37 +02:00 • committed by GitHub
parent 2dbaf00e71
commit 70418f8f3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 189 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/views/rooms/EventTile.tsx
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import React, { createRef, forwardRef, MouseEvent, ReactNode } from "react";
import React, { createRef, forwardRef, JSX, MouseEvent, ReactNode } from "react";
import classNames from "classnames";
import {
EventStatus,
@ -76,6 +76,8 @@ import { ElementCall } from "../../../models/Call";
import { UnreadNotificationBadge } from "./NotificationBadge/UnreadNotificationBadge";
import { EventTileThreadToolbar } from "./EventTile/EventTileThreadToolbar";
import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
import PinningUtils from "../../../utils/PinningUtils.ts";
import { PinnedMessageBadge } from "../messages/PinnedMessageBadge.tsx";
export type GetRelationsForEvent = (
eventId: string,
@ -1123,6 +1125,11 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
const timestamp = showTimestamp && ts ? messageTimestamp : null;
let pinnedMessageBadge: JSX.Element | undefined;
if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) {
pinnedMessageBadge = <PinnedMessageBadge />;
}
let reactionsRow: JSX.Element | undefined;
if (!isRedacted) {
reactionsRow = (
@ -1134,6 +1141,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
);
}
// If we have reactions or a pinned message badge, we need a footer
const hasFooter = Boolean((reactionsRow && this.state.reactions) || pinnedMessageBadge);
const linkedTimestamp = !this.props.hideTimestamp ? (
<a
href={permalink}
@ -1239,7 +1249,13 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
</a>
{msgOption}
</div>,
reactionsRow,
hasFooter && (
<div className="mx_EventTile_footer" key="mx_EventTile_footer">
{(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
{reactionsRow}
{this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
</div>
),
],
);
}
@ -1428,14 +1444,25 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
{actionBar}
{this.props.layout === Layout.IRC && (
<>
{reactionsRow}
{hasFooter && (
<div className="mx_EventTile_footer">
{pinnedMessageBadge}
{reactionsRow}
</div>
)}
{this.renderThreadInfo()}
</>
)}
</div>
{this.props.layout !== Layout.IRC && (
<>
{reactionsRow}
{hasFooter && (
<div className="mx_EventTile_footer">
{(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
{reactionsRow}
{this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
</div>
)}
{this.renderThreadInfo()}
</>
)}