Merge branch 'comment-readOnly' into 'master'

set comments readOnly See merge request !322

Merge branch 'comment-readOnly' into 'master'
set comments readOnly See merge request !322
dcf8ee24 · Christos · 8febc235 · a7ea859a · dcf8ee24 · dcf8ee24
Commit dcf8ee24 authored 3 years ago by Christos
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -114,7 +114,7 @@ export default {
    },
  ],

-  CommentsService: { readOnly: true },
+  // CommentsService: { readOnly: true },
  SchemaService: DefaultSchema,
  TitleService: { updateTitle },
  RulesService: [emDash, ellipsis],

--- a/wax-prosemirror-components/src/components/comments/ConnectedComment.js
+++ b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
@@ -49,6 +49,8 @@ export default ({ comment, top, commentId, recalculateTops }) => {
    top: `${top}px`,
  };

+  const commentConfig = app.config.get('config.CommentsService');
+  const isReadOnly = commentConfig ? commentConfig.readOnly : false;
  const commentPlugin = app.PmPlugins.get('commentPlugin');
  const activeComment = commentPlugin.getState(activeView.state).comment;

@@ -159,6 +161,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
          active={isActive}
          commentData={comment.attrs.conversation}
          commentId={commentId}
+          isReadOnly={isReadOnly}
          key={commentId}
          onClickBox={onClickBox}
          onClickPost={onClickPost}

--- a/wax-prosemirror-components/src/ui/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBox.js
@@ -18,6 +18,11 @@ const inactive = css`
  }
 `;

+const inactiveButton = css`
+  cursor: not-allowed;
+  opacity: 0.3;
+`;
+
 const Wrapper = styled.div`
  background: white;
  border: 1px solid ${th('colorBackgroundTabs')};
@@ -38,8 +43,8 @@ const Head = styled.div`

 const Resolve = styled.button`
  align-self: flex-end;
-  border: none;
  background: none;
+  border: none;
  color: #0042c7;
  cursor: pointer;
  margin-bottom: 12px;
@@ -48,6 +53,8 @@ const Resolve = styled.button`
    background: ${th('colorBackgroundHue')};
    border: none;
  }
+
+  ${props => props.isReadOnly && inactiveButton}
 `;

 const StyledReply = styled(CommentReply)`
@@ -60,6 +67,7 @@ const CommentBox = props => {
    className,
    commentId,
    commentData,
+    isReadOnly,
    onClickBox,
    onClickPost,
    onClickResolve,
@@ -78,7 +86,15 @@ const CommentBox = props => {
    <Wrapper active={active} className={className} onClick={onClickWrapper}>
      {active && commentData.length > 0 && (
        <Head>
-          <Resolve onClick={() => onClickResolve(commentId)}>Resolve</Resolve>
+          <Resolve
+            isReadOnly={isReadOnly}
+            onClick={() => {
+              if (!isReadOnly) return onClickResolve(commentId);
+              return false;
+            }}
+          >
+            Resolve
+          </Resolve>
        </Head>
      )}

@@ -86,9 +102,10 @@ const CommentBox = props => {

      {active && (
        <StyledReply
-          onTextAreaBlur={onTextAreaBlur}
          isNewComment={commentData.length === 0}
+          isReadOnly={isReadOnly}
          onClickPost={onClickPost}
+          onTextAreaBlur={onTextAreaBlur}
        />
      )}
    </Wrapper>
@@ -98,6 +115,7 @@ const CommentBox = props => {
 CommentBox.propTypes = {
  /** Whether this is the current active comment */
  active: PropTypes.bool,
+  isReadOnly: PropTypes.bool.isRequired,
  /** List of objects containing data for comment items */
  commentData: PropTypes.arrayOf(
    PropTypes.shape({

--- a/wax-prosemirror-components/src/ui/comments/CommentReply.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentReply.js
@@ -40,12 +40,12 @@ const primary = css`
 const Button = styled.button`
  border: 0;
  border-radius: 5px;
-  cursor: pointer;
  color: gray;
+  cursor: pointer;
  padding: ${grid(2)} ${grid(4)};

  ${props => props.primary && primary}
-  ${props => props.disabled && `cursor: not-allowed;`}
+  ${props => props.disabled && `cursor: not-allowed; opacity: 0.3;`}
 `;

 const ButtonGroup = styled.div`
@@ -55,7 +55,13 @@ const ButtonGroup = styled.div`
 `;

 const CommentReply = props => {
-  const { className, isNewComment, onClickPost, onTextAreaBlur } = props;
+  const {
+    className,
+    isNewComment,
+    onClickPost,
+    isReadOnly,
+    onTextAreaBlur,
+  } = props;
  const commentInput = useRef(null);
  const [commentValue, setCommentValue] = useState('');

@@ -86,25 +92,29 @@ const CommentReply = props => {
      <form onSubmit={handleSubmit}>
        <TextWrapper>
          <ReplyTextArea
-            ref={commentInput}
+            cols="5"
            onBlur={() => onBlur(commentInput.current.value)}
-            placeholder={isNewComment ? 'Write comment...' : 'Reply...'}
            onChange={() => setCommentValue(commentInput.current.value)}
-            cols="5"
-            rows="3"
            onKeyDown={e => {
              if (e.keyCode === 13 && !e.shiftKey) {
                e.preventDefault();
                if (commentValue) handleSubmit(e);
              }
            }}
+            placeholder={isNewComment ? 'Write comment...' : 'Reply...'}
+            ref={commentInput}
+            rows="3"
            value={commentValue}
          />
        </TextWrapper>

        <ActionWrapper>
          <ButtonGroup>
-            <Button disabled={commentValue.length === 0} primary type="submit">
+            <Button
+              disabled={commentValue.length === 0 || isReadOnly}
+              primary
+              type="submit"
+            >
              Post
            </Button>

@@ -121,6 +131,7 @@ const CommentReply = props => {
 CommentReply.propTypes = {
  isNewComment: PropTypes.bool.isRequired,
  onClickPost: PropTypes.func.isRequired,
+  isReadOnly: PropTypes.bool.isRequired,
  onTextAreaBlur: PropTypes.func.isRequired,
 };