Change common file type comment input style (#7931)

* 01 fix wrong text

* 02 input comment container style

* 03 change reply container style

frontend/src/components/file-view/comment-widget/comment-list.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
-import classname from 'classnames';
 import deepCopy from 'deep-copy';
 import { gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
@@ -25,16 +24,10 @@ class CommentList extends React.Component {
 
   constructor(props) {
     super(props);
-    const initStyle = defaultStyle;
-    initStyle['&multiLine']['input'].minHeight = 40;
-    initStyle['&multiLine']['input'].height = 40;
-    initStyle['&multiLine']['input'].borderRadius = '5px';
-    initStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
-    initStyle['&multiLine']['input'].lineHeight = '24px';
     this.state = {
       comment: '',
       isInputFocus: false,
-      defaultStyle: initStyle,
+      defaultStyle: defaultStyle,
       commentType: 'All comments',
     };
     this.toBeAddedParticipant = [];
@@ -110,19 +103,13 @@ class CommentList extends React.Component {
   };
 
   onInputFocus = () => {
-    if (this.inpurBlurTimer) {
-      clearTimeout(this.inpurBlurTimer);
-      this.inpurBlurTimer = null;
+    if (this.inputBlurTimer) {
+      clearTimeout(this.inputBlurTimer);
+      this.inputBlurTimer = null;
     }
     if (this.state.isInputFocus === false) {
       let defaultStyle = this.state.defaultStyle;
-      defaultStyle['&multiLine']['input'].maxHeight = 90;
-      defaultStyle['&multiLine']['input'].minHeight = 90;
-      defaultStyle['&multiLine']['input'].height = 90;
-      defaultStyle['&multiLine']['input'].borderBottom = 'none';
-      defaultStyle['&multiLine']['input'].borderRadius = '5px 5px 0 0';
-      defaultStyle['&multiLine']['input'].overflowY = 'auto';
-      defaultStyle['&multiLine']['input'].lineHeight = 'default';
+      defaultStyle['&multiLine']['input'].border = '1px solid #ff8e03';
       this.setState({
         isInputFocus: true,
         defaultStyle: deepCopy(defaultStyle),
@@ -132,13 +119,9 @@ class CommentList extends React.Component {
 
   onInputBlur = () => {
     if (this.state.isInputFocus === true) {
-      this.inpurBlurTimer = setTimeout(() => {
+      this.inputBlurTimer = setTimeout(() => {
         let defaultStyle = this.state.defaultStyle;
-        defaultStyle['&multiLine']['input'].minHeight = 40;
-        defaultStyle['&multiLine']['input'].height = 40;
-        defaultStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
-        defaultStyle['&multiLine']['input'].borderRadius = '5px';
-        defaultStyle['&multiLine']['input'].lineHeight = '24px';
+        defaultStyle['&multiLine']['input'].border = '1px solid #e6e6dd';
         this.setState({
           isInputFocus: false,
           defaultStyle: deepCopy(defaultStyle),
@@ -182,7 +165,7 @@ class CommentList extends React.Component {
 
         <div
           className="flex-fill o-auto"
-          style={{ height: this.state.isInputFocus ? 'calc(100% - 170px)' : 'calc(100% - 124px)' }}
+          style={{ height: 'calc(100% - 170px)' }}
           ref={this.commentListScrollRef}
         >
           <CommentBodyHeader
@@ -211,10 +194,7 @@ class CommentList extends React.Component {
             <p className="text-center my-4">{gettext('No comment yet.')}</p>
           }
         </div>
-        <div
-          className={classname('seafile-comment-footer flex-shrink-0')}
-          style={{ height: this.state.isInputFocus ? '120px' : '72px' }}
-        >
+        <div className='seafile-comment-footer flex-shrink-0'>
           <MentionsInput
             value={this.state.comment}
             onChange={this.handleCommentChange}
@@ -233,13 +213,11 @@ class CommentList extends React.Component {
               appendSpaceOnAdd={true}
             />
           </MentionsInput>
-          {this.state.isInputFocus &&
-            <div className="comment-submit-container">
-              <div onClick={this.onSubmit}>
-                <i className="sdocfont sdoc-save sdoc-comment-btn"></i>
-              </div>
+          <div className="comment-submit-container" style={{ borderColor: this.state.isInputFocus ? '#ff8e03' : '#e6e6dd' }}>
+            <div onClick={this.onSubmit}>
+              <i className="sdocfont sdoc-save sdoc-comment-btn"></i>
             </div>
-          }
+          </div>
         </div>
       </div>
     );

frontend/src/components/file-view/comment-widget/reply-list.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
-import classname from 'classnames';
 import deepCopy from 'deep-copy';
 import { gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
@@ -27,16 +26,10 @@ class ReplyList extends React.Component {
 
   constructor(props) {
     super(props);
-    const initStyle = defaultStyle;
-    initStyle['&multiLine']['input'].minHeight = 40;
-    initStyle['&multiLine']['input'].height = 40;
-    initStyle['&multiLine']['input'].borderRadius = '5px';
-    initStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
-    initStyle['&multiLine']['input'].lineHeight = '24px';
     this.state = {
       comment: '',
       isInputFocus: false,
-      defaultStyle: initStyle,
+      defaultStyle: defaultStyle,
     };
     this.toBeAddedParticipant = [];
     this.commentListScrollRef = React.createRef();
@@ -109,19 +102,13 @@ class ReplyList extends React.Component {
   };
 
   onInputFocus = () => {
-    if (this.inpurBlurTimer) {
-      clearTimeout(this.inpurBlurTimer);
-      this.inpurBlurTimer = null;
+    if (this.inputBlurTimer) {
+      clearTimeout(this.inputBlurTimer);
+      this.inputBlurTimer = null;
     }
     if (this.state.isInputFocus === false) {
       let defaultStyle = this.state.defaultStyle;
-      defaultStyle['&multiLine']['input'].maxHeight = 90;
-      defaultStyle['&multiLine']['input'].minHeight = 90;
-      defaultStyle['&multiLine']['input'].height = 90;
-      defaultStyle['&multiLine']['input'].borderBottom = 'none';
-      defaultStyle['&multiLine']['input'].borderRadius = '5px 5px 0 0';
-      defaultStyle['&multiLine']['input'].overflowY = 'auto';
-      defaultStyle['&multiLine']['input'].lineHeight = 'default';
+      defaultStyle['&multiLine']['input'].border = '1px solid #ff8e03';
       this.setState({
         isInputFocus: true,
         defaultStyle: deepCopy(defaultStyle),
@@ -131,13 +118,9 @@ class ReplyList extends React.Component {
 
   onInputBlur = () => {
     if (this.state.isInputFocus === true) {
-      this.inpurBlurTimer = setTimeout(() => {
+      this.inputBlurTimer = setTimeout(() => {
         let defaultStyle = this.state.defaultStyle;
-        defaultStyle['&multiLine']['input'].minHeight = 40;
-        defaultStyle['&multiLine']['input'].height = 40;
-        defaultStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
-        defaultStyle['&multiLine']['input'].borderRadius = '5px';
-        defaultStyle['&multiLine']['input'].lineHeight = '24px';
+        defaultStyle['&multiLine']['input'].border = '1px solid #e6e6dd';
         this.setState({
           isInputFocus: false,
           defaultStyle: deepCopy(defaultStyle),
@@ -168,7 +151,7 @@ class ReplyList extends React.Component {
 
         <div
           className="flex-fill o-auto"
-          style={{ height: this.state.isInputFocus ? 'calc(100% - 170px)' : 'calc(100% - 124px)' }}
+          style={{ height: 'calc(100% - 170px)' }}
           ref={this.commentListScrollRef}
         >
           <ul className="seafile-comment-list">
@@ -194,10 +177,7 @@ class ReplyList extends React.Component {
             })}
           </ul>
         </div>
-        <div
-          className={classname('seafile-comment-footer flex-shrink-0')}
-          style={{ height: this.state.isInputFocus ? '120px' : '72px' }}
-        >
+        <div className='seafile-comment-footer flex-shrink-0'>
           <MentionsInput
             value={this.state.comment}
             onChange={this.handleCommentChange}
@@ -216,13 +196,11 @@ class ReplyList extends React.Component {
               appendSpaceOnAdd={true}
             />
           </MentionsInput>
-          {this.state.isInputFocus &&
-            <div className="comment-submit-container">
-              <div onClick={this.onSubmit}>
-                <i className="sdocfont sdoc-save sdoc-comment-btn"></i>
-              </div>
+          <div className="comment-submit-container">
+            <div onClick={this.onSubmit}>
+              <i className="sdocfont sdoc-save sdoc-comment-btn"></i>
             </div>
-          }
+          </div>
         </div>
       </div>
     );

frontend/src/css/comments-list.css

@@ -132,9 +132,9 @@
 .seafile-comment-footer {
   padding: 16px 16px 0px;
   margin-bottom: 16px;
-  border-top: 1px solid #e5e5e5;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .seafile-comment-footer .add-comment-input,
@@ -157,24 +157,14 @@
 }
 
 .seafile-comment-footer .comment-submit-container {
-  border: 1px solid #e6e6dd;
-  border-top: none;
-  border-radius: 0 0 5px 5px;
   padding: 0px 5px;
-  background: #fff;
   text-align: right;
   position: absolute;
-  bottom: 10px;
-  width: 327px;
-}
-
-.seafile-comment-footer .comment-submit-container::before {
-  border-top: 1px solid #e6e6dd;
-  content: '';
-  position: absolute;
-  left: 5px;
-  right: 5px;
-  top: 0;
+  width: 26px;
+  right: 22px;
+  top: 80px;
+  background: transparent;
+  border: none;
 }
 
 .seafile-comment-footer .sdoc-comment-btn {

frontend/src/css/react-mentions-default-style.js

@@ -31,12 +31,16 @@ const defaultStyle = {
       padding: 9,
     },
     input: {
-      padding: '8px 6px 20px 6px',
+      padding: '8px',
+      maxHeight: 90,
       minHeight: 90,
       height: 90,
-      border: '1px solid #e6e6dd',
-      overfflowY: 'auto',
+      lineHeight: 'default',
+      overflowY: 'auto',
       outline: 'none',
+      borderBottom: 'none',
+      borderRadius: '5px',
+      border: '1px solid #e6e6dd',
     },
   },
   suggestions: {