Fixes following threads design implementation review (#7100)

This commit is contained in:
Germain 2021-11-11 11:00:18 +00:00 committed by GitHub
parent b8edebecc9
commit 1de9630e44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 280 additions and 115 deletions

View file

@ -31,6 +31,7 @@ interface IProps {
className?: string;
withoutScrollContainer?: boolean;
previousPhase?: RightPanelPhases;
previousPhaseLabel?: string;
closeLabel?: string;
onClose?(): void;
refireParams?;
@ -56,6 +57,7 @@ const BaseCard: React.FC<IProps> = ({
footer,
withoutScrollContainer,
previousPhase,
previousPhaseLabel,
children,
refireParams,
}) => {
@ -68,7 +70,8 @@ const BaseCard: React.FC<IProps> = ({
refireParams: refireParams,
});
};
backButton = <AccessibleButton className="mx_BaseCard_back" onClick={onBackClick} title={_t("Back")} />;
const label = previousPhaseLabel ?? _t("Back");
backButton = <AccessibleButton className="mx_BaseCard_back" onClick={onBackClick} title={label} />;
}
let closeButton;

View file

@ -33,6 +33,7 @@ import { useSettingValue } from "../../../hooks/useSettings";
import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
import { dispatchShowThreadsPanelEvent } from "../../../dispatcher/dispatch-actions/threads";
import SettingsStore from "../../../settings/SettingsStore";
import dis from "../../../dispatcher/dispatcher";
const ROOM_INFO_PHASES = [
RightPanelPhases.RoomSummary,
@ -72,6 +73,11 @@ interface IProps {
@replaceableComponent("views.right_panel.RoomHeaderButtons")
export default class RoomHeaderButtons extends HeaderButtons<IProps> {
private static readonly THREAD_PHASES = [
RightPanelPhases.ThreadPanel,
RightPanelPhases.ThreadView,
];
constructor(props: IProps) {
super(props, HeaderKind.Room);
}
@ -117,6 +123,17 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
this.setPhase(RightPanelPhases.PinnedMessages);
};
private onThreadsPanelClicked = () => {
if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
dis.dispatch({
action: Action.ToggleRightPanel,
type: "room",
});
} else {
dispatchShowThreadsPanelEvent();
}
};
public renderButtons() {
return <>
<PinnedMessagesHeaderButton
@ -127,11 +144,8 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
{ SettingsStore.getValue("feature_thread") && <HeaderButton
name="threadsButton"
title={_t("Threads")}
onClick={dispatchShowThreadsPanelEvent}
isHighlighted={this.isPhase([
RightPanelPhases.ThreadPanel,
RightPanelPhases.ThreadView,
])}
onClick={this.onThreadsPanelClicked}
isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
analytics={['Right Panel', 'Threads List Button', 'click']}
/> }
<HeaderButton

View file

@ -48,7 +48,6 @@ import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widget
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
import ExportDialog from "../dialogs/ExportDialog";
import { dispatchShowThreadsPanelEvent } from "../../../dispatcher/dispatch-actions/threads";
interface IProps {
room: Room;
@ -284,11 +283,6 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
{ _t("Export chat") }
</Button>
{ SettingsStore.getValue("feature_thread") && (
<Button className="mx_RoomSummaryCard_icon_threads" onClick={dispatchShowThreadsPanelEvent}>
{ _t("Show threads") }
</Button>
) }
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
{ _t("Share room") }
</Button>