matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-09 08:42:50 +03:00
Code 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
3 changed files with 153 additions and 95 deletions
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; padding-top: 2px;
} }
.mx_StyledRadioButton_spacer {
display: none;
}
.mx_MPollBody_optionDescription {
display: flex;
justify-content: space-between;
.mx_MPollBody_optionVoteCount { .mx_MPollBody_optionVoteCount {
position: absolute;
color: $secondary-content; color: $secondary-content;
right: 4px;
font-size: $font-12px; 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;

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} checked={this.state.selected === answer.id}
onChange={this.onOptionSelected} onChange={this.onOptionSelected}
> >
<div className="mx_MPollBody_optionDescription">
<div className="mx_MPollBody_optionText">
{ answer[TEXT_NODE_TYPE] }
</div>
<div className="mx_MPollBody_optionVoteCount"> <div className="mx_MPollBody_optionVoteCount">
{ _t("%(count)s votes", { count: answerVotes }) } { _t("%(count)s votes", { count: answerVotes }) }
</div> </div>
<div className="mx_MPollBody_optionText">
{ answer[TEXT_NODE_TYPE] }
</div> </div>
</StyledRadioButton> </StyledRadioButton>
<div className="mx_MPollBody_popularityBackground"> <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" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
1 vote
</div>
<div <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Pizza Pizza
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" 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" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
0 votes
</div>
<div <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Poutine Poutine
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" 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" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
3 votes
</div>
<div <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Italian Italian
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
3 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" 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" className="mx_StyledRadioButton_content"
> >
<div <div
className="mx_MPollBody_optionVoteCount" className="mx_MPollBody_optionDescription"
> >
1 vote
</div>
<div <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Wings Wings
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -453,15 +469,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Pizza Pizza
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -511,15 +531,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Poutine Poutine
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -569,15 +593,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Italian Italian
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -627,15 +655,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Wings Wings
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -786,15 +818,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Pizza Pizza
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -844,15 +880,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Poutine Poutine
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
0 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -902,15 +942,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Italian Italian
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
2 votes
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"
@@ -960,15 +1004,19 @@ 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 <div
className="mx_MPollBody_optionText" className="mx_MPollBody_optionText"
> >
Wings Wings
</div> </div>
<div
className="mx_MPollBody_optionVoteCount"
>
1 vote
</div>
</div>
</div> </div>
<div <div
className="mx_StyledRadioButton_spacer" className="mx_StyledRadioButton_spacer"