Fix txt view (#2964)

* user-select-translation (#2956)

* fix-css

frontend/src/components/comments-list.js

@@ -77,7 +77,7 @@ class CommentsList extends React.Component {
           <div onClick={this.props.toggleCommentsList} className={'seafile-comment-title-close'}>
             <i className={'fa fa-times-circle'}/>
           </div>
-          <div className={'seafile-comment-title-text'}>{gettext('comments')}</div>
+          <div className={'seafile-comment-title-text'}>{gettext('Comments')}</div>
         </div>
         <div className="seafile-comment-toggle-resolved">
           <div className={'seafile-comment-title-text'}>{gettext('Show resolved comments')}</div>
@@ -109,7 +109,7 @@ class CommentsList extends React.Component {
             })
           }
           {(this.state.commentsList.length == 0 ) &&
-            <li className="comment-vacant">{gettext('no_comment_yet')}</li>}
+            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
         </ul>
         <div className="seafile-comment-footer">
             <textarea
@@ -119,7 +119,7 @@ class CommentsList extends React.Component {
             <Button
               className="submit-comment" color="success"
               size="sm" onClick={this.submitComment} >
-              {gettext('submit')}</Button>
+              {gettext('Submit')}</Button>
         </div>
       </div>
     );

frontend/src/css/view-file-text.css

@@ -12,12 +12,16 @@
 
 .txt-file-view-header {
   width: 100%;
-  padding: 12px 15px;
+  padding: 4px 10px;
   border-bottom: 1px solid #c9c9c9;
   justify-content: space-between;
   flex-shrink: 0;
 }
 
+.txt-view-button-group {
+  align-items: center;
+}
+
 .txt-file-view-body {
   height: calc(100% - 60px);
   width: 100%;
@@ -71,19 +75,23 @@
 }
 
 .file-title .file-internal-link,
-.file-title .file-star {
+.file-title .file-star,
+.file-title .file-lock {
   font-size: .875rem;
   cursor: pointer;
   margin-left: .5rem;
   vertical-align: text-bottom;
 }
 
+.file-title .file-star .star {
+  color: #f89a68;
+}
+
 .file-internal-link {
   color: #585858;
 }
 
 .txt-file-view-body .txt-view-comment {
-  background: #fff;
   display: flex;
   height: 100%;
 } 
@@ -96,4 +104,5 @@
 
 .txt-file-view-body .txt-view-comment .seafile-comment {
   width: 30%;
+  background: #fff;
 }

frontend/src/view-file-text.js

@@ -11,6 +11,10 @@ import { serviceURL, gettext, mediaUrl } from './utils/constants';
 import InternalLinkDialog from './components/dialog/internal-link-dialog';
 import CommentsList from './components/comments-list';
 import 'codemirror/lib/codemirror.css';
+import './assets/css/fa-solid.css';
+import './assets/css/fa-regular.css';
+import './assets/css/fontawesome.css';
+import './css/view-file-text.css';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/clike/clike';
@@ -21,10 +25,6 @@ import 'codemirror/mode/xml/xml';
 import 'codemirror/mode/go/go';
 import 'codemirror/mode/python/python';
 import 'codemirror/mode/htmlmixed/htmlmixed';
-import './assets/css/fa-solid.css';
-import './assets/css/fa-regular.css';
-import './assets/css/fontawesome.css';
-import './css/view-file-text.css';
 
 const { isPro, repoID, repoName, filePath, fileName, siteName, enableWatermark, encoding, fileEncodingList, fileExt, isLocked, fileContent, latestContributor, lastModified, isStarred } = window.app.pageOptions;
 const options = {
@@ -96,7 +96,7 @@ class ViewFileText extends React.Component {
 
   renderToolbar() {
     return (
-      <div className="txt-view-button-group" role="group">
+      <div className="txt-view-button-group d-flex" role="group">
         <ButtonGroup>
           <IconButton
             text={gettext('Back to parent directory')}
@@ -284,7 +284,9 @@ class FileInfo extends React.PureComponent {
             </span>
             <InternalLinkDialog repoID={repoID} path={filePath}/>
             {this.props.isLocked &&
-              <img className="vam" width="16" src={ mediaUrl + 'img/file-locked-32.png' } alt="locked" title="locked"/>
+              <span className="file-lock">
+                <img className="vam" width="16" src={ mediaUrl + 'img/file-locked-32.png' } alt="locked" title="locked"/>
+              </span>
             }
           </h2>
           <div className="file-state">