Merge branch 'develop' of https://github.com/oliver-pham/matrix-react…

…-sdk into issue-19180 CI failed due to missing updates from branch 'develop'
matrix-org · Oct 2, 2021 · dd41dc4 · dd41dc4
2 parents 81452ba + 9f26c1c
commit dd41dc4
Show file tree

Hide file tree

Showing 32 changed files with 469 additions and 270 deletions.
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
@@ -122,7 +122,7 @@ limitations under the License.
                 float: right;
                 font-size: $font-12px;
                 line-height: $font-22px;
-                color: $muted-fg-color;
+                color: $secondary-content;
             }
         }
 

diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -39,7 +39,7 @@ limitations under the License.
             &.mx_Waveform_bar_100pct {
                 // Small animation to remove the mechanical feel of progress
                 transition: background-color 250ms ease;
-                background-color: $message-body-panel-fg-color;
+                background-color: $secondary-content;
             }
         }
     }

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
@@ -28,7 +28,7 @@ limitations under the License.
     .mx_InviteDialog_editor {
         flex: 1;
         width: 100%; // Needed to make the Field inside grow
-        background-color: $user-tile-hover-bg-color;
+        background-color: $header-panel-bg-color;
         border-radius: 4px;
         min-height: 25px;
         padding-left: 8px;
@@ -167,7 +167,7 @@ limitations under the License.
     padding: 5px 10px;
 
     &:hover {
-        background-color: $user-tile-hover-bg-color;
+        background-color: $header-panel-bg-color;
         border-radius: 4px;
     }
 
@@ -395,7 +395,7 @@ limitations under the License.
     left: -24px;
     padding-left: 24px;
     padding-right: 24px;
-    border-top: 1px solid $message-body-panel-bg-color;
+    border-top: 1px solid $quinary-content;
 
     display: flex;
     flex-direction: row;

diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -38,7 +38,7 @@ limitations under the License.
         }
 
         & + .mx_SettingsTab_subheading {
-            border-top: 1px solid $message-body-panel-bg-color;
+            border-top: 1px solid $quinary-content;
             margin-top: 0;
             padding-top: 24px;
         }

diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
@@ -63,7 +63,7 @@ limitations under the License.
     cursor: pointer;
 
     .mx_MFileBody_info_icon {
-        background-color: $message-body-panel-icon-bg-color;
+        background-color: $system;
         border-radius: 20px;
         display: inline-block;
         width: 32px;
@@ -78,7 +78,7 @@ limitations under the License.
             mask-position: center;
             mask-size: cover;
             mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
-            background-color: $message-body-panel-icon-fg-color;
+            background-color: $secondary-content;
             width: 15px;
             height: 15px;
 

diff --git a/res/css/views/messages/_MediaBody.scss b/res/css/views/messages/_MediaBody.scss
@@ -18,11 +18,11 @@ limitations under the License.
 // have unique styles).
 
 .mx_MediaBody {
-    background-color: $message-body-panel-bg-color;
+    background-color: $quinary-content;
     border-radius: 12px;
     max-width: 243px; // use max-width instead of width so it fits within right panels
 
-    color: $message-body-panel-fg-color;
+    color: $secondary-content;
     font-size: $font-14px;
     line-height: $font-24px;
 

diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
@@ -87,7 +87,7 @@ limitations under the License.
         }
 
         .mx_VerificationPanel_QRPhase_startOption {
-            background-color: $user-tile-hover-bg-color;
+            background-color: $header-panel-bg-color;
             border-radius: 10px;
             flex: 1;
             display: flex;

diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -206,23 +206,13 @@ $kbd-border-color: #000000;
 $tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: $primary-content;
 
-$interactive-tooltip-bg-color: $background;
-$interactive-tooltip-fg-color: $primary-content;
-
 $breadcrumb-placeholder-bg-color: #272c35;
 
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
-$message-body-panel-fg-color: $secondary-content;
-$message-body-panel-bg-color: $quinary-content;
-$message-body-panel-icon-bg-color: $system;
-$message-body-panel-icon-fg-color: $secondary-content;
-
 $voice-record-stop-border-color: $quaternary-content;
 $voice-record-waveform-incomplete-fg-color: $quaternary-content;
 $voice-record-icon-color: $quaternary-content;
-$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
-$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
+$voice-playback-button-bg-color: $system;
+$voice-playback-button-fg-color: $secondary-content;
 
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;

diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -202,18 +202,8 @@ $kbd-border-color: #000000;
 $tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
-$interactive-tooltip-bg-color: $base-color;
-$interactive-tooltip-fg-color: #ffffff;
-
 $breadcrumb-placeholder-bg-color: #272c35;
 
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
-$message-body-panel-fg-color: $secondary-fg-color;
-$message-body-panel-bg-color: #394049;
-$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: #21262C;
-
 // See non-legacy dark for variable information
 $voice-record-stop-border-color: #6F7882;
 $voice-record-waveform-incomplete-fg-color: #6F7882;

diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -326,26 +326,16 @@ $kbd-border-color: $reaction-row-button-border-color;
 $tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
-$interactive-tooltip-bg-color: #27303a;
-$interactive-tooltip-fg-color: #ffffff;
-
 $breadcrumb-placeholder-bg-color: #e8eef5;
 
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
-$message-body-panel-fg-color: $secondary-fg-color;
-$message-body-panel-bg-color: #E3E8F0;
-$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $system;
-
 // See non-legacy _light for variable information
 $voice-record-stop-symbol-color: #ff4b55;
 $voice-record-live-circle-color: #ff4b55;
 $voice-record-stop-border-color: #E3E8F0;
 $voice-record-waveform-incomplete-fg-color: #C1C6CD;
 $voice-record-icon-color: $tertiary-fg-color;
-$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
-$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
+$voice-playback-button-bg-color: $system;
+$voice-playback-button-fg-color: $secondary-content;
 
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;

diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
@@ -67,7 +67,6 @@ $roomheader-bg-color: var(--timeline-background-color);
 $roomtile-selected-bg-color: var(--roomlist-highlights-color);
 //
 // --sidebar-color
-$interactive-tooltip-bg-color: var(--sidebar-color);
 $groupFilterPanel-bg-color: var(--sidebar-color);
 $tooltip-timeline-bg-color: var(--sidebar-color);
 $dialog-backdrop-color: var(--sidebar-color-50pct);

diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -326,18 +326,8 @@ $inverted-bg-color: #27303a;
 $tooltip-timeline-bg-color: $inverted-bg-color;
 $tooltip-timeline-fg-color: $background;
 
-$interactive-tooltip-bg-color: #27303a;
-$interactive-tooltip-fg-color: $background;
-
 $breadcrumb-placeholder-bg-color: #e8eef5;
 
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
-$message-body-panel-fg-color: $secondary-content;
-$message-body-panel-bg-color: $quinary-content;
-$message-body-panel-icon-bg-color: $system;
-$message-body-panel-icon-fg-color: $secondary-content;
-
 // These two don't change between themes. They are the $warning-color, but we don't
 // want custom themes to affect them by accident.
 $voice-record-stop-symbol-color: #ff4b55;
@@ -346,8 +336,8 @@ $voice-record-live-circle-color: #ff4b55;
 $voice-record-stop-border-color: $quinary-content;
 $voice-record-waveform-incomplete-fg-color: $quaternary-content;
 $voice-record-icon-color: $tertiary-content;
-$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
-$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
+$voice-playback-button-bg-color: $system;
+$voice-playback-button-fg-color: $secondary-content;
 
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;

diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
@@ -226,6 +226,11 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
         }
     };
 
+    private onClick = (ev: React.MouseEvent) => {
+        // Don't allow clicks to escape the context menu wrapper
+        ev.stopPropagation();
+    };
+
     private onKeyDown = (ev: React.KeyboardEvent) => {
         // don't let keyboard handling escape the context menu
         ev.stopPropagation();
@@ -383,6 +388,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
                 className={classNames("mx_ContextualMenu_wrapper", this.props.wrapperClassName)}
                 style={{ ...position, ...wrapperStyle }}
                 onKeyDown={this.onKeyDown}
+                onClick={this.onClick}
                 onContextMenu={this.onContextMenuPreventBubbling}
             >
                 <div

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
@@ -48,6 +48,8 @@ import Spinner from "../views/elements/Spinner";
 import TileErrorBoundary from '../views/messages/TileErrorBoundary';
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
+import { logger } from 'matrix-js-sdk/src/logger';
+import { Action } from '../../dispatcher/actions';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -287,6 +289,15 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                 ghostReadMarkers,
             });
         }
