OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Prevent text overlapping on poll options (#7187)

pull/21833/head
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

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

@ -57,15 +57,23 @@ limitations under the License.
padding-top: 2px;
}
.mx_MPollBody_optionVoteCount {
position: absolute;
color: $secondary-content;
right: 4px;
font-size: $font-12px;
.mx_StyledRadioButton_spacer {
display: none;
}
.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 {
width: calc(100% - 4px);
width: calc(100% - 6px);
height: 8px;
margin-right: 12px;
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}
onChange={this.onOptionSelected}
>
<div className="mx_MPollBody_optionVoteCount">
{ _t("%(count)s votes", { count: answerVotes }) }
</div>
<div className="mx_MPollBody_optionText">
{ answer[TEXT_NODE_TYPE] }
<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>
</StyledRadioButton>
<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"
>
<div
className="mx_MPollBody_optionVoteCount"
className="mx_MPollBody_optionDescription"
>
1 vote
</div>
<div
className="mx_MPollBody_optionText"
>
Pizza
<div
className="mx_MPollBody_optionText"
>
Pizza
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</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"
>
<div
className="mx_MPollBody_optionVoteCount"
className="mx_MPollBody_optionDescription"
>
0 votes
</div>
<div
className="mx_MPollBody_optionText"
>
Poutine
<div
className="mx_MPollBody_optionText"
>
Poutine
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</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"
>
<div
className="mx_MPollBody_optionVoteCount"
className="mx_MPollBody_optionDescription"
>
3 votes
</div>
<div
className="mx_MPollBody_optionText"
>
Italian
<div
className="mx_MPollBody_optionText"
>
Italian
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
3 votes
</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"
>
<div
className="mx_MPollBody_optionVoteCount"
className="mx_MPollBody_optionDescription"
>
1 vote
</div>
<div
className="mx_MPollBody_optionText"
>
Wings
<div
className="mx_MPollBody_optionText"
>
Wings
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div>
</div>
<div
@ -453,14 +469,18 @@ 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
className="mx_MPollBody_optionText"
>
Pizza
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div>
<div
@ -511,14 +531,18 @@ 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
className="mx_MPollBody_optionText"
>
Poutine
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div>
<div
@ -569,14 +593,18 @@ 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
className="mx_MPollBody_optionText"
>
Italian
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div>
<div
@ -627,14 +655,18 @@ 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
className="mx_MPollBody_optionText"
>
Wings
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div>
<div
@ -786,14 +818,18 @@ 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
className="mx_MPollBody_optionText"
>
Pizza
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div>
<div
@ -844,14 +880,18 @@ 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
className="mx_MPollBody_optionText"
>
Poutine
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div>
<div
@ -902,14 +942,18 @@ 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
className="mx_MPollBody_optionText"
>
Italian
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
2 votes
</div>
</div>
</div>
<div
@ -960,14 +1004,18 @@ 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
className="mx_MPollBody_optionText"
>
Wings
</div>
<div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div>
</div>
<div