mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 18:25:49 +03:00
Merge pull request #5563 from matrix-org/travis/fosdem/layout-fixes
Update AuxPanel and related buttons when widgets change or on reload
This commit is contained in:
commit
2af14cde42
1 changed files with 50 additions and 20 deletions
|
@ -21,15 +21,15 @@ limitations under the License.
|
||||||
// - Search results component
|
// - Search results component
|
||||||
// - Drag and drop
|
// - Drag and drop
|
||||||
|
|
||||||
import React, {createRef} from 'react';
|
import React, { createRef } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {Room} from "matrix-js-sdk/src/models/room";
|
import { Room } from "matrix-js-sdk/src/models/room";
|
||||||
import {MatrixEvent} from "matrix-js-sdk/src/models/event";
|
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||||
import {EventSubscription} from "fbemitter";
|
import { EventSubscription } from "fbemitter";
|
||||||
|
|
||||||
import shouldHideEvent from '../../shouldHideEvent';
|
import shouldHideEvent from '../../shouldHideEvent';
|
||||||
import {_t} from '../../languageHandler';
|
import { _t } from '../../languageHandler';
|
||||||
import {RoomPermalinkCreator} from '../../utils/permalinks/Permalinks';
|
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
|
||||||
import ResizeNotifier from '../../utils/ResizeNotifier';
|
import ResizeNotifier from '../../utils/ResizeNotifier';
|
||||||
import ContentMessages from '../../ContentMessages';
|
import ContentMessages from '../../ContentMessages';
|
||||||
import Modal from '../../Modal';
|
import Modal from '../../Modal';
|
||||||
|
@ -40,8 +40,8 @@ import Tinter from '../../Tinter';
|
||||||
import rateLimitedFunc from '../../ratelimitedfunc';
|
import rateLimitedFunc from '../../ratelimitedfunc';
|
||||||
import * as ObjectUtils from '../../ObjectUtils';
|
import * as ObjectUtils from '../../ObjectUtils';
|
||||||
import * as Rooms from '../../Rooms';
|
import * as Rooms from '../../Rooms';
|
||||||
import eventSearch, {searchPagination} from '../../Searching';
|
import eventSearch, { searchPagination } from '../../Searching';
|
||||||
import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key} from '../../Keyboard';
|
import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key } from '../../Keyboard';
|
||||||
import MainSplit from './MainSplit';
|
import MainSplit from './MainSplit';
|
||||||
import RightPanel from './RightPanel';
|
import RightPanel from './RightPanel';
|
||||||
import RoomViewStore from '../../stores/RoomViewStore';
|
import RoomViewStore from '../../stores/RoomViewStore';
|
||||||
|
@ -50,13 +50,13 @@ import WidgetEchoStore from '../../stores/WidgetEchoStore';
|
||||||
import SettingsStore from "../../settings/SettingsStore";
|
import SettingsStore from "../../settings/SettingsStore";
|
||||||
import AccessibleButton from "../views/elements/AccessibleButton";
|
import AccessibleButton from "../views/elements/AccessibleButton";
|
||||||
import RightPanelStore from "../../stores/RightPanelStore";
|
import RightPanelStore from "../../stores/RightPanelStore";
|
||||||
import {haveTileForEvent} from "../views/rooms/EventTile";
|
import { haveTileForEvent } from "../views/rooms/EventTile";
|
||||||
import RoomContext from "../../contexts/RoomContext";
|
import RoomContext from "../../contexts/RoomContext";
|
||||||
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
||||||
import {E2EStatus, shieldStatusForRoom} from '../../utils/ShieldUtils';
|
import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
|
||||||
import {Action} from "../../dispatcher/actions";
|
import { Action } from "../../dispatcher/actions";
|
||||||
import {SettingLevel} from "../../settings/SettingLevel";
|
import { SettingLevel } from "../../settings/SettingLevel";
|
||||||
import {IMatrixClientCreds} from "../../MatrixClientPeg";
|
import { IMatrixClientCreds } from "../../MatrixClientPeg";
|
||||||
import ScrollPanel from "./ScrollPanel";
|
import ScrollPanel from "./ScrollPanel";
|
||||||
import TimelinePanel from "./TimelinePanel";
|
import TimelinePanel from "./TimelinePanel";
|
||||||
import ErrorBoundary from "../views/elements/ErrorBoundary";
|
import ErrorBoundary from "../views/elements/ErrorBoundary";
|
||||||
|
@ -67,16 +67,16 @@ import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
|
||||||
import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
|
import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
|
||||||
import AuxPanel from "../views/rooms/AuxPanel";
|
import AuxPanel from "../views/rooms/AuxPanel";
|
||||||
import RoomHeader from "../views/rooms/RoomHeader";
|
import RoomHeader from "../views/rooms/RoomHeader";
|
||||||
import {XOR} from "../../@types/common";
|
import { XOR } from "../../@types/common";
|
||||||
import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
|
import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
|
||||||
import EffectsOverlay from "../views/elements/EffectsOverlay";
|
import EffectsOverlay from "../views/elements/EffectsOverlay";
|
||||||
import {containsEmoji} from '../../effects/utils';
|
import { containsEmoji } from '../../effects/utils';
|
||||||
import {CHAT_EFFECTS} from '../../effects';
|
import { CHAT_EFFECTS } from '../../effects';
|
||||||
import { CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
import { CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
||||||
import WidgetStore from "../../stores/WidgetStore";
|
import WidgetStore from "../../stores/WidgetStore";
|
||||||
import {UPDATE_EVENT} from "../../stores/AsyncStore";
|
import { UPDATE_EVENT } from "../../stores/AsyncStore";
|
||||||
import Notifier from "../../Notifier";
|
import Notifier from "../../Notifier";
|
||||||
import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
|
import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
|
||||||
import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
|
import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
|
||||||
import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
|
import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
|
||||||
|
|
||||||
|
@ -282,6 +282,7 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
private checkWidgets = (room) => {
|
private checkWidgets = (room) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top).length > 0,
|
hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top).length > 0,
|
||||||
|
showApps: this.shouldShowApps(room),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -419,11 +420,17 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
private onWidgetEchoStoreUpdate = () => {
|
private onWidgetEchoStoreUpdate = () => {
|
||||||
|
if (!this.state.room) return;
|
||||||
this.setState({
|
this.setState({
|
||||||
|
hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(this.state.room, Container.Top).length > 0,
|
||||||
showApps: this.shouldShowApps(this.state.room),
|
showApps: this.shouldShowApps(this.state.room),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
private onWidgetLayoutChange = () => {
|
||||||
|
this.onWidgetEchoStoreUpdate(); // we cheat here by calling the thing that matters
|
||||||
|
};
|
||||||
|
|
||||||
private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean) {
|
private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean) {
|
||||||
// if this is an unknown room then we're in one of three states:
|
// if this is an unknown room then we're in one of three states:
|
||||||
// - This is a room we can peek into (search engine) (we can /peek)
|
// - This is a room we can peek into (search engine) (we can /peek)
|
||||||
|
@ -489,7 +496,7 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
private shouldShowApps(room: Room) {
|
private shouldShowApps(room: Room) {
|
||||||
if (!BROWSER_SUPPORTS_SANDBOX) return false;
|
if (!BROWSER_SUPPORTS_SANDBOX || !room) return false;
|
||||||
|
|
||||||
// Check if user has previously chosen to hide the app drawer for this
|
// Check if user has previously chosen to hide the app drawer for this
|
||||||
// room. If so, do not show apps
|
// room. If so, do not show apps
|
||||||
|
@ -498,7 +505,10 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
|
|
||||||
// This is confusing, but it means to say that we default to the tray being
|
// This is confusing, but it means to say that we default to the tray being
|
||||||
// hidden unless the user clicked to open it.
|
// hidden unless the user clicked to open it.
|
||||||
return hideWidgetDrawer === "false";
|
const isManuallyShown = hideWidgetDrawer === "false";
|
||||||
|
|
||||||
|
const widgets = WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top);
|
||||||
|
return widgets.length > 0 || isManuallyShown;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -609,6 +619,13 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
|
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
|
||||||
WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
|
WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
|
||||||
|
|
||||||
|
if (this.state.room) {
|
||||||
|
WidgetLayoutStore.instance.off(
|
||||||
|
WidgetLayoutStore.emissionForRoom(this.state.room),
|
||||||
|
this.onWidgetLayoutChange,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.showReadReceiptsWatchRef) {
|
if (this.showReadReceiptsWatchRef) {
|
||||||
SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
|
SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
|
||||||
}
|
}
|
||||||
|
@ -836,6 +853,10 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
// called when state.room is first initialised (either at initial load,
|
// called when state.room is first initialised (either at initial load,
|
||||||
// after a successful peek, or after we join the room).
|
// after a successful peek, or after we join the room).
|
||||||
private onRoomLoaded = (room: Room) => {
|
private onRoomLoaded = (room: Room) => {
|
||||||
|
// Attach a widget store listener only when we get a room
|
||||||
|
WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);
|
||||||
|
this.onWidgetLayoutChange(); // provoke an update
|
||||||
|
|
||||||
this.calculatePeekRules(room);
|
this.calculatePeekRules(room);
|
||||||
this.updatePreviewUrlVisibility(room);
|
this.updatePreviewUrlVisibility(room);
|
||||||
this.loadMembersIfJoined(room);
|
this.loadMembersIfJoined(room);
|
||||||
|
@ -898,6 +919,15 @@ export default class RoomView extends React.Component<IProps, IState> {
|
||||||
if (!room || room.roomId !== this.state.roomId) {
|
if (!room || room.roomId !== this.state.roomId) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Detach the listener if the room is changing for some reason
|
||||||
|
if (this.state.room) {
|
||||||
|
WidgetLayoutStore.instance.off(
|
||||||
|
WidgetLayoutStore.emissionForRoom(this.state.room),
|
||||||
|
this.onWidgetLayoutChange,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
room: room,
|
room: room,
|
||||||
}, () => {
|
}, () => {
|
||||||
|
|
Loading…
Reference in a new issue