matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-10 19:43:07 +03:00
Code Activity

add cursor: pointer to actionable poll options (#7826)

Browse Source 
* add cursor: pointer to actionable poll options

Signed-off-by: Kerry Archibald <kerrya@element.io>

* eof

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
2022-02-18 11:43:07 +01:00
committed by GitHub
parent 32e127e098
commit 6fccd6b183
3 changed files with 58 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -109,6 +109,11 @@ limitations under the License.
} }
} }
// options not actionable in these states
.mx_MPollBody_option_checked, .mx_MPollBody_option_ended {
pointer-events: none;
}
.mx_StyledRadioButton_checked, .mx_MPollBody_endedOptionWinner { .mx_StyledRadioButton_checked, .mx_MPollBody_endedOptionWinner {
input[type="radio"] + div { input[type="radio"] + div {
border-width: 2px; border-width: 2px;
@@ -150,3 +155,10 @@ limitations under the License.
.mx_ReplyTile .mx_MPollBody { .mx_ReplyTile .mx_MPollBody {
pointer-events: none; pointer-events: none;
} }
.mx_MPollBody_option,
// label has cursor: default in user-agent stylesheet
// override
.mx_MPollBody_live-option {
cursor: pointer;
}

2
src/components/views/messages/MPollBody.tsx
View File

@@ -438,6 +438,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
const cls = classNames({ const cls = classNames({
"mx_MPollBody_option": true, "mx_MPollBody_option": true,
"mx_MPollBody_option_checked": checked, "mx_MPollBody_option_checked": checked,
"mx_MPollBody_option_ended": ended,
}); });
const answerPercent = ( const answerPercent = (
@@ -513,6 +514,7 @@ interface ILivePollOptionProps {
function LivePollOption(props: ILivePollOptionProps) { function LivePollOption(props: ILivePollOptionProps) {
return <StyledRadioButton return <StyledRadioButton
className="mx_MPollBody_live-option"
name={`poll_answer_select-${props.pollId}`} name={`poll_answer_select-${props.pollId}`}
value={props.answer.id} value={props.answer.id}
checked={props.checked} checked={props.checked}

88
test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap
View File

@@ -93,7 +93,7 @@ exports[`MPollBody renders a finished poll 1`] = `
className="mx_MPollBody_allOptions" className="mx_MPollBody_allOptions"
> >
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="pizza" key="pizza"
onClick={[Function]} onClick={[Function]}
> >
@@ -155,7 +155,7 @@ exports[`MPollBody renders a finished poll 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="poutine" key="poutine"
onClick={[Function]} onClick={[Function]}
> >
@@ -217,7 +217,7 @@ exports[`MPollBody renders a finished poll 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option mx_MPollBody_option_checked" className="mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended"
key="italian" key="italian"
onClick={[Function]} onClick={[Function]}
> >
@@ -279,7 +279,7 @@ exports[`MPollBody renders a finished poll 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="wings" key="wings"
onClick={[Function]} onClick={[Function]}
> >
@@ -444,7 +444,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
className="mx_MPollBody_allOptions" className="mx_MPollBody_allOptions"
> >
<div <div
className="mx_MPollBody_option mx_MPollBody_option_checked" className="mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended"
key="pizza" key="pizza"
onClick={[Function]} onClick={[Function]}
> >
@@ -506,7 +506,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="poutine" key="poutine"
onClick={[Function]} onClick={[Function]}
> >
@@ -568,7 +568,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="italian" key="italian"
onClick={[Function]} onClick={[Function]}
> >
@@ -630,7 +630,7 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option mx_MPollBody_option_checked" className="mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended"
key="wings" key="wings"
onClick={[Function]} onClick={[Function]}
> >
@@ -795,7 +795,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
className="mx_MPollBody_allOptions" className="mx_MPollBody_allOptions"
> >
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="pizza" key="pizza"
onClick={[Function]} onClick={[Function]}
> >
@@ -857,7 +857,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="poutine" key="poutine"
onClick={[Function]} onClick={[Function]}
> >
@@ -919,7 +919,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="italian" key="italian"
onClick={[Function]} onClick={[Function]}
> >
@@ -981,7 +981,7 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
</div> </div>
</div> </div>
<div <div
className="mx_MPollBody_option" className="mx_MPollBody_option mx_MPollBody_option_ended"
key="wings" key="wings"
onClick={[Function]} onClick={[Function]}
> >
@@ -1179,13 +1179,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="pizza" value="pizza"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -1266,13 +1266,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="poutine" value="poutine"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -1353,13 +1353,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="italian" value="italian"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -1440,13 +1440,13 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="wings" value="wings"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -1630,13 +1630,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="pizza" value="pizza"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -1719,13 +1719,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="poutine" value="poutine"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -1808,13 +1808,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
<StyledRadioButton <StyledRadioButton
checked={true} checked={true}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="italian" value="italian"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
> >
<input <input
checked={true} checked={true}
@@ -1897,13 +1897,13 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="wings" value="wings"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2089,13 +2089,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="pizza" value="pizza"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2176,13 +2176,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="poutine" value="poutine"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2263,13 +2263,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="italian" value="italian"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2350,13 +2350,13 @@ exports[`MPollBody renders a poll with no votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="wings" value="wings"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2540,13 +2540,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="pizza" value="pizza"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2629,13 +2629,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="poutine" value="poutine"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2718,13 +2718,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={false} checked={false}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="italian" value="italian"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled"
> >
<input <input
checked={false} checked={false}
@@ -2807,13 +2807,13 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
<StyledRadioButton <StyledRadioButton
checked={true} checked={true}
childrenInLabel={true} childrenInLabel={true}
className="" className="mx_MPollBody_live-option"
name="poll_answer_select-$mypoll" name="poll_answer_select-$mypoll"
onChange={[Function]} onChange={[Function]}
value="wings" value="wings"
> >
<label <label
className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked" className="mx_StyledRadioButton mx_MPollBody_live-option mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
> >
<input <input
checked={true} checked={true}