Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 432373a

Browse files
t3chguyt3chguy
authored
Merge pull request #5999 from robintown/improved-forwarding-ui
2 parents 826d565 + 372f24f commit 432373a

File tree

14 files changed

+595
-140
lines changed

14 files changed

+595
-140
lines changed

‎res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
@import "./views/dialogs/_DevtoolsDialog.scss";
7777
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
7878
@import "./views/dialogs/_FeedbackDialog.scss";
79+
@import "./views/dialogs/_ForwardDialog.scss";
7980
@import "./views/dialogs/_GroupAddressPicker.scss";
8081
@import "./views/dialogs/_HostSignupDialog.scss";
8182
@import "./views/dialogs/_IncomingSasDialog.scss";

‎res/css/views/dialogs/_ForwardDialog.scss

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/*
2+
Copyright 2021 Robin Townsend <[email protected]>
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_ForwardDialog {
18+
width: 520px;
19+
color: $primary-fg-color;
20+
display: flex;
21+
flex-direction: column;
22+
flex-wrap: nowrap;
23+
min-height: 0;
24+
height: 80vh;
25+
26+
> h3 {
27+
margin: 0 0 6px;
28+
color: $secondary-fg-color;
29+
font-size: $font-12px;
30+
font-weight: $font-semi-bold;
31+
line-height: $font-15px;
32+
}
33+
34+
> .mx_ForwardDialog_preview {
35+
max-height: 30%;
36+
flex-shrink: 0;
37+
overflow: scroll;
38+
39+
div {
40+
pointer-events: none;
41+
}
42+
43+
.mx_EventTile_msgOption {
44+
display: none;
45+
}
46+
47+
// When forwarding messages from encrypted rooms, EventTile will complain
48+
// that our preview is unencrypted, which doesn't actually matter
49+
.mx_EventTile_e2eIcon_unencrypted {
50+
display: none;
51+
}
52+
53+
// We also hide download links to not encourage users to try interacting
54+
.mx_MFileBody_download {
55+
display: none;
56+
}
57+
}
58+
59+
> hr {
60+
width: 100%;
61+
border: none;
62+
border-top: 1px solid $input-border-color;
63+
margin: 12px 0;
64+
}
65+
66+
> .mx_ForwardList {
67+
display: contents;
68+
69+
.mx_SearchBox {
70+
// To match the space around the title
71+
margin: 0 0 15px 0;
72+
flex-grow: 0;
73+
}
74+
75+
.mx_ForwardList_content {
76+
flex-grow: 1;
77+
}
78+
79+
.mx_ForwardList_noResults {
80+
display: block;
81+
margin-top: 24px;
82+
}
83+
84+
.mx_ForwardList_results {
85+
&:not(:first-child) {
86+
margin-top: 24px;
87+
}
88+
89+
.mx_ForwardList_entry {
90+
display: flex;
91+
justify-content: space-between;
92+
height: 32px;
93+
padding: 6px;
94+
border-radius: 8px;
95+
96+
&:hover {
97+
background-color: $groupFilterPanel-bg-color;
98+
}
99+
100+
.mx_ForwardList_roomButton {
101+
display: flex;
102+
margin-right: 12px;
103+
min-width: 0;
104+
105+
.mx_DecoratedRoomAvatar {
106+
margin-right: 12px;
107+
}
108+
109+
.mx_ForwardList_entry_name {
110+
font-size: $font-15px;
111+
line-height: 30px;
112+
overflow: hidden;
113+
white-space: nowrap;
114+
text-overflow: ellipsis;
115+
margin-right: 12px;
116+
}
117+
}
118+
119+
.mx_ForwardList_sendButton {
120+
position: relative;
121+
122+
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
123+
// Hide the "Send" label while preserving button size
124+
visibility: hidden;
125+
}
126+
127+
.mx_ForwardList_sendIcon, .mx_NotificationBadge {
128+
position: absolute;
129+
}
130+
131+
.mx_NotificationBadge {
132+
// Match the failed to send indicator's color with the disabled button
133+
background-color: $button-danger-disabled-fg-color;
134+
}
135+
136+
&.mx_ForwardList_sending .mx_ForwardList_sendIcon {
137+
background-color: $button-primary-bg-color;
138+
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
139+
mask-position: center;
140+
mask-repeat: no-repeat;
141+
mask-size: 14px;
142+
width: 14px;
143+
height: 14px;
144+
}
145+
146+
&.mx_ForwardList_sent .mx_ForwardList_sendIcon {
147+
background-color: $button-primary-bg-color;
148+
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
149+
mask-position: center;
150+
mask-repeat: no-repeat;
151+
mask-size: 14px;
152+
width: 14px;
153+
height: 14px;
154+
}
155+
}
156+
}
157+
}
158+
}
159+
}

‎src/components/structures/RoomView.tsx

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ import ScrollPanel from "./ScrollPanel";
5959
import TimelinePanel from "./TimelinePanel";
6060
import ErrorBoundary from "../views/elements/ErrorBoundary";
6161
import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
62-
import ForwardMessage from "../views/rooms/ForwardMessage";
6362
import SearchBar from "../views/rooms/SearchBar";
6463
import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
6564
import AuxPanel from "../views/rooms/AuxPanel";
@@ -136,7 +135,6 @@ export interface IState {
136135
// Whether to highlight the event scrolled to
137136
isInitialEventHighlighted?: boolean;
138137
replyToEvent?: MatrixEvent;
139-
forwardingEvent?: MatrixEvent;
140138
numUnreadMessages: number;
141139
draggingFile: boolean;
142140
searching: boolean;
@@ -323,7 +321,6 @@ export default class RoomView extends React.Component<IProps, IState> {
323321
initialEventId: RoomViewStore.getInitialEventId(),
324322
isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
325323
replyToEvent: RoomViewStore.getQuotingEvent(),
326-
forwardingEvent: RoomViewStore.getForwardingEvent(),
327324
// we should only peek once we have a ready client
328325
shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
329326
showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
@@ -1410,18 +1407,6 @@ export default class RoomView extends React.Component<IProps, IState> {
14101407
dis.dispatch({ action: "open_room_settings" });
14111408
};
14121409

1413-
private onCancelClick = () => {
1414-
console.log("updateTint from onCancelClick");
1415-
this.updateTint();
1416-
if (this.state.forwardingEvent) {
1417-
dis.dispatch({
1418-
action: 'forward_event',
1419-
event: null,
1420-
});
1421-
}
1422-
dis.fire(Action.FocusComposer);
1423-
};
1424-
14251410
private onAppsClick = () => {
14261411
dis.dispatch({
14271412
action: "appsDrawer",
@@ -1837,11 +1822,7 @@ export default class RoomView extends React.Component<IProps, IState> {
18371822

18381823
let aux = null;
18391824
let previewBar;
1840-
let hideCancel = false;
1841-
if (this.state.forwardingEvent) {
1842-
aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
1843-
} else if (this.state.searching) {
1844-
hideCancel = true; // has own cancel
1825+
if (this.state.searching) {
18451826
aux = <SearchBar
18461827
searchInProgress={this.state.searchInProgress}
18471828
onCancelClick={this.onCancelSearchClick}
@@ -1850,7 +1831,6 @@ export default class RoomView extends React.Component<IProps, IState> {
18501831
/>;
18511832
} else if (showRoomUpgradeBar) {
18521833
aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
1853-
hideCancel = true;
18541834
} else if (myMembership !== "join") {
18551835
// We do have a room object for this room, but we're not currently in it.
18561836
// We may have a 3rd party invite to it.
@@ -1859,7 +1839,6 @@ export default class RoomView extends React.Component<IProps, IState> {
18591839
inviterName = this.props.oobData.inviterName;
18601840
}
18611841
const invitedEmail = this.props.threepidInvite?.toEmail;
1862-
hideCancel = true;
18631842
previewBar = (
18641843
<RoomPreviewBar
18651844
onJoinClick={this.onJoinButtonClicked}
@@ -1977,11 +1956,8 @@ export default class RoomView extends React.Component<IProps, IState> {
19771956
hideMessagePanel = true;
19781957
}
19791958

1980-
const shouldHighlight = this.state.isInitialEventHighlighted;
19811959
let highlightedEventId = null;
1982-
if (this.state.forwardingEvent) {
1983-
highlightedEventId = this.state.forwardingEvent.getId();
1984-
} else if (shouldHighlight) {
1960+
if (this.state.isInitialEventHighlighted) {
19851961
highlightedEventId = this.state.initialEventId;
19861962
}
19871963

@@ -2070,7 +2046,6 @@ export default class RoomView extends React.Component<IProps, IState> {
20702046
inRoom={myMembership === 'join'}
20712047
onSearchClick={this.onSearchClick}
20722048
onSettingsClick={this.onSettingsClick}
2073-
onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
20742049
onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
20752050
onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
20762051
e2eStatus={this.state.e2eStatus}

‎src/components/views/context_menus/MessageContextMenu.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { MenuItem } from "../../structures/ContextMenu";
3232
import { EventType } from "matrix-js-sdk/src/@types/event";
3333
import { replaceableComponent } from "../../../utils/replaceableComponent";
3434
import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
35+
import ForwardDialog from "../dialogs/ForwardDialog";
3536

3637
export function canCancel(eventStatus) {
3738
return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -157,10 +158,10 @@ export default class MessageContextMenu extends React.Component {
157158
};
158159

159160
onForwardClick = () => {
160-
if (this.props.onCloseDialog) this.props.onCloseDialog();
161-
dis.dispatch({
162-
action: 'forward_event',
161+
Modal.createTrackedDialog('Forward Message', '', ForwardDialog, {
162+
matrixClient: MatrixClientPeg.get(),
163163
event: this.props.mxEvent,
164+
permalinkCreator: this.props.permalinkCreator,
164165
});
165166
this.closeMenu();
166167
};

0 commit comments

Comments
 (0)