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;
}

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

@ -51,15 +51,19 @@ function AnswerEntry(props: {
}): JSX.Element {
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>
);
@ -67,8 +71,8 @@ function AnswerEntry(props: {
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"}}>
return <div key={vote.sender} className="mx_VoterEntry">
<div className="mx_VoterEntry_AvatarWrapper">
<MemberAvatar member={member} size="36px" aria-hidden="true" />
</div>
{member.name}