From 82ae39435c3ec45fdb3cc1f65bdfd68960b76ebc Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Mon, 29 Nov 2021 19:01:47 +0100 Subject: [PATCH] Only show core navigation elements (call/chat/notification/info) when a widget is maximised (#7114) Co-authored-by: J. Ryan Stinnett --- src/components/structures/RoomView.tsx | 23 +++++++-- src/components/structures/ThreadView.tsx | 7 +++ .../views/right_panel/RoomHeaderButtons.tsx | 49 +++++++++++++------ src/components/views/rooms/RoomHeader.tsx | 5 +- 4 files changed, 63 insertions(+), 21 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index e6780fce72..936454bbf3 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2179,7 +2179,21 @@ export class RoomView extends React.Component { // TODO-video MainSplitContentType.Video: // break; } - + let excludedRightPanelPhaseButtons = [RightPanelPhases.Timeline]; + let onAppsClick = this.onAppsClick; + let onForgetClick = this.onForgetClick; + let onSearchClick = this.onSearchClick; + if (this.state.mainSplitContentType === MainSplitContentType.MaximisedWidget) { + // Disable phase buttons and action button to have a simplified header when a widget is maximised + // and enable (not disable) the RightPanelPhases.Timeline button + excludedRightPanelPhaseButtons = [ + RightPanelPhases.ThreadPanel, + RightPanelPhases.PinnedMessages, + ]; + onAppsClick = null; + onForgetClick = null; + onSearchClick = null; + } return (
@@ -2192,12 +2206,13 @@ export class RoomView extends React.Component { searchInfo={searchInfo} oobData={this.props.oobData} inRoom={myMembership === 'join'} - onSearchClick={this.onSearchClick} - onForgetClick={(myMembership === "leave") ? this.onForgetClick : null} + onSearchClick={onSearchClick} + onForgetClick={(myMembership === "leave") ? onForgetClick : null} e2eStatus={this.state.e2eStatus} - onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null} + onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null} appsShown={this.state.showApps} onCallPlaced={this.onCallPlaced} + excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons} />
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 605c484157..2e618d6bec 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -43,6 +43,7 @@ import { _t } from '../../languageHandler'; import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu'; import RightPanelStore from '../../stores/RightPanelStore'; import SettingsStore from '../../settings/SettingsStore'; +import { WidgetLayoutStore } from '../../stores/widgets/WidgetLayoutStore'; interface IProps { room: Room; @@ -209,6 +210,12 @@ export default class ThreadView extends React.Component { if (!SettingsStore.getValue("feature_maximised_widgets")) { previousPhase = RightPanelPhases.ThreadPanel; } + + // change the previous phase to the threadPanel in case there is no maximised widget anymore + if (!WidgetLayoutStore.instance.hasMaximisedWidget(this.props.room)) { + previousPhase = RightPanelPhases.ThreadPanel; + } + // Make sure the previous Phase is always one of the two: Timeline or ThreadPanel if (![RightPanelPhases.ThreadPanel, RightPanelPhases.Timeline].includes(previousPhase)) { previousPhase = RightPanelPhases.ThreadPanel; diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 5405689fb3..7e8ce5edf9 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -81,6 +81,7 @@ const TimelineCardHeaderButton = ({ room, isHighlighted, onClick }) => { interface IProps { room?: Room; + excludedRightPanelPhaseButtons?: Array; } @replaceableComponent("views.right_panel.RoomHeaderButtons") @@ -150,38 +151,54 @@ export default class RoomHeaderButtons extends HeaderButtons { }; public renderButtons() { - return <> + const rightPanelPhaseButtons: Map = new Map(); + + rightPanelPhaseButtons.set(RightPanelPhases.PinnedMessages, + onClick={this.onPinnedMessagesClicked} />, + ); + rightPanelPhaseButtons.set(RightPanelPhases.Timeline, - { SettingsStore.getValue("feature_thread") && } + onClick={this.onTimelineCardClicked} />, + ); + rightPanelPhaseButtons.set(RightPanelPhases.ThreadPanel, + SettingsStore.getValue("feature_thread") + ? + : null, + ); + rightPanelPhaseButtons.set(RightPanelPhases.NotificationPanel, + analytics={['Right Panel', 'Notification List Button', 'click']} />, + ); + rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary, + analytics={['Right Panel', 'Room Summary Button', 'click']} />, + ); + + return <> + { + Array.from(rightPanelPhaseButtons.keys()).map((phase) => + ( this.props.excludedRightPanelPhaseButtons.includes(phase) + ? null + : rightPanelPhaseButtons.get(phase))) + } ; } } diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 26b101d3e3..2fda3decad 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -39,6 +39,7 @@ import { SearchScope } from './SearchBar'; import { ContextMenuTooltipButton } from '../../structures/ContextMenu'; import RoomContextMenu from "../context_menus/RoomContextMenu"; import { contextMenuBelow } from './RoomTile'; +import { RightPanelPhases } from '../../../stores/RightPanelStorePhases'; export interface ISearchInfo { searchTerm: string; @@ -57,6 +58,7 @@ interface IProps { e2eStatus: E2EStatus; appsShown: boolean; searchInfo: ISearchInfo; + excludedRightPanelPhaseButtons?: Array; } interface IState { @@ -68,6 +70,7 @@ export default class RoomHeader extends React.Component { static defaultProps = { editing: false, inRoom: false, + excludedRightPanelPhaseButtons: [], }; constructor(props, context) { @@ -263,7 +266,7 @@ export default class RoomHeader extends React.Component { { searchStatus } { topicElement } { rightRow } - +
);