PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Make rooms in ForwardDialog clickable

Browse source 
…so that you can jump to a room easily once you've forwarded a message
there.

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend 2021-05-10 13:00:06 -04:00
parent bfba2b0b6f
commit 503301aa89
3 changed files with 58 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
res/css/views/dialogs/_ForwardDialog.scss
View file

@ -74,23 +74,30 @@ limitations under the License.
.mx_ForwardList_entry {
display: flex;
justify-content: space-between;
margin-top: 12px;
.mx_BaseAvatar {
.mx_ForwardList_roomButton {
display: flex;
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;
min-width: 0;
.mx_BaseAvatar {
margin-right: 12px;
}
.mx_ForwardList_entry_name {
font-size: $font-15px;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 12px;
}
}
.mx_AccessibleButton {
.mx_ForwardList_sendButton {
&.mx_ForwardList_sending, &.mx_ForwardList_sent {
&::before {
content: '';

53
src/components/views/dialogs/ForwardDialog.tsx
View file

@ -21,6 +21,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
import {MatrixClient} from "matrix-js-sdk/src/client";
import {_t} from "../../../languageHandler";
import dis from "../../../dispatcher/dispatcher";
import SettingsStore from "../../../settings/SettingsStore";
import {UIFeature} from "../../../settings/UIFeature";
import {Layout} from "../../../settings/Layout";
@ -50,8 +51,9 @@ interface IProps extends IDialogProps {
interface IEntryProps {
room: Room;
// Callback to forward the message to this room
send(): Promise<void>;
event: MatrixEvent;
cli: MatrixClient;
onFinished(success: boolean): void;
}
enum SendState {
@ -61,9 +63,26 @@ enum SendState {
Failed,
}
const Entry: React.FC<IEntryProps> = ({ room, send }) => {
const Entry: React.FC<IEntryProps> = ({ room, event, cli, onFinished }) => {
const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
const jumpToRoom = () => {
dis.dispatch({
action: "view_room",
room_id: room.roomId,
});
onFinished(true);
};
const send = async () => {
setSendState(SendState.Sending);
try {
await cli.sendEvent(room.roomId, event.getType(), event.getContent());
setSendState(SendState.Sent);
} catch (e) {
setSendState(SendState.Failed);
}
};
let button;
if (room.maySendMessage()) {
let label;
@ -85,16 +104,8 @@ const Entry: React.FC<IEntryProps> = ({ room, send }) => {
button =
<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);
}
}}
className={`mx_ForwardList_sendButton ${className}`}
onClick={send}
disabled={sendState !== SendState.CanSend}
>
{ label }
@ -103,7 +114,7 @@ const Entry: React.FC<IEntryProps> = ({ room, send }) => {
button =
<AccessibleTooltipButton
kind="primary_outline"
className={"mx_ForwardList_canSend"}
className="mx_ForwardList_sendButton mx_ForwardList_canSend"
onClick={() => {}}
disabled={true}
title={_t("You do not have permission to post to this room")}
@ -113,8 +124,10 @@ const Entry: React.FC<IEntryProps> = ({ room, send }) => {
}
return <div className="mx_ForwardList_entry">
<RoomAvatar room={room} height={32} width={32} />
<span className="mx_ForwardList_entry_name">{ room.name }</span>
<AccessibleButton className="mx_ForwardList_roomButton" onClick={jumpToRoom}>
<RoomAvatar room={room} height={32} width={32} />
<span className="mx_ForwardList_entry_name">{ room.name }</span>
</AccessibleButton>
{ button }
</div>;
};
@ -207,7 +220,9 @@ const ForwardDialog: React.FC<IProps> = ({ cli, event, permalinkCreator, onFinis
<Entry
key={room.roomId}
room={room}
send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
event={event}
cli={cli}
onFinished={onFinished}
/>,
) }
</div>
@ -220,7 +235,9 @@ const ForwardDialog: React.FC<IProps> = ({ cli, event, permalinkCreator, onFinis
<Entry
key={room.roomId}
room={room}
send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
event={event}
cli={cli}
onFinished={onFinished}
/>,
) }
</div>

10
test/components/views/dialogs/ForwardDialog-test.js
View file

@ -100,7 +100,7 @@ describe("ForwardDialog", () => {
cancelSend = reject;
}));
const firstButton = wrapper.find("Entry AccessibleButton").first();
const firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
expect(firstButton.text()).toBe("Send");
act(() => { firstButton.simulate("click"); });
@ -113,8 +113,8 @@ describe("ForwardDialog", () => {
});
expect(firstButton.text()).toBe("Failed to send");
const secondButton = wrapper.find("Entry AccessibleButton").at(1);
expect(secondButton.text()).toBe("Send");
const secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").at(1);
expect(secondButton.render().text()).toBe("Send");
act(() => { secondButton.simulate("click"); });
expect(secondButton.text()).toBe("Sending…");
@ -155,9 +155,9 @@ describe("ForwardDialog", () => {
const wrapper = await mountForwardDialog(undefined, rooms);
const firstButton = wrapper.find("Entry AccessibleButton").first();
const firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
expect(firstButton.prop("disabled")).toBe(true);
const secondButton = wrapper.find("Entry AccessibleButton").last();
const secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").last();
expect(secondButton.prop("disabled")).toBe(false);
});
});