Merge pull request #5500 from fsih/commentsNotAllowed

Add comments not allowed box

src/views/preview/comment/comment.scss

@@ -1,5 +1,10 @@
 @import "../../../colors";
 
+.compose-row {
+    margin-top: 30px;
+    margin-bottom: 40px;
+}
+
 .compose-comment {
     margin-left: .5rem;
     width: 100%;

src/views/preview/comment/compose-comment.jsx

@@ -330,7 +330,7 @@ class ComposeComment extends React.Component {
                         className={classNames('flex-row',
                             'comment',
                             this.state.status === ComposeStatus.REJECTED_MUTE ?
-                                'compose-disabled' : '')}
+                                'compose-disabled' : 'compose-row')}
                     >
                         <a href={`/users/${this.props.user.username}`}>
                             <Avatar src={this.props.user.thumbnailUrl} />

src/views/studio/icons/edit-icon.svg

@@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#4C97FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9579C9.96446 16.0526 9.85758 16.1134 9.72976 16.1711L7.56659 17.0795C7.48799 16.8115 7.29336 16.4709 6.93361 16.1111C6.58592 15.7635 6.25738 15.5809 5.99914 15.4903L6.89672 13.338C6.94337 13.1992 7.0271 13.0936 7.1208 12.9999C7.14262 13 7.16333 12.9793 7.17418 12.9684L7.20476 12.9378C7.35075 12.7919 7.55585 12.703 7.79617 12.6711C8.40705 12.5955 9.11521 12.8854 9.64935 13.4195C10.1835 13.9537 10.4734 14.6618 10.3857 15.2606C10.3505 15.4582 10.2854 15.6615 10.1833 15.8118C10.1529 15.8642 10.1114 15.9057 10.069 15.9481L10.0592 15.9579ZM13.6054 6.53721C13.9427 6.19986 14.4603 6.12759 14.9902 6.28654C15.2973 6.37865 15.4255 6.75936 15.2154 6.96946L10.177 12.0079C10.0566 12.1282 9.86135 12.148 9.70333 12.0472C9.54003 11.9451 9.37127 11.8572 9.20119 11.7838C8.92376 11.6642 8.82736 11.3152 9.02168 11.1209L13.6054 6.53721ZM16.5317 9.46348L11.9489 14.0462C11.7586 14.2366 11.4084 14.1547 11.2923 13.8847C11.2173 13.7052 11.1239 13.5309 11.0163 13.3622C10.9099 13.1966 10.9364 12.9902 11.0616 12.865L16.0882 7.83835C16.2964 7.63022 16.677 7.75634 16.7711 8.06359C16.9356 8.59891 16.871 9.12417 16.5317 9.46348ZM18.5347 4.5342C17.2459 3.24545 15.3869 3.01396 14.3838 4.01711L6.29247 12.1084C6.09421 12.3067 5.91898 12.528 5.81284 12.7986L4.10642 16.8961C3.89183 17.4134 4.05796 18.0589 4.53397 18.5349C5.00998 19.0109 5.65549 19.177 6.1728 18.9625L10.2703 17.256C10.5398 17.1488 10.7611 16.9736 10.9594 16.7753L19.0507 8.68402C20.0538 7.68087 19.8234 5.82294 18.5347 4.5342Z" fill="#4C97FF"/>
 </svg>

src/views/studio/l10n.json

@@ -63,6 +63,7 @@
     "studio.promote": "Promote",
 
     "studio.commentsHeader": "Comments",
+    "studio.commentsNotAllowed": "Commenting for this studio has been turned off.",
     "studio.comments.toggleOff": "Commenting off",
     "studio.comments.toggleOn": "Commenting on",
     "studio.comments.turnedOff": "Sorry, comment posting has been turned off for this studio.",

src/views/studio/studio-comments-not-allowed.jsx

@@ -0,0 +1,10 @@
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const StudioCommentsNotAllowed = () => (
+    <div className="studio-comments-not-allowed">
+        <FormattedMessage id="studio.commentsNotAllowed" />
+    </div>
+);
+
+module.exports = StudioCommentsNotAllowed;

src/views/studio/studio-comments.jsx

@@ -8,6 +8,7 @@ import ComposeComment from '../preview/comment/compose-comment.jsx';
 import TopLevelComment from '../preview/comment/top-level-comment.jsx';
 import studioCommentActions from '../../redux/studio-comment-actions.js';
 import StudioCommentsAllowed from './studio-comments-allowed.jsx';
+import StudioCommentsNotAllowed from './studio-comments-not-allowed.jsx';
 
 import {selectIsAdmin, selectHasFetchedSession} from '../../redux/session';
 import {
@@ -56,17 +57,20 @@ const StudioComments = ({
     }, [isAdmin]);
 
     return (
-        <div>
+        <div className="studio-compose-container">
             <div className="studio-header-container">
                 <h2><FormattedMessage id="studio.commentsHeader" /></h2>
                 {canEditCommentsAllowed && <StudioCommentsAllowed />}
             </div>
-            <div className="studio-compose-container">
-                {shouldShowCommentComposer && commentsAllowed &&
+            <div>
+                {shouldShowCommentComposer ?
+                    (commentsAllowed ?
                         <ComposeComment
                             postURI={postURI}
                             onAddComment={handleNewComment}
-                    />
+                        /> :
+                        <StudioCommentsNotAllowed />
+                    ) : null
                 }
                 {comments.map(comment => (
                     <TopLevelComment

src/views/studio/studio.scss

@@ -425,6 +425,18 @@ $radius: 8px;
     padding-top: 8px;
 }
 
+.studio-comments-not-allowed {
+    display: flex;
+    width: 100%;
+    background: rgba(76, 151, 255, 0.15);
+    height: 80px;
+    border: 1px solid rgba(76, 151, 255, 0.15);
+    border-radius: 8px;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 28px;
+}
+
 .studio-empty {
     grid-column: 1 / -1; /* take up all columns */
     text-align: center;