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

Further improve replies (#6396)

Browse source 
* 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 2022-11-29 08:49:43 +01:00 • committed by GitHub
parent ad090ac4cd
commit 6b3098d8fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/views/rooms/ReplyTile.tsx
View file

@ -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> = {