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

Commit

Permalink
Allow ending polls (#7305)
Browse files Browse the repository at this point in the history
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
  • Loading branch information
andybalaam and t3chguy committed Dec 8, 2021
1 parent 697b5d2 commit 2b52e17
Show file tree
Hide file tree
Showing 12 changed files with 2,817 additions and 683 deletions.
4 changes: 4 additions & 0 deletions res/css/views/context_menus/_MessageContextMenu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
}

.mx_MessageContextMenu_iconEndPoll::before {
mask-image: url('$(res)/img/element-icons/check-white.svg');
}

.mx_MessageContextMenu_iconForward::before {
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
}
Expand Down
48 changes: 33 additions & 15 deletions res/css/views/messages/_MPollBody.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,17 @@ limitations under the License.
border: 1px solid $quinary-content;
border-radius: 8px;
margin-bottom: 16px;
padding: 6px;
padding: 6px 12px;
max-width: 550px;
background-color: $background;

.mx_StyledRadioButton {
.mx_StyledRadioButton, .mx_MPollBody_endedOption {
margin-bottom: 8px;
}

.mx_StyledRadioButton_content {
.mx_StyledRadioButton_content, .mx_MPollBody_endedOption {
padding-top: 2px;
margin-right: 0px;
}

.mx_StyledRadioButton_spacer {
Expand All @@ -73,7 +74,7 @@ limitations under the License.
}

.mx_MPollBody_popularityBackground {
width: calc(100% - 6px);
width: 100%;
height: 8px;
margin-right: 12px;
border-radius: 8px;
Expand Down Expand Up @@ -102,20 +103,37 @@ limitations under the License.
}
}

.mx_StyledRadioButton_checked input[type="radio"] + div {
border-width: 2px;
border-color: $accent;
background-color: $accent;
background-image: url('$(res)/img/element-icons/check-white.svg');
background-size: 12px;
background-repeat: no-repeat;
background-position: center;

div {
visibility: hidden;
.mx_StyledRadioButton_checked, .mx_MPollBody_endedOptionWinner {
input[type="radio"] + div {
border-width: 2px;
border-color: $accent;
background-color: $accent;
background-image: url('$(res)/img/element-icons/check-white.svg');
background-size: 12px;
background-repeat: no-repeat;
background-position: center;

div {
visibility: hidden;
}
}
}

.mx_MPollBody_endedOptionWinner .mx_MPollBody_optionDescription .mx_MPollBody_optionVoteCount::before {
content: '';
position: relative;
display: inline-block;
margin-right: 4px;
top: 2px;
height: 12px;
width: 12px;
background-color: $accent;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url('$(res)/img/element-icons/trophy.svg');
}

.mx_MPollBody_totalVotes {
color: $secondary-content;
font-size: $font-12px;
Expand Down
3 changes: 3 additions & 0 deletions res/img/element-icons/trophy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions src/components/views/context_menus/MessageContextMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ import { IPosition, ChevronFace } from '../../structures/ContextMenu';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
import { POLL_START_EVENT_TYPE } from '../../../polls/consts';
import EndPollDialog from '../dialogs/EndPollDialog';
import { Relations } from 'matrix-js-sdk/src/models/relations';
import { isPollEnded } from '../messages/MPollBody';

export function canCancel(eventStatus: EventStatus): boolean {
return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
Expand Down Expand Up @@ -68,6 +72,11 @@ interface IProps extends IPosition {
onFinished(): void;
/* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
onCloseDialog?(): void;
getRelationsForEvent?: (
eventId: string,
relationType: string,
eventType: string
) => Relations;
}

interface IState {
Expand Down Expand Up @@ -123,6 +132,14 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
}

private canEndPoll(mxEvent: MatrixEvent): boolean {
return (
mxEvent.getType() === POLL_START_EVENT_TYPE.name &&
this.state.canRedact &&
!isPollEnded(mxEvent, MatrixClientPeg.get(), this.props.getRelationsForEvent)
);
}

private onResendReactionsClick = (): void => {
for (const reaction of this.getUnsentReactions()) {
Resend.resend(reaction);
Expand Down Expand Up @@ -215,6 +232,16 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
this.closeMenu();
};

private onEndPollClick = (): void => {
const matrixClient = MatrixClientPeg.get();
Modal.createTrackedDialog('End Poll', '', EndPollDialog, {
matrixClient,
event: this.props.mxEvent,
getRelationsForEvent: this.props.getRelationsForEvent,
}, 'mx_Dialog_endPoll');
this.closeMenu();
};

private getReactions(filter: (e: MatrixEvent) => boolean): MatrixEvent[] {
const cli = MatrixClientPeg.get();
const room = cli.getRoom(this.props.mxEvent.getRoomId());
Expand Down Expand Up @@ -250,6 +277,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
const eventStatus = mxEvent.status;
const unsentReactionsCount = this.getUnsentReactions().length;

let endPollButton: JSX.Element;
let resendReactionsButton: JSX.Element;
let redactButton: JSX.Element;
let forwardButton: JSX.Element;
Expand Down Expand Up @@ -345,6 +373,16 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
/>
);

if (this.canEndPoll(mxEvent)) {
endPollButton = (
<IconizedContextMenuOption
iconClassName="mx_MessageContextMenu_iconEndPoll"
label={_t("End Poll")}
onClick={this.onEndPollClick}
/>
);
}

if (this.props.eventTileOps) { // this event is rendered using TextualBody
quoteButton = (
<IconizedContextMenuOption
Expand Down Expand Up @@ -415,6 +453,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
label={_t("View in room")}
onClick={this.viewInRoom}
/> }
{ endPollButton }
{ quoteButton }
{ forwardButton }
{ pinButton }
Expand Down
103 changes: 103 additions & 0 deletions src/components/views/dialogs/EndPollDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
/*
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 from "react";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Relations } from "matrix-js-sdk/src/models/relations";

import { _t } from "../../../languageHandler";
import { IDialogProps } from "./IDialogProps";
import QuestionDialog from "./QuestionDialog";
import { IPollEndContent, POLL_END_EVENT_TYPE, TEXT_NODE_TYPE } from "../../../polls/consts";
import { findTopAnswer } from "../messages/MPollBody";
import Modal from "../../../Modal";
import ErrorDialog from "./ErrorDialog";

interface IProps extends IDialogProps {
matrixClient: MatrixClient;
event: MatrixEvent;
onFinished: (success: boolean) => void;
getRelationsForEvent?: (
eventId: string,
relationType: string,
eventType: string
) => Relations;
}

export default class EndPollDialog extends React.Component<IProps> {
private onFinished = (endPoll: boolean) => {
const topAnswer = findTopAnswer(
this.props.event,
this.props.matrixClient,
this.props.getRelationsForEvent,
);

const message = (
(topAnswer === "")
? _t("The poll has ended. No votes were cast.")
: _t(
"The poll has ended. Top answer: %(topAnswer)s",
{ topAnswer },
)
);

if (endPoll) {
const endContent: IPollEndContent = {
[POLL_END_EVENT_TYPE.name]: {},
"m.relates_to": {
"event_id": this.props.event.getId(),
"rel_type": "m.reference",
},
[TEXT_NODE_TYPE.name]: message,
};

this.props.matrixClient.sendEvent(
this.props.event.getRoomId(), POLL_END_EVENT_TYPE.name, endContent,
).catch((e: any) => {
console.error("Failed to submit poll response event:", e);
Modal.createTrackedDialog(
'Failed to end poll',
'',
ErrorDialog,
{
title: _t("Failed to end poll"),
description: _t(
"Sorry, the poll did not end. Please try again."),
},
);
});
}
this.props.onFinished(endPoll);
};

render() {
return (
<QuestionDialog
title={_t("End Poll")}
description={
_t(
"Are you sure you want to end this poll? " +
"This will show the final results of the poll and " +
"stop people from being able to vote.",
)
}
button={_t("End Poll")}
onFinished={(endPoll: boolean) => this.onFinished(endPoll)}
/>
);
}
}
Loading

0 comments on commit 2b52e17

Please sign in to comment.