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

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

* add cursor: pointer to actionable poll options

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

* eof

Signed-off-by: Kerry Archibald <kerrya@element.io>
pull/21833/head
Kerry 2022-02-18 11:43:07 +01:00 committed by GitHub
parent 32e127e098
commit 6fccd6b183
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 44 deletions
Show Stats 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}