1
0
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:
Fredrik Strand Oseberg 2024-01-04 12:33:00 +01:00 committed by GitHub
parent ff96563742
commit 5582339560
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>
} }
/> />