+
+        const pendingEditItem = this.pendingEditItem;
+        if (!this.props.editState && this.props.room && pendingEditItem) {
+            defaultDispatcher.dispatch({
+                action: Action.EditEvent,
+                event: this.props.room.findEventById(pendingEditItem),
+                timelineRenderingType: this.context.timelineRenderingType,
+            });
+        }
     }
 
     private calculateRoomMembersCount = (): void => {
@@ -550,10 +561,14 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         return { nextEvent, nextTile };
     }
 
-    private get roomHasPendingEdit(): string {
-        return this.props.room && localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`);
+    private get pendingEditItem(): string | undefined {
+        try {
+            return localStorage.getItem(`mx_edit_room_${this.props.room.roomId}_${this.context.timelineRenderingType}`);
+        } catch (err) {
+            logger.error(err);
+            return undefined;
+        }
     }
-
     private getEventTiles(): ReactNode[] {
         this.eventNodes = {};
 
@@ -663,13 +678,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             }
         }
 
-        if (!this.props.editState && this.roomHasPendingEdit) {
-            defaultDispatcher.dispatch({
-                action: "edit_event",
-                event: this.props.room.findEventById(this.roomHasPendingEdit),
-            });
-        }
-
         if (grouper) {
             ret.push(...grouper.getTiles());
         }

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
@@ -48,8 +48,8 @@ import { Layout } from "../../settings/Layout";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RightPanelStore from "../../stores/RightPanelStore";
 import { haveTileForEvent } from "../views/rooms/EventTile";
-import RoomContext from "../../contexts/RoomContext";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
+import MatrixClientContext, { withMatrixClientHOC, MatrixClientProps } from "../../contexts/MatrixClientContext";
 import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
 import { Action } from "../../dispatcher/actions";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
@@ -91,6 +91,7 @@ import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
 import SpaceStore from "../../stores/SpaceStore";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -102,7 +103,7 @@ if (DEBUG) {
     debuglog = logger.log.bind(console);
 }
 
-interface IProps {
+interface IRoomProps extends MatrixClientProps {
     threepidInvite: IThreepidInvite;
     oobData?: IOOBData;
 
@@ -113,7 +114,7 @@ interface IProps {
     onRegistered?(credentials: IMatrixClientCreds): void;
 }
 
-export interface IState {
+export interface IRoomState {
     room?: Room;
     roomId?: string;
     roomAlias?: string;
@@ -187,10 +188,12 @@ export interface IState {
     // if it did we don't want the room to be marked as read as soon as it is loaded.
     wasContextSwitch?: boolean;
     editState?: EditorStateTransfer;
+    timelineRenderingType: TimelineRenderingType;
+    liveTimeline?: EventTimeline;
 }
 
 @replaceableComponent("structures.RoomView")
-export default class RoomView extends React.Component<IProps, IState> {
+export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private readonly dispatcherRef: string;
     private readonly roomStoreToken: EventSubscription;
     private readonly rightPanelStoreToken: EventSubscription;
@@ -247,6 +250,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             showDisplaynameChanges: true,
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
             dragCounter: 0,
+            timelineRenderingType: TimelineRenderingType.Room,
+            liveTimeline: undefined,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -336,7 +341,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         const roomId = RoomViewStore.getRoomId();
 
-        const newState: Pick<IState, any> = {
+        const newState: Pick<IRoomState, any> = {
             roomId,
             roomAlias: RoomViewStore.getRoomAlias(),
             roomLoading: RoomViewStore.isRoomLoading(),
@@ -808,7 +813,9 @@ export default class RoomView extends React.Component<IProps, IState> {
                 this.onSearchClick();
                 break;
 
-            case "edit_event": {
+            case Action.EditEvent: {
+                // Quit early if we're trying to edit events in wrong rendering context
+                if (payload.timelineRenderingType !== this.state.timelineRenderingType) return;
                 const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
                 this.setState({ editState }, () => {
                     if (payload.event) {
@@ -932,6 +939,10 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.updateE2EStatus(room);
         this.updatePermissions(room);
         this.checkWidgets(room);
+
+        this.setState({
+            liveTimeline: room.getLiveTimeline(),
+        });
     };
 
     private async calculateRecommendedVersion(room: Room) {
@@ -2086,3 +2097,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         );
     }
 }
+
+const RoomViewWithMatrixClient = withMatrixClientHOC(RoomView);
+export default RoomViewWithMatrixClient;