[Enhancement #51] QuestionCommentIcon is now closer of the text of ic…

…on, '@value' removed from /has-comment, UI tweaking
kbss-cvut · Oct 8, 2021 · 362a6d7 · 362a6d7
1 parent 78040a7
commit 362a6d7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 16 deletions.
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -155,12 +155,16 @@ export default class Question extends React.Component {
                       {label}
                     </h6>
                   </div>
-                  <div className="col-sm-auto">
-                    {this._renderQuestionHelp()}
-                  </div>
-                  <div className="col-sm-1">
-                    {this._renderQuestionComment()}
-                  </div>
+                  {this._renderQuestionHelp() ?
+                      <>
+                        <div className="col-sm-auto">
+                          {this._renderQuestionHelp()}
+                        </div>
+                        <div className="col-sm-auto">
+                          {this._renderQuestionComment()}
+                        </div>
+                      </>
+                      : this._renderQuestionComment()}
                 </div>
               </Accordion.Toggle>
               {collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}
@@ -172,6 +176,19 @@ export default class Question extends React.Component {
     }
   }
 
+  _renderTest() {
+    return (
+        <>
+          <div className="col-sm-auto">
+            {this._renderQuestionHelp()}
+          </div>
+          <div className="col-sm-1">
+            {this._renderQuestionComment()}
+          </div>
+        </>
+    )
+  }
+
   _renderQuestionContent() {
     let content = [];
     if (this.state.expanded) {

diff --git a/src/components/comment/NewComment.jsx b/src/components/comment/NewComment.jsx
@@ -14,15 +14,15 @@ const NewComment = (props) => {
     return (
         <CommentForm
             onSaveComment={saveCommentHandler}
-            onChange={props.onValueChange}
+            onChange={props.onCommentValueChange}
         />
     )
 }
 
 NewComment.propTypes = {
     onAddComment: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onValueChange: PropTypes.func.isRequired,
+    onCommentValueChange: PropTypes.func.isRequired,
     comment: PropTypes.array.isRequired
 };
 

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -42,21 +42,21 @@ const QuestionCommentIcon = (props) => {
         return question[Constants.HAS_COMMENT];
     };
 
-    const onValueChange = (value) => {
+    const onCommentValueChangeHandler = (value) => {
         const change = {};
-        _setValue(change, value);
+        _setComment(change, value);
         props.onChange(commentIndex, change);
     };
 
-    const _setValue = (change, value) => {
+    const _setComment = (change, value) => {
         change[Constants.HAS_COMMENT_VALUE] = {
-            '@id' : value
+            [Constants.HAS_COMMENT_VALUE] : value
         }
         change[Constants.HAS_AUTHOR] = {
-            '@value' : context.options.currentUser
+            [Constants.HAS_AUTHOR] : context.options.currentUser
         }
         change[Constants.HAS_TIMESTAMP] = {
-            '@value' : Date.now()
+            [Constants.HAS_TIMESTAMP] : Date.now()
         }
     };
 
@@ -73,7 +73,7 @@ const QuestionCommentIcon = (props) => {
                             <NewComment
                                 onAddComment={addCommentHandler}
                                 onChange={props.onChange}
-                                onValueChange={onValueChange}
+                                onCommentValueChange={onCommentValueChangeHandler}
                                 comment={_getComments()}
                             />
                             <CommentList

diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
@@ -192,7 +192,12 @@ input:disabled {
 
 .comment-tooltip > .tooltip-inner {
   max-width: none;
-  width: 30vw;
+  max-height: 400px;
+  width: 800px;
+  border: solid 2px #afafaf;
+  background-color: #cbeef6;
+  color: #000000;
+  overflow: hidden scroll;
 }
 
 .comment-content {
@@ -207,6 +212,11 @@ input:disabled {
   padding-top: 20px;
 }
 
+.comment-timestamp {
+  color: #696969;
+  font-style: italic;
+}
+
 @keyframes emphasiseOnRelevant {
   0% {
     display: none;