optimize import page ui (#8307)

* optimize import page ui

* update

* optimize

* optimize

---------

Co-authored-by: 孙永强 <11704063+s-yongqiang@user.noreply.gitee.com>
Co-authored-by: Michael An <1822852997@qq.com>

frontend/src/pages/wiki2/css/wiki-nav.css

@@ -223,6 +223,7 @@
 .wiki-nav .page-operation-dropdown .page-operation-dropdown-menu {
   margin-left: -15px;
   margin-top: 4px;
+  overflow-y: visible !important;
 }
 
 .page-operation-dropdown-menu .divider {

frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js

@@ -23,6 +23,9 @@ export default class PageDropdownMenu extends Component {
   constructor(props) {
     super(props);
     this.pageNameMap = this.calculateNameMap();
+    this.state = {
+      isImportPageMenuShown: false,
+    };
   }
 
   calculateNameMap = () => {
@@ -33,6 +36,20 @@ export default class PageDropdownMenu extends Component {
     }, {});
   };
 
+  showImportPageMenu = (e) => {
+    if (e) e.stopPropagation();
+    if (!this.state.isImportPageMenuShown) {
+      this.setState({ isImportPageMenuShown: true });
+    }
+  };
+
+  hideImportPageMenu = (e) => {
+    if (e) e.stopPropagation();
+    if (this.state.isImportPageMenuShown) {
+      this.setState({ isImportPageMenuShown: false });
+    }
+  };
+
   onDropdownToggle = (evt) => {
     evt.stopPropagation();
     this.props.toggle();
@@ -61,11 +78,11 @@ export default class PageDropdownMenu extends Component {
     this.props.duplicatePage({ from_page_id: page.id }, () => {}, this.duplicatePageFailure);
   };
 
-  importPage = () => {
+  importPage = (suffix) => {
     const { page } = this.props;
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = '.docx,.md';
+    fileInput.accept = suffix;
     fileInput.style.display = 'none';
 
     fileInput.addEventListener('change', (e) => {
@@ -148,7 +165,28 @@ export default class PageDropdownMenu extends Component {
           {this.renderItem(this.addPageBelow, 'enlarge', gettext('Add page below'))}
           {this.renderItem(this.duplicatePage, 'copy1', gettext('Duplicate page'))}
           {canDeletePage && this.renderItem(this.onDeletePage, 'delete1', gettext('Delete page'))}
-          {this.renderItem(this.importPage, 'import-sdoc', gettext('Import page'))}
+          <Dropdown
+            direction="right"
+            className="w-100"
+            inNavbar={true}
+            isOpen={this.state.isImportPageMenuShown}
+            toggle={() => {}}
+            onMouseEnter={this.showImportPageMenu}
+            onMouseLeave={this.hideImportPageMenu}
+          >
+            <DropdownToggle
+              tag="span"
+              className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pr-2"
+              onMouseEnter={this.showImportPageMenu}
+            >
+              <i className={'sf3-font sf3-font-import-sdoc'} aria-hidden="true" />
+              {gettext('Import page')}
+            </DropdownToggle>
+            <DropdownMenu className="ml-0">
+              <DropdownItem key="import-docx" onClick={this.importPage.bind(this, '.docx')}>{gettext('Import page from docx')}</DropdownItem>
+              <DropdownItem key="import-md" onClick={this.importPage.bind(this, '.md')}>{gettext('Import page from Markdown')}</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
           <hr className='divider' />
           {this.renderItem(this.handleOpenInNewTab, 'open-in-new-tab', gettext('Open in new tab'))}
         </DropdownMenu>

frontend/src/pages/wiki2/wiki-nav/wiki-nav.js

@@ -36,6 +36,7 @@ class WikiNav extends Component {
     this.state = {
       idFoldedStatusMap: {}, // Move idFoldedStatusMap to state
       isShowOperationDropdown: false,
+      isImportPageMenuShown: false,
     };
     this.folderClassNameCache = '';
     this.lastScrollTop = 0;
@@ -68,10 +69,24 @@ class WikiNav extends Component {
     this.setState({ isShowOperationDropdown: !this.state.isShowOperationDropdown });
   };
 
-  handleImportPage = () => {
+  showImportPageMenu = (e) => {
+    if (e) e.stopPropagation();
+    if (!this.state.isImportPageMenuShown) {
+      this.setState({ isImportPageMenuShown: true });
+    }
+  };
+
+  hideImportPageMenu = (e) => {
+    if (e) e.stopPropagation();
+    if (this.state.isImportPageMenuShown) {
+      this.setState({ isImportPageMenuShown: false });
+    }
+  };
+
+  handleImportPage = (suffix) => {
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = '.docx,.md';
+    fileInput.accept = suffix;
     fileInput.style.display = 'none';
 
     fileInput.addEventListener('change', (e) => {
@@ -176,10 +191,28 @@ class WikiNav extends Component {
                   flip={false}
                   modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
                 >
-                  <DropdownItem onClick={this.handleImportPage}>
+                  <Dropdown
-                    <i className="sf3-font sf3-font-import-sdoc" aria-hidden="true" />
+                    direction="right"
-                    <span className="item-text">{gettext('Import page')}</span>
+                    className="w-100"
-                  </DropdownItem>
+                    inNavbar={true}
+                    isOpen={this.state.isImportPageMenuShown}
+                    toggle={() => {}}
+                    onMouseEnter={this.showImportPageMenu}
+                    onMouseLeave={this.hideImportPageMenu}
+                  >
+                    <DropdownToggle
+                      tag="span"
+                      className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pr-2"
+                      onMouseEnter={this.showImportPageMenu}
+                    >
+                      <i className={'sf3-font sf3-font-import-sdoc'} aria-hidden="true" />
+                      {gettext('Import page')}
+                    </DropdownToggle>
+                    <DropdownMenu className="ml-0">
+                      <DropdownItem key="import-docx" onClick={this.handleImportPage.bind(this, '.docx')}>{gettext('Import page from docx')}</DropdownItem>
+                      <DropdownItem key="import-md" onClick={this.handleImportPage.bind(this, '.md')}>{gettext('Import page from Markdown')}</DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
                 </DropdownMenu>
               </Dropdown>
             </div>