txt viewer support auto wrap (#7815)

* txt file support wrap line

* external txt file support wrap line

* change more icon

frontend/src/components/file-view/file-toolbar.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import Switch from '../switch';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -71,7 +72,13 @@ class FileToolbar extends React.Component {
     this.setState({ isShareDialogOpen: !this.state.isShareDialogOpen });
   };
 
-  toggleMoreOpMenu = () => {
+  toggleMoreOpMenu = (event) => {
+    if (this.state.moreDropdownOpen) {
+      const el = document.getElementById('txt-line-wrap-menu');
+      if (el && el.contains(event.target)) {
+        return;
+      }
+    }
     this.setState({
       moreDropdownOpen: !this.state.moreDropdownOpen
     });
@@ -212,7 +219,7 @@ class FileToolbar extends React.Component {
               title={gettext('More operations')}
               tag="span"
             >
-              <Icon symbol="more-vertical" />
+              <Icon symbol="more-level" />
             </DropdownToggle>
             <DropdownMenu>
               {/* {(
@@ -233,6 +240,16 @@ class FileToolbar extends React.Component {
                   {gettext('Open via client')}
                 </a>
               )}
+              {fileExt && fileExt.toLowerCase() === 'txt' && (
+                <DropdownItem id='txt-line-wrap-menu' className='dropdown-item'>
+                  <Switch
+                    checked={this.props.lineWrapping}
+                    placeholder={gettext('Line wrapping')}
+                    className="txt-line-wrap-menu w-100"
+                    onChange={() => this.props.updatelineWrapping(!this.props.lineWrapping)}
+                  />
+                </DropdownItem>
+              )}
             </DropdownMenu>
           </Dropdown>
         </div>
@@ -259,7 +276,7 @@ class FileToolbar extends React.Component {
                   ))}
           </ButtonGroup>
           <DropdownToggle tag="span" className="mx-1" aria-label={gettext('More operations')}>
-            <Icon symbol="more-vertical" />
+            <Icon symbol="more-level" />
           </DropdownToggle>
           <DropdownMenu>
             <DropdownItem>