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

Prevent text overlapping on poll options (#7187)

Browse source
This commit is contained in:
Andy Balaam 2021-11-23 11:16:31 +00:00 • committed by GitHub
parent d705fdd6e4
commit 359962af6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 153 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

20
res/css/views/messages/_MPollBody.scss
View file

@ -57,15 +57,23 @@ limitations under the License.
padding-top: 2px; padding-top: 2px;
} }
.mx_MPollBody_optionVoteCount { .mx_StyledRadioButton_spacer {
position: absolute; display: none;
color: $secondary-content; }
right: 4px;
font-size: $font-12px; .mx_MPollBody_optionDescription {
display: flex;
justify-content: space-between;
.mx_MPollBody_optionVoteCount {
color: $secondary-content;
font-size: $font-12px;
white-space: nowrap;
}
} }
.mx_MPollBody_popularityBackground { .mx_MPollBody_popularityBackground {
width: calc(100% - 4px); width: calc(100% - 6px);
height: 8px; height: 8px;
margin-right: 12px; margin-right: 12px;
border-radius: 8px; border-radius: 8px;

12
src/components/views/messages/MPollBody.tsx
View file

@ -197,11 +197,13 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
checked={this.state.selected === answer.id} checked={this.state.selected === answer.id}
onChange={this.onOptionSelected} onChange={this.onOptionSelected}
> >
<div className="mx_MPollBody_optionVoteCount"> <div className="mx_MPollBody_optionDescription">
{ _t("%(count)s votes", { count: answerVotes }) } <div className="mx_MPollBody_optionText">
</div> { answer[TEXT_NODE_TYPE] }
<div className="mx_MPollBody_optionText"> </div>
{ answer[TEXT_NODE_TYPE] } <div className="mx_MPollBody_optionVoteCount">
{ _t("%(count)s votes", { count: answerVotes }) }
</div>
</div> </div>
</StyledRadioButton> </StyledRadioButton>
<div className="mx_MPollBody_popularityBackground"> <div className="mx_MPollBody_popularityBackground">

216
test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
View file

@ -120,14 +120,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
1 vote <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Pizza
> </div>
Pizza <div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div> </div>
</div> </div>
<div <div
@ -178,14 +182,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Poutine
> </div>
Poutine <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -236,14 +244,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
3 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Italian
> </div>
Italian <div
className="mx_MPollBody_optionVoteCount"
>
3 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -294,14 +306,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
1 vote <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Wings
> </div>
Wings <div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div> </div>
</div> </div>
<div <div
@ -453,14 +469,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Pizza
> </div>
Pizza <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -511,14 +531,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Poutine
> </div>
Poutine <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -569,14 +593,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Italian
> </div>
Italian <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -627,14 +655,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Wings
> </div>
Wings <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -786,14 +818,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Pizza
> </div>
Pizza <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -844,14 +880,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Poutine
> </div>
Poutine <div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -902,14 +942,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
2 votes <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Italian
> </div>
Italian <div
className="mx_MPollBody_optionVoteCount"
>
2 votes
</div>
</div> </div>
</div> </div>
<div <div
@ -960,14 +1004,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
className="mx_StyledRadioButton_content" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
1 vote <div
</div> className="mx_MPollBody_optionText"
<div >
className="mx_MPollBody_optionText" Wings
> </div>
Wings <div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div> </div>
</div> </div>
<div <div