Skip to content

Commit

Permalink
feat: add click away handler to sidebar content (#5751)
Browse files Browse the repository at this point in the history 
Does what it says on the can
  • Loading branch information
@FredrikOseberg
FredrikOseberg authored Jan 4, 2024
1 parent ff96563 commit 5582339
Showing 1 changed file with 111 additions and 98 deletions.
209 changes: 111 additions & 98 deletions frontend/src/component/feedbackNew/FeedbackComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Box,
Button,
ClickAwayListener,
IconButton,
styled,
TextField,
Expand Down Expand Up @@ -257,106 +258,118 @@ export const FeedbackComponent = ({
condition={showFeedback}
show={
<ParentContainer>
<StyledContainer>
<Tooltip title='Close' arrow>
<StyledCloseButton
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,
},
}}
<ClickAwayListener onClickAway={() => closeFeedback()}>
<StyledContainer>
<Tooltip title='Close' arrow>
<StyledCloseButton
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}
/>
</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'
<input
type='hidden'
name='userType'
value={getUserType()}
/>
</Box>

<StyledButton
disabled={!selectedScore}
variant='contained'
color='primary'
type='submit'
>
Send Feedback
</StyledButton>
</StyledForm>
</StyledContent>
</StyledContainer>
<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>
}
/>
Expand Down

0 comments on commit 5582339

Please sign in to comment.