Further improve replies (#6396)
* Give reply tile an avatar Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve `in reply to` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix default avatar alignment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Simplifie some more code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Make replies lighter Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Give replies a hover effect Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve padding Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <robin@robin.town> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <robin@robin.town> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <robin@robin.town> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <robin@robin.town> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <robin@robin.town> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <robin@robin.town> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <robin@robin.town> * Fix i18n Signed-off-by: Robin Townsend <robin@robin.town> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Add a missing import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove unused import Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `this.state` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix sender profile confusion Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Robin Townsend <robin@robin.town> Co-authored-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Šimon Brandner
GitHub
parent
ad090ac4cd
commit
6b3098d8fe
4 changed files with 67 additions and 63 deletions
|
|
@ -15,13 +15,9 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||||
|
||||
import MImageBody from "./MImageBody";
|
||||
import { presentableTextForFile } from "../../../utils/FileUtils";
|
||||
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
|
||||
import SenderProfile from "./SenderProfile";
|
||||
import { _t } from "../../../languageHandler";
|
||||
|
||||
const FORCED_IMAGE_HEIGHT = 44;
|
||||
|
||||
|
|
@ -34,16 +30,6 @@ export default class MImageReplyBody extends MImageBody {
|
|||
return children;
|
||||
}
|
||||
|
||||
// Don't show "Download this_file.png ..."
|
||||
public getFileBody(): string {
|
||||
const sticker = this.props.mxEvent.getType() === EventType.Sticker;
|
||||
return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
|
||||
}
|
||||
|
||||
protected getBanner(content: IMediaEventContent): JSX.Element {
|
||||
return null; // we don't need a banner, nor have space for one
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.error) {
|
||||
return super.render();
|
||||
|
|
@ -51,17 +37,9 @@ export default class MImageReplyBody extends MImageBody {
|
|||
|
||||
const content = this.props.mxEvent.getContent<IMediaEventContent>();
|
||||
const thumbnail = this.messageContent(this.state.contentUrl, this.state.thumbUrl, content, FORCED_IMAGE_HEIGHT);
|
||||
const fileBody = this.getFileBody();
|
||||
const sender = <SenderProfile
|
||||
mxEvent={this.props.mxEvent}
|
||||
/>;
|
||||
|
||||
return <div className="mx_MImageReplyBody">
|
||||
{ thumbnail }
|
||||
<div className="mx_MImageReplyBody_info">
|
||||
<div className="mx_MImageReplyBody_sender">{ sender }</div>
|
||||
<div className="mx_MImageReplyBody_filename">{ fileBody }</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import MImageReplyBody from "../messages/MImageReplyBody";
|
|||
import { isVoiceMessage } from '../../../utils/EventUtils';
|
||||
import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
|
||||
import MFileBody from "../messages/MFileBody";
|
||||
import MemberAvatar from '../avatars/MemberAvatar';
|
||||
import MVoiceMessageBody from "../messages/MVoiceMessageBody";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { renderReplyTile } from "../../../events/EventTileFactory";
|
||||
|
|
@ -106,7 +107,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
|
|||
render() {
|
||||
const mxEvent = this.props.mxEvent;
|
||||
const msgType = mxEvent.getContent().msgtype;
|
||||
const evType = mxEvent.getType() as EventType;
|
||||
const evType = mxEvent.getType();
|
||||
|
||||
const {
|
||||
hasRenderer, isInfoMessage, isSeeingThroughMessageHiddenForModeration,
|
||||
|
|
@ -133,17 +134,21 @@ export default class ReplyTile extends React.PureComponent<IProps> {
|
|||
}
|
||||
|
||||
let sender;
|
||||
const needsSenderProfile = (
|
||||
!isInfoMessage
|
||||
&& msgType !== MsgType.Image
|
||||
&& evType !== EventType.Sticker
|
||||
&& evType !== EventType.RoomCreate
|
||||
);
|
||||
|
||||
if (needsSenderProfile) {
|
||||
sender = <SenderProfile
|
||||
mxEvent={mxEvent}
|
||||
/>;
|
||||
const hasOwnSender = isInfoMessage || evType === EventType.RoomCreate;
|
||||
if (!hasOwnSender) {
|
||||
sender = (
|
||||
<div className="mx_ReplyTile_sender">
|
||||
<MemberAvatar
|
||||
member={mxEvent.sender}
|
||||
fallbackUserId={mxEvent.getSender()}
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
<SenderProfile
|
||||
mxEvent={mxEvent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const msgtypeOverrides: Record<string, typeof React.Component> = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue