mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-17 13:46:47 +02:00
feat: add click away handler to sidebar content (#5751)
Does what it says on the can
This commit is contained in:
parent
ff96563742
commit
5582339560
@ -1,6 +1,7 @@
|
|||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
|
ClickAwayListener,
|
||||||
IconButton,
|
IconButton,
|
||||||
styled,
|
styled,
|
||||||
TextField,
|
TextField,
|
||||||
@ -257,106 +258,118 @@ export const FeedbackComponent = ({
|
|||||||
condition={showFeedback}
|
condition={showFeedback}
|
||||||
show={
|
show={
|
||||||
<ParentContainer>
|
<ParentContainer>
|
||||||
<StyledContainer>
|
<ClickAwayListener onClickAway={() => closeFeedback()}>
|
||||||
<Tooltip title='Close' arrow>
|
<StyledContainer>
|
||||||
<StyledCloseButton
|
<Tooltip title='Close' arrow>
|
||||||
onClick={closeFeedback}
|
<StyledCloseButton
|
||||||
size='large'
|
onClick={closeFeedback}
|
||||||
>
|
size='large'
|
||||||
<CloseIcon />
|
|
||||||
</StyledCloseButton>
|
|
||||||
</Tooltip>
|
|
||||||
<StyledContent>
|
|
||||||
<StyledTitle>
|
|
||||||
Help us to improve Unleash
|
|
||||||
</StyledTitle>
|
|
||||||
<StyledForm onSubmit={onSubmission}>
|
|
||||||
<input
|
|
||||||
type='hidden'
|
|
||||||
name='category'
|
|
||||||
value={feedbackData.category}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type='hidden'
|
|
||||||
name='userType'
|
|
||||||
value={getUserType()}
|
|
||||||
/>
|
|
||||||
<FormTitle>{feedbackData.title}</FormTitle>
|
|
||||||
<StyledScoreContainer>
|
|
||||||
<StyledScoreInput>
|
|
||||||
{[1, 2, 3, 4, 5, 6, 7].map((score) => (
|
|
||||||
<StyledScoreValue key={score}>
|
|
||||||
<input
|
|
||||||
type='radio'
|
|
||||||
name='difficultyScore'
|
|
||||||
value={score}
|
|
||||||
onChange={onScoreChange}
|
|
||||||
/>
|
|
||||||
<span>{score}</span>
|
|
||||||
</StyledScoreValue>
|
|
||||||
))}
|
|
||||||
</StyledScoreInput>
|
|
||||||
<ScoreHelpContainer>
|
|
||||||
<StyledScoreHelp>
|
|
||||||
Very difficult
|
|
||||||
</StyledScoreHelp>
|
|
||||||
<StyledScoreHelp>
|
|
||||||
Very easy
|
|
||||||
</StyledScoreHelp>
|
|
||||||
</ScoreHelpContainer>
|
|
||||||
</StyledScoreContainer>
|
|
||||||
<Box>
|
|
||||||
<FormSubTitle>
|
|
||||||
{feedbackData.positiveLabel}
|
|
||||||
</FormSubTitle>
|
|
||||||
<TextField
|
|
||||||
placeholder='Your answer here'
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
name='positive'
|
|
||||||
multiline
|
|
||||||
rows={3}
|
|
||||||
variant='outlined'
|
|
||||||
size='small'
|
|
||||||
InputLabelProps={{
|
|
||||||
style: {
|
|
||||||
fontSize:
|
|
||||||
theme.fontSizes.smallBody,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<FormSubTitle>
|
|
||||||
{feedbackData.areasForImprovementsLabel}
|
|
||||||
</FormSubTitle>
|
|
||||||
<TextField
|
|
||||||
placeholder='Your answer here'
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
multiline
|
|
||||||
name='areasForImprovement'
|
|
||||||
rows={3}
|
|
||||||
InputLabelProps={{
|
|
||||||
style: {
|
|
||||||
fontSize:
|
|
||||||
theme.fontSizes.smallBody,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
variant='outlined'
|
|
||||||
size='small'
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<StyledButton
|
|
||||||
disabled={!selectedScore}
|
|
||||||
variant='contained'
|
|
||||||
color='primary'
|
|
||||||
type='submit'
|
|
||||||
>
|
>
|
||||||
Send Feedback
|
<CloseIcon />
|
||||||
</StyledButton>
|
</StyledCloseButton>
|
||||||
</StyledForm>
|
</Tooltip>
|
||||||
</StyledContent>
|
<StyledContent>
|
||||||
</StyledContainer>
|
<StyledTitle>
|
||||||
|
Help us to improve Unleash
|
||||||
|
</StyledTitle>
|
||||||
|
<StyledForm onSubmit={onSubmission}>
|
||||||
|
<input
|
||||||
|
type='hidden'
|
||||||
|
name='category'
|
||||||
|
value={feedbackData.category}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type='hidden'
|
||||||
|
name='userType'
|
||||||
|
value={getUserType()}
|
||||||
|
/>
|
||||||
|
<FormTitle>{feedbackData.title}</FormTitle>
|
||||||
|
<StyledScoreContainer>
|
||||||
|
<StyledScoreInput>
|
||||||
|
{[1, 2, 3, 4, 5, 6, 7].map(
|
||||||
|
(score) => (
|
||||||
|
<StyledScoreValue
|
||||||
|
key={score}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type='radio'
|
||||||
|
name='difficultyScore'
|
||||||
|
value={score}
|
||||||
|
onChange={
|
||||||
|
onScoreChange
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span>{score}</span>
|
||||||
|
</StyledScoreValue>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</StyledScoreInput>
|
||||||
|
<ScoreHelpContainer>
|
||||||
|
<StyledScoreHelp>
|
||||||
|
Very difficult
|
||||||
|
</StyledScoreHelp>
|
||||||
|
<StyledScoreHelp>
|
||||||
|
Very easy
|
||||||
|
</StyledScoreHelp>
|
||||||
|
</ScoreHelpContainer>
|
||||||
|
</StyledScoreContainer>
|
||||||
|
<Box>
|
||||||
|
<FormSubTitle>
|
||||||
|
{feedbackData.positiveLabel}
|
||||||
|
</FormSubTitle>
|
||||||
|
<TextField
|
||||||
|
placeholder='Your answer here'
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
name='positive'
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
variant='outlined'
|
||||||
|
size='small'
|
||||||
|
InputLabelProps={{
|
||||||
|
style: {
|
||||||
|
fontSize:
|
||||||
|
theme.fontSizes
|
||||||
|
.smallBody,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<FormSubTitle>
|
||||||
|
{
|
||||||
|
feedbackData.areasForImprovementsLabel
|
||||||
|
}
|
||||||
|
</FormSubTitle>
|
||||||
|
<TextField
|
||||||
|
placeholder='Your answer here'
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
multiline
|
||||||
|
name='areasForImprovement'
|
||||||
|
rows={3}
|
||||||
|
InputLabelProps={{
|
||||||
|
style: {
|
||||||
|
fontSize:
|
||||||
|
theme.fontSizes
|
||||||
|
.smallBody,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
variant='outlined'
|
||||||
|
size='small'
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<StyledButton
|
||||||
|
disabled={!selectedScore}
|
||||||
|
variant='contained'
|
||||||
|
color='primary'
|
||||||
|
type='submit'
|
||||||
|
>
|
||||||
|
Send Feedback
|
||||||
|
</StyledButton>
|
||||||
|
</StyledForm>
|
||||||
|
</StyledContent>
|
||||||
|
</StyledContainer>
|
||||||
|
</ClickAwayListener>
|
||||||
</ParentContainer>
|
</ParentContainer>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user