Replace forwarding UI with dialog
Replaces the old forwarding UI with a dialog based on designs from https://github.com/vector-im/element-web/issues/14690. Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend
parent
04d566e247
commit
b9b237fc9a
5 changed files with 338 additions and 4 deletions
|
|
@ -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";
|
||||
|
|
|
|||
115
res/css/views/dialogs/_ForwardDialog.scss
Normal file
115
res/css/views/dialogs/_ForwardDialog.scss
Normal file
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
};
|
||||
|
||||
|
|
|
|||
213
src/components/views/dialogs/ForwardDialog.tsx
Normal file
213
src/components/views/dialogs/ForwardDialog.tsx
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
import React, {useMemo, useState, useEffect} from "react";
|
||||
import classnames from "classnames";
|
||||
import {MatrixEvent} from "matrix-js-sdk/src/models/event";
|
||||
import {Room} from "matrix-js-sdk/src/models/room";
|
||||
import {MatrixClient} from "matrix-js-sdk/src/client";
|
||||
|
||||
import {_t} from "../../../languageHandler";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import {UIFeature} from "../../../settings/UIFeature";
|
||||
import {Layout} from "../../../settings/Layout";
|
||||
import {IDialogProps} from "./IDialogProps";
|
||||
import BaseDialog from "./BaseDialog";
|
||||
import {avatarUrlForUser} from "../../../Avatar";
|
||||
import EventTile from "../rooms/EventTile";
|
||||
import SearchBox from "../../structures/SearchBox";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
|
||||
import DMRoomMap from "../../../utils/DMRoomMap";
|
||||
import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
|
||||
|
||||
const AVATAR_SIZE = 30;
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
cli: MatrixClient;
|
||||
event: MatrixEvent;
|
||||
}
|
||||
|
||||
interface IEntryProps {
|
||||
room: Room;
|
||||
// Callback to forward the message to this room
|
||||
send(): Promise<void>;
|
||||
}
|
||||
|
||||
enum SendState {
|
||||
CanSend,
|
||||
Sending,
|
||||
Sent,
|
||||
Failed,
|
||||
}
|
||||
|
||||
const Entry: React.FC<IEntryProps> = ({ room, send }) => {
|
||||
const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
|
||||
|
||||
let label;
|
||||
let className;
|
||||
if (sendState === SendState.CanSend) {
|
||||
label = _t("Send");
|
||||
className = "mx_ForwardList_canSend";
|
||||
} else if (sendState === SendState.Sending) {
|
||||
label = _t("Sending…");
|
||||
className = "mx_ForwardList_sending";
|
||||
} else if (sendState === SendState.Sent) {
|
||||
label = _t("Sent");
|
||||
className = "mx_ForwardList_sent";
|
||||
} else {
|
||||
label = _t("Failed to send");
|
||||
className = "mx_ForwardList_sendFailed";
|
||||
}
|
||||
|
||||
return <div className="mx_ForwardList_entry">
|
||||
<RoomAvatar room={room} height={32} width={32} />
|
||||
<span className="mx_ForwardList_entry_name">{ room.name }</span>
|
||||
<AccessibleButton
|
||||
kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
|
||||
className={className}
|
||||
onClick={async () => {
|
||||
setSendState(SendState.Sending);
|
||||
try {
|
||||
await send();
|
||||
setSendState(SendState.Sent);
|
||||
} catch (e) {
|
||||
setSendState(SendState.Failed);
|
||||
}
|
||||
}}
|
||||
disabled={sendState !== SendState.CanSend}
|
||||
>
|
||||
{ label }
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
};
|
||||
|
||||
const ForwardDialog: React.FC<IProps> = ({ cli, event, onFinished }) => {
|
||||
const userId = cli.getUserId();
|
||||
const [profileInfo, setProfileInfo] = useState<any>({});
|
||||
useEffect(() => {
|
||||
cli.getProfileInfo(userId).then(info => setProfileInfo(info));
|
||||
}, [cli, userId]);
|
||||
|
||||
// For the message preview we fake the sender as ourselves
|
||||
const mockEvent = new MatrixEvent({
|
||||
type: "m.room.message",
|
||||
sender: userId,
|
||||
content: event.getContent(),
|
||||
unsigned: {
|
||||
age: 97,
|
||||
},
|
||||
event_id: "$9999999999999999999999999999999999999999999",
|
||||
room_id: "!999999999999999999:example.org",
|
||||
});
|
||||
mockEvent.sender = {
|
||||
name: profileInfo.displayname || userId,
|
||||
userId: userId,
|
||||
getAvatarUrl: (..._) => {
|
||||
return avatarUrlForUser(
|
||||
{ avatarUrl: profileInfo.avatar_url },
|
||||
AVATAR_SIZE, AVATAR_SIZE, "crop",
|
||||
);
|
||||
},
|
||||
getMxcAvatarUrl: () => profileInfo.avatar_url,
|
||||
};
|
||||
|
||||
const visibleRooms = useMemo(() => sortRooms(
|
||||
cli.getVisibleRooms().filter(
|
||||
room => room.getMyMembership() === "join" &&
|
||||
!(SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()),
|
||||
),
|
||||
), [cli]);
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
const lcQuery = query.toLowerCase();
|
||||
|
||||
const [rooms, dms] = visibleRooms.reduce((arr, room) => {
|
||||
if (room.name.toLowerCase().includes(lcQuery)) {
|
||||
if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
|
||||
arr[1].push(room);
|
||||
} else {
|
||||
arr[0].push(room);
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}, [[], []]);
|
||||
|
||||
const previewLayout = SettingsStore.getValue("layout");
|
||||
|
||||
return <BaseDialog
|
||||
title={ _t("Forward message") }
|
||||
className="mx_ForwardDialog"
|
||||
contentId="mx_ForwardList"
|
||||
onFinished={onFinished}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<div className={classnames("mx_ForwardDialog_preview", {
|
||||
"mx_IRCLayout": previewLayout == Layout.IRC,
|
||||
"mx_GroupLayout": previewLayout == Layout.Group,
|
||||
})}>
|
||||
<EventTile
|
||||
mxEvent={mockEvent}
|
||||
layout={previewLayout}
|
||||
enableFlair={SettingsStore.getValue(UIFeature.Flair)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mx_ForwardList">
|
||||
<h2>{ _t("Forward to") }</h2>
|
||||
<SearchBox
|
||||
className="mx_textinput_icon mx_textinput_search"
|
||||
placeholder={ _t("Filter your rooms and DMs") }
|
||||
onSearch={setQuery}
|
||||
autoComplete={true}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<AutoHideScrollbar className="mx_ForwardList_content" id="mx_ForwardList">
|
||||
{ rooms.length > 0 ? (
|
||||
<div className="mx_ForwardList_section">
|
||||
<h3>{ _t("Rooms") }</h3>
|
||||
{ rooms.map(room => {
|
||||
return <Entry
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : undefined }
|
||||
|
||||
{ dms.length > 0 ? (
|
||||
<div className="mx_ForwardList_section">
|
||||
<h3>{ _t("Direct Messages") }</h3>
|
||||
{ dms.map(room => {
|
||||
return <Entry
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
|
||||
/>;
|
||||
}) }
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{ rooms.length + dms.length < 1 ? <span className="mx_ForwardList_noResults">
|
||||
{ _t("No results") }
|
||||
</span> : undefined }
|
||||
</AutoHideScrollbar>
|
||||
</div>
|
||||
</BaseDialog>;
|
||||
};
|
||||
|
||||
export default ForwardDialog;
|
||||
|
|
@ -2187,6 +2187,11 @@
|
|||
"Report a bug": "Report a bug",
|
||||
"Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.",
|
||||
"Send feedback": "Send feedback",
|
||||
"Sending…": "Sending…",
|
||||
"Sent": "Sent",
|
||||
"Forward message": "Forward message",
|
||||
"Forward to": "Forward to",
|
||||
"Filter your rooms and DMs": "Filter your rooms and DMs",
|
||||
"Confirm abort of host creation": "Confirm abort of host creation",
|
||||
"Are you sure you wish to abort creation of the host? The process cannot be continued.": "Are you sure you wish to abort creation of the host? The process cannot be continued.",
|
||||
"Abort": "Abort",
|
||||
|
|
|
|||
Loading…
Reference in a new issue