imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move styling of results dialog to css

Browse source
This commit is contained in:
Tim Vahlbrock 2024-11-01 01:03:54 +01:00
parent baabfbcfb9
commit b739f23d29
No known key found for this signature in database
3 changed files with 40 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.pcss
View file

@ -18,6 +18,7 @@
@import "./components/views/dialogs/polls/_PollDetailHeader.pcss";
@import "./components/views/dialogs/polls/_PollListItem.pcss";
@import "./components/views/dialogs/polls/_PollListItemEnded.pcss";
@import "./components/views/dialogs/polls/_PollResultsDialog.pcss";
@import "./components/views/elements/_AppPermission.pcss";
@import "./components/views/elements/_AppWarning.pcss";
@import "./components/views/elements/_FilterDropdown.pcss";

24
res/css/components/views/dialogs/polls/_PollResultsDialog.pcss Normal file
View file

@ -0,0 +1,24 @@
.mx_AnswerEntry:not(:last-child) {
margin-bottom: $spacing-8;
}
.mx_AnswerEntry_Header {
display: flex;
align-items: center;
margin-bottom: $spacing-8;
}
.mx_AnswerEntry_Header_answerName {
font-weight: bolder;
flex-grow: 1
}
.mx_VoterEntry {
display: flex;
align-items: center;
margin-left: $spacing-16;
}
.mx_VoterEntry_AvatarWrapper {
margin-right: $spacing-8;
}

26
src/components/views/dialogs/PollResultsDialog.tsx
View file

@ -21,7 +21,7 @@ interface IProps {
members: RoomMember[];
}
export default function PollResultsDialog (props: IProps): JSX.Element {
export default function PollResultsDialog(props: IProps): JSX.Element {
return (
<BaseDialog
title={props.pollEvent.question.text}
@ -30,7 +30,7 @@ export default function PollResultsDialog (props: IProps): JSX.Element {
{
props.pollEvent.answers.map((answer) => {
const votes = props.votes.get(answer.id) || [];
if(votes.length === 0) return;
if (votes.length === 0) return;
return <AnswerEntry
key={answer.id}
@ -49,26 +49,30 @@ function AnswerEntry(props: {
members: RoomMember[];
votes: UserVote[];
}): JSX.Element {
const {answer, members, votes} = props;
const { answer, members, votes } = props;
return (
<div key={answer.id}>
<div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
<span style={{fontWeight: "bolder", flexGrow: 1}}>{answer.text}</span>
<div key={answer.id} className="mx_AnswerEntry">
<div className="mx_AnswerEntry_Header">
<span className="mx_AnswerEntry_Header_answerName">{answer.text}</span>
<span>{votes.length} votes</span>
</div>
{votes.length === 0 && <div>No one voted for this.</div>}
{votes.map((vote) => {
const member = members.find(m => m.userId === vote.sender);
if(member) return <VoterEntry key={vote.sender} vote={vote} member={member} />;
if (member) return <VoterEntry
key={vote.sender}
vote={vote}
member={member}
/>;
})}
</div>
);
}
function VoterEntry(props: {vote: UserVote; member: RoomMember}): JSX.Element {
const {vote, member} = props;
return <div key={vote.sender} style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
<div style={{marginRight: "10px"}}>
function VoterEntry(props: { vote: UserVote; member: RoomMember }): JSX.Element {
const { vote, member } = props;
return <div key={vote.sender} className="mx_VoterEntry">
<div className="mx_VoterEntry_AvatarWrapper">
<MemberAvatar member={member} size="36px" aria-hidden="true" />
</div>
{member.name}