Improved forwarding UI

res/css/_components.scss

@@ -74,6 +74,7 @@
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_FeedbackDialog.scss";
+@import "./views/dialogs/_ForwardDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_HostSignupDialog.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";

res/css/views/dialogs/_ForwardDialog.scss

@@ -0,0 +1,115 @@
+/*
+Copyright 2021 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ForwardDialog {
+ width: 520px;
+ color: $primary-fg-color;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 80vh;
+
+ .mx_ForwardDialog_preview {
+ max-height: 30%;
+ flex-shrink: 0;
+ overflow: scroll;
+
+ div {
+ pointer-events: none;
+ }
+
+ .mx_EventTile_msgOption {
+ display: none;
+ }
+ }
+
+ .mx_ForwardList {
+ display: contents;
+
+ .mx_SearchBox {
+ // To match the space around the title
+ margin: 0 0 15px 0;
+ flex-grow: 0;
+ }
+
+ .mx_ForwardList_content {
+ flex-grow: 1;
+ }
+
+ .mx_ForwardList_noResults {
+ display: block;
+ margin-top: 24px;
+ }
+
+ .mx_ForwardList_section {
+ &:not(:first-child) {
+ margin-top: 24px;
+ }
+
+ > h3 {
+ margin: 0;
+ color: $secondary-fg-color;
+ font-size: $font-12px;
+ font-weight: $font-semi-bold;
+ line-height: $font-15px;
+ }
+
+ .mx_ForwardList_entry {
+ display: flex;
+ margin-top: 12px;
+
+ .mx_BaseAvatar {
+ margin-right: 12px;
+ }
+
+ .mx_ForwardList_entry_name {
+ font-size: $font-15px;
+ line-height: 30px;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 12px;
+ }
+
+ .mx_AccessibleButton {
+ &.mx_ForwardList_sending, &.mx_ForwardList_sent {
+ &::before {
+ content: '';
+ display: inline-block;
+ background-color: $button-primary-bg-color;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+ margin-right: 5px;
+ }
+ }
+
+ &.mx_ForwardList_sending::before {
+ mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+ }
+
+ &.mx_ForwardList_sent::before {
+ mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+ }
+ }
+ }
+ }
+ }
+}

src/components/structures/RoomView.tsx

@@ -60,7 +60,6 @@ import ScrollPanel from "./ScrollPanel";
 import TimelinePanel from "./TimelinePanel";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
-import ForwardMessage from "../views/rooms/ForwardMessage";
 import SearchBar from "../views/rooms/SearchBar";
 import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
 import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
@@ -136,7 +135,6 @@ export interface IState {
  // Whether to highlight the event scrolled to
  isInitialEventHighlighted?: boolean;
  replyToEvent?: MatrixEvent;
- forwardingEvent?: MatrixEvent;
  numUnreadMessages: number;
  draggingFile: boolean;
  searching: boolean;
@@ -324,7 +322,6 @@ export default class RoomView extends React.Component<IProps, IState> {
  initialEventId: RoomViewStore.getInitialEventId(),
  isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
  replyToEvent: RoomViewStore.getQuotingEvent(),
- forwardingEvent: RoomViewStore.getForwardingEvent(),
  // we should only peek once we have a ready client
  shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
  showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", roomId),
@@ -1394,18 +1391,6 @@ export default class RoomView extends React.Component<IProps, IState> {
  dis.dispatch({ action: "open_room_settings" });
  };
 
- private onCancelClick = () => {
- console.log("updateTint from onCancelClick");
- this.updateTint();
- if (this.state.forwardingEvent) {
- dis.dispatch({
- action: 'forward_event',
- event: null,
- });
- }
- dis.fire(Action.FocusComposer);
- };
-
  private onAppsClick = () => {
  dis.dispatch({
  action: "appsDrawer",
@@ -1856,11 +1841,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
  let aux = null;
  let previewBar;
- let hideCancel = false;
- if (this.state.forwardingEvent) {
- aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
- } else if (this.state.searching) {
- hideCancel = true; // has own cancel
+ if (this.state.searching) {
  aux = <SearchBar
  searchInProgress={this.state.searchInProgress}
  onCancelClick={this.onCancelSearchClick}
@@ -1869,9 +1850,7 @@ export default class RoomView extends React.Component<IProps, IState> {
  />;
  } else if (showRoomUpgradeBar) {
  aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
- hideCancel = true;
  } else if (this.state.showingPinned) {
- hideCancel = true; // has own cancel
  aux = <PinnedEventsPanel room={this.state.room} onCancelClick={this.onPinnedClick} />;
  } else if (myMembership !== "join") {
  // We do have a room object for this room, but we're not currently in it.
@@ -1881,7 +1860,6 @@ export default class RoomView extends React.Component<IProps, IState> {
  inviterName = this.props.oobData.inviterName;
  }
  const invitedEmail = this.props.threepidInvite?.toEmail;
- hideCancel = true;
  previewBar = (
  <RoomPreviewBar
  onJoinClick={this.onJoinButtonClicked}
@@ -1999,11 +1977,8 @@ export default class RoomView extends React.Component<IProps, IState> {
  hideMessagePanel = true;
  }
 
- const shouldHighlight = this.state.isInitialEventHighlighted;
  let highlightedEventId = null;
- if (this.state.forwardingEvent) {
- highlightedEventId = this.state.forwardingEvent.getId();
- } else if (shouldHighlight) {
+ if (this.state.isInitialEventHighlighted) {
  highlightedEventId = this.state.initialEventId;
  }
 
@@ -2091,7 +2066,6 @@ export default class RoomView extends React.Component<IProps, IState> {
  onSearchClick={this.onSearchClick}
  onSettingsClick={this.onSettingsClick}
  onPinnedClick={this.onPinnedClick}
- onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
  onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
  onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
  e2eStatus={this.state.e2eStatus}

src/components/views/context_menus/MessageContextMenu.js

@@ -154,11 +154,11 @@ export default class MessageContextMenu extends React.Component {
  };
 
  onForwardClick = () => {
- if (this.props.onCloseDialog) this.props.onCloseDialog();
- dis.dispatch({
- action: 'forward_event',
+ const ForwardDialog = sdk.getComponent("dialogs.ForwardDialog");
+ Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
+ cli: MatrixClientPeg.get(),
  event: this.props.mxEvent,
- });
+ }, 'mx_Dialog_forwardmessage');
  this.closeMenu();
  };