mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

6
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}
onChange={this.onOptionSelected}
>
<div className="mx_MPollBody_optionDescription">
<div className="mx_MPollBody_optionText">
{ answer[TEXT_NODE_TYPE] }
</div>
<div className="mx_MPollBody_optionVoteCount">
{ _t("%(count)s votes", { count: answerVotes }) }
</div>
<div className="mx_MPollBody_optionText">
{ answer[TEXT_NODE_TYPE] }
</div>
</StyledRadioButton>
<div className="mx_MPollBody_popularityBackground">

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

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