Skip to content
Snippets Groups Projects
Commit 096e7654 authored by Yannis Barlas's avatar Yannis Barlas
Browse files

Merge branch 'comment-reply-no-form' into 'master' 

fix(ui): remove form html element from comment reply

See merge request !625
parents 9cda675d cdf1b6c1
No related branches found
No related tags found
1 merge request!625fix(ui): remove form html element from comment reply
Pipeline #63729 passed with stages
in 3 minutes and 54 seconds
Hide whitespace changes
Inline Side-by-side
package.json
+ 2
− 1
View file @ 096e7654
...@@ -66,5 +66,6 @@ ...@@ -66,5 +66,6 @@
}, },
"dependencies": { "dependencies": {
"packages": "^0.0.8" "packages": "^0.0.8"
} },
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
} }
wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentReply.js
+ 86
− 85
View file @ 096e7654
...@@ -30,6 +30,7 @@ const CommentTitle = styled.input` ...@@ -30,6 +30,7 @@ const CommentTitle = styled.input`
outline: 1px solid ${th('colorPrimary')}; outline: 1px solid ${th('colorPrimary')};
} }
/* stylelint-disable-next-line order/properties-alphabetical-order */
${override('Wax.CommentTitle')} ${override('Wax.CommentTitle')}
`; `;
...@@ -50,7 +51,8 @@ const Button = styled.button` ...@@ -50,7 +51,8 @@ const Button = styled.button`
color: gray; color: gray;
cursor: pointer; cursor: pointer;
padding: ${grid(2)} ${grid(4)}; padding: ${grid(2)} ${grid(4)};
/* stylelint-disable-next-line order/properties-alphabetical-order */
${props => props.primary && primary} ${props => props.primary && primary}
${props => props.disabled && `cursor: not-allowed; opacity: 0.3;`} ${props => props.disabled && `cursor: not-allowed; opacity: 0.3;`}
...@@ -61,26 +63,25 @@ const ButtonGroup = styled.div` ...@@ -61,26 +63,25 @@ const ButtonGroup = styled.div`
> button:not(:last-of-type) { > button:not(:last-of-type) {
margin-right: 8px; margin-right: 8px;
} }
${override('Wax.CommentButtonGroup')} ${override('Wax.CommentButtonGroup')}
`; `;
const StyledMentions = styled(Mentions)` const StyledMentions = styled(Mentions)`
border: none; border: none;
> textarea { > textarea {
font-size: 14px;
background: ${th('colorBackgroundHue')}; background: ${th('colorBackgroundHue')};
border: 3px solid ${th('colorBackgroundTabs')}; border: 3px solid ${th('colorBackgroundTabs')};
font-family: ${th('fontWriting')}; font-family: ${th('fontWriting')};
font-size: 14px;
padding: 2px; padding: 2px;
&:focus { &:focus {
outline: 1px solid ${th('colorPrimary')}; outline: 1px solid ${th('colorPrimary')};
} }
&:focus {
outline: 1px solid ${th('colorPrimary')};
}
} }
${override('Wax.CommentTextArea')} ${override('Wax.CommentTextArea')}
`; `;
...@@ -128,88 +129,88 @@ const CommentReply = props => { ...@@ -128,88 +129,88 @@ const CommentReply = props => {
return ( return (
<Wrapper className={className} ref={ref}> <Wrapper className={className} ref={ref}>
<form onSubmit={handleSubmit}> <TextWrapper>
<TextWrapper> {isNewComment && showTitle && (
{isNewComment && showTitle && ( <CommentTitle
<CommentTitle name="title"
name="title" onChange={e => {
onChange={e => { setTitle(e.target.value);
setTitle(e.target.value);
}}
placeholder={`${
!isEmpty(i18n) && i18n.exists(`Wax.Comments.Write title`)
? t(`Wax.Comments.Write title`)
: 'Write title'
}...`}
ref={commentTitle}
type="text"
value={title}
/>
)}
<StyledMentions
onChange={text => {
setCommentValue(text);
}}
onPressEnter={e => {
const mentionsOptionsEl = document.getElementsByClassName(
'rc-mentions-measure',
);
if (
e.keyCode === 13 &&
!e.shiftKey &&
mentionsOptionsEl.length === 0
) {
e.preventDefault();
if (commentValue) handleSubmit(e);
}
}} }}
placeholder={ placeholder={`${
isNewComment !isEmpty(i18n) && i18n.exists(`Wax.Comments.Write title`)
? `${ ? t(`Wax.Comments.Write title`)
!isEmpty(i18n) && i18n.exists(`Wax.Comments.Write comment`) : 'Write title'
? t(`Wax.Comments.Write comment`) }...`}
: 'Write comment' ref={commentTitle}
}...` type="text"
: `${ value={title}
!isEmpty(i18n) && i18n.exists(`Wax.Comments.Reply`) />
? t(`Wax.Comments.Reply`) )}
: 'Reply'
}...` <StyledMentions
onChange={text => {
setCommentValue(text);
}}
onPressEnter={e => {
const mentionsOptionsEl = document.getElementsByClassName(
'rc-mentions-measure',
);
if (
e.keyCode === 13 &&
!e.shiftKey &&
mentionsOptionsEl.length === 0
) {
e.preventDefault();
if (commentValue) handleSubmit(e);
} }
ref={commentInput} }}
rows="4" placeholder={
value={commentValue} isNewComment
? `${
!isEmpty(i18n) && i18n.exists(`Wax.Comments.Write comment`)
? t(`Wax.Comments.Write comment`)
: 'Write comment'
}...`
: `${
!isEmpty(i18n) && i18n.exists(`Wax.Comments.Reply`)
? t(`Wax.Comments.Reply`)
: 'Reply'
}...`
}
ref={commentInput}
rows="4"
value={commentValue}
>
{usersMentionList &&
usersMentionList.map(item => (
<Option key={item.id} value={item.displayName}>
{item.displayName}
</Option>
))}
</StyledMentions>
</TextWrapper>
<ActionWrapper>
<ButtonGroup>
<Button
disabled={commentValue.length === 0 || isReadOnly}
onClick={handleSubmit}
primary
type="submit"
> >
{usersMentionList && {!isEmpty(i18n) && i18n.exists(`Wax.Comments.Post`)
usersMentionList.map(item => ( ? t(`Wax.Comments.Post`)
<Option key={item.id} value={item.displayName}> : 'Post'}
{item.displayName} </Button>
</Option>
))} <Button disabled={commentValue.length === 0} onClick={resetValue}>
</StyledMentions> {!isEmpty(i18n) && i18n.exists(`Wax.Comments.Cancel`)
</TextWrapper> ? t(`Wax.Comments.Cancel`)
: 'Cancel'}
<ActionWrapper> </Button>
<ButtonGroup> </ButtonGroup>
<Button </ActionWrapper>
disabled={commentValue.length === 0 || isReadOnly}
primary
type="submit"
>
{!isEmpty(i18n) && i18n.exists(`Wax.Comments.Post`)
? t(`Wax.Comments.Post`)
: 'Post'}
</Button>
<Button disabled={commentValue.length === 0} onClick={resetValue}>
{!isEmpty(i18n) && i18n.exists(`Wax.Comments.Cancel`)
? t(`Wax.Comments.Cancel`)
: 'Cancel'}
</Button>
</ButtonGroup>
</ActionWrapper>
</form>
</Wrapper> </Wrapper>
); );
}; };
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment