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

22
src/components/views/messages/MImageReplyBody.tsx
View file

@ -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>;
}
}