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

Fix thread summary layout for narrow right panel timeline (#7838)

Browse source
This commit is contained in:
J. Ryan Stinnett 2022-02-23 14:03:46 +00:00 • committed by GitHub
parent 5e76d988ca
commit d8ac7cf202
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 248 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
/*
Copyright 2015-2021 The Matrix.org Foundation C.I.C.
Copyright 2015 - 2022 The Matrix.org Foundation C.I.C.
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
@ -677,6 +677,12 @@ export default class EventTile extends React.Component<IProps, IState> {
<p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
);
} else if (this.state.threadReplyCount && this.props.mxEvent.isThreadRoot) {
let count: string | number = this.state.threadReplyCount;
if (!this.context.narrow) {
count = _t("%(count)s reply", {
count: this.state.threadReplyCount,
});
}
return (
<CardContext.Consumer>
{ context =>
@ -687,9 +693,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}}
>
<span className="mx_ThreadInfo_threads-amount">
{ _t("%(count)s reply", {
count: this.state.threadReplyCount,
}) }
{ count }
</span>
{ this.renderThreadLastMessagePreview() }
</div>

12
src/components/views/rooms/MessageComposer.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2015-2021 The Matrix.org Foundation C.I.C.
Copyright 2015 - 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -54,7 +54,6 @@ import { ButtonEvent } from '../elements/AccessibleButton';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
let instanceCount = 0;
const NARROW_MODE_BREAKPOINT = 500;
interface ISendButtonProps {
onClick: (ev: ButtonEvent) => void;
@ -88,7 +87,6 @@ interface IState {
haveRecording: boolean;
recordingTimeLeftSeconds?: number;
me?: RoomMember;
narrowMode?: boolean;
isMenuOpen: boolean;
isStickerPickerOpen: boolean;
showStickersButton: boolean;
@ -165,10 +163,9 @@ export default class MessageComposer extends React.Component<IProps, IState> {
private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry) => {
if (type === UI_EVENTS.Resize) {
const narrowMode = entry.contentRect.width <= NARROW_MODE_BREAKPOINT;
const { narrow } = this.context;
this.setState({
narrowMode,
isMenuOpen: !narrowMode ? false : this.state.isMenuOpen,
isMenuOpen: !narrow ? false : this.state.isMenuOpen,
isStickerPickerOpen: false,
});
}
@ -476,11 +473,10 @@ export default class MessageComposer extends React.Component<IProps, IState> {
isMenuOpen={this.state.isMenuOpen}
isStickerPickerOpen={this.state.isStickerPickerOpen}
menuPosition={menuPosition}
narrowMode={this.state.narrowMode}
relation={this.props.relation}
onRecordStartEndClick={() => {
this.voiceRecordingButton.current?.onRecordStartEndClick();
if (this.state.narrowMode) {
if (this.context.narrow) {
this.toggleButtonMenu();
}
}}

13
src/components/views/rooms/MessageComposerButtons.tsx
View file

@ -44,7 +44,6 @@ interface IProps {
isMenuOpen: boolean;
isStickerPickerOpen: boolean;
menuPosition: AboveLeftOf;
narrowMode?: boolean;
onRecordStartEndClick: () => void;
relation?: IEventRelation;
setStickerPickerOpen: (isStickerPickerOpen: boolean) => void;
@ -58,7 +57,7 @@ export const OverflowMenuContext = createContext<OverflowMenuCloser | null>(null
const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
const matrixClient: MatrixClient = useContext(MatrixClientContext);
const { room, roomId } = useContext(RoomContext);
const { room, roomId, narrow } = useContext(RoomContext);
if (props.haveRecording) {
return null;
@ -66,14 +65,14 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
let mainButtons: ReactElement[];
let moreButtons: ReactElement[];
if (props.narrowMode) {
if (narrow) {
mainButtons = [
emojiButton(props),
];
moreButtons = [
uploadButton(props, roomId),
showStickersButton(props),
voiceRecordingButton(props),
voiceRecordingButton(props, narrow),
pollButton(room, props.relation),
showLocationButton(props, room, roomId, matrixClient),
];
@ -84,7 +83,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
];
moreButtons = [
showStickersButton(props),
voiceRecordingButton(props),
voiceRecordingButton(props, narrow),
pollButton(room, props.relation),
showLocationButton(props, room, roomId, matrixClient),
];
@ -260,10 +259,10 @@ function showStickersButton(props: IProps): ReactElement {
);
}
function voiceRecordingButton(props: IProps): ReactElement {
function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement {
// XXX: recording UI does not work well in narrow mode, so hide for now
return (
props.narrowMode
narrow
? null
: <CollapsibleButton
key="voice_message_send"