Display started polls in timeline (without votes) (behind labs setting) (#7088)
* Display started polls in timeline (without votes) * Update i18n info * Keep original background colour of poll options, even on hover * Show full avatar above a poll message
This commit is contained in:
parent
8ea551fb6d
commit
431b69ee49
9 changed files with 229 additions and 5 deletions
res
src
components/views
i18n/strings
polls
utils
|
@ -182,6 +182,7 @@
|
|||
@import "./views/messages/_MImageReplyBody.scss";
|
||||
@import "./views/messages/_MJitsiWidgetEvent.scss";
|
||||
@import "./views/messages/_MNoticeBody.scss";
|
||||
@import "./views/messages/_MPollBody.scss";
|
||||
@import "./views/messages/_MStickerBody.scss";
|
||||
@import "./views/messages/_MTextBody.scss";
|
||||
@import "./views/messages/_MVideoBody.scss";
|
||||
|
|
109
res/css/views/messages/_MPollBody.scss
Normal file
109
res/css/views/messages/_MPollBody.scss
Normal file
|
@ -0,0 +1,109 @@
|
|||
/*
|
||||
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_MPollBody {
|
||||
margin-top: 8px;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: '';
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/poll.svg');
|
||||
}
|
||||
|
||||
.mx_MPollBody_option {
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding: 6px;
|
||||
max-width: 550px;
|
||||
background-color: $background;
|
||||
|
||||
.mx_StyledRadioButton {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton_content {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.mx_MPollBody_optionVoteCount {
|
||||
position: absolute;
|
||||
color: $secondary-content;
|
||||
right: 4px;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
|
||||
.mx_MPollBody_popularityBackground {
|
||||
width: calc(100% - 4px);
|
||||
height: 8px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
background-color: $system;
|
||||
|
||||
.mx_MPollBody_popularityAmount {
|
||||
width: 0%;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $quaternary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MPollBody_option:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_MPollBody_option_checked {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton_checked input[type="radio"] + div {
|
||||
border-width: 2px;
|
||||
border-color: $accent-color;
|
||||
background-color: $accent-color;
|
||||
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_totalVotes {
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
3
res/img/element-icons/check-white.svg
Normal file
3
res/img/element-icons/check-white.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.54541 5.8884L4.80299 9.24274L12.4545 1.36395" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
After (image error) Size: 248 B |
93
src/components/views/messages/MPollBody.tsx
Normal file
93
src/components/views/messages/MPollBody.tsx
Normal file
|
@ -0,0 +1,93 @@
|
|||
/*
|
||||
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 { _t } from '../../../languageHandler';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { IPollAnswer, IPollContent, POLL_START_EVENT_TYPE } from '../../../polls/consts';
|
||||
import StyledRadioButton from '../elements/StyledRadioButton';
|
||||
|
||||
// TODO: [andyb] Use extensible events library when ready
|
||||
const TEXT_NODE_TYPE = "org.matrix.msc1767.text";
|
||||
|
||||
interface IState {
|
||||
selected?: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.messages.MPollBody")
|
||||
export default class MPollBody extends React.Component<IBodyProps, IState> {
|
||||
constructor(props: IBodyProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
selected: null,
|
||||
};
|
||||
}
|
||||
|
||||
private selectOption(answerId: string) {
|
||||
this.setState({ selected: answerId });
|
||||
}
|
||||
|
||||
private onOptionSelected = (e: React.FormEvent<HTMLInputElement>): void => {
|
||||
this.selectOption(e.currentTarget.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const pollStart: IPollContent =
|
||||
this.props.mxEvent.getContent()[POLL_START_EVENT_TYPE.name];
|
||||
const pollId = this.props.mxEvent.getId();
|
||||
|
||||
return <div className="mx_MPollBody">
|
||||
<h2>{ pollStart.question[TEXT_NODE_TYPE] }</h2>
|
||||
<div className="mx_MPollBody_allOptions">
|
||||
{
|
||||
pollStart.answers.map((answer: IPollAnswer) => {
|
||||
const checked = this.state.selected === answer.id;
|
||||
const classNames = `mx_MPollBody_option${
|
||||
checked ? " mx_MPollBody_option_checked": ""
|
||||
}`;
|
||||
return <div
|
||||
key={answer.id}
|
||||
className={classNames}
|
||||
onClick={() => this.selectOption(answer.id)}
|
||||
>
|
||||
<StyledRadioButton
|
||||
name={`poll_answer_select-${pollId}`}
|
||||
value={answer.id}
|
||||
checked={this.state.selected === answer.id}
|
||||
onChange={this.onOptionSelected}
|
||||
>
|
||||
<div className="mx_MPollBody_optionVoteCount">
|
||||
{ _t("%(number)s votes", { number: 0 }) }
|
||||
</div>
|
||||
<div className="mx_MPollBody_optionText">
|
||||
{ answer[TEXT_NODE_TYPE] }
|
||||
</div>
|
||||
</StyledRadioButton>
|
||||
<div className="mx_MPollBody_popularityBackground">
|
||||
<div className="mx_MPollBody_popularityAmount" />
|
||||
</div>
|
||||
</div>;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className="mx_MPollBody_totalVotes">
|
||||
{ _t( "Based on %(total)s votes", { total: 0 } ) }
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
|
@ -27,6 +27,7 @@ import { MediaEventHelper } from "../../../utils/MediaEventHelper";
|
|||
import { ReactAnyComponent } from "../../../@types/common";
|
||||
import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { POLL_START_EVENT_TYPE } from '../../../polls/consts';
|
||||
|
||||
// onMessageAllowed is handled internally
|
||||
interface IProps extends Omit<IBodyProps, "onMessageAllowed"> {
|
||||
|
@ -111,6 +112,15 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
|
|||
// Fallback to UnknownBody otherwise if not redacted
|
||||
BodyType = UnknownBody;
|
||||
}
|
||||
|
||||
if (type && type === POLL_START_EVENT_TYPE.name) {
|
||||
// TODO: this can all disappear when Polls comes out of labs -
|
||||
// instead, add something like this into this.evTypes:
|
||||
// [EventType.Poll]: "messages.MPollBody"
|
||||
if (SettingsStore.getValue("feature_polls")) {
|
||||
BodyType = sdk.getComponent('messages.MPollBody');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (SettingsStore.getValue("feature_mjolnir")) {
|
||||
|
|
|
@ -65,12 +65,14 @@ import { logger } from "matrix-js-sdk/src/logger";
|
|||
import { TimelineRenderingType } from "../../../contexts/RoomContext";
|
||||
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
|
||||
import Toolbar from '../../../accessibility/Toolbar';
|
||||
import { POLL_START_EVENT_TYPE } from '../../../polls/consts';
|
||||
import { RovingAccessibleTooltipButton } from '../../../accessibility/roving/RovingAccessibleTooltipButton';
|
||||
import { ThreadListContextMenu } from '../context_menus/ThreadListContextMenu';
|
||||
|
||||
const eventTileTypes = {
|
||||
[EventType.RoomMessage]: 'messages.MessageEvent',
|
||||
[EventType.Sticker]: 'messages.MessageEvent',
|
||||
[POLL_START_EVENT_TYPE.name]: 'messages.MessageEvent',
|
||||
[EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion',
|
||||
[EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion',
|
||||
[EventType.CallInvite]: 'messages.CallEvent',
|
||||
|
|
|
@ -2021,6 +2021,8 @@
|
|||
"Declining …": "Declining …",
|
||||
"%(name)s wants to verify": "%(name)s wants to verify",
|
||||
"You sent a verification request": "You sent a verification request",
|
||||
"%(number)s votes": "%(number)s votes",
|
||||
"Based on %(total)s votes": "Based on %(total)s votes",
|
||||
"Error decrypting video": "Error decrypting video",
|
||||
"Error processing voice message": "Error processing voice message",
|
||||
"Add reaction": "Add reaction",
|
||||
|
|
|
@ -24,16 +24,18 @@ export const POLL_KIND_UNDISCLOSED = new UnstableValue("m.poll.undisclosed", "or
|
|||
// TODO: [TravisR] Use extensible events library when ready
|
||||
const TEXT_NODE_TYPE = "org.matrix.msc1767.text";
|
||||
|
||||
export interface IPollAnswer extends IContent {
|
||||
id: string;
|
||||
[TEXT_NODE_TYPE]: string;
|
||||
}
|
||||
|
||||
export interface IPollContent extends IContent {
|
||||
[POLL_START_EVENT_TYPE.name]: {
|
||||
kind: string; // disclosed or undisclosed (untypeable for now)
|
||||
question: {
|
||||
[TEXT_NODE_TYPE]: string;
|
||||
};
|
||||
answers: {
|
||||
id: string;
|
||||
[TEXT_NODE_TYPE]: string;
|
||||
}[];
|
||||
answers: IPollAnswer[];
|
||||
};
|
||||
[TEXT_NODE_TYPE]: string;
|
||||
}
|
||||
|
|
|
@ -24,6 +24,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
|
|||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import { Thread } from 'matrix-js-sdk/src/models/thread';
|
||||
import { logger } from 'matrix-js-sdk/src/logger';
|
||||
import { POLL_START_EVENT_TYPE } from '../polls/consts';
|
||||
|
||||
/**
|
||||
* Returns whether an event should allow actions like reply, reactions, edit, etc.
|
||||
|
@ -136,7 +137,8 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
|
|||
!isLeftAlignedBubbleMessage &&
|
||||
eventType !== EventType.RoomMessage &&
|
||||
eventType !== EventType.Sticker &&
|
||||
eventType !== EventType.RoomCreate
|
||||
eventType !== EventType.RoomCreate &&
|
||||
eventType !== POLL_START_EVENT_TYPE.name
|
||||
);
|
||||
|
||||
// If we're showing hidden events in the timeline, we should use the
|
||||
|
|
Loading…
Reference in a new issue